利用Karma進(jìn)行前端單元測(cè)試
單元測(cè)試在程序開發(fā)過(guò)程中嫡霞，起到很重要的作用撰洗。一般來(lái)說(shuō)，單元測(cè)試的作用有：
- 使代碼可以放心修改和重構(gòu)滩届；
- 迫使程序員從調(diào)用者而不是實(shí)現(xiàn)者的角度設(shè)計(jì)軟件模塊；
- 迫使程序員將軟件模塊寫得易于測(cè)試和調(diào)用，從而有利于解耦帜消；
- 測(cè)試本身可作為被測(cè)代碼的用法說(shuō)明棠枉，從而替代了一部分文檔功能。
在前端開發(fā)中泡挺，測(cè)試常常是被忽略辈讶。但隨著前端工程化的推廣，單元測(cè)試也越來(lái)越受到重視了娄猫。
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í)行過(guò)程管理工具拙已，它有針對(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)行過(guò)程：
- Karma啟動(dòng)一個(gè)web服務(wù)器扩借，生成包含js源代碼和js測(cè)試腳本的頁(yè)面；
- 運(yùn)行瀏覽器加載頁(yè)面缤至，并顯示測(cè)試的結(jié)果潮罪；
- 如果開啟檢測(cè)，則當(dāng)文件有修改時(shí)，執(zhí)行繼續(xù)執(zhí)行以上過(guò)程嫉到。
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來(lái)幫我們初始化測(cè)試環(huán)境：
npm i -g karma-cli
然后在項(xiàng)目中安裝karma包
npm i --save-dev karma
在實(shí)際項(xiàng)目中，有事會(huì)需要用到Webpack和ES6何恶，所以接下來(lái)將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细层。如果我們引入了一些其它的庫(kù)惜辑，比如jquery之類的，將源代碼和庫(kù)代碼打包在一起后疫赎，覆蓋率會(huì)更難看盛撑。這樣的Coverage就沒(méi)有了參考的價(jià)值。需要安裝插件
npm i --save-dev babel-plugin-istanbul
接下來(lái)在工程目錄中運(yùn)行karma init來(lái)進(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)行铐望，無(wú)需我們手動(dòng)操作。
在目錄下生成coverage目錄茂附，里面有本次測(cè)試的覆蓋報(bào)告正蛙。打開后的結(jié)果如下
最后附上示例項(xiàng)目地址:karma-starter
