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 Eval 函数使用
Mar 23 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
浅析javascript 定时器
Dec 23 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
php中define用法实例
2015/07/30 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
js实现图片粘贴到网页
2019/12/06 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
Python tcp传输代码实例解析
2020/03/18 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
中学清明节活动总结
2014/07/04 职场文书
2015年教务工作总结
2015/05/23 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript