在開發(fā)的過程中栅盲，除了代碼本身，測(cè)試也是重要的一環(huán)。大體來說晰赞，測(cè)試分為以下幾種類型：
- 單元測(cè)試
- 功能測(cè)試
- 性能測(cè)試
- 安全測(cè)試
對(duì)于普通開發(fā)者而言，單元測(cè)試和功能測(cè)試是最常見的兩種測(cè)試方式，本系列文章要介紹的幾個(gè)工具是針對(duì)這兩個(gè)方面的掖鱼。
單元測(cè)試是對(duì)某一塊獨(dú)立的業(yè)務(wù)模塊進(jìn)行測(cè)試然走，可以是一個(gè)小功能，甚至一個(gè)函數(shù)戏挡。在前端開發(fā)中芍瑞，我們可以選用 Karma 進(jìn)行代碼的單元測(cè)試，這個(gè)工具十分強(qiáng)大褐墅，它集成了像 Jasmine（基于 BDD 的測(cè)試框架）拆檬，PhantomJS（無界面的瀏覽器） 這些測(cè)試套件。還有一些其他有用的功能妥凳，比如生成代碼覆蓋率的報(bào)告等竟贯。
本文只介紹 Karma 的基本使用。
單元測(cè)試工具 Karma
要使用 Karma 對(duì)代碼進(jìn)行單元測(cè)試逝钥，首先需要安裝一系列的相關(guān)插件屑那。我們來新建一個(gè)名為 myKarmDemo 的目錄，并安裝相關(guān)的插件：
npm install karma-cli -g
npm install karma jasmine-core karma-jasmine karma-phantomjs-launcher -D
接下來對(duì)我們的工程進(jìn)行初始化：
karma init
之后會(huì)彈出一些選項(xiàng)艘款，其中包含了一些初始化的配置工作持际，使用上下方向鍵可以在配置項(xiàng)之間進(jìn)行切換。我這里選擇使用 Jasmine 測(cè)試框架哗咆，使用 PhantomJS 無界面瀏覽器蜘欲，整體的配置選項(xiàng)如下：
myKarmDemo karma init
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> jasmine
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.
> PhantomJS
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.
>
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.
> no
Config file generated at "/home/charley/Desktop/myKarmDemo/karma.conf.js".
初始化完成之后，會(huì)在我們的項(xiàng)目中生成一個(gè) karma.conf.js 文件岳枷，這個(gè)文件就是 Karma 的配置文件芒填。
配置文件比較簡(jiǎn)單，能夠比較輕松的看懂空繁，這里我對(duì)原始的配置文件進(jìn)行簡(jiǎn)單的修改殿衰，結(jié)果如下：
// Karma configuration
// Generated on Sun Oct 29 2017 21:45:27 GMT+0800 (CST)
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: ['jasmine'],
// list of files / patterns to load in the browser
files: [
"./src/**/*.js",
"./test/**/*.spec.js",
],
// 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: false,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
然后創(chuàng)建一個(gè) src 目錄和一個(gè) test 目錄，在其中分別創(chuàng)建 index.js 和 index.spec.js 文件盛泡。
我要做的測(cè)試內(nèi)容比較簡(jiǎn)單闷祥，對(duì) index.js 中的兩個(gè)函數(shù)（一個(gè)加法函數(shù)，一個(gè)乘法函數(shù)）進(jìn)行測(cè)試傲诵。
index.js 文件如下：
// 加法函數(shù)
function add(x){
return function(y){
return x + y;
}
}
// 乘法函數(shù)
function multi(x){
return function(y){
return x * y + 1;
}
}
index.spec.js 文件如下：
describe("運(yùn)算功能單元測(cè)試",function(){
it("加法函數(shù)測(cè)試",function(){
var add5 = add(5)
expect(add5(5)).toBe(10)
});
it("乘法函數(shù)測(cè)試",function(){
var multi5 = multi(5)
expect(multi5(5)).toBe(25)
})
})
單測(cè)的代碼寫好后凯砍，就可以使用 karma start 來運(yùn)行單元測(cè)試。由于我們的乘法代碼中有錯(cuò)誤拴竹，因此測(cè)試結(jié)果是這樣的：
myKarmDemo karma start
29 10 2017 22:21:56.283:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
29 10 2017 22:21:56.287:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
29 10 2017 22:21:56.294:INFO [launcher]: Starting browser PhantomJS
29 10 2017 22:21:56.549:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket 0h6boaepSUMwG7l2AAAA with id 44948955
PhantomJS 2.1.1 (Linux 0.0.0) 運(yùn)算功能單元測(cè)試 乘法函數(shù)測(cè)試 FAILED
Expected 26 to be 25.
test/index.spec.js:9:31
PhantomJS 2.1.1 (Linux 0.0.0): Executed 2 of 2 (1 FAILED) (0.048 secs / 0.002 secs)
將乘法函數(shù)的代碼改為正常悟衩，再次啟用 karma start 進(jìn)行測(cè)試：
29 10 2017 22:23:08.670:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
29 10 2017 22:23:08.673:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
29 10 2017 22:23:08.685:INFO [launcher]: Starting browser PhantomJS
29 10 2017 22:23:08.940:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket pl_pZDcAK4rBTpr0AAAA with id 40770640
PhantomJS 2.1.1 (Linux 0.0.0): Executed 2 of 2 SUCCESS (0.045 secs / 0.001 secs)
對(duì)了，如果使用 PhantomJS 作為代碼的運(yùn)行環(huán)境栓拜，其對(duì)于 ES6 的支持性不是太好座泳，我在代碼中使用了箭頭函數(shù)惠昔，在運(yùn)行時(shí)就報(bào)錯(cuò)了。為了解決這個(gè)問題挑势，你可以使用 Chrome 或其他瀏覽器進(jìn)行測(cè)試镇防，也需要安裝相應(yīng)的 launcher，如果你使用 Chrome 瀏覽器測(cè)試潮饱，需要安裝 karma-chrome-launcher 插件来氧。
或者，你可以使用 Babel 等工具對(duì)代碼進(jìn)行轉(zhuǎn)碼后進(jìn)行測(cè)試香拉。
使用 PhantomJS 的好處在于其是一個(gè)無界面的瀏覽器運(yùn)行環(huán)境啦扬，可以跑在命令行環(huán)境中，在某些沒有 Chrome 等瀏覽器服務(wù)器環(huán)境下比較好用缕溉，方便代碼驗(yàn)收和集成考传。
對(duì)于 Karma 的介紹就到這里了，本文只是對(duì) Karma 的安裝和使用進(jìn)行了簡(jiǎn)單的介紹证鸥，權(quán)當(dāng)拋磚引玉僚楞，至于更多的用法，您可以再進(jìn)行研究枉层。
完泉褐。
