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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
JavaScript中常见陷阱小结
2010/04/27 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
详解Vue方法与事件
2017/03/09 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python中几种导入模块的方式总结
2017/04/27 Python
python实现各进制转换的总结大全
2017/06/18 Python
Python实现完整的事务操作示例
2017/06/20 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
优秀教师获奖感言
2014/01/31 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
儿园租房协议书范本
2014/12/02 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
教师自荐信范文
2015/03/06 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
可可西里观后感
2015/06/08 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers