# 前端测试相关概念

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

  • 应用中有各种各样的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
  1. 然后创建一个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}`)
      }
    }
  }
}
更新时间: 2021-02-25 00:05