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模擬測試例子,這返回一個定義了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ù)補充相關(guān)資料,謝謝大家對本站的支持!
相關(guān)文章
Angular5整合富文本編輯器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來進行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10
Angular實現(xiàn)的簡單查詢天氣預(yù)報功能示例
這篇文章主要介紹了Angular實現(xiàn)的簡單查詢天氣預(yù)報功能,涉及AngularJS針對第三方API接口交互的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來
這篇文章給的大家介紹在AngularJS中如何使用谷歌地圖把當(dāng)前位置顯示出來,本文介紹的非常詳細,具有參考借鑒價值,對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-05
Angular應(yīng)用里異步打開對話框技術(shù)詳解
這篇文章主要為大家介紹了Angular應(yīng)用里異步打開對話框技術(shù)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12

