利用Karma進(jìn)行前端單元測(cè)試
單元測(cè)試在程序開發(fā)過程中，起到很重要的作用。一般來說，單元測(cè)試的作用有：
- 使代碼可以放心修改和重構(gòu)；
- 迫使程序員從調(diào)用者而不是實(shí)現(xiàn)者的角度設(shè)計(jì)軟件模塊；
- 迫使程序員將軟件模塊寫得易于測(cè)試和調(diào)用，從而有利于解耦；
- 測(cè)試本身可作為被測(cè)代碼的用法說明，從而替代了一部分文檔功能。
在前端開發(fā)中，測(cè)試常常是被忽略。但隨著前端工程化的推廣，單元測(cè)試也越來越受到重視了。
Karma簡(jiǎn)介
Karma是由Google團(tuán)隊(duì)開發(fā)的一套前端測(cè)試運(yùn)行框架。它不同于測(cè)試框架（Mocha，Jasmine，QUnit等），運(yùn)行在這些測(cè)試框架之上。Karma是一直作為一個(gè)Test Runner而存在的。該工具可用于測(cè)試所有主流Web瀏覽器，也可集成到 CI （Continuous integration）工具，也可和其他代碼編輯器一起使用。
Karma 可以在不同的桌面或移動(dòng)設(shè)備瀏覽器上，或在持續(xù)集成的服務(wù)器上測(cè)試 JavaScript 代碼。Karma 支持 Chrome、ChromeCanary、 Safari、Firefox、 IE、Opera、 PhantomJS，知道如何捕獲瀏覽器正使用的默認(rèn)路徑，這些路徑可能在啟動(dòng)器配置文件被忽視（overridden）。Karma 就是一個(gè)可以和多重測(cè)試框架協(xié)作的測(cè)試執(zhí)行過程管理工具，它有針對(duì)Jasmine、 Mocha 和AngularJS 的適配器，它也可以與 Jenkins 或 Travis 整合，用于執(zhí)行持續(xù)集成測(cè)試。
什么時(shí)候使用Karma
- 在真實(shí)瀏覽器里測(cè)試
- 在多種瀏覽器里進(jìn)行測(cè)試（包括桌面、移動(dòng)）
- 在本地開發(fā)環(huán)境執(zhí)行測(cè)試
- 想在持續(xù)集成CI內(nèi)運(yùn)行測(cè)試
- 想在每次保存代碼時(shí)，自動(dòng)執(zhí)行測(cè)試
- 熱衷于terminal小黑屏
- 不想陷入令人厭煩的測(cè)試生活
- 想使用Istanbul自動(dòng)生成coverage報(bào)告
- 想在源碼中使用RequireJS
karma的基本運(yùn)行過程：
- Karma啟動(dòng)一個(gè)web服務(wù)器，生成包含js源代碼和js測(cè)試腳本的頁面；
- 運(yùn)行瀏覽器加載頁面，并顯示測(cè)試的結(jié)果；
- 如果開啟檢測(cè)，則當(dāng)文件有修改時(shí)，執(zhí)行繼續(xù)執(zhí)行以上過程。
Karma的安裝配置
初始項(xiàng)目結(jié)構(gòu)
karma-starter
├── src
├── index.js
├── test
├── package.json
index.js的內(nèi)容如下
function checkNum(num) {
if (typeof num === 'number') {
return true
} else {
return false
}
}
function checkString(str) {
if (typeof str === 'string') {
return true
} else {
return false
}
}
exports.checkNum = checkNum
exports.checkString = checkString
安裝Karma環(huán)境
為了方便搭建Karma環(huán)境，我們可以全局安裝karma-cli來幫我們初始化測(cè)試環(huán)境：
npm i -g karma-cli
然后在項(xiàng)目中安裝karma包
npm i --save-dev karma
在實(shí)際項(xiàng)目中，有事會(huì)需要用到Webpack和ES6，所以接下來將Webpack和Babel集成進(jìn)Karma環(huán)境中。
安裝karma-webpack
npm i --save-dev karma-webpack
安裝babel
npm i --save-dev babel-loader babel-core babel-preset-es2015
安裝好Karma覆蓋率工具
npm i --save-dev karma-coverage
安裝babel-plugin-istanbul
webpack會(huì)加入一些代碼，影響了代碼的Coverage。如果我們引入了一些其它的庫，比如jquery之類的，將源代碼和庫代碼打包在一起后，覆蓋率會(huì)更難看。這樣的Coverage就沒有了參考的價(jià)值。需要安裝插件
npm i --save-dev babel-plugin-istanbul
接下來在工程目錄中運(yùn)行karma init來進(jìn)行測(cè)試環(huán)境初始化，并按照指示一步步完成。這里使用jasmine測(cè)試框架，PhantomJS作為代碼運(yùn)行的環(huán)境（也可以選擇其他瀏覽器作為運(yùn)行環(huán)境，比如Chrome，IE等）。最后在項(xiàng)目中生成karma.conf.js文件。至此就搭建好了Karma運(yùn)行環(huán)境。
運(yùn)行Karma
在test目錄里編寫一個(gè)簡(jiǎn)單的測(cè)試腳本，我們使用的是jasmine測(cè)試框架，具體的api可以參考jasmine api，內(nèi)容如下
const Code = require('../src/index')
describe('index.js: ', () => {
it('checkNum() should work fine.', () => {
expect(Code.checkNum(1)).toBe(true)
expect(Code.checkNum('1')).toBe(false)
})
})
describe('index.js: ', () => {
it('checkString() should work fine.', () => {
expect(Code.checkString("aaa")).toBe(true)
expect(Code.checkString(2)).toBe(false)
expect(Code.checkString(' ')).toBe(true)
})
})
然后在項(xiàng)目根目錄下運(yùn)行karma start命令,我們可以看到運(yùn)行的結(jié)果如下
可以看到，運(yùn)行的結(jié)果顯示測(cè)試成功。
同時(shí)，因?yàn)槲覀冎霸O(shè)置了監(jiān)控文件的修改，所以當(dāng)我們修改源文件或者測(cè)試腳本的時(shí)候，Karma會(huì)自動(dòng)幫我們?cè)俅芜\(yùn)行，無需我們手動(dòng)操作。
在目錄下生成coverage目錄，里面有本次測(cè)試的覆蓋報(bào)告。打開后的結(jié)果如下
最后附上示例項(xiàng)目地址:karma-starter
