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 相关文章推荐
js中关于一个分号的崩溃示例
Nov 11 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
解决vuex刷新数据消失问题
Nov 12 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
用header 发送cookie的php代码
2007/03/16 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
使用js获取QueryString的方法小结
2010/02/28 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
Python的多态性实例分析
2015/07/07 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
如何基于Python创建目录文件夹
2019/12/31 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
KOHLER科勒美国官网:国际著名卫浴橱柜领先品牌
2020/06/27 全球购物
七年级英语教学反思
2014/01/15 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
关于环保的建议书400字
2014/03/12 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
小学二年级学生评语
2014/04/21 职场文书
作风建设演讲稿
2014/05/23 职场文书
道德模范事迹材料
2014/12/20 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
Django框架中表单的用法
2022/06/10 Python