Angular进行简单单元测试的实现方法实例
前言
之前对单元测试的认知就是复杂,难搞,思路有,就是不知道怎样去实现,最近一次开会解决问题的过程中,发现原来单元测试可以十分简单,简单到几行代码就能实现。
示例
下面代码实现的功能是,判断课程所在的学院<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); });
通过控制台的信息可以发现,无论是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等等能满足需求,看着也没问题,但是当变量很多的时候,估计写测试的都会忘记每个变量的属性值,更不用说看的人,而且,使用下面的方法写的代码,所需字段以及字段值一目了然,一行代码就能体现所有信息,看着也赏心悦目。
总结
简单的单元测试写起来真的要简单很多,而且感觉比之前的要优雅很多,看起来真的挺整洁的,整整齐齐的看着很舒服,感谢潘老师的指导,也感谢小伙伴们给予的帮助。
相关文章
- 这篇文章主要介绍了解决@SpringBootTest 单元测试遇到的坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-10-14
- DVWA (Dam Vulnerable Web Application)DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序。包含了SQL注入、XSS、盲注等常见的一些安全漏洞...2016-11-25
- mail()函数的作用:连接到邮件服务器,利用smtp协议,与该服务器交互并投邮件。注意:1、mail函数不支持esmtp协议,---即,只能直投,不能登陆2、由上条,我们只能直投至最终的收件服务器地址.而该地址,又是在PHP.ini中指定的,所...2015-10-30
- 宿主机使用网线的时候,客户机在Bridged Adapter模式下,使用Atheros AR8131 PCI-E Gigabit Ethernet Controller上网没问题。 宿主机使用无线的时候,客户机在Bridged Adapter模式下,使用可选项里唯一一个WIFI选项,Microsoft Virtual Wifi Miniport Adapter也无法上网,故弃之。...2013-09-19
- 这篇文章主要介绍了Angular性能优化之第三方组件和懒加载技术,对性能优化感兴趣的同学,可以参考下...2021-05-11
- 这篇文章主要给大家介绍了关于Angular利用HTTP POST下载流文件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-07-26
- 这篇文章主要给大家介绍了关于Angular如何处理未可知异常错误的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-17
使用Angular CDK实现一个Service弹出Toast组件功能
本文主要写用cdk实现一个简单的Toast组件,使用的是cdk中的overlay模块,需要手动安装环境,具体安装方法及相关实现代码跟随小编一起看看吧...2021-07-28- mail()函数的作用:连接到邮件服务器,利用smtp协议,与该服务器交互并投邮件。注意:1、mail函数不支持esmtp协议,---即,只能直投,不能登陆2、由上条,我们只能直投至最终的收件服务器地址.而该地址,又是在PHP.ini中指定的,所...2015-10-30
- 本篇文章主要介绍了AngularJS的ng-click传参的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-06-24
详解JavaScript的AngularJS框架中的作用域与数据绑定
这篇文章主要介绍了JavaScript的AngularJS框架中的作用域与数据绑定,包括作用域的继承以及数据的单向和双向绑定等重要知识点,需要的朋友可以参考下...2016-03-07- 本篇文章主要介绍了ionic+AngularJs实现获取验证码倒计时按钮,具有一定的参考价值,有兴趣的可以了解一下。...2017-04-27
- 这篇文章主要介绍了Angular实现form自动布局的相关资料,以代码片段的形式分析了Angular实现form自动布局的实现方法,感兴趣的小伙伴们可以参考一下...2016-02-01
- 这篇文章主要介绍了Angular ng-class的知识,并整理了相关资料,有兴趣的小伙伴可以参考下...2016-10-03
- php测试性能代码 function microtime_float () { list ($usec, $sec) = explode(" ", microtime()); return ((float) $usec + (float) $sec); } functio...2016-11-25
- 这篇文章主要介绍了AngularJS中实现用户访问的身份认证及表单验证功能的方法,Angular是Google开发的一款浏览器端的高人气JavaScript框架,需要的朋友可以参考下...2016-04-23
- 下面我们一起来看看一篇关于phpmyadmin写入一句话木马的测试教程,希望此教程能够对各位有帮助。 方法一,一句话木马偶尔拿到一个config中,发现是root,且还有phpmyadmi...2016-11-25
- 这篇文章主要给大家介绍了关于Angular CLI发布路径的配置项的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 本篇文章主要介绍了AngularJS ui-router (嵌套路由)实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。...2017-03-13
- 这篇文章主要为大家介绍了python自动化测试selenium执行js脚本的实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步...2021-11-13