AngularJS 單元測(cè)試(二)詳解
使用對(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)建的的變量來聲明,稍后可以使用到。
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ì)本站的支持!
- angularjs中的單元測(cè)試實(shí)例
- 使用Angular CLI進(jìn)行單元測(cè)試和E2E測(cè)試的方法
- AngularJs unit-testing(單元測(cè)試)詳解
- 利用Jasmine對(duì)Angular進(jìn)行單元測(cè)試的方法詳解
- AngularJS 單元測(cè)試(一)詳解
- 在JavaScript的AngularJS庫中進(jìn)行單元測(cè)試的方法
- 對(duì)Angular.js Controller如何進(jìn)行單元測(cè)試
- Angular單元測(cè)試之事件觸發(fā)的實(shí)現(xiàn)
- 淺談Angular單元測(cè)試總結(jié)
- Angular進(jìn)行簡(jiǎn)單單元測(cè)試的實(shí)現(xiàn)方法實(shí)例
相關(guān)文章
詳解angular用$sce服務(wù)來過濾HTML標(biāo)簽
這篇文章主要介紹了詳解angular用$sce服務(wù)來過濾HTML標(biāo)簽,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-04-04Angular5整合富文本編輯器TinyMCE的方法(漢化+上傳)
TinyMCE是一個(gè)輕量級(jí)的富文本編輯器,相對(duì)于CK編輯器更加精簡(jiǎn),但必須滿足絕大部分場(chǎng)景的需要。這篇文章主要介紹了Angular5整合富文本編輯器TinyMCE(漢化+上傳)的相關(guān)知識(shí),需要的朋友可以參考下2020-05-05使用Angular 6創(chuàng)建各種動(dòng)畫效果的方法
Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動(dòng)畫。我們將通過本文學(xué)習(xí)到如何使用Angular 6來創(chuàng)建各種動(dòng)畫效果。在此,我們將使用Visual Studio Code來進(jìn)行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10Angular實(shí)現(xiàn)的簡(jiǎn)單查詢天氣預(yù)報(bào)功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的簡(jiǎn)單查詢天氣預(yù)報(bào)功能,涉及AngularJS針對(duì)第三方API接口交互的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來
這篇文章給的大家介紹在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來,本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,對(duì)angularjs 谷歌地圖相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01詳解在 Angular 項(xiàng)目中添加 clean-blog 模板
本篇文章主要介紹了詳解在 Angular 項(xiàng)目中添加 clean-blog 模板,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-07-07詳解Angular 4.x NgTemplateOutlet
這篇文章主要介紹了詳解Angular 4.x NgTemplateOutlet,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05Angular應(yīng)用里異步打開對(duì)話框技術(shù)詳解
這篇文章主要為大家介紹了Angular應(yīng)用里異步打開對(duì)話框技術(shù)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12