组件单元测试开发过程小总结

前言

最近在开发公司内部公共组件的使用样例和代码单元测试。
具体单元检测框架的知识，可以查看另一篇博文：
单元测试框架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的生命周期图示：