AngularJs單元測試

這篇文章主要介紹了angularJS中的單元測試實例,本文主要介紹利用Karma和Jasmine來進行ng模塊的單元測試,並用Istanbul  來生成代碼覆蓋率測試報告,須要的朋友們能夠參考下,如下可全都是乾貨哦！

當ng項目愈來愈大的時候,單元測試就要提上日程了,有的時候團隊是以測試先行,有的是先實現功能,後面再測試功能模塊,這個各有利弊,今天主要說說利用karma和jasmine來進行ng模塊的單元測試.

1、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程序的代碼覆蓋率工具,它是以土耳其最大城市伊斯坦布爾命名,由於土耳其地毯世界聞名,而地毯是用來覆蓋的.

2、Karma的安裝

安裝測試相關的npm模塊建議使用—save-dev命令,由於這是開發相關的,通常狀況下使用如下兩個命令便可：

npm install  karma –save-dev

檢測karma安裝是否成功（以下表示安裝成功）：

 

安裝karma時會自動安裝一些經常使用的模塊,參考karma代碼裏的package.json文件的devDependencies屬性：

 

而後使用命令生成配置文件,該配置文件是nodejs風格的：

命令：karma init

輸入命令後根據提示,使用「tab」切換選項和「enter」下一步便可,生成的配置文件格式以下：

 

以上即是karma配置文件的基本內容.

4、Karma+Jasmine配置

一、安裝karma-jasmine:

使用命令 : npm install karma-jasmine --save-dev 安裝

二、jasmine的語法：

如下爲一個jasmine的例子：

 

上面是一個jasmine的例子,這裏就幾個重要的API作一下介紹：

1.首先任何一個測試用例以describe函數來定義,它有兩參數,第一個用來描述測試大致的中心內容,第二個參數是一個函數,裏面寫一些真實的測試代碼

2.it是用來定義單個具體測試任務,也有兩個參數,第一個用來描述測試內容,第二個參數是一個函數,裏面存放一些測試方法

3.expect主要用來計算一個變量或者一個表達式的值,而後用來跟指望的值比較或者作一些其它的事件

4.beforeEach與afterEach主要是用來在執行測試任務以前和以後作一些事情,上面的例子就是在執行以前改變變量的值,而後在執行完成以後重置變量的值

最後要說的是,describe函數裏的做用域跟普通JS同樣都是能夠在裏面的子函數裏訪問的,就像上面的it訪問foo變量,更多的API請 點擊這裏 .

5、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以後,下面咱們分別以控制器,指令,過濾器來編寫一個簡單的單元測試.

三、ng裏控制器的單元測試

定義一個簡單的控制器, 代碼以下:

 

而後咱們編寫一個測試腳本,代碼以下:

 

上面利用了$rootScope來建立子做用域,而後把這個參數傳進控制器的構建方法$controller裏去,最終會執行上面的控制器裏的方法,而後咱們檢查子做用域裏的對象屬性是否跟指望值相等.

四、ng裏指令的單元測試

定義一個簡單的指令,代碼以下:

 

而後咱們編寫一個簡單的測試腳本,代碼以下:

 

上面的指令將會這用在html裏使用,代碼以下:

 

測試腳本里首先注入$compile與$rootScope兩個服務,一個用來編譯html,一個用來建立做用域用,注意這裏的_,默認ng裏注入的服務先後加上_時,最後會被ng處理掉的,這兩個服務保存在內部的兩個變量裏,方便下面的測試用例能調用到$compile方法傳入原指令html,而後在返回的函數裏傳入$rootScope,這樣就完成了做用域與視圖的綁定,最後調用$rootScope.$digest來觸發全部監聽,保證視圖裏的模型內容獲得更新,而後獲取當前指令對應元素的html內容與指望值進行對比.

五、ng裏的過濾器單元測試

定義一個簡單的過濾器,代碼以下:

 

而後編寫一個簡單的測試腳本,代碼以下:

 

上面的代碼先配置過濾器模塊,而後定義一個version值,由於interpolate依賴這個服務,最後用inject注入interpolate過濾器,注意這裏的過濾器後面得加上Filter後綴,最後傳入文本內容到過濾器函數裏執行,與指望值進行對比.

最終上面的被測試文件IndexCtrl.js代碼以下：

 

測試腳本IndexCtrlTest.js代碼以下：

 

6、運行

輸入命令： karma start karma.conf.js 啓動,測試結果以下：

 

7、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:但願廣大讀者朋友批評指證,如需轉載請註明出處.