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 弹出层实现代码
Oct 30 Javascript
javascript学习笔记(八) js内置对象
Jun 19 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
php flush类输出缓冲剖析
2008/10/19 PHP
php自定义session示例分享
2014/04/22 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
PDO::errorCode讲解
2019/01/28 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
javascript常用函数(2)
2015/11/05 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
高级Java程序员面试题
2016/06/23 面试题
优秀的茶餐厅创业计划书
2014/01/03 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
毕业生写求职信的要点
2014/03/04 职场文书