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 相关文章推荐
Javascript入门学习资料收集整理篇
Jul 06 Javascript
javascript Array.remove() 数组删除
Aug 06 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
Vue组件开发初探
Feb 14 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 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 编写的 25个游戏脚本
2009/05/11 PHP
php自动注册登录验证机制实现代码
2011/12/20 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
轮播图组件js代码
2016/08/08 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
python异步任务队列示例
2014/04/01 Python
Python实现获取某天是某个月中的第几周
2015/02/11 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
某公司面试题
2012/03/05 面试题
摄影实习自我鉴定
2013/09/20 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
毕业生求职信
2014/06/10 职场文书
大学生毕业求职信
2014/06/12 职场文书
党的生日活动方案
2014/08/15 职场文书
汉字听写大会观后感
2015/06/12 职场文书
校运会新闻稿
2015/07/17 职场文书
浅谈redis五大数据结构和使用场景
2021/04/12 Redis