AngularJS單元測試

網(wǎng)上有很多單元測試的教程，比如如何安裝jasmine和ngMock，大家可以搜一下。這里就不在說了。下面重點(diǎn)介紹一個(gè)單元測試的過程。

加載一個(gè)模塊

AngularJS用module來包括應(yīng)用不同的部分比如controllers,services, filters。為了測試不同的部分，我們需要一個(gè)不同模塊的引用，并且加載它。Angularjs模塊注入使用ngMock模塊。ngMock模塊能夠注入服務(wù)service進(jìn)入單元測試。
ngMock暴露出angular.mock.module方法，縮寫是module。

準(zhǔn)備

需要準(zhǔn)備的就是一個(gè)簡單的AngularJS啟動(dòng)模塊。

如何實(shí)現(xiàn)

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

1、使用一個(gè)字符串名字來代表模塊

 beforeEach(module('services.emcees'))

2、添加字面量對(duì)象

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

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

4、最后你也可以提供一個(gè)方法，提供一個(gè)rapper引用。

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

寫一個(gè)測試

例如這個(gè)例子，將要開始測試一個(gè)關(guān)于更改scope值來更新內(nèi)容的指令。當(dāng)scope上定義的一個(gè)noclick方法觸發(fā)的時(shí)候這個(gè)值就會(huì)被分配。這需要在HTML上的按鈕觸發(fā)。

例如：

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

 })

具體做法

1、創(chuàng)建兩個(gè)變量，一個(gè)用于scope(var scope)，另一個(gè)用于element(var element)。

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

3、創(chuàng)建一個(gè)beforeEach方法用來注入必要的依賴，并且指定1中的變量來聲明這些變量。包括創(chuàng)建一個(gè)新的scope對(duì)象和為scope指定emcee值。

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

4、緊接3在beforeEach函數(shù)中加入創(chuàng)建指令的部分。

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

5、緊接著第三步在beforeEach中啟動(dòng)所有的watcher

 scope.$digest();

6、需要?jiǎng)?chuàng)建一個(gè)新的spec來定義期望的結(jié)果是什么。

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

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

 scope.onClick

8、在步驟6spec中，添加一個(gè)用于匹配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中聲明了兩個(gè)能被重復(fù)測試的變量，在步驟3中使用beforeEach確保測試運(yùn)行前這兩個(gè)變量被分配值。在步驟3中也為scope定義了一個(gè)值scope.emcee，期望這個(gè)值能與指令相關(guān)聯(lián)。在步驟4中我們編譯我們的指令，
在步驟5中調(diào)用$scope.$degist確保所有的綁定都更新過了。

在步驟6中聲明這個(gè)spec測試并且規(guī)定我們希望從中得到什么，我們觸發(fā)scope.onClick然后利用scope提供的值來更新element。Angular element提供了一個(gè)方便的text函數(shù)，用來返回element的內(nèi)容。
在步驟8中使用這個(gè)text返回的值來與 Step up Izzy Ice 進(jìn)行對(duì)比。

一些常用的matchers方法。

1、實(shí)際值包含期望值。

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

2、實(shí)際值與期望值是否一致。

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

3、實(shí)際值與期望值相等

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

4、實(shí)際值期望值正則匹配相等

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

5、實(shí)際值是否被定義

 expect($cookies.bboy.toBeDefined)

6、如果實(shí)際值沒有被定義

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

7、實(shí)際值是否為空

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

8、實(shí)際值是否為不空

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

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

10、實(shí)際值為真

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

11、實(shí)際值少于期望值

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

12、實(shí)際值大于期望值

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

以上就是對(duì)AngularJS 單元測試 的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

最新評(píng)論