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 相关文章推荐
基于Jquery的温度计动画效果
Jun 18 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
javascript实现数字时钟效果
Feb 06 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实现小型站点广告管理
2006/10/09 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
封装的原生javascript弹出层代码
2010/09/24 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
layui实现数据表格自定义数据项
2019/10/26 Javascript
Python 正则表达式的高级用法
2016/12/04 Python
Python模拟登陆实现代码
2017/06/14 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
Python用SSH连接到网络设备
2021/02/18 Python
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
学生会主席就职演讲稿
2014/01/14 职场文书
大学生旷课检讨书
2014/01/22 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
美术教师个人工作总结
2015/02/06 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs
nginx实现动静分离的方法示例
2021/11/07 Servers