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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
JavaScript事件方法(实例讲解)
Jun 27 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 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
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
JavaScript CSS修改学习第三章 修改样式表
2010/02/19 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python操作串口的方法
2015/06/17 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
详解python UDP 编程
2020/08/24 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
实习老师离校感言
2014/02/03 职场文书
转让协议书范本
2014/04/15 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
世界文化遗产导游词
2015/02/13 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
千万级用户系统SQL调优实战分享
2022/03/03 MySQL