一. chai.js

1. 三个概念：

BDD：Behavier driven development 行为驱动开发

TDD：测试驱动开发

Assert：断言

chai就提供了几种方式，用自然语言写断言。should,expect,assert

2. 安装

npm install -D chai D:给开发者使用，用户不需要

3. 写单元测试

首先要知道，一个Button组件是什么。import Button from './Button.vue'打印出来，是一个对象。我们要把它弄成构造函数

{
    const Constructor=Vue.extend(Button)
    console.log(Constructor);
}

import chai from 'chai'
const expect = chai.expect;
{
    const Constructor=Vue.extend(Button)
    const vm=new Constructor({
        propsData:{
            icon:'setting'
        }
    })
    vm.$mount('#test')
    let useElement=vm.$el.querySelector('use')
    console.log(useElement);
    expect(useElement.getAttribute('xlink:href')).to.eq('#i-setting')
    vm.$el.remove()
    vm.$destroy()
}

先把组件包装成构造函数，用这个构造函数创建一个实例。这个组件需要哪些外部属性，就测试什么。用propsData传进去。把实例挂载到页面。用expect 语法断言，我断言 xlink:href这个属性的值是xxx，如果我的断言与事实相符，控制台就没有反应，否则就报错。

针对点击事件测试。需要用到Mock

// Mock
import chai from 'chai'
import spies from 'chai-spies'
chai.use(spies)
{
    const div=document.createElement('div')
    document.body.appendChild(div)
    const Constructor=Vue.extend(Button)
    const gbutton=new Constructor({
        propsData:{
            icon:'left',
        }
    })
    gbutton.$mount(div)

    let spy=chai.spy(function(){
        console.log(1);
    })

    // 我希望看到这个函数被执行
    gbutton.$on('click',spy)
    let button=gbutton.$el
    button.click()
    expect(spy).to.have.been.called()
}

把事件处理函数包装在spy里，监视这个函数。然后expect这个spy