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文件优化
Dec 08 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
vue-dialog的弹出层组件
May 25 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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生成静态HTML速度快类库
2007/03/18 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
PHP生成压缩文件实例
2015/02/07 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
js实现DIV的一些简单控制
2007/06/04 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
服装设计专业自荐书范文
2013/12/30 职场文书
理财投资建议书
2014/03/12 职场文书
工作保证书范文
2014/04/29 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
golang import自定义包方式
2021/04/29 Golang
浅谈JS的原型和原型链
2021/06/04 Javascript