测试

• QA -- baiquality assurance：质量保证工程师，主要工作是质量评du审和产品评审。
  • 侧重流程系统管理，主要是事后的质量检验类活动为主；
• QE -- quality engineer：质量工zhi程师，主要负责建立、分析、完善品质控制程序。
  • 侧重生产过程质量工程管理；
• SQE -- Supplier quality engineering：供应商质量管理员，负责供应商管控。
  • 侧重供应商质量管理；
• QC -- quality control：质检员，主要按照QE指定的品质文件进行品质控制。
  • 侧重产品事先的质量保证类活动，以预防为主。

测试的核心概念：单元测试、性能测试、安全测试、功能测试

• 黑盒测试，E2E测试，集成测试
• 白盒测试，单元测试

vue 推荐用 Mocha+Chai 或 Jest，演示代码使用Jest，它们语法基本一致。

要完成测试任务，需要测试框架（跑测试）、断言库（编写测试）和编程框架特有的测试套件。
Mocha是测试框架，Chai是断言库，Jest同时包含两者。
vue中的组件等测试代码的编写需要 vue-test-utils 套件支持。

1. vue-cli3 创建项目
   • 选择测试模块：Unit Testing、E2E Testing
   • 单元测试解决方案：Jest
   • 端对端测试的解决方案：Cypress (Chrome only)
2. 对于已存在的项目，添加测试库

   vue add @vue/unit-jest
   vue add @vue/e2e-cypress
   

3. 新增的目录/文件
   • tests目录：用于编写测试代码
   • jest.config.js：配置文件

编写单元测试

• describe 定义测试套件
• it 定义测试用例，一个测试套件可以有多个测试用例
• expect 断言的判断条件

1. 测试 js 代码

   # 新建 tests/unit/test.spec.js
   
   function add(x, y) {
       return x + y;
   }
   
   describe("测试 add 函数", () => {
       it("测试传入的参数与结果是否匹配", () => {
           expect(add(1, 2)).toBe(3);   // 通过
           expect(add(1, 5)).toBe(30);  // 失败
       })
   })
   
   //执行单元测试
   npm run test:unit
   

2. 测试 vue 组件

   # 新建 tests/unit/compt.spec.js
   
   import HelloWorld from '@/components/HelloWorld.vue' //引入组件
   import { mount, shallowMount } from '@vue/test-utils'
   // mount 与 shallowMount：都是挂载组件，但shallowMount是轻挂载，不会挂载当前组件的子组件；
   
   describe("HelloWorld", () => {
       // 检查原始组件选项
       it("created生命周期", () => {
           expect(typeof HelloWorld.created).toBe('function');
       })
   
       //评估原始组件选项中的函数结果
       it("mount 之后测试data的值", () => {
           const vm = new Vue(HelloWorld).$mount();
           expect(vm.message).toBe('hello world!');
       })
   
       if("按钮点击后", () => {
           const wrapper = mount(HelloWorld);
           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('按钮点击了');
       })
   
       if("props测试", () => {
           const msg = 'new Message'
           const wrapper = shallowMount(HelloWorld, {
               propsData: { msg },
               provide: {
                   userInfo: {
                       username: 'Machal'
                   }
               }
           });
           wrapper.find("button").trigger("click");
           
           expect(wrapper.find("span").text()).toMatch('Machal');
       })
   })
   
   //执行单元测试
   npm run test:unit
   

测试覆盖率

jest 自带覆盖率，如果使用Mocha，需要用 istanbul 来统计覆盖率
在 jest.config.js 中的配置：

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

执行单元测试时，会列出覆盖率表

• %Stmts 语句覆盖率，是不是每个语句都执行了；
• %Branch 分支覆盖率，是不是每个if代码块都执行了；
• %Funcs 函数覆盖率，是不是每个函数都执行了；
• %Lines 行覆盖率，是不是每一行都执行了。

E2E测试

E2E测试： 端到端的自动化测试，一种典型的黑盒测试；与单元测试不同，E2E测试借用浏览器的能力，站在用户测试人员的角度，完全模拟用户操作。

# tests/e2e/specs/test.js

describe('My First Test', () => {
    it('Visits the app root url', () => {
        cy.visit('/')
        cy.contains('h1', 'Welcome to Your Vue.js App')

        cy.get('button').click()
        cy.contains('span', '按钮点击!')
    })
})

// 执行
npm run test:e2e