1. 關於Karmajavascript
2. Karma集成Jasmine進行單元測試
a.初始化 NPMhtml
實現初始化 NPM 包管理,建立 package.json 項目管理文件。
使用參數 -y 直接按照默認值建立 packgae.json 項目管理文件。
java
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 文件已經建立了。node
b.安裝 Karma
如今,能夠直接使用 NPM 來安裝 karma。
i 是 install 命令的縮寫,-D 是 --save-dev 的縮寫。git
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 了。 github
>node ./node_modules/karma/bin/karma
c.爲了能在命令行直接執行 karma 命令,咱們再安裝一個 karma-cli.
-g 表示全局安裝,這樣能夠在系統的任何文件夾中直接執行 karma 命令。
chrome
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 來啓動測試了,首先檢查一下當前的版本。npm
PS C:\study\mykarma> karma --version Karma version: 0.13.21 PS C:\study\mykarma>
祝賀你, 基本的 Karma 已經安裝成功了。json
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. 代碼覆蓋率效果圖: