利用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 相关文章推荐
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 Javascript
node.js超时timeout详解
Nov 26 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
Angular8 实现table表格表头固定效果
Jan 03 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自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
jupyter安装小结
2016/03/13 Python
python实现BackPropagation算法
2017/12/14 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
python tkinter实现屏保程序
2019/07/30 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
银行见习期自我鉴定
2014/01/29 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
暖春观后感
2015/06/08 职场文书
有关浪费资源的建议书
2015/09/14 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js