AngularJS 单元测试(一)详解


Posted in Javascript onSeptember 21, 2016

AngularJS单元测试

网上有很多单元测试的教程,比如如何安装jasmine和ngMock,大家可以搜一下。这里就不在说了。下面重点介绍一个单元测试的过程。

加载一个模块

AngularJS用module来包括应用不同的部分比如controllers,services, filters。为了测试不同的部分,我们需要一个不同模块的引用,并且加载它。Angularjs模块注入使用ngMock模块。ngMock模块能够注入服务service进入单元测试。
ngMock暴露出angular.mock.module方法,缩写是module。

准备

需要准备的就是一个简单的AngularJS启动模块。

如何实现

 angular.mock.module方法被用在beforeEach方法中。这个module方法需要一个模块的名字或者另外一个字面量对象来替代,将会被注入。

1、使用一个字符串名字来代表模块

 beforeEach(module('services.emcees'))

2、添加字面量对象

beforeEach(module('services.emcees',{
 beatjunkies': {
  'dj': 'Babu'
 })
 })

3、现在可以在测试中使用beatjunkies引用检索解决的对象,返回{'dj': 'Babu'}

4、最后你也可以提供一个方法,提供一个rapper引用。

beforeEach(module('services.emcees'),{
 beatjunkies': {
  'dj': 'Babu'
 })
 },function($provider){
 $provider.value('rapper', 'madchild')
 })

写一个测试

例如这个例子,将要开始测试一个关于更改scope值来更新内容的指令。当scope上定义的一个noclick方法触发的时候这个值就会被分配。这需要在HTML上的按钮触发。

例如:

.directive('emcee',function(){
 return{
  restrict:'E',
  link:function(scope,element,attr){
   scope.onClick=function(){
    element.text('Step up ' + scope.emcee + '!')
   }
  }
 }

 })

具体做法

1、创建两个变量,一个用于scope(var scope),另一个用于element(var element)。

2、确定载入你的模块 beforeEach(module('cookbook'))

3、创建一个beforeEach方法用来注入必要的依赖,并且指定1中的变量来声明这些变量。包括创建一个新的scope对象和为scope指定emcee值。

beforeEach(inject(function($rootscope,$compile){
 rootscope=$rootscope;
 scope=$rootscope.$new();
 scope.emcee='Izzy Ice'
 }))

4、紧接3在beforeEach函数中加入创建指令的部分。

beforeEach(inject(function($rootscope,$compile){
 rootscope=$rootscope;
 scope=$rootscope.$new();
 scope.emcee='Izzy Ice';
 element=angular.element('<emcee></emcee>');
 $compile(element)(scope);
 }))

5、紧接着第三步在beforeEach中启动所有的watcher

 scope.$digest();

6、需要创建一个新的spec来定义期望的结果是什么。

 it('should assign scope emcee to element text when the onClick handler is called',function(){ })

7、紧接步骤6spec中,添加触发onClick的方法。

 scope.onClick

8、在步骤6spec中,添加一个用于匹配element值的期望

 expect(element.text()).tobe('Step up Izzy Ice!')

9、整合

it('should assign scope emcee to element text when the onClick handler is called', function () {
  scope.onClick ();
  expect(element.text()).toBe('Step up Izzy Ice!');
});

原理

步骤1中声明了两个能被重复测试的变量,在步骤3中使用beforeEach确保测试运行前这两个变量被分配值。在步骤3中也为scope定义了一个值scope.emcee,期望这个值能与指令相关联。在步骤4中我们编译我们的指令,
在步骤5中调用$scope.$degist确保所有的绑定都更新过了。

在步骤6中声明这个spec测试并且规定我们希望从中得到什么,我们触发scope.onClick然后利用scope提供的值来更新element。Angular element提供了一个方便的text函数,用来返回element的内容。
在步骤8中使用这个text返回的值来与 Step up Izzy Ice 进行对比。

一些常用的matchers方法。

1、实际值包含期望值。

 expect($djListItems().eq(0).html()).toContain('DStyles<br>\nQbert<br>\nMix Master Mike<br>\nShortkut<br>\nA-Trak<br>\nBabu')

2、实际值与期望值是否一致。

 expect(element.text()).toBe('iec')

3、实际值与期望值相等

 expect(scope.emcee.length).toEqual(0)

4、实际值期望值正则匹配相等

 expect(element.text().toMatch(/Eyadea/))

5、实际值是否被定义

 expect($cookies.bboy.toBeDefined)

6、如果实际值没有被定义

 expect($cookiew.bboy).not.toBeDefined()

7、实际值是否为空

 expect(BreakBeat.tracks()).tobeNull()

8、实际值是否为不空

expect(BreakBeat.tracks()).not.tobeNull();
9、实际值是否为false

 expect(element(by.css('button')).getAttribute('disabled').toBeFalsy())

10、实际值为真

 expect(angular.element(element.find('a')[0].parent().hasClass('nghide').getAttribute('disabled')).toBeTruthy())

11、实际值少于期望值

 expect(scope.deejays.length).toBeLessThan(2);

12、实际值大于期望值

 expect(scope.deejays.length).toBeGraterThan(2)

以上就是对AngularJS 单元测试 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
Javascript事件实例详解
Nov 06 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
Ajax异步刷新功能及简单案例
Nov 20 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
D3.js实现散点图和气泡图的方法详解
Sep 21 #Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 #Javascript
You might like
PHP小教程之实现双向链表
2014/06/12 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
jquery实现楼层滚动效果
2018/01/01 jQuery
微信小程序wx.request的简单封装
2019/11/13 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
利用python获得时间的实例说明
2013/03/25 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python书单 不将就
2017/07/11 Python
flask中的wtforms使用方法
2018/07/21 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
python sitk.show()与imageJ结合使用常见的问题
2020/04/20 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
应届毕业生求职自荐书
2014/01/03 职场文书
村委会主任先进事迹
2014/01/15 职场文书
促销活动总结模板
2014/07/01 职场文书
管理工程专业求职信
2014/08/10 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技