前端测试简述及使用Karma/Mocha实现的集成测试栗子（Travis CI/Coverage）

前端测试

开发类型

TDD (Test Driven Development)，测试驱动开发
BDD (Behavior Driven Development)，行为驱动开发

// add.js
function add(x, y) {
 return x + y;
}

module.exports = add;

// test.js
let add = require('./add.js');
// TDD
assert.equal(add(1, 2), '3');

// BDD
expect(add(1, 2)).to.equal('3');

测试类型
- unit test：应用仔细拆分为一个一个组件（JavaScript中的一个函数／模块／类等），方法，然后针对这些方法进行单个单个的测试
- e2e test：ClickButton测试，牵扯到用户行为，需要用浏览器环境
测试管理工具／框架／库
- 测试管理工具：用来组织和运行整个测试的工具，它能够将测试框架、断言库、测试浏览器、测试代码和被测试代码组织起来，并运行被测试代码进行测试。（Selenium、Karma）
- 测试框架：Mocha、Jasmine等等，测试主要提供了清晰简明的语法来描述测试用例，以及对测试用例分组，测试框架会抓取到代码抛出的AssertionError，并增加一大堆附加信息，比如那个用例挂了，为什么挂等等。测试框架通常提供TDD（测试驱动开发）或BDD（行为驱动开发）的测试语法来编写测试用例，关于TDD和BDD的对比可以看一篇比较知名的文章The Difference Between TDD and BDD。不同的测试框架支持不同的测试语法，比如Mocha既支持TDD也支持BDD，而Jasmine只支持BDD。这里后续以Mocha的BDD语法为例
- 断言库：Should.js、chai、expect.js等等，断言库提供了很多语义化的方法来对值做各种各样的判断。当然也可以不用断言库，Node.js中也可以直接使用原生assert库。
- 代码覆盖率：istanbul等等为代码在语法级分支上打点，运行了打点后的代码，根据运行结束后收集到的信息和打点时的信息来统计出当前测试用例的对源码的覆盖情况。
- 测试浏览器：前端代码是运行在浏览器中的，要对其进行单元测试，只能将其运行在浏览器上。目前大部分测试工具都支持调用和运行本地浏览器来进行测试，但如果你的测试仅仅是针对函数和模块的单元测试，则完全可以使用一款无界面的浏览器：PhantomJs
测试框架共性
- 提供TDD/BDD的测试语法来编写测试用例
- 提供断言语法
- 提供测试用例对源码的覆盖情况

karma项目实例

按照以下配置完成的项目实例

karma使用

安装
- npm install better-npm-run --save-dev：npm script配置增强
- npm install karma --save-dev
- npm install chai karma-chai mocha karma-mocha --save-dev：安装mocha以及断言chai，配置测试框架
- npm install babel-core babel-loader babel-preset-env webpack karma-webpack --save-dev：安装webpack和babel，配置es6／7环境
- npm install phantomjs@2.1.1 babel-plugin-istanbul karma-phantomjs-launcher --save-dev：使用虚拟浏览器跑测试
- npm install karma-coverage --save-dev：添加代码覆盖率插件
运行

node ./node_modules/karma/bin/karma start

全局安装cli后，可以直接karma start，省去前面长段字符串

npm install -g karma-cli
配置karma.config.js以及webpack.config.js文件

搭建Travis-CI／Coveralls自动化部署环境

Travis-ci
- Travis-ci官网登录，绑定github账号。
- 点击头像进入个人资料界面，勾选你所需要自动构建的项目前的按钮
- 点击build图标，选择md格式的Status Image复制到md文件中即可
- 在项目根目录新建.travis.yml文件，参考仓库中的代码片段
Coveralls
- Coveralls官网登录
- 点击左侧ADD REPOS，勾选你需要的项目
- 如果没有你要的项目可点击右下角REFRESH PRIVATE REPOS
- 如果你的项目不是Travis Pro就可以直接点击项目，找到EMBED下拉选择框，选择md格式的README BADGES复制到md文件中即可
- 如果是Travis Pro，你就按照官网说明添加.coveralls.yml文件，填写相关token

避坑指南

理解测试管理工具／框架／库之间的联系与区别
在karma中选择不同的测试环境（Chrome/PhantomJS...），需要配置相应的plugin，选择PhantomJS时，需下载指定的2.1.1版本，下载最新版phantomjs-prebuilt@2.1.14时，不仅下载易报错（网络问题），而且出现没有PATH的问题，这样同karma-phantomjs-launcher插件便无法关联起来，导致虚拟浏览器测试环境无法搭建
配置代码覆盖率时，采用karma-coverage，而我们使用webpack及babel对源码进行了编译，导致代码覆盖率出现不完整的问题，因此需要引入webpack的babel-plugin-istanbul插件，在配置文件中加入即可

配置持续集成.travis.yml文件，给 Coveralls 上传的测试报告需要有统一的 lcov 格式，因此在karma.conf.js文件中配置生成报告类型

karma-coverage详细配置

coverageReporter: {
  dir: 'coverage',
    reporters: [{
      type: 'json',
      subdir: '.',
      file: 'coverage.json', // ./coverage目录下生成此文件
    }, {
      type: 'lcov', // lcov 格式
      subdir: '.' // ./coverage目录下生成 lcov.info文件
    }, {
      type: 'text-summary' // 终端输出文字总结
    }]
}

前端测试简述及使用Karma/Mocha实现的集成测试栗子（Travis CI/Coverage）

前端测试

karma项目实例

karma使用

搭建Travis-CI／Coveralls自动化部署环境

避坑指南

参考