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怎样实现ajax联动框(二)
Mar 08 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
网络传输协议(http协议)
Nov 18 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
react中的DOM操作实现
Jun 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
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
微信小程序自定义多选事件的实现代码
2018/05/17 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python基础教程之面向对象的一些概念
2014/08/29 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
毕业生自我鉴定
2013/12/04 职场文书
开业庆典主持词
2014/03/21 职场文书
股份合作协议书范本
2014/04/14 职场文书
实习公司领导推荐函
2014/05/21 职场文书
干部个人对照检查材料
2014/08/25 职场文书
婚庆公司计划书
2014/09/15 职场文书
出差报告范文
2014/11/06 职场文书
2014年标准化工作总结
2014/12/17 职场文书
税务会计岗位职责
2015/04/02 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
angular4实现带搜索的下拉框
2022/03/25 Javascript
Redis Lua脚本实现ip限流示例
2022/07/15 Redis
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技