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 相关文章推荐
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 Vue.js
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
杏林同学录(八)
2006/10/09 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
jQuery实现单击和鼠标感应事件
2015/02/01 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
python分割文件的常用方法
2014/11/01 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python实现自动解数独小程序
2019/01/21 Python
Python hashlib模块加密过程解析
2019/11/05 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
python线程join方法原理解析
2020/02/11 Python
python如何进行矩阵运算
2020/06/05 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
八一建军节部队活动方案
2014/02/04 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
新党章心得体会
2014/09/04 职场文书
六年级小学生评语
2014/12/26 职场文书
工作经历证明范本
2015/06/15 职场文书
军训通讯稿范文
2015/07/18 职场文书