AngularJS 單元測試(二)詳解
使用對象模擬注入
我們可以非常容易的使用angularjs的$provider服務(wù)用一個對象模擬一個依賴并且注入。
例子如下
angular.module('artists',[]). factory('Artists',['imageStore',function(imageStore){ return { thumb:function(){ return imageStore.thumbnailUrl(id) } } }])
如何實現(xiàn)
如何確定了服務(wù)
1、創(chuàng)建一個URL的引用,稍后會被mock捕獲,和為Artists注入的一個變量
var URL;
var Artists;
2、緊接著在beforeEach方法中使用$provide 服務(wù)注冊模擬的factory服務(wù)。使用一個對象模擬thumbnailUrl方法。
beforeEach(module(function($provide){ $provide.value('imageStore',{ thumbnailUrl:function(id){ url='/thumb/'+id } }) })
3、使用$injector服務(wù)注入這個方法,返回這個Artists服務(wù)并且用剛才創(chuàng)建的的變量來聲明,稍后可以使用到。
beforeEach(inject(function($inject){ Artists=$inject.get('Artists'); }))
4、調(diào)用Artists創(chuàng)建一個簡單的測試
it('return the correct artist thumbnailUrl',function(){ Artists.thumb('1'); expect(url).toBe('/thumbs/1'); })
5、這里有一個完整的使用$provide模擬測試?yán)樱@返回一個定義了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模擬注冊實例
為了聲明依賴注入的實例,下面聲明一個例子,下面有兩個服務(wù),第二個服務(wù)被注入到了第一個里。
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'); }) })
以上就是對AngularJS 單元測試的資料整理,后續(xù)繼續(xù)補(bǔ)充相關(guān)資料,謝謝大家對本站的支持!
相關(guān)文章
詳解angular用$sce服務(wù)來過濾HTML標(biāo)簽
這篇文章主要介紹了詳解angular用$sce服務(wù)來過濾HTML標(biāo)簽,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-04-04Angular5整合富文本編輯器TinyMCE的方法(漢化+上傳)
TinyMCE是一個輕量級的富文本編輯器,相對于CK編輯器更加精簡,但必須滿足絕大部分場景的需要。這篇文章主要介紹了Angular5整合富文本編輯器TinyMCE(漢化+上傳)的相關(guān)知識,需要的朋友可以參考下2020-05-05使用Angular 6創(chuàng)建各種動畫效果的方法
Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動畫。我們將通過本文學(xué)習(xí)到如何使用Angular 6來創(chuàng)建各種動畫效果。在此,我們將使用Visual Studio Code來進(jìn)行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10Angular實現(xiàn)的簡單查詢天氣預(yù)報功能示例
這篇文章主要介紹了Angular實現(xiàn)的簡單查詢天氣預(yù)報功能,涉及AngularJS針對第三方API接口交互的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來
這篇文章給的大家介紹在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來,本文介紹的非常詳細(xì),具有參考借鑒價值,對angularjs 谷歌地圖相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01詳解在 Angular 項目中添加 clean-blog 模板
本篇文章主要介紹了詳解在 Angular 項目中添加 clean-blog 模板,非常具有實用價值,需要的朋友可以參考下2017-07-07詳解Angular 4.x NgTemplateOutlet
這篇文章主要介紹了詳解Angular 4.x NgTemplateOutlet,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05Angular應(yīng)用里異步打開對話框技術(shù)詳解
這篇文章主要為大家介紹了Angular應(yīng)用里異步打開對話框技術(shù)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12