安裝和使用Karma-Jasmine進行自動化測試
註意：本文中出現的資料鏈接、karma的插件安裝等，均可能需要翻$墻後才能正確執行。
Jasmine是一個Javascript的測試工具，在Karma上運行Jasmine可完成Javascript的自動化測試、生成覆蓋率報告等。本文不包含Jasmine的使用細節，這幾天我會寫一篇Jasmine的入門文章，有興趣的朋友到時候可以看一下。
步驟一：安裝Node.JS
Karma是運行在Node.js之上的，因此我們首先要安裝Node.js。到 https://nodejs.org/download/ 下載你系統所需的NodeJS版本，我下載的是windows-64位的msi版。
下載之後，雙擊 node-v0.12.4-x64.msi 運行並安裝，這個就不贅述了， 不斷下一步即可， 當然最好將目錄改一下。
圖1（選擇安裝內容，默認即可）：
步驟二：安裝Karma
運行Node.js的命令行程序：Node.js command prompt：
圖2（處於“開始->所有程序->Node.js”中）：
圖3（我們將安裝到E:\Karma路徑下）：
輸入命令安裝Karma：
npm install karma --save-dev
圖4（Karma安裝完畢後）：
步驟三：安裝karma-jasmine/karma-chrome-launcher插件
繼續輸入npm命令安裝karma-jasmine、karma-chrome-launcher插件：
npm install karma-jasmine karma-chrome-launcher --save-dev
圖5（karma-jasmine、karma-chrome-launcher安裝完畢之後）：
步驟四：安裝karma-cli
karma-cli用來簡化karma的調用，安裝命令如下，其中-g表示全局參數，這樣今後可以非常方便的使用karma了：
npm install -g karma-cli
圖6（karma-cli安裝完畢之後）：
Karma-Jasmine安裝完畢：
圖7（安裝完畢後，在E:\Karma文件夾下會有一個node_modules目錄，裏面包含剛才安裝的karma、karma-jasmine、karma-chrome-launcher目錄，當然還包含了jasmine-core目錄）：
開啟Karma：
輸入命令：
karma start
圖8（運行後如圖所示出現了一行INFO信息，並沒有其他提示和動作，因為此時我們沒有配置karma的啟動參數。後面會加入karma.conf.js，這樣karma就會自動啟動瀏覽器並執行測試用例了）：
圖9（手動打開Chrome，輸入localhost:9876，如果看到這個頁面，證明已經安裝成功）：
Karma+Jasmine配置：
執行命令init命令進行配置：
karma init
圖10（所有默認配置問題）：
說明：
1. 測試框架：我們當然選jasmine
2. 是否添加Require.js插件
3. 選擇瀏覽器： 我們選Chrome
4. 測試文件路徑設置，文件可以使用通配符匹配，比如*.js匹配指定目錄下所有的js文件（實際操作中發現該路徑是karma.conf.js文件的相對路徑，詳見下面我給出的實際測試配置及說明）
5. 在測試文件路徑下，需要排除的文件
6. 是否允許Karma監測文件，yes表示當測試路徑下的文件變化時，Karma會自動測試
我在虛擬機上測試的例子：
圖11（TestFiles和NodeJS處於E盤根目錄下，karma.conf.js處於文件夾NodeJS的根目錄下）：
以下是karma.conf.js的完整內容：
1 // Karma configuration
2 // Generated on Fri May 29 2015 19:30:26 GMT+0800 (中國標準時間)
3
4 module.exports = function(config) {
5 config.set({
6
7 // base path that will be used to resolve all patterns (eg. files, exclude)
8 basePath: ‘../TestFiles‘,
9
10
11 // frameworks to use
12 // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
13 frameworks: [‘jasmine‘],
14
15
16 // list of files / patterns to load in the browser
17 files: [
18 ‘*.js‘
19 ],
20
21
22 // list of files to exclude
23 exclude: [
24 ],
25
26
27 // preprocess matching files before serving them to the browser
28 // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
29 preprocessors: {
30 },
31
32
33 // test results reporter to use
34 // possible values: ‘dots‘, ‘progress‘
35 // available reporters: https://npmjs.org/browse/keyword/karma-reporter
36 reporters: [‘progress‘],
37
38
39 // web server port
40 port: 9876,
41
42
43 // enable / disable colors in the output (reporters and logs)
44 colors: true,
45
46
47 // level of logging
48 // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
49 logLevel: config.LOG_INFO,
50
51
52 // enable / disable watching file and executing tests whenever any file changes
53 autoWatch: true,
54
55
56 // start these browsers
57 // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
58 browsers: [‘Chrome‘],
59
60
61 // Continuous Integration mode
62 // if true, Karma captures browsers, runs the tests and exits
63 singleRun: false
64 });
65 };
說明：
若所有測試文件均處於同一個目錄下，我們可以設置basePath（也是相對於karma.conf.js文件的相對路徑），然後指定files，此時files則為basePath目錄下的文件相對路徑；
當然你也可以不設置basePath，直接使用相對於karma.conf.js文件的文件相對路徑，如本例中，我們若保持basePath默認為空，則files配置應為：
files: [
‘../TestFiles/jasmineTest.js‘,
‘../TestFiles/test.js‘
]
test.js內容：
function TT() {
return "abc";
}
jasmineTest.js內容：
describe("A suite of basic functions", function () {
it("test", function () {
expect("abc").toEqual(TT());
});
});
啟動Karma：
karma start karma.conf.js
由於這次加上了配置文件karma.conf.js，因此Karma會按照配置文件中指定的參數執行操作了，由於我們配置的是在Chrome中測試，因此Karma會自動啟動Chrome實例，並運行測試用例：
圖12（左側的Chrome是Karma自動啟動的，右側的Node.js command prompt窗口中，最後一行顯示了執行結果）：
圖13（如果我們點擊圖12中的debug按鈕，進入debug.html並按F12打開開發者工具，選擇Console窗口，我們將能看到jasmine的執行日誌）：
若此時，我們將jasmineTest.js中對於調用TT方法的期望值改為"abcd"（實際為"abc"）：
describe("A suite of basic functions", function () {
it("test", function () {
expect("abcd").toEqual(TT());
});
});
由於我們在karma.conf.js中設置了autoWatch為true：
autoWatch: true
Karma將自動執行測試用例，由於本例測試用例未通過，因此在屏幕上打印出了錯誤信息，Chrome的Console窗口中的日誌信息需要刷新debug.html後顯示。
圖14（Karma自動檢測到文件變化並自動重新執行了測試用例）：
代碼覆蓋率：
如果你還想查看測試的代碼覆蓋率，我們可以安裝karma-coverage插件，安裝命令為：
npm install karma-coverage
圖15（安裝karma-coverage的過程）：
修改karma.conf.js，增加覆蓋率的配置：
圖16（主要是變動了以下三個配置節點，其他的配置內容不變）：
1 // preprocess matching files before serving them to the browser
2 // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
3 preprocessors: {
4 ‘../TestFiles/test.js‘:‘coverage‘
5 },
6
7
8 // test results reporter to use
9 // possible values: ‘dots‘, ‘progress‘
10 // available reporters: https://npmjs.org/browse/keyword/karma-reporter
11 reporters: [‘progress‘,‘coverage‘],
12
13 coverageReporter:{
14 type:‘html‘,
15 dir:‘../TestFiles/coverage/‘
16 },
變動如下：
- 在reporters中增加coverage
- preprocessors中指定js文件
- 添加coverageReporter節點，將覆蓋率報告類型type設置為html，輸入目錄dir指定到你希望的目錄中
此時完整的karma.conf.js如下：
1 // Karma configuration
2 // Generated on Fri May 29 2015 19:30:26 GMT+0800 (中國標準時間)
3
4 module.exports = function(config) {
5 config.set({
6
7 // base path that will be used to resolve all patterns (eg. files, exclude)
8 basePath: ‘‘,
9
10
11 // frameworks to use
12 // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
13 frameworks: [‘jasmine‘],
14
15
16 // list of files / patterns to load in the browser
17 files: [
18 ‘../TestFiles/jasmineTest.js‘,
19 ‘../TestFiles/test.js‘
20 ],
21
22
23 // list of files to exclude
24 exclude: [
25 ],
26
27
28 // preprocess matching files before serving them to the browser
29 // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
30 preprocessors: {
31 ‘../TestFiles/test.js‘:‘coverage‘
32 },
33
34
35 // test results reporter to use
36 // possible values: ‘dots‘, ‘progress‘
37 // available reporters: https://npmjs.org/browse/keyword/karma-reporter
38 reporters: [‘progress‘,‘coverage‘],
39
40 coverageReporter:{
41 type:‘html‘,
42 dir:‘../TestFiles/coverage/‘
43 },
44
45
46 // web server port
47 port: 9876,
48
49
50 // enable / disable colors in the output (reporters and logs)
51 colors: true,
52
53
54 // level of logging
55 // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
56 logLevel: config.LOG_INFO,
57
58
59 // enable / disable watching file and executing tests whenever any file changes
60 autoWatch: true,
61
62
63 // start these browsers
64 // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
65 browsers: [‘Chrome‘],
66
67
68 // Continuous Integration mode
69 // if true, Karma captures browsers, runs the tests and exits
70 singleRun: false
71 });
72 };
View Code
執行命令：
karma start karma.conf.js
圖17（執行命令後，在配置文件coverageReporter節點中指定的dir中，我們將找到生成的覆蓋率報告，karma-coverage還生成了一層子文件夾，對應於執行測試的瀏覽器+版本號+操作系統版本）：
安裝和使用Karma-Jasmine進行自動化測試