关于测试

测试分类

常⻅的开发流程⾥，都有测试⼈员，这种我们称为⿊盒测试，测试⼈员不管内部实现机制，只看最外
层的输⼊输出，⽐如你写⼀个加法的⻚⾯，会设计N个case，测试加法的正确性，这种代码⾥，我们
称之为E2E测试。
更负责⼀些的 我们称之为集成测试，就是集合多个测试过的单元⼀起测试。
还有⼀种测试叫做⽩盒测试，我们针对⼀些内部机制的核⼼逻辑 使⽤代码 进⾏编写 我们称之为单元
测试。

准备⼯作

推荐⽤使⽤Jest作为测试框架
新建vue项⽬，⼿动选择特性，添加Unit Testing和E2E Testing
单元测试解决⽅案选择：Jes端到端测试解决⽅案选择：Cypress

单元测试

单元测试（unit testing），是指对软件中的最⼩可测试单元进⾏检查和验证。
新建test/unit/kba.spec.js， *.spec.js 是命名规范，写下⼀下代码

function add(num1, num2) {
  return num1 + num2
}
// 测试套件 test suite
describe('Kba', () => {
  // 测试⽤例 test case
  it('测试add函数', () => {
  // 断⾔ assert
  expect(add(1, 3)).toBe(3)
  expect(add(1, 3)).toBe(4)
  expect(add(-2, 3)).toBe(1)
  })
})

这⾥⾯仅演示了toBe，更多断⾔API（https://jestjs.io/docs/zh-Han...）
执⾏单元测试
npm run test:unit

测试Vue组件
创建⼀个vue组件components/Kab.vue

<template>
  <div>
  <span>{{ message }}</span>
  <button @click="changeMsg">点击</button>
  </div>
</template>
<script>
  export default {
  data () {
  return {
  message: 'vue-text'
  }
  },
  created () {
  this.message = '开'
  },
  methods:{
  changeMsg(){
  this.message = '按钮点击'
  }
   }
  }
</script>

测试该组件，

// 导⼊ Vue.js 和组件，进⾏测import Vue from 'vue'
import KbaComp from '@/components/Kba.vue'
describe('KaikebaComp', () => {
  // 检查原始组件选项
  it('由created⽣命周期', () => {
  expect(typeof KbaComp.created).toBe('function')
  })
  // 评估原始组件选项中的函数的结果
  it('初始data是vue-text', () => {
  // 检查data函数存在性
  expect(typeof KbaComp.data).toBe('function')
  // 检查data返回的默认值
  const defaultData = KbaComp.data()
  expect(defaultData.message).toBe('hello!')
  })
})

检查mounted之后

 it('mount之后测', () => {
  const vm = new Vue(KbaComp).$mount()
  expect(vm.message).toBe('开')
  })

⽤户点击
和写vue没啥本质区别，只不过我们⽤测试的⻆度去写代码，vue提供了专⻔针对测试的 @vue/testutils

import { mount } from '@vue/test-utils'
it("按钮点击后", () => {
  const wrapper = mount(KbaComp);
  wrapper.find("button").trigger("click");
  // 测试数据变化
  expect(wrapper.vm.message).toBe("按钮点击");
  // 测试html渲染结果
  expect(wrapper.find("span").html()).toBe("<span>按钮点击</span>");
  // 等效的⽅式
  expect(wrapper.find("span").text()).toBe("按钮点击");
});

测试覆盖率
jest⾃带覆盖率，package.json⾥修改jest配置

 "jest": {
  "collectCoverage": true,
  "collectCoverageFrom": ["src/**/*.{js,vue}"],
  }

若采⽤独⽴配置，则修改jest.config.js:

module.exports = {
  ...
  "collectCoverage": true,
  "collectCoverageFrom": ["src/**/*.{js,vue}"]
}

在此执⾏npm run test:unit
Vue组件单元测试（https://cn.vuejs.org/v2/cookb...）
cookboVue Test Utils使⽤指南（https://vue-test-utils.vuejs....）

E2E测试

借⽤浏览器的能⼒，站在⽤户测试⼈员的⻆度，输⼊框，点击按钮等，完全模拟⽤户，这个和具体的
框架关系不⼤，完全模拟浏览器⾏为。

**运⾏E2E测试
npm run test:e2e**

修改e2e/spec/test.js

// https://docs.cypress.io/api/introduction/api.html
describe('端到端测试，抢测试⼈员的饭碗', () => {
  it('先访问⼀下', () => {
  cy.visit('/')
  // cy.contains('h1', 'Welcome to Your Vue.js App')
  cy.contains('span', '开')
  
  })
})

测试未通过，因为没有使⽤Kba.vue，修改App.vue

<div id="app">
  <img alt="Vue logo" src="./assets/logo.png">
  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <Kba></Kba>
</div>
import Kba from './components/Kba.vue'
export default {
  name: 'app',
  components: {
  HelloWorld,Kba
  }
}

测试⽤户点击

// https://docs.cypress.io/api/introduction/api.html
describe('端到端测试，抢测试⼈员的饭碗', () => {
  it('先访问⼀下', () => {
  cy.visit('/')
  // cy.contains('h1', 'Welcome to Your Vue.js App')
  cy.contains('#message', '开')
  cy.get('button').click()
  cy.contains('span', '按钮点击')
  })
})