项目质量监测（三）e2e test端到端测试——单元测试和端到端测试 & e2e test工具-Cypress & Nightwatch & TeatCafe & Codecov-测试结果可视化

项目质量监测（三）e2e test端到端测试——单元测试和端到端测试 & e2e test工具-Cypress & Nightwatch & TeatCafe & Codecov-测试结果可视化

e2e test

通常对Web应用程序执行两种类型的测试：单元测试和端到端（E2E）测试。

单元测试

在测试中使用“单元”的想法是将代码分解为易于测试的小部件。通常，单元是单个函数，但也可以是类或甚至是复杂的算法。

单元测试的一个关键概念是函数的给定输入应始终产生相同的输出。

例如，如果我们有一个函数添加了两个调用的数字，add我们可以编写一个单元测试来确保我们作为参数提供的特定数字对总是返回我们期望的输出。

add.spec.js

// Function we want to test
const add = (x, y) => x + y;

// Unit test
test("should add two numbers", () => {
  const result = add(2, 3);
  expect(result).toBe(5);
});

任何时候我们运行该测试并且它不等于5，我们可以得出一个错误已经输入我们的代码。

组件测试

在大多数Vue.js应用程序中，函数并不真正代表应用程序的原子组成。当然，我们可以对我们的方法进行单元测试，但我们真正关心的是生成的HTML。

因此，Vue.js app测试中的单元是一个组件而不是一个函数。

我们如何测试组件？我们以此为例：

displayGreeting.js

export default {
  template: `
Hello, {{ name }}`,
  props: ['name']
};

如前所述，对于给定输入（在这种情况下，支柱），单元测试必须返回一致的输出（在这种情况下，文本内容）。

使用像Vue Test Utils这样的库，我们可以在内存中安装Vue组件并创建一个“包装器”对象。然后，我们可以查询包装器以对呈现的HTML进行断言。

displayGreeting.spec.js

import displayGreeting from "./displayGreeting.js";

test("displays message", () => {
  const name = "Michael";
  const wrapper = mount(displayGreeting, { propsData: { name } });
  expect(wrapper.text()).toBe(`Hello, ${name}`);
});

单元测试优点：

• 测试运行得很快
• 测试是精确的，允许您识别确切的问题

单元测试缺点：

• 为应用程序的每个方面编写测试都非常耗时
• 尽管单元测试通过，整个应用程序可能仍然无法正常工作

什么是e2e test?

e2e test（End to End test端到端）测试是一种功能测试。与单元测试不同，不会将应用程序分解为更小的部分以进行测试 - 而是测试整个应用程序。

e2e测试与您的应用程序交互，就像真实用户一样。例如，您可以编写一个E2E测试：

1. 加载您的网站
2. 点击“注册”链接
3. 为注册表单中的输入提供一些有效的详细信息
4. 单击“注册按钮”。

如果身份验证令牌已存储在Cookie中并且应用程序重定向到配置文件页面，则应通过此测试。

E2E测试优点

• 可以一次隐式测试很多东西
• e2e测试可确保您拥有一个工作系统

e2e测试缺点：

• 运行缓慢 - 通常需要5或10分钟才能运行一个站点
• 测试很脆弱 - 一个无关紧要的变化，如改变组件逻辑，就需要重新设计e2e test了
• 测试无法查明失败的原因

所以，主要的业务流程可能会写E2E，不过规模要小很多，主要目的是：

• 便于给PM展示业务流程
• 便于修改Bug之后的回归

e2e test工具介绍

Cypress——ts编写，只在chrome中运行

官网——https://www.cypress.io/

1. 安装 & 桌面应用

   npm install cypress --save-dev
   

   或者直接下载桌面应用：

   https://download.cypress.io/desktop

2. 使用方式：

   ./node_modules/.bin/cypress open
   
   // npx
   npx cypress open
   
   // yarn 
   yarn run cypress open
   

   或者添加 package.json:

   {
     "scripts": {
       "cypress:open": "cypress open"
     }
   }
   

   使用npm命令：npm run cypress:open

Nightwatch——测试工具，跨平台操作

TeatCafe——测试工具，上手简单，配置即用

e2e test案例

Codecov——测试覆盖率，测试结果可视化

Codecov简介

Codecov使用

前端项目中的应用