# 前端测试

# 单元测试

基本概念
1. 单元测试的目的：让开发者明确代码的输出。
2. 原则：单一职责、接口抽象、层次分离。
3. 断言库
4. 单元测试两种风格：TDD：测试驱动开发。BDD：行为驱动开发。
karma+jasmine+karma-coverage
1. karma 提供了测试集成环境
2. jasmine 单元测试框架自带断言
3. karma-coverage 单元测试覆盖率
4. karma init 初始化测试项目生成 karma.conf.js
  - 常用配置项
    - frameworks: 测试框架
      - frameworks: ['jasmine']
    - files: 需要测试的文件符合 glob 格式
      - files: ['unit/**/*.js']
    - exclude: 排除哪些文件
    - preprocessors: 预处理操作
      - preprocessors:{'unit/**/*.js': 'coverage'}
    - reporters: 生成报告
      - reporters: ['progress', 'coverage']
    - port: 端口号
    - autoWatch: 是否自动监听文件变化
    - singleRun: 是否运行完成退出浏览器
5. karma start: 运行测试用例，生成测试报告

# 接口测试

mocha+chai+supertest: 异步接口测试

supertest: 模拟 http 请求

    var request = () => supertest(app);

    it ('test index', function(done){
        requset()
            .get('/')
            .expect(200, done)
        })

1
2
3
4
5
6
7
8

chai: 断言库

    var { expect } = require('chai')
    var { should } = require('chai')
    var { assert } = require('chai')

1
2
3

mocha
- ./node_modules/.bin/mocha server/app.spec.js 运行接口测试文件
- 用 mocha + mochawesome 生成测试报告
  1. 生成 mochaRunner.js
```
    var Mocha = require('mocha')

    var mocha = new Mocha({
        reporter: 'mochawesome'
    })

    mocha.addFile(path.join(__dirname, './app.spec.js'))

    mocha.run()
```
    1
    2
    3
    4
    5
    6
    7
    8
    9
  2. node mochaRunner.js 生成测试报告

# e2e测试

selenium-webdriver + 浏览器 driver

需要下载对应的浏览器 driver

新建一个 js 文件（例如 test.js）

    (async function () {
        var { Builder, By, Key, until } = require('selenium-webdriver')

        var driver = await new Builder().forBrowser('chrome').build()

        try {

            await driver.get('http://www.baidu.com')
            await driver.findElement(By.name('wd')).sendKeys('npm', Key.RETURN)
            await driver.wait(until.titleIs('npm_百度搜索'), 2000)

        } catch {

        } finally {
            await driver.quit()
        }
    })()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

node index.js 运行 e2e 测试

# UI测试

backstopjs
1. ./node_modules/.bin/backstop init: 生成配置文件 backstop.json 和 backstop_data 文件夹
2. backstop.json 主要配置项
  - viewports: 测试机型根据设计稿设置 width、height
  - onBeforeScript: 'puppet/onBefore.js' 该文件在 backstop_data/engine_scripts/puppet/onBefore.js （该 base path 可以在 paths 配置）
  - scenarios: 设置要测试的文件 options
    - cookiePath: "backstop_data/engine_scripts/cookies.json"
    - url: 测试链接
  - paths: 配置 bitmap 和 script 的 base path, 例如 engine_scripts 设置 onBefore and onReady scripts 的 base path
3. ./node_modules/backstop test 运行 backstop.json 进行 UI 测试。

← 用户、用户组和用户操作