如何編寫一個(gè)實(shí)際項(xiàng)目的vue實(shí)例單元測(cè)試
最近一直苦惱怎么能跳過微信支付去測(cè)試之后的流程，后來想著單元測(cè)試可以跑通這個(gè)流程首量，而不需要手動(dòng)去點(diǎn)擊兄渺，全部都是以用戶模擬的方式進(jìn)行測(cè)試追城。
如果你還不知道如何在你的項(xiàng)目中加入jest,請(qǐng)參考我上一篇文章http://www.reibang.com/p/d29679cb6a3a捣域。
測(cè)試功能點(diǎn)描述
1. 用戶進(jìn)入頁面，根據(jù)是單獨(dú)購買還是拼團(tuán)購買來判斷價(jià)格是否正確琢岩。
```
it('Is price right',() => {
let expectedAmount = (mockData.activityInfo.leaderPrice / 100).toFixed(2);
if(mockData.purchaseMethod === 'single'){
// 是否為單獨(dú)購買
expectedAmount = (mockData.couseInfo.price / 100).toFixed(2);
}
let price = wrapper.find('.price').text();
expect(price).toBe(`訂單價(jià)格${expectedAmount}元`)
})
```
2. 模擬用戶支付點(diǎn)擊流程（支付成功,失敗代碼可在完整代碼中查找）
```
it('pay success',async () => {
const payModalVisible = wrapper.vm.payModalVisible
console.log(payModalVisible, '彈窗挽留狀態(tài)')
// 觸發(fā)點(diǎn)擊事件
await wrapper.find('.pay-btn').trigger('click');
// 檢查微信支付之前的接口是否被調(diào)用
expect(orderPayModel.getPayGroup).toHaveBeenCalledTimes(1);
// 檢查是否正常埋點(diǎn)
expect(sensors.track).toHaveBeenCalledTimes(1);
// 檢查是否觸發(fā)了微信支付 且只允許調(diào)用一次
expect(wrapper.vm.payNumber).toBe(1)
// 檢查是否正常埋點(diǎn)
expect(sensors.track).toHaveBeenCalledTimes(1);
// 檢查微信失敗之后是否調(diào)起微信失敗挽留彈窗
expect(wrapper.vm.payModalVisible).toBe(false)
console.log(wrapper.vm.payModalVisible, '彈窗挽留狀態(tài)')
});
```
完整代碼
/**
* jest 單元測(cè)試 拼團(tuán) panel組件
* 檢查 支付是否成功
* * */
import {mount} from '@vue/test-utils';
import PayPanel from '../src/components/course/pay/panel.vue';
import orderPayModel from '../src/model/orderPay';
import sensors from '../src/utils/sensors';
jest.mock('../src/model/orderPay');
// eslint-disable-next-line key-spacing
const wechatPayFetchGetData = {"data":{"nonce_str":"kzR1IFgHY3aaHM2f","orderId":"1448573147930529793","paymentId":"T021448573148714864641","teamId":"1448573153471205377","sign":"6DEB1B8F75C6A6948C1AFCEC89716698","trade_type":"JSAPI","sign_type":"MD5","prepay_id":"wx14165527393910ea57ec63b239d54c0000","timestamp":1634201727},"code":0,"message":""}
jest.mock('../src/model/orderPay', () => ({
getPayGroup: jest.fn((params,callback) => {
callback(wechatPayFetchGetData.data);
})
}))
// 模擬微信支付失敗
let paySuccess = true;
// 模擬class
jest.mock('../src/model/wx', () => {
return function(){
return {
pay: jest.fn((params,callback) => {
callback(paySuccess)
})
}
}
})
// 模擬神策埋點(diǎn)
jest.mock('../src/utils/sensors', () => ({
track: jest.fn((eventName, data, callback) => {
callback(true);
}),
webPage: jest.fn(( data, success) => {
success(true);
}),
webClick: jest.fn((eventName, data, callback) => {
callback(true);
}),
}))
global.fetch = require('node-fetch');
global.sensors = null;
// 模擬組件props真實(shí)數(shù)據(jù) 可根據(jù)自己項(xiàng)目實(shí)際數(shù)據(jù)模擬投剥，因是公司的數(shù)據(jù)而無法展示
const mockData = {
// eslint-disable-next-line key-spacing
}
// describe 定義個(gè)一個(gè)測(cè)套組件
describe('payPanel test', () => {
// 掛載組建
const wrapper = mount(PayPanel, {
props: mockData
})
it('Is the closeButton trigger', () => {
wrapper.find('.iconclose').trigger('click');
// 是否有觸發(fā)emit onclose
expect(wrapper.emitted()).toHaveProperty('onClose')
})
// 訂單價(jià)格是否正確
it('Is price right',() => {
let expectedAmount = (mockData.activityInfo.leaderPrice / 100).toFixed(2);
if(mockData.purchaseMethod === 'single'){
// 是否為單獨(dú)購買
expectedAmount = (mockData.couseInfo.price / 100).toFixed(2);
}
let price = wrapper.find('.price').text();
expect(price).toBe(`訂單價(jià)格${expectedAmount}元`)
})
// 參與團(tuán)員參團(tuán)類別要求是否展示正確
it('Is the Group member type correct', () => {
let typeText = mockData.activityInfo.type === 1 ? '僅限新人' : '新老不限';
expect(wrapper.find('.type-member').text()).toBe(typeText)
// expect(wrapper.find('.type-member1'))
})
// 檢查 單獨(dú)購買和拼團(tuán)是否正確
it('Is the single pay correct', () => {
let isSingle = mockData.purchaseMethod === 'single';
expect(wrapper.find('.single-pay').exists()).toBe(isSingle)
})
// 測(cè)試一下正則 對(duì)比 tobe
it('test regexp', () => {
let x = new RegExp('aa');
let y = new RegExp('aa');
expect(x).toEqual(y)
})
// 支付成功
it('pay success',async () => {
const payModalVisible = wrapper.vm.payModalVisible
console.log(payModalVisible, '彈窗挽留狀態(tài)')
// 觸發(fā)點(diǎn)擊事件
await wrapper.find('.pay-btn').trigger('click');
// 檢查微信支付之前的接口是否被調(diào)用
expect(orderPayModel.getPayGroup).toHaveBeenCalledTimes(1);
// 檢查是否正常埋點(diǎn)
expect(sensors.track).toHaveBeenCalledTimes(1);
// 檢查是否觸發(fā)了微信支付 且只允許調(diào)用一次
expect(wrapper.vm.payNumber).toBe(1)
// 檢查是否正常埋點(diǎn)
expect(sensors.track).toHaveBeenCalledTimes(1);
// 檢查微信失敗之后是否調(diào)起微信失敗挽留彈窗
expect(wrapper.vm.payModalVisible).toBe(false)
console.log(wrapper.vm.payModalVisible, '彈窗挽留狀態(tài)')
});
// 支付失敗
it('pay error',async () => {
paySuccess = false;
const payModalVisible = wrapper.vm.payModalVisible
console.log(payModalVisible, '彈窗挽留狀態(tài)')
// 觸發(fā)點(diǎn)擊事件
await wrapper.find('.pay-btn').trigger('click');
// 檢查微信支付之前的接口是否被調(diào)用
expect(orderPayModel.getPayGroup).toHaveBeenCalledTimes(1);
// 檢查是否正常埋點(diǎn)
expect(sensors.track).toHaveBeenCalledTimes(1);
// 檢查是否觸發(fā)了微信支付 且只允許調(diào)用一次
expect(wrapper.vm.payNumber).toBe(1)
// 檢查是否正常埋點(diǎn)
expect(sensors.track).toHaveBeenCalledTimes(1);
// wx 支付失敗 是否彈出支付挽留彈窗
expect(wrapper.vm.payModalVisible).toBe(true)
console.log(wrapper.vm.payModalVisible, '彈窗挽留狀態(tài)')
});
})
