前言
最近在开发公司内部公共组件的使用样例和代码单元测试。
具体单元检测框架的知识,可以查看另一篇博文:
单元测试框架Jasmine学习笔记
开发过程中遇到的一点问题就容易纠结很久,为了能够吸取教训,特地将遇到的问题记录下来,避免以后再犯,加深对代码的理解。
问题1:ES6语法的文件引用
ES6使用export
导出模块时,代码如下:
export default {
//导出模块
}
而如果引用时简单使用如下代码是不能生效的:
var KsAlert = require('./KsAlert.js');
可以采取以下两种方式来引用模块:
方式一:仍使用require
引入,代码如下:
var KsAlert = require('./KsAlert.js').default;
方式二:使用import
引入,代码如下:
import KsAlert from './KsAlert.js';
以上两种方法都可以引入KsAlert
模块。
问题2:Vue中template
在Jasmine
框架测试代码程序单元时,template
包含多个顶级元素则会报错,例如:
var Vue = require('vue');
import KsAlert from './KsAlert.js';
//之前所说的引用模块
describe('KsAlert',()=>{
var vm;
beforeEach(()=>{
vm = new Vue({
data() {
return {
ksAlert: null
}
},
ready() {
this.ksAlert = new KsAlert('.alert-div');
},
methods: {
alertIt(content) {
this.ksAlert.send(content);
}
},
//包含多个顶级元素
template: `<div class="alert-div"></div>
<button type="button" @click="alertIt('this is a test!!!')">基础弹窗</button>
`
}).$mount().$appendTo('body');
});
afterEach(() => {
vm.$destroy(true);
});
it('点击弹出窗口',(done)=>{
vm.$nextTick(()=>{
var btn = vm.$el.querySelector('button');
$(btn).trigger('click');
vm.$nextTick(()=>{
var alertMsg = vm.$el.querySelectorAll('.ks-vui-alert-wrap-box');
expect(alertMsg[0]).toBeDefined();
done();
});
});
});
});
而最终导致出现以下错误:
Karma Run Failed: undefined
Missing error handler on `socket`.
undefined
若将上面的template代码修改为:
template: `<div class="alert-div">
<button type="button" @click="alertIt('this is a test!!!')">基础弹窗</button>
</div>
`
则可以正常通过检测。
问题3:vm.$destroy()
Vm.$destroy()
需要传递一个true
参数才会将原有的vm
对象完全销毁,Vue.js的中文API中介绍到:
问题4:Vue的ready()
Vue中的ready()
在编译结束和$el
第一次插入文档之后调用,而且必须是由Vue插入(如vm.$appendTo
等方法或指令更新)才触发ready()
。
例如:
vm = new Vue({
data() {
return {
ksAlert: null
}
},
ready() {
this.ksAlert = new KsAlert('.alert-div');
},
methods: {
alertIt(content) {
this.ksAlert.send(content);
}
},
template: `<div class="alert-div">
<button type="button" @click="alertIt('this is a test!!!')">基础弹窗</button>
</div>
`
}).$mount().$appendTo('body');//使用appendTo()插入Vue才会触发ready()
附上Vue的生命周期图示: