目前來看 karma+mocha 非常適合做 TDD（測(cè)試驅(qū)動(dòng)開發(fā)）办绝。
測(cè)試驅(qū)動(dòng)開發(fā)（英語：Test-driven development锐墙，縮寫為 TDD）是一種軟件開發(fā)過程中的應(yīng)用方法鳞尔，由極限編程中倡導(dǎo)滥比，以其倡導(dǎo)先寫測(cè)試程序，然后編碼實(shí)現(xiàn)其功能得名臼隔。
TDD 提倡寫代碼之前先把單測(cè)寫好嘹裂，然后通過單測(cè)來驗(yàn)證代碼是否正確。這就需要有一個(gè)單測(cè)框架（即 mocha）摔握，但這還不夠寄狼，也不能每寫完一次就運(yùn)行一下單測(cè)代碼，這也效率太低了吧氨淌，所以還需要一個(gè)框架（即 karma）來做這個(gè)事情泊愧。
這里先介紹一些 JS 單測(cè)框架 mocha（https://github.com/mochajs/mocha，tj 大神的作品盛正，奈何大神覺得 Node 沒搞頭去搞 go 了）删咱。安裝還是比較簡(jiǎn)單，這里就不多說了蛮艰。提醒一下腋腮，如果是在 Windows 下安裝 Node 的話可能需要設(shè)置一下環(huán)境變量雀彼。
實(shí)例：一個(gè)加法模塊src/add.js的代碼：
function add(x, y) {
return x + y;
}
module.exports = add;
|
各個(gè)語言寫單測(cè)都差不多，就是對(duì)預(yù)期結(jié)果的斷言即寡。上面代碼對(duì)應(yīng)的測(cè)試代碼tests/add.test.js：
var add = require('../src/add.js');
var assert = require('chai').assert;
describe('加法函數(shù)的測(cè)試', function() {
it('1 加 1 應(yīng)該等于 2', function() {
assert.equal(add(1, 1), 2);
});
});
|
測(cè)試腳本里面應(yīng)該包括一個(gè)或多個(gè)
describe塊徊哑，每個(gè)describe塊應(yīng)該包括一個(gè)或多個(gè)it塊。
describe塊稱為“測(cè)試套件”（test suite）聪富，表示一組相關(guān)的測(cè)試莺丑。它是一個(gè)函數(shù)，第一個(gè)參數(shù)是測(cè)試套件的名稱（“加法函數(shù)的測(cè)試”）墩蔓，第二個(gè)參數(shù)是一個(gè)實(shí)際執(zhí)行的函數(shù)梢莽。
it塊稱為“測(cè)試用例”（test case），表示一個(gè)單獨(dú)的測(cè)試奸披，是測(cè)試的最小單位昏名。它也是一個(gè)函數(shù)，第一個(gè)參數(shù)是測(cè)試用例的名稱（“1 加 1 應(yīng)該等于 2”）阵面，第二個(gè)參數(shù)是一個(gè)實(shí)際執(zhí)行的函數(shù)轻局。斷言庫有很多種，mocha 并不限制使用哪一種样刷。上面代碼引入的斷言庫是 chai仑扑，并且指定使用它的
assert斷言風(fēng)格。因?yàn)檫@更接近其它語言的風(fēng)格置鼻。
運(yùn)行一下測(cè)試代碼：
大概流程就是這樣镇饮，詳細(xì)的可以查看官方文檔。隨便說一下箕母，WebStorm 和 PhpStorm 原生支持 mocha储藐，設(shè)置一下即可右鍵運(yùn)行時(shí)直接調(diào)用 mocha 來運(yùn)行當(dāng)前 JS 單測(cè)文件：
單測(cè)已經(jīng)寫好了，怎么能讓測(cè)試驅(qū)動(dòng)我開發(fā)呢司蔬？這時(shí)候就需要 karma（https://github.com/karma-runner/karma）登場(chǎng)了邑茄。如 github 主頁上所說，Karma 不是一個(gè)測(cè)試框架俊啼，也不是一個(gè)斷言庫，僅僅啟動(dòng)一個(gè) http server左医，并通過你熟知的測(cè)試框架生成運(yùn)行測(cè)試的HTML授帕。Karma 支持的測(cè)試框架非常多，如前文介紹浮梢，我們這里選擇的是 mocha 測(cè)試框架和 chai 斷言庫跛十。
首先安裝 karma，然后使用karma init my.conf.js命令生成配置文件秕硝。生成文件的過程是交互式的芥映，很友好，注意選擇測(cè)試框架是 mocha。選錯(cuò)了也沒關(guān)系奈偏，配置文件之后可以手動(dòng)編輯坞嘀，大概長(zhǎng)這樣：
// Karma configuration
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha', 'requirejs', 'chai'],
// list of files / patterns to load in the browser
files: [
'test-main.js',
{pattern: 'src/*.js', included: true},
{pattern: 'tests/*.test.js', included: false}
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
|
比較重要的幾個(gè)參數(shù)：
- frameworks：我們這里需要 mocha 和 chai【矗框架必須預(yù)先通過
npm install karma-xxx --save-dev命令安裝好丽涩，支持的框架詳見：https://www.npmjs.com/browse/keyword/karma-adapter - files：可以配置通配符把源代碼和測(cè)試代碼加載進(jìn)來。
- browsers：需要啟動(dòng)的瀏覽器
- autoWatch：觀察文件是否變動(dòng)裁蚁，如有變動(dòng)則重新運(yùn)行單測(cè)矢渊。
最后使用命令karma start my.conf.js運(yùn)行即可。但這里我一直失敗枉证，遇到如下這些錯(cuò)誤：
Chrome 52.0.2743 (Windows 10 0.0.0) ERROR
Uncaught ReferenceError: module is not defined
at src/add.js:5
Chrome 52.0.2743 (Windows 10 0.0.0) ERROR
Uncaught Error: Module name "../src/add.js" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
at node_modules/requirejs/require.js:143
|
這是因?yàn)樯衔牡拇a使用的是node的require()語法矮男，karma是在瀏覽器端運(yùn)行的，當(dāng)然不支持了室谚。如果你的源代碼使用的是 AMD昂灵、CMD 加載器，測(cè)試代碼也要使用 requirejs 等框架加載源代碼模塊舞萄。這里我們將源代碼和測(cè)試代碼稍微改造一下就行了：
function add(x, y) {
return x + y;
}
// module.exports = add;
// var add = require('../src/add.js');
// var assert = require('chai').assert;
var assert = chai.assert;
describe('加法函數(shù)的測(cè)試', function() {
it('1 加 1 應(yīng)該等于 2', function() {
assert.equal(add(1, 1), 2);
});
});
|
成功運(yùn)行：
karma 可以啟動(dòng)不同的瀏覽器眨补，所以還可以做兼容性測(cè)試。
我修改一下源代碼倒脓，karma 能自動(dòng)監(jiān)聽到文件變動(dòng)撑螺，然后顯示單測(cè)結(jié)果，這樣我就能實(shí)時(shí)知道代碼是否有問題崎弃。
當(dāng)然這只是 karma 的一個(gè)功能甘晤，還有很多實(shí)用功能等待后續(xù)學(xué)習(xí)。
