AngularJS 單元測試（一）詳解_AngularJS

AngularJS單元測試

網上有很多單元測試的教程，比如如何安裝jasmine和ngMock，大家可以搜一下。這裡就不在說了。下面重點介紹一個單元測試的過程。

載入一個模組

AngularJS用module來包括應用不同的部分比如controllers,services, filters。為了測試不同的部分，我們需要一個不同模組的引用，並且載入它。Angularjs模組注入使用ngMock模組。ngMock模組能夠注入服務service進入單元測試。
ngMock暴露出angular.mock.module方法，縮寫是module。

準備

需要準備的就是一個簡單的AngularJS啟動模組。

如何?

 angular.mock.module方法被用在beforeEach方法中。這個module方法需要一個模組的名字或者另外一個字面量對象來替代，將會被注入。

1、使用一個字串名字來代表模組

 beforeEach(module('services.emcees'))

2、添加字面量對象

 beforeEach(module('services.emcees',{ beatjunkies': {  'dj': 'Babu' }) })

3、現在可以在測試中使用beatjunkies引用檢索解決的對象，返回{'dj': 'Babu'}

4、最後你也可以提供一個方法，提供一個rapper引用。

 beforeEach(module('services.emcees'),{ beatjunkies': {  'dj': 'Babu' }) },function($provider){ $provider.value('rapper', 'madchild') })

寫一個測試

例如這個例子，將要開始測試一個關於更改scope值來更新內容的指令。當scope上定義的一個noclick方法觸發的時候這個值就會被分配。這需要在HTML上的按鈕觸發。

例如：

 .directive('emcee',function(){ return{  restrict:'E',  link:function(scope,element,attr){   scope.onClick=function(){    element.text('Step up ' + scope.emcee + '!')   }  } } })

具體做法

1、建立兩個變數，一個用於scope(var scope)，另一個用於element(var element)。

2、確定載入你的模組 beforeEach(module('cookbook'))

3、建立一個beforeEach方法用來注入必要的依賴，並且指定1中的變數來聲明這些變數。包括建立一個新的scope對象和為scope指定emcee值。

 beforeEach(inject(function($rootscope,$compile){ rootscope=$rootscope; scope=$rootscope.$new(); scope.emcee='Izzy Ice' }))

4、緊接3在beforeEach函數中加入建立指令的部分。

 beforeEach(inject(function($rootscope,$compile){ rootscope=$rootscope; scope=$rootscope.$new(); scope.emcee='Izzy Ice'; element=angular.element('<emcee></emcee>'); $compile(element)(scope); }))

5、緊接著第三步在beforeEach中啟動所有的watcher

 scope.$digest();

6、需要建立一個新的spec來定義期望的結果是什麼。

 it('should assign scope emcee to element text when the onClick handler is called',function(){ })

7、緊接步驟6spec中，添加觸發onClick的方法。

 scope.onClick

8、在步驟6spec中，添加一個用於匹配element值的期望

 expect(element.text()).tobe('Step up Izzy Ice!')

9、整合

 it('should assign scope emcee to element text when the onClick handler is called', function () {  scope.onClick ();  expect(element.text()).toBe('Step up Izzy Ice!');});

原理

步驟1中聲明了兩個能被重複測試的變數，在步驟3中使用beforeEach確保測試回合前這兩個變數被分配值。在步驟3中也為scope定義了一個值scope.emcee，期望這個值能與指令相關聯。在步驟4中我們編譯我們的指令，
在步驟5中調用$scope.$degist確保所有的綁定都更新過了。

在步驟6中聲明這個spec測試並且規定我們希望從中得到什麼，我們觸發scope.onClick然後利用scope提供的值來更新element。Angular element提供了一個方便的text函數，用來返回element的內容。
在步驟8中使用這個text返回的值來與 Step up Izzy Ice 進行對比。

一些常用的matchers方法。

1、實際值包含期望值。

 expect($djListItems().eq(0).html()).toContain('DStyles<br>\nQbert<br>\nMix Master Mike<br>\nShortkut<br>\nA-Trak<br>\nBabu')

2、實際值與期望值是否一致。

 expect(element.text()).toBe('iec')

3、實際值與期望值相等

 expect(scope.emcee.length).toEqual(0)

4、實際值期望值正則匹配相等

 expect(element.text().toMatch(/Eyadea/))

5、實際值是否被定義

 expect($cookies.bboy.toBeDefined)

6、如果實際值沒有被定義

 expect($cookiew.bboy).not.toBeDefined()

7、實際值是否為空白

 expect(BreakBeat.tracks()).tobeNull()

8、實際值是否為不空

expect(BreakBeat.tracks()).not.tobeNull();
9、實際值是否為false

 expect(element(by.css('button')).getAttribute('disabled').toBeFalsy())

10、實際值為真

 expect(angular.element(element.find('a')[0].parent().hasClass('nghide').getAttribute('disabled')).toBeTruthy())

11、實際值少於期望值

 expect(scope.deejays.length).toBeLessThan(2);

12、實際值大於期望值

 expect(scope.deejays.length).toBeGraterThan(2)

以上就是對AngularJS 單元測試 的資料整理，後續繼續補充相關資料，謝謝大家對本站的支援！