AngularJS 单元测试(二)详解


Posted in Javascript onSeptember 21, 2016

使用对象模拟注入

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

例子如下

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

如何实现

如何确定了服务

1、创建一个URL的引用,稍后会被mock捕获,和为Artists注入的一个变量

var URL;
var Artists;

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

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

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

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

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

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

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

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 单元测试的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
Javascript MD4
Dec 20 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
vue 解决遍历对象显示的顺序不对问题
Nov 07 Javascript
微信小程序监听用户登录事件的实现方法
Nov 11 Javascript
js实现纯前端压缩图片
Nov 16 Javascript
Javascript 解构赋值详情
Nov 17 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 #Javascript
AngularJS 单元测试(一)详解
Sep 21 #Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 #Javascript
AngularJS  ng-table插件设置排序
Sep 21 #Javascript
BooStrap对导航条的改造实践小结
Sep 21 #Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 #Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 #Javascript
You might like
PHP中的日期处理方法集锦
2007/01/02 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
PHP 快速排序算法详解
2014/11/10 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
js 动态选中下拉框
2009/11/26 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
python轻松实现代码编码格式转换
2015/03/26 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
深入理解Django中内置的用户认证
2017/10/06 Python
Django添加feeds功能的示例
2018/08/07 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
法学毕业生自我鉴定
2013/11/08 职场文书
项目开发计划书
2014/01/09 职场文书
绿化工程实施方案
2014/03/17 职场文书
三项教育活动实施方案
2014/03/30 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
浅谈Python中的正则表达式
2021/06/28 Python
人民币符号
2022/02/17 杂记