前端测试相关概念

前端自动化测试产生的背景及其原理

• 应用中有各种各样的bug
  • 安全、逻辑、性能、展示、...
• 减少bug的方式
  • code review
  • 测试人员
  • 灰度发布
  • ...
• 编码层面提高代码质量、减少bug属相
  • TypeScript
  • Flow
  • ESLint
  • StyleLint
• 自动化测试在后端已被广泛应用，前端普及一般
  • 组件库使用比较好
  • 业务性应用一般，对安全稳定性要求非常高的应用比较好

测试分类

• 单元测试 ：颗粒度最小，一般由开发小组采用白盒方式来测试，主要测试单元是否符合"设计" ; 是指对软件中的最小可测试单元进行检查和验证。
• 集成测试 ：介于单元测试和系统测试之间，一般由开发小组采用白盒+黑盒的方式来测试，即验证"设计"又验证"需求"。主要用来测试模板与模板之前的接口，同时还要测试一些主要的业务功能。
• 回归测试
• 性能测试
• 系统测试 ：颗粒度最大，一般由独立的测试小组采用黑盒的方式来测试，主要测试系统是否符合"需求规格说明书"。在经过以上各阶段测试确认后，把系统完整的模拟客户环境来进行测试。
• 白盒测试 ： 主要用于单元测试阶段，主要是对代码级别的测试，针对程序内部的逻辑结构。测试的手段有：语句覆盖、判定覆盖、条件覆盖、路径覆盖和条件组合覆盖。
• 黑河测试 ： 不考虑程序内部结构和逻辑结构，主要是测试系统的功能是否满足"需求规格说明书"。一般会有一个输入值和一个输出值，和期望值做比较。黑盒测试也被称为功能测试和数据驱动测试，它是通过测试来检测每个功能是否否能正常使用。
• 端到端测试(e2e) : 模拟用户行为
• 组件测试
• 压力测试

怎么简单实现前端测试?

根据一个案例来表示：

1. 创建一个main.js文件

function sum (x, y) {
  return x + y
}

function subtract (x, y) {
  return x - y
}

exports.sum = sum
exports.subtract = subtract

2. 然后创建一个main.test.js文件，比较期望值和测试值。

const { sum, subtract } = require('./math')

test('测试 sum', () => {
  expect(sum(1, 2)).toBe(3)
})

test('测试 subtract', () => {
  expect(subtract(2, 1)).toBe(1)
})

function test (description, callback) {
  try {
    callback()
  } catch (err) {
    console.log(`${description}：${err}`)
  }
}

function expect (result) {
  return {
    toBe (actual) {
      if (actual !== result) {
        throw new Error(`期望得到${actual}，但是得到了${result}`)
      }
    }
  }
}