Angular进行简单单元测试的实现方法实例


Posted in Javascript onAugust 16, 2020

前言

之前对单元测试的认知就是复杂,难搞,思路有,就是不知道怎样去实现,最近一次开会解决问题的过程中,发现原来单元测试可以十分简单,简单到几行代码就能实现。

示例

下面代码实现的功能是,判断课程所在的学院<College> college是否在用户所有的学院Array<College> colleges中,如果存在,变量show赋值为true,不存在,则赋值为false,如果college为undefined或者null,也赋值为true。

/**
 * 观察课程学院是否与用户所在学院相同
 * @param college 课程学院
 * @param colleges 用户学院
 */
 public whetherShow(college: { id: number }, colleges: Array<{ id: number }>) {
 Assert.notNull(college, 'college未定义');
 const collegeId = college.id;
 let show = colleges != null && colleges && colleges.length > 0 ? false : true;
 if (colleges != null) {
 colleges.forEach(selectCollege => {
 if (collegeId === selectCollege.id) {
  show = true;
 }
 });
 }
 return show;
 }

要对该方法进行单元测试,思路就是传值进去进行对比,重点在于传值,用之前的思路就是,定义college和colleges,然后进行对比:

it('is show', () => {
 const course = new Course({id: 1})
 const collegeOne = new College({id: 1});
 const collegeTwo = new College({id: 2});
 component.colleges = [];
 expect(component.whetherShow(course,component.colleges)).toBe(true);
 component.colleges = undefined;
 expect(component.whetherShow(course,component.colleges)).toBe(true);
 component.colleges = [collegeOne];
 expect(component.whetherShow(course,component.colleges)).toBe(true);
 component.colleges = [collegeTwo];
 expect(component.whetherShow(course,component.colleges)).toBe(false);
 component.colleges = [collegeOne, collegeTwo];
 expect(component.whetherShow(course,component.colleges)).toBe(true);
 });

Angular进行简单单元测试的实现方法实例

通过控制台的信息可以发现,无论是null还是undefined,都是可以通过的,后来老师提供了新的思路,既然要测试的是功能,就不要管怎么传的,可以不用传对象,然后就有了下面的写法:

it('is show', () => {
 expect(component.whetherShow({id: 1}, null)).toBe(true);
 expect(component.whetherShow({id: 1}, undefined)).toBe(true);
 expect(component.whetherShow({id: 1}, [])).toBe(true);
 expect(component.whetherShow({id: 1}, [{id: 2}, {id: 3}])).toBe(false);
 expect(component.whetherShow({id: 1}, [{id: 1}, {id: 2}, {id: 3}])).toBe(true);
 expect(component.whetherShow({id: 1}, [{id: 2}, {id: 3}, {id: 1}])).toBe(true);
 });

值传进去了,方法也能判断了,比起之前的写法简直要好太多,而且对于一些方法来说,这种方法省力不少,尤其是对多种情况进行测试,要进行多个变量的定义:

/**
 * 判断查询的关键字是否课程代码或名称中
 * @param course 课程
 * @param searchKey 查询关键字
 */
 public isCodeOrNameContainsSearchKey(course: { code: string, name: string }, searchKey: string) {
 return searchKey === null
  || course.code.toLowerCase().indexOf(searchKey.toLowerCase()) !== -1
  || course.name.toLowerCase().indexOf(searchKey.toLowerCase()) !== -1;
 }

该方法实现的是通过课程名称或代码进行查询操作,通过对查询关键字和课程名称或代码进行对比实现该功能,要考虑以下几种情况:查询关键字为null、查询关键字与课程名称或代码部分完全不相同、查询关键字与课程名称或代码部分相同、查询关键字与课程名称或代码完全相同、查询关键字包含课程名称或代码。

如果用旧思想进行测试:

it('isCodeOrNameContainsSearchKey', () => {
 const courseOne = new Course({code: '', name: ''});
 const courseTwo = new Course({code: '222', name: ''});
 const courseThree = new Course({code: '', name: '222'});
 const courseFour = new Course({code: '222', name: '222'});
 expect(component.isCodeOrNameContainsSearchKey(courseOne, null));
 expect(component.isCodeOrNameContainsSearchKey(courseOne, ''));
 expect(component.isCodeOrNameContainsSearchKey(courseTwo, ''));
 expect(component.isCodeOrNameContainsSearchKey(courseTwo, '1111'));
 expect(component.isCodeOrNameContainsSearchKey(courseTwo, '22'));
 expect(component.isCodeOrNameContainsSearchKey(courseTwo, '222'));
 expect(component.isCodeOrNameContainsSearchKey(courseTwo, '2222'));
 expect(component.isCodeOrNameContainsSearchKey(courseThree, ''));
 expect(component.isCodeOrNameContainsSearchKey(courseThree, '1111'));
 expect(component.isCodeOrNameContainsSearchKey(courseThree, '22'));
 expect(component.isCodeOrNameContainsSearchKey(courseThree, '222'));
 expect(component.isCodeOrNameContainsSearchKey(courseThree, '2222'));
 expect(component.isCodeOrNameContainsSearchKey(courseFour, ''));
 expect(component.isCodeOrNameContainsSearchKey(courseFour, '1111'));
 expect(component.isCodeOrNameContainsSearchKey(courseFour, '22'));
 expect(component.isCodeOrNameContainsSearchKey(courseFour, '222'));
 expect(component.isCodeOrNameContainsSearchKey(courseFour, '2222'));
 
});

如果使用新思想:

it('isCodeOrNameContainsSearchKey', () => {
 expect(component.isCodeOrNameContainsSearchKey({code: '', name: ''}, null)).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '', name: ''}, '')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '222', name: ''}, '')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '222', name: ''}, '1111')).toBe(false);
 expect(component.isCodeOrNameContainsSearchKey({code: '222', name: ''}, '22')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '222', name: ''}, '222')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '222', name: ''}, '2222')).toBe(false);
 expect(component.isCodeOrNameContainsSearchKey({code: '', name: '222'}, '')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '', name: '222'}, '1111')).toBe(false);
 expect(component.isCodeOrNameContainsSearchKey({code: '', name: '222'}, '22')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '', name: '222'}, '222')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '', name: '222'}, '2222')).toBe(false);
 expect(component.isCodeOrNameContainsSearchKey({code: '222', name: '222'}, '')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '222', name: '222'}, '1111')).toBe(false);
 expect(component.isCodeOrNameContainsSearchKey({code: '222', name: '222'}, '22')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '222', name: '222'}, '222')).toBe(true);
 expect(component.isCodeOrNameContainsSearchKey({code: '222', name: '222'}, '2222')).toBe(false);
 });

设想一下自己看到他人写的测试代码,如果所需要的变量很少,courseOne等等能满足需求,看着也没问题,但是当变量很多的时候,估计写测试的都会忘记每个变量的属性值,更不用说看的人,而且,使用下面的方法写的代码,所需字段以及字段值一目了然,一行代码就能体现所有信息,看着也赏心悦目。

总结

简单的单元测试写起来真的要简单很多,而且感觉比之前的要优雅很多,看起来真的挺整洁的,整整齐齐的看着很舒服,感谢潘老师的指导,也感谢小伙伴们给予的帮助。

Javascript 相关文章推荐
一个JavaScript继承的实现
Oct 24 Javascript
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
js原型链原理看图说明
Jul 07 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
javascript实现获取服务器时间
May 19 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 #Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 #Javascript
Vue使用axios引起的后台session不同操作
Aug 14 #Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 #Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 #Javascript
vue设置全局访问接口API地址操作
Aug 14 #Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 #Javascript
You might like
php判断当前操作系统类型
2015/10/28 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
json 实例详细说明教程
2009/10/31 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
简明 Python 基础学习教程
2007/02/08 Python
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
python实现的系统实用log类实例
2015/06/30 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
Python tkinter模版代码实例
2020/02/05 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
EQVVS官网:设计师男装和女装
2018/10/24 全球购物
教师求职信范文分享
2013/12/27 职场文书
早餐连锁店计划书
2014/01/08 职场文书
消防应急演练方案
2014/02/12 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
学校门卫岗位职责
2014/03/16 职场文书
函授生自我鉴定
2014/03/25 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
员工保密承诺书
2014/05/28 职场文书
鼋头渚导游词
2015/02/05 职场文书
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript