快捷導(dǎo)航

AngularJS 單元測(cè)試（二）詳解

更新時(shí)間：2016年09月21日 10:53:31 作者：MakingChoice

這篇文章主要介紹了AngularJS 單元測(cè)試（二）的相關(guān)資料,需要的朋友可以參考下

使用對(duì)象模擬注入

我們可以非常容易的使用angularjs的$provider服務(wù)用一個(gè)對(duì)象模擬一個(gè)依賴并且注入。

例子如下

 angular.module('artists',[]).
  factory('Artists',['imageStore',function(imageStore){
    return {
      thumb:function(){
        return imageStore.thumbnailUrl(id)
      }
    }
  }])

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

如何確定了服務(wù)

1、創(chuàng)建一個(gè)URL的引用，稍后會(huì)被mock捕獲，和為Artists注入的一個(gè)變量

var URL;
var Artists;

2、緊接著在beforeEach方法中使用$provide 服務(wù)注冊(cè)模擬的factory服務(wù)。使用一個(gè)對(duì)象模擬thumbnailUrl方法。

beforeEach(module(function($provide){
  $provide.value('imageStore',{
    thumbnailUrl:function(id){
      url='/thumb/'+id
    }
  })
})

3、使用$injector服務(wù)注入這個(gè)方法，返回這個(gè)Artists服務(wù)并且用剛才創(chuàng)建的的變量來(lái)聲明，稍后可以使用到。

 beforeEach(inject(function($inject){
  Artists=$inject.get('Artists');
 }))

4、調(diào)用Artists創(chuàng)建一個(gè)簡(jiǎn)單的測(cè)試

it('return the correct artist thumbnailUrl',function(){
  Artists.thumb('1');
  expect(url).toBe('/thumbs/1');
 })

5、這里有一個(gè)完整的使用$provide模擬測(cè)試?yán)?，這返回一個(gè)定義了thumbnailUrl方法，

describe('factory:artists',function(){
  var url;
  var Artists;
  beforeEach(module('artist'));
  beforeEach(module(function($provide){
    $provide.value('imageStore',{
      thumbnailUrl: function (id) {
      url = '/thumbs/' + id;
      }  
    })
  }));
  beforeEach(inject(function($injector){
    Artists=$injector.get('Artists')
  }))
  it('return the correct artist thumbnailUrl',function(){
    Artists.thumb('1');
    expect(url).toBe('/thumb/1')
  })

 })

使用spec模擬注冊(cè)實(shí)例

為了聲明依賴注入的實(shí)例，下面聲明一個(gè)例子，下面有兩個(gè)服務(wù)，第二個(gè)服務(wù)被注入到了第一個(gè)里。

 angular.module('hiphop',[])
  .factory('deejays',['$rootscope','scratch',function($rootscope,scratch){
    return{
      originator: 'DJ Kool Herc',
      technique: scratch.technique()
    }
  }])
  .factory('scratch',['$rootscope',function($rootscope){
    return{
      technique:function(){
        return 'breakbeat';
      }
    }
  }])

2、

describe('Service: deejays',function(){
  beforeEach(module('hiphop'))；
  var deejays;
  beforeEach(inject(function($injector){
    deejays=$injector.get('deejays');
  }))
  beforeEach(inject(function($provide) {
    $provide.value('scratch',jasmine.createSpyObj('scratch', ['technique']));
  }));
  it('should return the correct originator',function(){
    expect(deejays.originator).toBe('DJ Kool Herc');
  })
 })

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

您可能感興趣的文章: