前顏（yan）
首先你覺得測試重要嗎冯吓？為什么重要倘待？
這里舉個例子，假如你寫了一個邏輯稍微比較復雜的函數(shù)组贺，這個函數(shù)被很多地方調用到，那么當過了N多天之后祖娘，你可能快要忘記這里面的邏輯了失尖，此時你可能出于某種原因需要為這個函數(shù)增加一些功能，修改這個函數(shù)的代碼渐苏，那么你要怎么做才能做到修改后不影響其他的調用者呢掀潮，或者說，你要怎么做琼富，才能快速的知道哪些地方受影響仪吧，哪些地方不受影響呢？
很明顯鞠眉，答案就是：跑測試用例
對于單元測試薯鼠，我能想到的好處有：
改進代碼設計，提高代碼質量：單元測試會強制你對代碼進行合理的設計械蹋，解耦出皇，寫出可測試的代碼
允許重構，你可以放心的對代碼進行修改哗戈，因為你有測試用例來確保你的代碼能夠按符合預期要求
快速定位bug
既然單元測試這么重要郊艘，那么就應該好好重視起來。
前端測試框架和庫
目前前端測試框架和庫主要有assert唯咬、should.js纱注、expect、chai胆胰、mocha狞贱、jasmine、karma以及travis ci等等煮剧。
其中assert斥滤、should.js将鸵、expect、chai屬于斷言庫佑颇，實現(xiàn)對js代碼進行斷言測試顶掉。
?而mocha、jasmine屬于測試框架挑胸，測試框架通過使用斷言庫對js代碼進行測試痒筒，生成測試報告，除此之外茬贵，測試框架還提供了各種生命周期簿透。
?karma則屬于測試工具，能夠模擬各種環(huán)境來運行你的測試代碼解藻，比如Chrome老充，F(xiàn)irefox，mobile等等螟左。
?重點要介紹的是travis ci啡浊，是一個遠程免費的持續(xù)集成（CI）服務，你可以通過配置綁定你github上的項目胶背，并且配置運行環(huán)境巷嚣，實現(xiàn)只要github上有代碼更新，travis就會自動運行構建和測試钳吟，并反饋運行結果廷粒。
?下面對不同斷言庫進行簡單的介紹：
?斷言庫（主要實現(xiàn)對代碼進行測試）
-
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實現(xiàn)幾個前端js自動化持續(xù)測試的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的更多配置（代替命令行參數(shù)）：https://mochajs.org/#mochaopts
5 運行
mocha
輸出測試結果
>mocha
add
√ 8 + 8 = 16
1 passing (10ms)
demo2(mocha+should.js+karma)
特點：
- 通過karma調用mocha測試框架來進行代碼測試
- 優(yōu)點在于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的區(qū)別)
function add(x, y) {
return x + y;
}
3 添加測試用例
#test/test.js(注意和demo1的區(qū)別)
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上創(chuàng)建一個新工程demo3，并關聯(lián)本地倉庫
git remote add origin git@github.com:SimpleCodeCX/demo3.git
3 使用github賬號登錄travis官網(wǎng)橘原，同步并激活監(jiān)聽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的配置文檔：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
