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 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
jquery利用json实现页面之间传值的实例解析
Dec 12 Javascript
webpack实用小功能介绍
Jan 02 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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 变量定义和变量替换的方法
2009/07/30 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
用js实现in_array的方法
2013/11/05 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
django js实现部分页面刷新的示例代码
2018/05/28 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
基于pandas中expand的作用详解
2019/12/17 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
高级3D打印市场:Gambody
2019/12/26 全球购物
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
捐款倡议书
2014/04/14 职场文书
个人党性分析总结
2015/03/05 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python