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

前端测试

1. 开发类型

   • 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');复制代码

2. 测试类型

   • unit test：应用仔细拆分为一个一个组件（JavaScript中的一个函数／模块／类等），方法，而后针对这些方法进行单个单个的测试
   • e2e test：ClickButton测试，牵扯到用户行为，须要用浏览器环境

3. 测试管理工具／框架／库

   • 测试管理工具：用来组织和运行整个测试的工具，它可以将测试框架、断言库、测试浏览器、测试代码和被测试代码组织起来，并运行被测试代码进行测试。（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

4. 测试框架共性

   • 提供TDD/BDD的测试语法来编写测试用例
   • 提供断言语法
   • 提供测试用例对源码的覆盖状况

karma项目实例

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

karma使用

1. 安装

   • 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：添加代码覆盖率插件

2. 运行

   node ./node_modules/karma/bin/karma start

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

   npm install -g karma-cli

3. 配置karma.config.js以及webpack.config.js文件

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

1. Travis-ci

   • Travis-ci官网登陆，绑定github帐号。
   • 点击头像进入我的资料界面，勾选你所须要自动构建的项目前的按钮
   • 点击build图标，选择md格式的Status Image复制到md文件中便可
   • 在项目根目录新建.travis.yml文件，参考仓库中的代码片断

2. Coveralls

   • Coveralls官网登陆
   • 点击左侧ADD REPOS，勾选你须要的项目
   • 若是没有你要的项目可点击右下角REFRESH PRIVATE REPOS
   • 若是你的项目不是Travis Pro就能够直接点击项目，找到EMBED下拉选择框，选择md格式的README BADGES复制到md文件中便可
   • 若是是Travis Pro，你就按照官网说明添加.coveralls.yml文件，填写相关token

避坑指南

1. 理解测试管理工具／框架／库之间的联系与区别

2. 在karma中选择不一样的测试环境（Chrome/PhantomJS...），须要配置相应的plugin，选择PhantomJS时，需下载指定的2.1.1版本，下载最新版phantomjs-prebuilt@2.1.14时，不只下载易报错（网络问题），并且出现没有PATH的问题，这样同karma-phantomjs-launcher插件便没法关联起来，致使虚拟浏览器测试环境没法搭建

3. 配置代码覆盖率时，采用karma-coverage，而咱们使用webpack及babel对源码进行了编译，致使代码覆盖率出现不完整的问题，所以须要引入webpack的babel-plugin-istanbul插件，在配置文件中加入便可

4. 配置持续集成.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' // 终端输出文字总结
       }]
   }复制代码

   ​

参考

• 聊一聊前端自动化测试
• 前端开源项目持续集成三剑客
• Web应用E2E测试框架
• 理解前端开发中的unit test 和 e2e test
• 前端自动化单元测试初探