單元測試工具 - karma

在離開上一家公司以前，team leader 在我離開前留給了我最後幾個關鍵字：karma，斷言庫，JASMINE，QUNIT，MOCHA。

可一直拖拖沓沓的，沒有去了解。直到今天，才終於抽出心情和時間來研究它。

在文章開始以前，首先對前 team leader — 滿爺 表示感激。

雖然你不是我所見過的最優秀的前端，但你是我所見的最樂意與小夥伴share經驗心得的 team leader。

OK，言歸正傳，開始主題...

 

關於karma

Karma是一個基於Node.js的JavaScript測試執行過程管理工具（Test Runner）。

該工具可用於測試全部主流Web瀏覽器，也可集成到CI（Continuous integration）工具，也可和其餘代碼編輯器一塊兒使用。

這個測試工具的一個強大特性就是，它能夠監控(Watch)文件的變化，而後自行執行，經過console.log顯示測試結果。

 

karma的安裝

這裏我默認看本文的人都對node.js有必定的瞭解了，再也不對node.js運行環境的搭建細節囉嗦了。

若是你實在對node.js瞭解不深，或者能夠先去看看個人另外一文——grunt學習筆記。

裏面有提到關於node.js環境搭建的小細節，地址：http://www.cnblogs.com/czf-zone/p/3649657.html

ok，繼續迴歸正題。

 

安裝步驟：

1.安裝node.js

 

2.全局安裝karma

npm install -g karma

PS：安裝好karma後，會自動安裝好一個斷言庫——JASMINE。既然karma這麼友好的幫咱們準備了一個斷言庫，那咱們就直接拿它來進行單元測試唄。

 

3.打開node組件全局安裝目錄 node_global ，而後在裏面建立一個txt文件，其內容以下：

@IF EXIST "%~dp0\node.exe" ( "%~dp0\node.exe"  "%~dp0\node_modules\karma\bin\karma" %* ) ELSE ( node "%~dp0\node_modules\karma\bin\karma" %* )

保存，而後將這個txt文件連同拓展名一併重命名爲 karma.cmd

PS：網上不少無責任轉載的文章，都漏了這一步，在此森森的BS之，你特麼轉文章的時候，就不能先實踐下麼？ 

 

4.打開命令行工具，執行：

karma start 

出現服務啓動成功的提示，說明安裝成功了。

 

karma配置

關於配置，網絡上其實有一些文章也有提到，但說得不夠詳細，沒有站在讀者的角度去寫。

最明顯的就是整個配置過程，目錄結構是怎樣的，徹底是隻字不提...

因此我對本身說，要麼直接轉載別人的文章，要麼本身寫一篇，而後把配置的細節補上。

so...這裏我用我本身的一個練習小項目來舉例，一步步說說個人配置過程，拿實例說話。

PS：項目中會用到 grunt 等一些東西，請自行忽略，咱們只關心karma，OK？

上面就是大概目錄了。咱們要關注的點有：

baseCls.min.js - 經過編譯後生成的基類庫js文件，也是我要測試的目標文件。

karma目錄 - 爲了使用 karma 單元測試工具而建的一個目錄，裏面存放 karma 配置文件和測試腳本。

karma.config.js - karma配置文件

FuncDelayer_Test.js - FuncDelayer類的測試腳本（看過我以前文章的應該知道FuncDelayer是啥東東了，JS函數延遲器）

 

關於karma.config.js，能夠在karma目錄下運行命令行工具，而後執行命令

karma init

而後不停的回車，就會生成一個karma.conf.js文件（你沒看錯，就是karma.conf.js）

這和我所說的karma.config.js內容上沒什麼區別，只是出於我的習慣，我把它重命名了而已。

固然你也能夠直接手動建立，它其實就是一JS文件，怎麼建立都不要緊，只要確保裏面的內容是無誤就OK了。

用命令行工具生成配置文件的話，有一個好處，就是裏面帶有很豐富的註釋，對新手頗有幫助（不過是英文的，鳥語很差的少年請自備翻譯工具...）

配置文件的內容大概以下：

module.exports = function(config) { config.set({ basePath: '', 　　　　 //basePath 相對目錄，這裏若是填了，files和exclude裏的文件路徑都會相對於它
        frameworks: ['jasmine'], 　　　　 //frameworks 須要用到的斷言庫，這裏咱們只用jsamine
        files: ['*.js', './../baseCls.min.js'], 　　　　 //files 測試時，瀏覽器須要加載的文件list
        exclude: ['karma.config.js'], 　　　　 //exclude 測試時，瀏覽器會忽略掉這個list裏面的文件，不加載它們
 preprocessors: {}, reporters: ['progress'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['IE'], 　　　　 //browsers 測試瀏覽器，有IE，Chrome，ChromeCanary，FireFox，Opera，Safari，PhantomJS
        singleRun: false }); }; //默認狀況下（沒設置basePath），裏面全部的路徑，其實都是相對於 karma.config.js 的所在目錄，也就是karma目錄 //若是設置了 basePath，那 basePath 就是相對於 karma.config.js 的所在目錄（karma目錄），而 files 和 exclude 裏的路徑則相對於 basePath
 //由於我要測試baseCls.min.js，因此個人files列表裏，包含了它以及全部相關的測試腳本

 

測試腳本的編寫

首先，咱們看一下上面提到過的 FuncDelayer_Test.js

describe("class FuncDelayer test", function() { it("class FuncDelayer has defined", function(){ expect(FuncDelayer).toBeDefined(); 　　　　 //這行代碼是斷言 
 }); it("FuncDelayer object work part 1", function(){ var funcDelayer = new FuncDelayer(), str; funcDelayer.push('conditionA', function(){ str = 'success'; }); funcDelayer.pop('conditionA'); expect(str).toEqual('success'); 　　　　 //這行代碼是斷言
 }); }); 

上面的代碼，大概意思是:

開啓了一項測試（class FuncDelayer test），測試中作了兩件事（class FuncDelayer has defined 和 FuncDelayer object work part 1）

在第一件事裏，測試 FuncDelayer 類是否存在

在第二件事裏，新建一個 funcDelayer 對象，註冊一個延遲執行的函數（該函數會對 str 變量賦值爲 'success'），再立刻手動觸發該函數對應的觸發條件，而後，測試 str 的值是否如同預期般等於 'success'

上面的描述純粹是個人我的理解，用的是我的語言組織，可能和官方的解釋不一樣。

這裏我想說，每一個人有每一個人的學習和理解方式，就比如土豆，有些人喜歡稱它馬鈴薯，有些人則喜歡通俗的稱它爲土豆。

能理解意思就好，別執着於說法是否官方，如今不是面試，更不是考試，是學習。

注意到上面的測試代碼裏的兩處註釋了麼？

斷言，意思就是「某一事物應該是這樣的」。

用來測試某段代碼後的執行結果是否符合預期，若是符合，測試經過，代碼沒問題。

不然，就是代碼出問題了，請檢查代碼並將問題修復。

斷言的寫法，跟斷言庫有關係，例子中的斷言是基於 jasmine 斷言庫的斷言。

下面列舉一些 jasmine 斷言，方便理解和查閱。

expect(x).toEqual(y); //比較x和y是否相等
expect(x).not.toEqual(y); //比較x和y是否不相等
expect(x).toBe(y); //比較x和y是不是相同的對象
expect(x).toMatch(pattern); //比較x是否匹配pattern正則
expect(x).toBeDefined(); //x是否爲undefined
expect(x).toBeNull(); //x是否爲null
expect(x).toBeTruthy(); //x是否爲true
expect(x).toBeFalsy(); //x是否爲false
expect(x).toContain(y); //x是否包含y (x能夠是字符串或數組)
expect(x).toBeLessThan(y); //x是否比y小
expect(x).toBeGreaterThan(y); //x是否比y大
expect(fn).toThrow(e); //函數是否拋出異常

上面所列的只是一些經常使用的斷言，jasmine斷言庫的做用遠不止這些，更多的細節資料，還得靠本身耐心查找了。

還有其餘的斷言庫也是如此，不可能一一細述，有了key word，後面就要看本身的悟性和努力了。

 

開始測試

在項目的karma目錄下運行命令行工具，而後執行下面命令：

karma start karma.config.js

PS：最後面的部分實際上就是配置文件的文件名，由於我改爲了 karma.config.js ，因此~~

命令執行後，就開啓測試了，根據裏配置文件裏的配置，會啓動對應的瀏覽器。

這個時候，只要你修改測試腳本，並保存後，都會自動執行單元測試。由於咱們把 autoWatch 設置爲 true 了。

karma 在啓動時 chrome 瀏覽器可能沒法自動啓動，這時候須要增長一個環境變量 CHROME_BIN 值爲chome.exe的安裝目錄。

如：C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

 

karma 和 webstorm 搭配使用

爲何選karma，爲何選webstorm，由於它們在一塊兒啊在一塊兒。

當兩個好東東偶遇，你選它們的理由，會讓你的選擇變得堅決且欲罷不能。

在說如何設置以前，我默認你已經看完前面的內容，並安裝了 webstorm 8.0 以上版本。

首先，file — settings — External Tools 添加：

Name - 填測試服務名稱，隨便填也不要緊

Program - 填karma的全局安裝目錄

Parameters - 直接填 start 便可

Working directory - 直接填 $FileDir$ 便可

 

而後，設置 webstorm 的內置測試組件設置

 

Node interPreter - node.exe的所在路徑

Karma node package - karma的全局安裝目錄

Configuration file - karma配置文件所在路徑

 

都設置好後，點擊IDE的右上角的那個綠色三角按鈕，就能開始進行測試，IDE的下方會出現以下工具版面：

最左側的那一列按鈕的第二個，是開啓測試文件變動監聽的。開啓後，修改測試文件並保存，就能自動觸發測試了。

但自動觸發測試的效率明顯沒有命令行工具快，具體用哪種方式就見仁見智了。