前颜（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不是很多
assert.equal(foo, 'foo'); -
should.jd：BDD风格断言库，should相对于assert有比较丰富的api，并且其语法非常的语义化
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）
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
#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 运行
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，并关联本地仓库
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 提交到远程仓库上
git add .
git commit -m 'add travis ci'
git push origin master
6 此时可以在travis上查看测试反馈
travis.jpg
有关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
网友评论