单元测试

[Jackwxiao]

Chai.js
BDD : 行为驱动开发
TDD : 测试驱动开发
Should 🔢

chai.should();

foo.should.be.a('string')

Expect 👍

const expect = chai.expect;

expect (foo).to.be.a('string');

Assert 🔢:

const assert = chai.assert;

assert.typeOf(foo, 'string');

测试用例不需要自动化，直接写在 app.js 里即可

npm i -D chai

import chai from 'chai'

const expect = chai.expect

{
      /* Button 组件是一个对象，对象不能实例化，所以把它变成一个函数 */
      const Constructor = Vue.extend(Button)
       // constructor 是一个函数了
      const vm = new Constructor({
         propsData : {
                // 用来传递属性
              icon: 'settings'
          }
      }) 
     vm.$mount('#test')
     let useElement = vm.$el.querySelected('use')
     let href = useElement.vmgetAttribute('xlink:href')
     expect(href).to.eq('#i-settings') 
}

• 主要测试属性和事件

• 获取计算属性： window.getComputedStyle(svg)

• 这里是测试 svg 的位置在左还是右 *

• 测试计算属性（如计算的样式）时需要把元素挂载到页面，测试成功后再把元素删掉 vm.$el.remove(), vm.$destroy()

• 测试事件需要用到 mock spy : 间谍

npm i -D chai-spies // 用来监听函数

    // 使用 chai.spy 监听回调函数
   const Constructor = Vue.extend(Button)
   const vm = new Constructor({
         propsData : {
              icon: 'settings'
          }
      }) 
      vm.$mount()
      let spy = chai.spy(function(){})

      vm.$on('click', spy)
     let button = vm.$el
     button.click()
     expect(spy).to.have.been.called()