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 相关文章推荐
广告显示判断
Aug 31 Javascript
javascript之解决IE下不渲染的bug
Jun 29 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
解释&&和||在javascript中的另类用法
Jul 28 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
vue登录路由验证的实现
Dec 13 Javascript
vue配置接口域名方法总结
May 12 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 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下intval()和(int)转换使用与区别
2008/07/18 PHP
php 字符转义 注意事项
2009/05/27 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
python爬虫请求头的使用
2020/12/01 Python
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
求职自荐信格式
2013/12/04 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
硕士论文致谢范文
2015/05/14 职场文书
小学班级口号大全
2015/12/25 职场文书
五年级作文之成长
2019/09/16 职场文书
德生2P3收音机开箱评测
2022/04/30 无线电