基于mocha、should.js、karma、travis ci实现前端自动化持续测试

前颜（yan）

首先你觉得测试重要吗？为什么重要？

这里举个例子，假如你写了一个逻辑稍微比较复杂的函数，这个函数被很多地方调用到，那么当过了N多天之后，你可能快要忘记这里面的逻辑了，此时你可能出于某种原因需要为这个函数增加一些功能，修改这个函数的代码，那么你要怎么做才能做到修改后不影响其他的调用者呢，或者说，你要怎么做，才能快速的知道哪些地方受影响，哪些地方不受影响呢？

很明显，答案就是：跑测试用例

对于单元测试，我能想到的好处有：

改进代码设计，提高代码质量：单元测试会强制你对代码进行合理的设计，解耦，写出可测试的代码
允许重构，你可以放心的对代码进行修改，因为你有测试用例来确保你的代码能够按符合预期要求
快速定位bug

既然单元测试这么重要，那么就应该好好重视起来。

前端测试框架和库

目前前端测试框架和库主要有assert、should.js、expect、chai、mocha、jasmine、karma以及travis ci等等。

其中assert、should.js、expect、chai属于断言库，实现对js代码进行断言测试。

而mocha、jasmine属于测试框架，测试框架通过使用断言库对js代码进行测试，生成测试报告，除此之外，测试框架还提供了各种生命周期。

karma则属于测试工具，能够模拟各种环境来运行你的测试代码，比如Chrome，Firefox，mobile等等。

重点要介绍的是travis ci，是一个远程免费的持续集成（CI）服务，你可以通过配置绑定你github上的项目，并且配置运行环境，实现只要github上有代码更新，travis就会自动运行构建和测试，并反馈运行结果。

下面对不同断言库进行简单的介绍：

断言库（主要实现对代码进行测试）

assert ：TDD风格断言，是nodejs的一个断言测试模块，提供的api不是很多
1
assert.equal(foo, 'foo');
should.jd：BDD风格断言库，should相对于assert有比较丰富的api，并且其语法非常的语义化
1
2
3
foo.should.be();
bar.should.have();
foo.should.bot.be();

expect：BDD风格断言，语法和should.js类似

expect(foo).to.be();
expect(foo).to.eql();
expect(foo).to.be.a();
expect(foo).not.to.be.an();

chai：支持BDD/TDD双模式，同时支持should/expect/assert三种风格的断言库，还有强大的插件机制

should
chai.should();
foo.should.be.a('string');

expect
var expect = chai.expect;
expect(foo).to.be.a('string');

assert
var assert = chai.assert;
assert.typeOf(foo, 'string');

接下来，我将使用mocha、should.js、karma、travis ci实现几个前端js自动化持续测试的demo。大家可以克隆相应的代码下来对应着看，由于篇幅有限，下面只讲关键点。

demo1(mocha+should.js)

特点：直接使用mocha和should.js来跑测试用例。

代码地址：https://github.com/SimpleCodeCX/myCode/tree/master/test/demo1

关键点说明：

1 下载相关依赖（mocha和should.js）

1 2	npm instal -g mocha （全局） npm install --save-dev should

2 添加主功能（待测试）代码

#src/main.js
function add(x, y) {
  return x + y;
}
module.exports = add;

3 添加测试用例

#test/test.js
var add = require('../src/main')

describe('add', function () {
  it('8 + 8 = 16', function () {
    add(8, 8).should.equal(16);
  })
})

4 配置mocha.opts

1 2	#test/mocha.opts --require should

关于mocha.opts的更多配置（代替命令行参数）：https://mochajs.org/#mochaopts

5 运行

mocha

输出测试结果

>mocha
add
    √ 8 + 8 = 16


  1 passing (10ms)

demo2(mocha+should.js+karma)

特点：

通过karma调用mocha测试框架来进行代码测试
优点在于karma能模拟浏览器比如Chrome、Firefox来运行测试代码

代码地址：https://github.com/SimpleCodeCX/myCode/tree/master/test/demo2

关键点说明：

1 下载相关依赖（mocha、should.js和karma）

npm install --save-dev mocha（demo1使用的是全局mocha，这里是karma调用mocha）
npm install --save-dev should
npm install --save-dev karma
npm install --save-dev karma-chrome-launcher
npm install --save-dev karma-mocha

2 添加主功能（待测试）代码

#src/main.js(注意和demo1的区别)

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

3 添加测试用例

#test/test.js(注意和demo1的区别)

describe('add', function () {
  it('8 + 8 = 16', function () {
    add(8, 8).should.equal(16);
  })
})

4 配置karma（karma.conf.js）

运行 karma init，按提示操作。

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> mocha

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> Chrome
>

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> test/**/*.js
>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes


Config file generated at "...\demo2\karma.conf.js".

然后在karma.conf.js中的files添加相关的依赖模块：

files: [
     'node_modules/should/should.js',
     'test/**/*.js',
     'src/**/*.js'
   ]

关于karma的更多配置：http://karma-runner.github.io/3.0/config/configuration-file.html

5 运行

1	karma start

karma会运行chrome浏览器，并且输出测试结果

>karma start
08 11 2018 21:01:34.765:WARN [karma]: No captured browser, open http://localhost:9876/
08 11 2018 21:01:34.775:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
08 11 2018 21:01:34.775:INFO [launcher]: Launching browser Chrome with unlimited concurrency
08 11 2018 21:01:34.785:INFO [launcher]: Starting browser Chrome
08 11 2018 21:01:37.456:INFO [Chrome 70.0.3538 (Windows 7.0.0)]: Connected on socket h9aSRbkdzZNTgb2dAAAA with id 46125810
Chrome 70.0.3538 (Windows 7.0.0): Executed 1 of 1 SUCCESS (0.007 secs / 0.002 secs)

demo3(mocha+should.js+karma+travis)

代码地址：https://github.com/SimpleCodeCX/myCode/tree/master/test/demo3

1 复制demo2的工程作为demo3

2 在github上创建一个新工程demo3，并关联本地仓库

1	git remote add origin git@github.com:SimpleCodeCX/demo3.git

3 使用github账号登录travis官网，同步并激活监听github上的demo3项目

参考文章：
http://www.ruanyifeng.com/blog/2017/12/travis_ci_tutorial.html

4 配置travis（.travis.yml）

在demo3的根目录下新建.travis.yml文件，并做如下配置：

language: node_js
node_js:
  - "8"
script: karma start --single-run
before_install:
  - npm install
  - export CHROME_BIN=chromium-browser
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start

5 提交到远程仓库上

1
2
3

git add . 
git commit -m 'add travis ci'
git push origin master

6 此时可以在travis上查看测试反馈

有关travis的配置文档：https://docs.travis-ci.com/user/languages/javascript-with-nodejs/

参考文档：
https://nodejs.org/api/assert.html
https://github.com/shouldjs/should.js
https://github.com/Automattic/expect.js
https://www.chaijs.com
https://mochajs.org
https://jasmine.github.io
http://karma-runner.github.io
https://docs.travis-ci.com/user/languages/javascript-with-nodejs