AngularJS单元测试-2

作者: MakingChoice | 来源:发表于2016-04-14 20:43 被阅读76次

使用对象模拟注入

我们可以非常容易的使用angularjs的$provider服务用一个对象模拟一个依赖并且注入。<p>

例子如下

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

如何实现

如何确定了服务
1、创建一个URL的引用,稍后会被mock捕获,和为Artists注入的一个变量<p>

var URL;
var Artists;

2、紧接着在beforeEach方法中使用$provide 服务注册模拟的factory服务。使用一个对象模拟thumbnailUrl方法。<p>

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

3、使用$injector服务注入这个方法,返回这个Artists服务并且用刚才创建的的变量来声明,稍后可以使用到。<p>

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

4、调用Artists创建一个简单的测试<p>

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

5、这里有一个完整的使用$provide模拟测试例子,这返回一个定义了thumbnailUrl方法,<p>

 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模拟注册实例

为了声明依赖注入的实例,下面声明一个例子,下面有两个服务,第二个服务被注入到了第一个里。<p>

 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单元测试-2

    使用对象模拟注入 我们可以非常容易的使用angularjs的$provider服务用一个对象模拟一个依赖并且注入。...

  • AngularJs单元测试

    因为项目要求,需要对一个angularjs项目进行单元测试,所以就去简单学习了一下,主要利用Karma和Jasmi...

  • AngularJS单元测试-1

    网上有很多单元测试的教程,比如如何安装jasmine和ngMock,大家可以搜一下。这里就不在说了。下面重点介绍一...

  • AngularJS学习——第一篇

    1.认识AngularJS 2.AngularJS基本使用 使用AngularJS的两个重点: 1.angular...

  • angularJS模块(2)

    angularJS模块(2)

  • AngularJS 版本演进了解

    AngularJS 1.X 基于 javascript 开发 场景web 页面开发AngularJS 2.X ...

  • AngularJS单元测试karma配置

    安装 angularnpm install angular --save安装 karmanpm install -...

  • AngularJS (2)

    AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。 ng-app 指令...

  • angular/json

    填空 1. AngularJS是一个javascript框架,可通过标签绑定到html。 2.AngularJS ...

  • angular 基础入门概念

    1.angularJs 简介 2.angularJs 运行原理 启动方式四个重要方法:1.angular.boot...

网友评论

    本文标题:AngularJS单元测试-2

    本文链接:https://www.haomeiwen.com/subject/hhoglttx.html