這篇文章主要介紹了angularJS中的單元測試實例,本文主要介紹利用Karma和Jasmine來進行ng模塊的單元測試,並用Istanbul 來生成代碼覆蓋率測試報告,需要的朋友們可以參考下,以下可全都是干貨哦！
當ng項目越來越大的時候,單元測試就要提上日程了,有的時候團隊是以測試先行,有的是先實現功能,后面再測試功能模塊,這個各有利弊,今天主要說說利用karma和jasmine來進行ng模塊的單元測試.
一、Karma+Jasmine+ Istanbul
Karma是Testacular的新名字,在2012年google開源了Testacular,2013年Testacular改名為Karma.Karma是一個讓人感到非常神秘的名字,表示佛教中的緣分,因果報應,比Cassandra這種名字更讓人猜不透！
Karma是一個基於Node.js的JavaScript測試執行過程管理工具（Test Runner）.該工具可用於測試所有主流Web瀏覽器,也可集成到CI（Continuous integration）工具,也可和其他代碼編輯器一起使用.這個測試工具的一個強大特性就是,它可以監控(Watch)文件的變化,然后自行執行,通過console.log顯示測試結果.
Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
上面是Jasmine官網對其的解釋,中文意思是：Jasmine是一個用於JS代碼測試的行為驅動開發的框架,它不依賴於任何其他的JS框架以及DOM,是一個簡潔及友好的API測試庫.
Istanbul是JavaScript程序的代碼覆蓋率工具,它是以土耳其最大城市伊斯坦布爾命名,因為土耳其地毯世界聞名,而地毯是用來覆蓋的.
二、Karma的安裝
安裝測試相關的npm模塊建議使用—save-dev命令,因為這是開發相關的,一般情況下使用以下兩個命令即可：
npm install karma –save-dev
檢測karma安裝是否成功（如下表示安裝成功）：
安裝karma時會自動安裝一些常用的模塊,參考karma代碼里的package.json文件的devDependencies屬性：
然后使用命令生成配置文件,該配置文件是nodejs風格的：
命令：karma init
輸入命令后根據提示,使用“tab”切換選項和“enter”下一步即可,生成的配置文件格式如下：
以上便是karma配置文件的基本內容.
四、Karma+Jasmine配置
1、安裝karma-jasmine:
使用命令 : npm install karma-jasmine --save-dev 安裝
2、jasmine的語法：
以下為一個jasmine的例子：
上面是一個jasmine的例子,這里就幾個重要的API做一下介紹：
1.首先任何一個測試用例以describe函數來定義,它有兩參數,第一個用來描述測試大體的中心內容,第二個參數是一個函數,里面寫一些真實的測試代碼
2.it是用來定義單個具體測試任務,也有兩個參數,第一個用來描述測試內容,第二個參數是一個函數,里面存放一些測試方法
3.expect主要用來計算一個變量或者一個表達式的值,然后用來跟期望的值比較或者做一些其它的事件
4.beforeEach與afterEach主要是用來在執行測試任務之前和之后做一些事情,上面的例子就是在執行之前改變變量的值,然后在執行完成之后重置變量的值
最后要說的是,describe函數里的作用域跟普通JS一樣都是可以在里面的子函數里訪問的,就像上面的it訪問foo變量,更多的API請 點擊這里 .
五、ng的單元測試
因為ng本身框架的原因,模塊都是通過DI(Dependency Injection依賴注入)來加載以及實例化的,所以為了方便配合jasmine來編寫測試腳本,所以官方提供了angular-mock.js的一個測試工具類來提供模塊定義,加載,注入等.
下面說說ng-mock里的一些常用方法
1.angular.mock.module 此方法同樣在window命名空間下,非常方便調用module是用來配置inject方法注入的模塊信息,參數可以是字符串,函數,對象,可以像下面這樣使用,代碼如下:
它一般用在beforeEach方法里,因為這個可以確保在執行測試任務的時候,inject方法可以獲取到模塊配置
2.angular.mock.inject 此方法同樣在window命名空間下,非常方便調用inject是用來注入上面配置好的ng模塊,方面在it的測試函數里調用,常見的調用例子如下:
上面是官方提供的一些inject例子,代碼很好看懂,其實inject里面就是利用angular.inject方法創建的一個內置的依賴注入實例,然后里面的模塊注入跟普通ng模塊里的依賴處理是一樣的.
簡單的介紹完ng-mock之后,下面我們分別以控制器,指令,過濾器來編寫一個簡單的單元測試.
3、ng里控制器的單元測試
定義一個簡單的控制器, 代碼如下:
然后我們編寫一個測試腳本,代碼如下:
上面利用了$rootScope來創建子作用域,然后把這個參數傳進控制器的構建方法$controller里去,最終會執行上面的控制器里的方法,然后我們檢查子作用域里的對象屬性是否跟期望值相等.
4、ng里指令的單元測試
定義一個簡單的指令,代碼如下:
然后我們編寫一個簡單的測試腳本,代碼如下:
上面的指令將會這用在html里使用,代碼如下:
測試腳本里首先注入$compile與$rootScope兩個服務,一個用來編譯html,一個用來創建作用域用,注意這里的_,默認ng里注入的服務前后加上_時,最后會被ng處理掉的,這兩個服務保存在內部的兩個變量里,方便下面的測試用例能調用到$compile方法傳入原指令html,然后在返回的函數里傳入$rootScope,這樣就完成了作用域與視圖的綁定,最后調用$rootScope.$digest來觸發所有監聽,保證視圖里的模型內容得到更新,然后獲取當前指令對應元素的html內容與期望值進行對比.
5、ng里的過濾器單元測試
定義一個簡單的過濾器,代碼如下:
然后編寫一個簡單的測試腳本,代碼如下:
上面的代碼先配置過濾器模塊,然后定義一個version值,因為interpolate依賴這個服務,最后用inject注入interpolate過濾器,注意這里的過濾器后面得加上Filter后綴,最后傳入文本內容到過濾器函數里執行,與期望值進行對比.
最終上面的被測試文件IndexCtrl.js代碼如下：
測試腳本IndexCtrlTest.js代碼如下：
六、運行
輸入命令： karma start karma.conf.js 啟動,測試結果如下：
七、Karma+Istanbul 生成代碼覆蓋率
安裝istanbul依賴：npm install –g karma-coverage
修改karma.conf.js配置：
啟動karma,在工程目錄下找到coverage文件夾,生成的覆蓋率文件都包含在該文件夾中,在瀏覽器中打開“coverage/index.html”文件,可看到生成的代碼覆蓋率報告：
覆蓋率是100%,說明我們完整了測試了IndexCtrl.js的功能.
現在我們在filter中加入一個if分支,代碼如下：
再看代碼覆蓋率報告,如下所示：
Statements：85.71%覆蓋,Branches：50%覆蓋.
為了產品的質量我們要盡量達到更多的覆蓋率,一般對於JAVA項目來說,能達到80%就是相當高的標准了.對於Javascript的代碼測試及覆蓋率研究,我還要做更多的驗證.
PS:希望廣大讀者朋友批評指證,如需轉載請注明出處.