自动化测试

单元测试：组件、函数等级别进行测试
husky
E2E测试
- 测试中间件

单元测试：组件、函数等级别进行测试

针对组件或者函数或者模块（开发人员知道具体逻辑）

在tests=>unit>example.spec.js

1. 测试函数级别：测试一个简单的加法函数


import {add} from '../../src/util'
// 测试的核心逻辑： 看输入和输出
describe('测试加法函数',() = > {
// 分组
it('一个具体的功能测试，测试数字相加',()=>{
  expect( add(1,2) ).toBe(3)
})
it('一个具体的功能测试，测试数字和字符串相加',()=>{
  expect( add('a',2) ).toBe('a2')
})
it('一个具体的功能测试，测试数字字符串相加',()=>{
  expect( add('1','2') ).toBe('3')
})
})

运行单元测试

npm run test:unit

API 介绍

describe : 定义一个测试套件
it ：定义一个测试用例
expect : 断言的判断条件
toBe : 断言的预期结果（比较结果）
2. 测试组件：

新建 Helloween.spec.js ```javascript // 测试Vue组件，需要用到Vue，其实就是在node层解析组件 import Vue from ‘vue’ import Hello from ‘../../src/components/Hello.vue’

describe(‘测试Hello组件’, ()=>{

it(‘测试初始的data’, ()=>{ expect( Hello.data().message).toBe(‘Hello world!’) })

it(‘测试新建完毕，create生命周期后的数据’, ()=>{ let vm = new Vue( Hello).$mount() expect(vm.message).toBe(‘aftermounted’) })

})

<a name="YofXQ"></a>
### 3. 使用Vue官方文档中的单元测试
> npm install [@vue/test-utils](#) --save
```javascript
// 测试Vue组件，需要用到Vue，其实就是在node层 解析组件
import Vue from 'vue'
import Hello from '../../src/components/Hello.vue'
import {mount} from '@vue/test-utils'
describe('测试Hello组件', ()=>{
  it('测试初始的data', ()=>{
      expect( Hello.data().message).toBe('Hello world!')
  })
  it('测试新建完毕，create生命周期后的数据', ()=>{
        let vm = new Vue( Hello).$mount()
    expect(vm.message).toBe('aftermounted')
  })
   it('测试按钮点击后，message改变', ()=>{
        let wrapper = mount(Hello)
    expect(wrapper.vm.message).toBe('aftermounted')
     // 点击一下
     wrapper.find('.btn').trigger('click')
     expect(wrapper.vm.message).toBe('click me')
  })
})

4. 显示测试报告（测试覆盖率）

package.json

"jest":{
  // ***新增***
    "collectCoverage": true,
   "collectCoverageFrom":["src/**/*.{js|vue}"],
   // 不动
    "moduleFileExtensions":[
        "js",
      "jsx",
      "json",
      "vue"
    ]
}

husky

测试未通过，提交不成功，为保证提交的代码都是通过测试的

安装husky

npm intsall husky —save
配置package.json
```
"husky":{
 "hooks": {
 // 钩子在commit之前，运行此命令
   "pre-commit": "npm run test:unit"
}
}
```
E2E测试

针对应用，站在测试人员的角度没有什么mount加载，只有页面按钮输入框文本等

启动命令：npm run test:e2e
tests=> e2e => specs => test.js

describe('index page', () => {
    it('visit index page url ', ()=> {
  // 访问根目录
  cy.visit('/')
  cy.contains('h1','Welcom to your page')
})
  it('测试about页面',()=>{
   cy.visit('/about')
      cy.contains('h1','This is an about  page')
  })
     it('hello组件页面渲染的结果',()=>{
     cy.visit('/')
     cy.contains('#message','aftermounted')
     cy.get('button').click()
     cy.contains('#message','click me')
  })
})

测试中间件

test=> hello.test.js

const request = require('supertest')
const assert = require('assert')
const Koa = require('koa')
describe('测试Koa',()=>{
  let app1 = new Koa()
  app1.context.msg = 'welcome'
  it('测试ctx的信息', ()=>{
    app1.use((ctx,next)=>{
    assert.equal(ctx.msg, 'hello')
    })
    // node 启动 koa
    return request(app1,listen())
    .get('/')
    .expect('text koa')
  })
})

test=> mid.test.js

const request  = require('supertest')
const assert  = require('assert')
const Koa = require('Koa')
decribe('中间件 app.use',()=>{
    const app = new Koa()
  const calls = []
  app.use( async(ctx, next)=>{
      calls.push(1)
    await next()
    calls.push(6)
  })
   app.use( async(ctx, next)=>{
      calls.push(2)
    await next()
    calls.push(5)
  })
   app.use( async(ctx, next)=>{
      calls.push(3)
    await next(
    calls.push(4)
  })
     await request(app.listen())
     .get('/')
     // 状态码是404
     .expect(404)
     assert.equal(calls.join(','),'1,2,3,4,5,6')
})

单元测试： 组件、函数等级别进行测试