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 相关文章推荐
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
ES6函数实现排它两种写法解析
May 13 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获取网页内容方法总结
2008/12/04 PHP
PHP STRING 陷阱原理说明
2010/07/24 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
限制复选框的最大可选数
2006/07/01 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
2014年质检员工作总结
2014/11/18 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
家装电话营销开场白
2015/05/29 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang