利用Jasmine对Angular进行单元测试的方法详解


Posted in Javascript onJune 12, 2017

前言

本文主要介绍的是关于利用Jasmine对Angular单元测试的相关内容,以下是我假定那些极少或压根没写单元测试的人准备的,因此,会白话解释诸多概念性问题,同时会结合 Jasmine 与之对应的方法进行讲解。

一、概念

Test Suite

测试套件,哪怕一个简单的类,也会有若干的测试用例,因此将这些测试用例集合在一个分类下就叫Test Suite。

而在 Jasmine 就是使用 describe 全局函数来表示,它的第一个字符串参数用来表示Suite的名称或标题,第二个方法参数就是实现Suite代码了。

describe('test suite name', () => {
});

Specs

一个Specs相当于一个测试用例,也就是我们实现测试具体代码体。

Jasmine 就是使用 it 全局函数来表示,和 describe 类似,字符串和方法两个参数。

而每个 Spec 内包括多个 expectation 来测试需要测试的代码,只要任何一个 expectation 结果为 false 就表示该测试用例为失败状态。

describe('demo test', () => {
 const VALUE = true;
 it('should be true', () => {
  expect(VALUE).toBe(VALUE);
 })
});

Expectations

断言,使用 expect 全局函数来表示,只接收一个代表要测试的实际值,并且需要与 Matcher 代表期望值。

二、常用方法

Matchers

断言匹配操作,在实际值与期望值之间进行比较,并将结果通知Jasmine,最终Jasmine会判断此 Spec 成功还是失败。

Jasmine 提供非常丰富的API,一些常用的Matchers:

  • toBe() 等同 ===
  • toNotBe() 等同 !==
  • toBeDefined() 等同 !== undefined
  • toBeUndefined() 等同 === undefined
  • toBeNull() 等同 === null
  • toBeTruthy() 等同 !!obj
  • toBeFalsy() 等同 !obj
  • toBeLessThan() 等同 <
  • toBeGreaterThan() 等同 >
  • toEqual() 相当于 ==
  • toNotEqual() 相当于 !=
  • toContain() 相当于 indexOf
  • toBeCloseTo() 数值比较时定义精度,先四舍五入后再比较。
  • toHaveBeenCalled() 检查function是否被调用过
  • toHaveBeenCalledWith() 检查传入参数是否被作为参数调用过
  • toMatch() 等同 new RegExp().test()
  • toNotMatch() 等同 !new RegExp().test()
  • toThrow() 检查function是否会抛出一个错误

而这些API之前用 not 来表示负值的判断。

expect(true).not.toBe(false);

这些Matchers几乎可以满足我们日常需求,当然你也可以定制自己的Matcher来实现特殊需求。

Setup 与 Teardown

一份干将的测试代码很重要,因此我们可以将这些重复的 setup 与 teardown 代码,放在与之相对应的 beforeEach 与 afterEach 全局函数里面。

beforeEach 表示每个 Spec 执行之前,反之。

describe('demo test', () => {
 let val: number = 0;
 beforeEach(() => {
  val = 1;
 });
 it('should be true', () => {
  expect(val).toBe(1);
 });
 it('should be false', () => {
  expect(val).not.toBe(0);
 });
});

数据共享

如同上面示例中,我们可以在每个测试文件开头、describe 来定义相应的变量,这样每个 it 内部可以共享它们。

当然,每个 Spec 的执行周期间也会伴随着一个空的 this 对象,直至 Spec 执行结束后被清空,利用 this 也可以做数据共享。

嵌套代码

有时候当我们对某个组件进行测试时,而这个组件会有不同状态来展示不同的结果,这个时候如果只用一个 describe 会显得不过优雅。

因此,嵌套 describe,会让测试代码、测试报告看起来更漂亮。

describe('AppComponent', () => {
 describe('Show User', () => {
  it('should be show panel.', () => {});
  it('should be show avatar.', () => {});
 });
 describe('Hidden User', () => { 
  it('should be hidden panel.', () => {});
 });
});

跳过测试代码块

需求总是三心二意的,但好不容易写好的测试代码,难道要删除吗?非也……

Suites 和 Specs 分别可以用 xdescribe 和 xit 全局函数来跳过这些测试代码块。

三、配合Angular工具集

Spy

Angular的自定义事件实在太普遍了,但为了测试这些自定义事件,因此监控事件是否正常被调用是非常重要。好在,Spy 可以用于监测函数是否被调用,这简直就是我们的好伙伴。

以下示例暂时无须理会,暂且体验一下:

describe('AppComponent', () => {
 let fixture: ComponentFixture<TestComponent>;
 let context: TestComponent;

 beforeEach(() => {
  TestBed.configureTestingModule({
   declarations: [TestComponent]
  });
  fixture = TestBed.createComponent(TestComponent);
  context = fixture.componentInstance;
  // 监听onSelected方法
  spyOn(context, 'onSelected');
  fixture.detectChanges();
 });

 it('should be called [selected] event.', () => {
  // 触发selected操作

  // 断言是否被调用过
  expect(context.onSelected).toHaveBeenCalled();
 });
});

异步支持

首先,这里的异步是指带有 Observable 或 Promise 的异步行为,因此对于组件在调用某个 Service 来异步获取数据时的测试状态。

假设我们的待测试组件代码:

export class AppComponent {
 constructor(private _user: UserService) {}

 query() {
 this._user.quer().subscribe(() => {});
 }
}

async

async 无任何参数与返回值,所有包裹代码块里的测试代码,可以通过调用 whenStable() 让所有待处理异步行为都完成后再进行回调;最后,再进行断言操作。

it('should be get user list (async)', async(() => {
 // call component.query();
 fixture.whenStable().then(() => {
  fixture.detectChanges();
  expect(true).toBe(true);
 });
}));

fakeAsync

如果说 async 还需要回调才能进行断点让你受不了的话,那么 fakeAsync 可以解决这一点。

it('should be get user list (async)', fakeAsync(() => {
 // call component.query();
 tick();
 fixture.detectChanges();
 expect(true).toBe(true);
}));

这里只是将回调换成 tick(),怎么样,是不是很酷。

Jasmine自带异步

如前面所说的异步是指带有 Observable 或 Promise 的异步行为,而有时候我们有些东西是依赖 setTimeout 或者可能是需要外部订阅结果以后才能触发时怎么办呢?

可以使用 done() 方法。

it('async demo', (done: () => void) => {
 context.show().subscribe(res => {
  expect(true).toBe(true);
  done();
 });
 el.querySelected('xxx').click();
});

四、结论

本章几乎所有的内容在Angular单元测试经常使用到的东西;特别是异步部分,三种不同异步方式并非共存的,而是需要根据具体业务而采用。否则,你会发现真TM难写单元测试。毕竟这是一个异步的世界。

自此,我们算是为Angular写单元测试打下了基础。后续,将不会再对这类基础进行解释。

之后我们将介绍组件与指令单元测试。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
JQuery教学之性能优化
May 14 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
原JS实现banner图的常用功能
Jun 12 #Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 #Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 #Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 #jQuery
ionic中的$ionicPlatform.ready事件中的通用设置
Jun 11 #Javascript
JS判断一个数是否是水仙花数
Jun 11 #Javascript
在bootstrap中实现轮播图实例代码
Jun 11 #Javascript
You might like
PHP字符串处理的10个简单方法
2010/06/30 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php中执行系统命令的方法
2015/03/21 PHP
PHP中的类型约束介绍
2015/05/11 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
Python输出9*9乘法表的方法
2015/05/25 Python
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
详解Python locals()的陷阱
2019/03/26 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
softmax及python实现过程解析
2019/09/30 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
工厂保安员岗位职责
2014/01/31 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript