???????????????????????????? Vue ??????????????????????????????? Vue ???????е????????????????????????????????????????????????????????·?? case д???????????? Vue ?????????飬?????????? Karma????????????????????????????
??????????
??????? vue-cli ?????????????? Vue ????????а????? Webpack ?? Karma ?????????????????????????????????????????????????д?????????????????????????????????????ο????? vuejs/vue-cli ??
????????????
????????????????? Vue ????????????????????????????????????????????????У????а??? watch??computed??filter?? ??????????????????????檔
??????д???????
??????????????
???????????? UI ?????????????????????????и??????????????????????????????????????????????????????? api ???н????????? router ·???е??????????store ???????????????????????????????????????????????????????????????????????? mock ????? ????????????????????????в????????????????????????
????????? mock
???????????????????????????? element-ui????????? template ???????????????????????д??????????????????????????????????? Vue??????????? element-ui ???????????????? compile ??????????д?????￡?
????import Vue from 'vue';
????import ElementUI from 'element-ui';
????Vue.use(ElementUI);
????api mock
?????????????? A??
export default{
data() {
return {
testData: ''??
};
}??
methods: {
async getData() {
const id = this.$route.params.skuId; // route?л??????
const { data } = await AccountService.getData(id);
const testData = data.data;
}??
}??
computed: { // store???????
...mapState({
storeData: state => state.order.storeData??
})??
}??
};
??????????????????? AccountService ??????? api ???????????????????????? getData ??????????????????????????? AccountService.getData ???? ????mock??????????????? api ???????????????к?????????????????????? mock ?????? inject-loader?? ????? Webpack ????????? AccountService ???????????? mock ???÷????￡?
const inject = require('!!vue?inject!A.vue'); // ????д??
const ComponentAwithMock = inject({
'src/service/accountService': {  // mock????accountService???
getData(reslove) {
const data = {
code: 200??
msg: 'success'??
data: 'test'??
};
reslove({ data });
// ?????????????vue-resource???????API????????????????????mock???????????????
}??
}??
});
????????????? inject-loader ??????????????κ?????????????????滻???????? api ??黹???????? component ??
???????????
???????????????????????A??????? store ?? router ?е????????????????????????????????С????????μ?????? store ?е? action ?漰??????? api ??????????????
actions: {
async [type.REFRESH_STORE_STATUS](context?? status = 0){
const { data } = await orderService.getData(status);
context.commit(type.REFRESH_DATA?? data.data || {});
}??
}??
??????????????? store ???? mock??д?????￡?
const store = new Vuex.Store({
state: {}??
actions: {
async [type.REFRESH_STORE_STATUS](context) {
const data = { data: 'test' }; // ???????
context.commit(type.REFRESH_DATA?? data);
}??
}??
});
??????????????? store ???????????????:
????const Component = Vue.extend({ ...ComponentAwithMock?? store?? router });
???????????????? mock ????????????? Component??
??????????д case
????????? vm ???
????const vm = new Component().$mount(); // ???????
????const vm = new Component({ propsData: { title: '???????' }).$mount();
????// ????????????????? props ??????????????propsData
????????-??????
??????????????????? vm.$data ??????????????????? vm.$data ????????????????????????????????
it('should render correct dom'?? (done) => {
const vm = new Component(); // ???????
vm.testData = 'bye'; // ??????????
vm.$nextTick(() => {
expect(vm.$el.textContent).toBe('bye!'); // ??????????
done();
})
})
????????????? dom ???????????????????????д?? $nextTick ???檔
????????-????
????vm ?е????????? vm.$data ????????????????????????????????????? watch?? computed?? filter??methods?? ??????????????
????vm.$data ???????????
????changeData(data) {
????this.data = data;  // ??????data????????
????}??
????????????????? vm ?????????????????? vm.$data ???????????? api ?л????????????? vm.$data ????????????? api ?????????????? mock??????????? vm.$data ???ж????
????it('should exportExcel be right'?? () => {
????const vm = new Component().$mount();
????vm.changeData('hello world');
????expect(vm.data).to.equal('hello world');
????});
??????????????
?????????????????????м????????????????????????????е? filter ??????computed?????????????????????????????????????????????????????????????
????????е?????????????????????????? vm.$data ??????????????????????????????????????????????????????????????????????д??????????????С??????????????к??????塣
??????????
???????????????????????????????д???????????????λ??????????????????硣?????????????ο?????????????????????о?????