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)建的的變量來(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ì)本站的支持!
- angularjs中的單元測(cè)試實(shí)例
- 使用Angular CLI進(jìn)行單元測(cè)試和E2E測(cè)試的方法
- AngularJs unit-testing(單元測(cè)試)詳解
- 利用Jasmine對(duì)Angular進(jìn)行單元測(cè)試的方法詳解
- AngularJS 單元測(cè)試(一)詳解
- 在JavaScript的AngularJS庫(kù)中進(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ù)來(lái)過(guò)濾HTML標(biāo)簽
這篇文章主要介紹了詳解angular用$sce服務(wù)來(lái)過(guò)濾HTML標(biāo)簽,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-04-04
Angular5整合富文本編輯器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)畫。我們將通過(guò)本文學(xué)習(xí)到如何使用Angular 6來(lái)創(chuàng)建各種動(dòng)畫效果。在此,我們將使用Visual Studio Code來(lái)進(jìn)行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10
Angular實(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)前位置顯示出來(lái)
這篇文章給的大家介紹在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來(lái),本文介紹的非常詳細(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,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
Angular應(yīng)用里異步打開(kāi)對(duì)話框技術(shù)詳解
這篇文章主要為大家介紹了Angular應(yīng)用里異步打開(kāi)對(duì)話框技術(shù)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12

