Karma +Jasmine+ require JS進行單元測試並生成測試報告、代碼覆蓋率報告

1. 關於Karma

• Karma是一個基於Node.js的JavaScript測試執行過程管理工具（Test Runner）。
• 該工具可用於測試全部主流Web瀏覽器，也可集成到CI（Continuous integration）。
• 這個測試工具的一個強大特性就是，它能夠監控(Watch)文件的變化，而後自行執行，經過console.log顯示測試結果。

2. Karma集成Jasmine進行單元測試

a.初始化 NPM

實現初始化 NPM 包管理，建立 package.json 項目管理文件。
使用參數 -y 直接按照默認值建立 packgae.json 項目管理文件。

PS C:\study\mykarma> npm init -y
Wrote to C:\study\mykarma\package.json:

{
"name": "mykarma",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

如今，能夠在項目文件夾中看到 package.json 文件已經建立了。

b.安裝 Karma
如今，能夠直接使用 NPM 來安裝 karma。
i 是 install 命令的縮寫，-D 是 --save-dev 的縮寫。

PS C:\study\mykarma> npm i -D karma
npm WARN package.json mykarma@1.0.0 No description
npm WARN package.json mykarma@1.0.0 No repository field.
npm WARN package.json mykarma@1.0.0 No README data
npm WARN optional dep failed, continuing fsevents@1.0.7
karma@0.13.21 node_modules\karma
├── batch@0.5.3
├── di@0.0.1
├── graceful-fs@4.1.3
├── rimraf@2.5.2
├── mime@1.3.4
├── colors@1.1.2
├── source-map@0.5.3
├── isbinaryfile@3.0.0
├── bluebird@2.10.2
├── dom-serialize@2.2.1 (custom-event@1.0.0, void-elements@2.0.1, extend@3.0.0, ent@2.2.0)
├── http-proxy@1.13.2 (eventemitter3@1.1.1, requires-port@1.0.0)
├── optimist@0.6.1 (wordwrap@0.0.3, minimist@0.0.10)
├── glob@7.0.0 (path-is-absolute@1.0.0, inherits@2.0.1, once@1.3.3, inflight@1.0.4)
├── useragent@2.1.8 (lru-cache@2.2.4)
├── minimatch@3.0.0 (brace-expansion@1.1.3)
├── lodash@3.10.1
├── expand-braces@0.1.2 (array-unique@0.2.1, array-slice@0.2.3, braces@0.1.5)
├── log4js@0.6.31 (semver@4.3.6, readable-stream@1.0.33)
├── connect@3.4.1 (utils-merge@1.0.0, parseurl@1.3.1, debug@2.2.0, finalhandler@0.4.1)
├── core-js@2.1.0
├── body-parser@1.15.0 (content-type@1.0.1, bytes@2.2.0, depd@1.1.0, raw-body@2.1.5, debug@2.2.0, qs@6.1.0, iconv-lite@0.4.13, http-errors@1.4.0, on-finished@2.3.0, type-is@1.6.11)
├── socket.io@1.4.5 (debug@2.2.0, has-binary@0.1.7, socket.io-parser@2.2.6, socket.io-adapter@0.4.0, engine.io@1.6.8, socket.io-client@1.4.5)
└── chokidar@1.4.2 (path-is-absolute@1.0.0, inherits@2.0.1, async-each@0.1.6, glob-parent@2.0.0, is-binary-path@1.0.1, is-glob@2.0.1, readdirp@2.0.0, anymatch@1.3.0)

PS C:\study\mykarma>

如今咱們可使用 node 來運行 karma  了。 

>node ./node_modules/karma/bin/karma

　

c.爲了能在命令行直接執行 karma 命令，咱們再安裝一個 karma-cli.
-g 表示全局安裝，這樣能夠在系統的任何文件夾中直接執行 karma 命令。

PS C:\study\mykarma> npm i -g karma-cli
C:\Users\XXX\AppData\Roaming\npm\karma -> C:\Users\XXX\AppData\Roaming\npm\node_modules\karma-cli\bin\karma 
karma-cli@0.1.2 C:\Users\guanjun\AppData\Roaming\npm\node_modules\karma-cli
└── resolve@1.1.7

 

安裝以後，能夠直接使用 karma 來啓動測試了，首先檢查一下當前的版本。

PS C:\study\mykarma> karma --version
Karma version: 0.13.21
PS C:\study\mykarma>

祝賀你， 基本的 Karma 已經安裝成功了。

 

d. 安裝 Jasmine 和 chrome-launcher
咱們使用 Karma 來驅動單元測試，因此只有 Karma 是不行的，還須要安裝單元測試庫以便運行測試腳本，安裝測試庫與 Karma 的適配器，還有各類瀏覽器的適配器。
這裏咱們安裝 Jasmine 的測試支持和 chrome 瀏覽器的適配器。
對於 jasmine 來講，咱們須要 Jasmine 的適配器，還必須有 jasmine-core 庫。
karma-chrome-launcher 則提供了 karma 與 chrome 的適配器。

PS C:\study\mykarma> npm i -D jasmine-core karma-jasmine karma-chrome-launcher
npm WARN package.json mykarma@1.0.0 No description
npm WARN package.json mykarma@1.0.0 No repository field.
npm WARN package.json mykarma@1.0.0 No README data
npm WARN peerDependencies The peer dependency jasmine-core@* included from karma-jasmine will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
jasmine-core@2.4.1 node_modules\jasmine-core

karma-jasmine@0.3.7 node_modules\karma-jasmine

karma-chrome-launcher@0.2.2 node_modules\karma-chrome-launcher
├── fs-access@1.0.0 (null-check@1.0.0)
└── which@1.2.4 (isexe@1.1.2, is-absolute@0.1.7)

如今涉及單元測試的基本工具已經安裝就緒了。

e.Karma 的命令
karma 支持三個命令。
• start [<configFile>] [<options>] 啓動 Karma 持續執行，也能夠執行單次的測試，而後直接收集測試結果.
• init [<configFile>] 初始化配置文件.
• run [<options>] [ -- <clientArgs>] Trigger a test run. 
建立 karma 配置文件
Karma 須要進行配置，配置文件比較複雜，可使用 karma 提供的 init 命令來直接建立基礎的配置文件。在處理過程當中，咱們可使用交互方式提供測試的信息，Karma 根據這些信息生成一個基本的配置文件。配置文件的默認名稱是 karma.conf.js。若是你提供了配置文件的名稱，karma 會將配置信息寫入到你提供的文件名中。
建立 Karma 配置文件

 

PS C:\study\mykarma> 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 qu
ion.
> Chrome
>

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.
> src/**/*.js
02 2016 22:32:26.698:WARN [init]: There is no file matching this pattern.

> test/**/*.spec.js
02 2016 22:33:26.513:WARN [init]: There is no file matching this pattern.

>

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.
> yes


Config file generated at "C:\study\mykarma\karma.conf.js".

PS C:\study\mykarma>

 因爲咱們沒有提供配置文件名稱，這裏生成的是默認的配置文件 karma.conf.js 。

f. 啓動 Karma
因爲已經有了 karma 配置文件，如今可使用 karma start 啓動 karma 了，因爲尚未測試，因此看不到測試結果是正常的。
須要注意的是 karma 配置中的 singleRun 這個參數，設置爲 false 的話，karma 會自動監控測試環境，默認是 Chrome, 若是你關掉了，karma 會自動從新啓動一個。若是配置爲 true，執行一次測試以後，karma 會自動停掉。
在 singleRun 爲 false 的狀況下，執行的結果多是這樣的。

PS C:\study\mykarma> karma start
22 02 2016 10:54:11.796:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/
22 02 2016 10:54:11.806:INFO [launcher]: Starting browser Chrome
22 02 2016 10:54:13.206:INFO [Chrome 47.0.2526 (Windows 7 0.0.0)]: Connected on socket /#rbiYFxG0uTVJxpVoAAAA with id 13601272

 

g.單元測試

如今咱們可使用 Jasmine 開始寫測試了。
在項目文件夾中，建立一個名爲 test 的子文件夾來保存測試用例。而後在 test 文件夾中建立一個 unit 的文件夾來保存單元測試用例。
在這個文件夾中建立一個名爲 hello.spec.js 的測試文件。
通常來講，咱們會爲測試用例的文件名稱提供一個特定的模式，以便對測試用例進行統一處理，這裏咱們約定測試用例的文件名以 .spec.js 爲結尾。
hello.spec.js

describe('hello, unit test.', function(){
it('should also be able to test', function(){
expect(true).toBe(true);
});

it('should be failed', function(){
expect(true).toBe(false);
})
});

 

這個測試包含了兩個測試用例，一個必定成功，一個必定失敗。
確認在咱們 karma 的配置文件中，包含了咱們的測試用例。

// list of files / patterns to load in the browser
files: [
'test/**/*.spec.js'
],

 

如今，使用 karma start 啓動測試，在控制檯應該會看到以下的輸出。

PS C:\study\mykarma> karma start
02 2016 11:09:31.137:WARN [karma]: No captured browser, open http://localhost:9876/
02 2016 11:09:31.157:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/
02 2016 11:09:31.167:INFO [launcher]: Starting browser Chrome
02 2016 11:09:32.561:INFO [Chrome 47.0.2526 (Windows 7 0.0.0)]: Connected on socket /#ymfXfb-xI2a3fZ82AAAA with id 31292195
Chrome 47.0.2526 (Windows 7 0.0.0) hello, unit test. should be failed FAILED
Expected true to be false.
at Object.<anonymous> (C:/study/mykarma/test/unit/hello.spec.js:7:20)
Chrome 47.0.2526 (Windows 7 0.0.0): Executed 2 of 2 (1 FAILED) (0.016 secs / 0.006 secs)

 

能夠看到執行了兩個測試，其中一個失敗了，失敗的測試爲 hello, unit test 中的 should be failed 測試用例。
測試實際的代碼
在項目文件夾中，建立一個名爲 src 的子文件夾來保存咱們的應用代碼，在其中建立一個名爲 add.js 的腳本文件，咱們未來測試它的工做是否正確。

function add(a, b){
return a + b;
}

 

這個腳本很是簡單，僅僅用來計算兩個數字以後，沒有任何的驗證。
而後，咱們針對它寫兩個測試用例，保存到 ./test/unit/add.spec.js 文件中。

describe('add function unit test.', function(){
it('2 + 3 = 5', function(){
var result = add( 2, 3 );
expect( result ).toBe( 5 );
});

it('2 + 3 = 6, this should faild.', function(){
var result = add( 2, 3 );
expect(result).toBe( 6 );
})
});

 

確認你的 karma 配置文件中，包含了被測試代碼和測試代碼。

// list of files / patterns to load in the browser
files: [
'src/**/*.js',
'test/**/*.spec.js'
],

 

如今的控制檯輸出應該是這樣的。

PS C:\study\mykarma> karma start
02 2016 11:22:18.800:WARN [karma]: No captured browser, open http://localhost:9876/
02 2016 11:22:18.810:INFO [karma]: Karma v0.13.21 server started at http://localhost:9876/
02 2016 11:22:18.820:INFO [launcher]: Starting browser Chrome
02 2016 11:22:20.232:INFO [Chrome 47.0.2526 (Windows 7 0.0.0)]: Connected on socket /#i6GaDaxNTy8HWL52AAAA with id 89457157
Chrome 47.0.2526 (Windows 7 0.0.0) add function unit test. 2 + 3 = 6, this should faild. FAILED
Expected 5 to be 6.
at Object.<anonymous> (C:/study/mykarma/test/unit/add.spec.js:9:24)
Chrome 47.0.2526 (Windows 7 0.0.0) hello, unit test. should be failed FAILED
Expected true to be false.
at Object.<anonymous> (C:/study/mykarma/test/unit/hello.spec.js:7:20)
Chrome 47.0.2526 (Windows 7 0.0.0): Executed 4 of 4 (2 FAILED) (0.021 secs / 0.007 secs)

祝賀你，如今你已經能夠測試你的代碼了！

若是你的應用是由一個一個獨立的函數定義出來的，如今就已經能夠進行測試了。

能夠看到，使用 Karma 集成 Jasmine 測試是很方便的組合。

3. 代碼覆蓋率(Code coverage)

karma 的插件 karma-coverage 提供了測試代碼覆蓋率的支持。
karma 的頁面：http://karma-runner.github.io/0.8/config/coverage.html 進行了說明。karma 使用 Istanbul.實現覆蓋率統計。
首先你須要安裝這個 Karma 插件，而後須要在配置文件的三個地方進行配置。

a.安裝 karma-coverage
固然了，你必須安裝這個組件才能完成覆蓋率統計。能夠看到，在安裝這個插件的時候，已經安裝了 Istanbul 。 

npm i -D karma-coverage
├─┬ karma@0.13.21
│ ├─┬ log4js@0.6.31
│ │ └── semver@4.3.6
│ └─┬ optimist@0.6.1
│ ├── minimist@0.0.10
│ └── wordwrap@0.0.3
└─┬ karma-coverage@0.5.3
├─┬ dateformat@1.0.12
│ └─┬ meow@3.7.0
│ ├── minimist@1.2.0
│ └─┬ normalize-package-data@2.3.5
│ └── semver@5.1.0
└─┬ istanbul@0.4.2
├─┬ escodegen@1.7.1
│ └─┬ optionator@0.5.0
│ └── wordwrap@0.0.3
└── wordwrap@1.0.0

 

b.配置
涉及三個配置信息，兩個是必須的，一個是可選的。
(1) 配置預處理器
這裏配置哪些文件須要統計測試覆蓋率，例如，若是你的全部代碼文件都在 lib 文件夾中，你就須要以下配置。

preprocessors = {
'**/lib/*.js': 'coverage'
};

 

注意不要包含你所依賴的庫，測試文件等等，下面就是一個錯誤的配置信息。
files = [
JASMINE,
JASMINE_ADAPTER,
'lib/*.js',
'test/*.js'
];
preprocessors = {
'**/*.js': 'coverage'
};

(2) 配置報告
在配置文件中包含下面的信息來激活覆蓋率報告器。

reporters = ['coverage'];

 

這樣將會對每一個瀏覽器建立一個覆蓋率報告，另外，它還會建立一個 Json 文件，其中包含輸出的中間數據。
配置報告選項
默認的報告格式以下：

coverageReporter = {
type : 'html',
dir : 'coverage/'
}

 

type 是一個字符串值，取值能夠是：
• html (default)
• lcov (lcov and html)
• lcovonly
• text
• text-summary
• cobertura (xml format supported by Jenkins)

 dir 則用來配置報告的輸出目錄。若是是一個相對路徑的話，將相對與 basePath 參數。
若是類型是 text 或者 text-summary，你能夠配置 file 參數來指定保存的文件名。

coverageReporter = {
type : 'text',
dir : 'coverage/',
file : 'coverage.txt'
}

若是沒有文件名，就會輸出到控制檯。

 

4.其它
a. Karma+Jasmine+ Require JS示例程序及介紹: https://github.com/kjbekkelund/karma-requirejs

 

b. 代碼覆蓋率效果圖：