单元测试与Mock

前端进行单元测试主要是为了提高自己的代码质量，多组测试用例，验证自己的代码是否都能通过

断言：

断言是对代码结果的一种判断，如果这种判断和结果是一样的，那么这个断言就是真的，测试则通过。如果为假的，程序就会终止执行，并出现错误信息。

测试风格：

BDD: Behavior Driven Development 行为驱动开发，所有的开发满足用户的某种行为，BDD的表达方式是通过自然语言书写

TDD: Test Driven Development测试驱动开发，以产品经理写了需求，根据需求翻译成测试的用例，TDD表达方式偏向于功能说明书的风格

手写单元测试

**重点：**作用域、断言

案列：

这里用的 断言库是 chai：支持TDD(assert)、BDD(expect、should)两个风格的断言库

为什么用大括号？如果不写就会冲突，用块级作用域隔绝，这叫做作用域隔离

下载 npm i -D chai给开发者用-D

怎么知道什么东西要测呢？看你输入的参数是什么

props输入的参数，以及 触发的事件

click需要 下载chai spies npm i -D chai-spies

//单元测试
import chai from 'chai'
const expect = chai.expect
import spies from 'chai-spies'
chai.use(spies)
😬
//测试能否看到settings
{
  //构建Button
  const Constructor = Vue.extend(Button)
  //创建实例
  const vm = new Constructor({
   //传入外部数据
    propsData:{
      icon:'settings'
    }
  })
  //挂载到页面上
  vm.$mount()
  // 找到button组件上的use标签
  let useElement = vm.$el.querySelector('use')
  // 进行断言期待它是否等于'#i-settings'
 expect(useElement.getAttribute('xlink:href')).to.eq('#i-settings')
  // 把创建的 元素删除
  vm.$el.remove()
  // 从内存中销毁
  vm.$destroy()
}
😬
//测试是否在左边，因为这里是测试order， 是css，css是当页面出现才会进行渲染的，所以必须在页面上出现才能测试到
{
  //创建div
  const div = document.createElement('div')
  //放入页面上
  document.body.appendChild(div)
  const Constructor = Vue.extend(Button)
  const vm = new Constructor({
    propsData: {
      icon: 'settings',
    }
  })
  vm.$mount(div)//挂载到div上
  let svg = vm.$el.querySelector('svg')
  let {order }= window.getComputedStyle(svg)
  expect(order).to.eq('1')
  vm.$el.remove()
  vm.$destroy()
}
😬
//测试是否能 执行click函数
{
  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()
}

解析：

• 如果不是测试有css内容，可以不mount到元素上，只要mount到内存即可
• 如果是css，必须挂载到页面上，因为如果你不挂载css将不会渲染