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 图片延迟加载并等比缩放插件
Nov 09 Javascript
js post方式传递提交的实现代码
May 31 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
js中如何完美的解析数据
Mar 18 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
vue实力踩坑之push当前页无效
Apr 10 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
php数组使用规则分析
2015/02/27 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
url地址自动加#号问题说明
2010/08/21 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
为python设置socket代理的方法
2015/01/14 Python
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
python解包用法详解
2021/02/17 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
二手房购房意向书范本
2014/04/01 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
检讨书怎么写
2015/01/23 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
催款函怎么写
2015/06/24 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL