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

更新时间：2020年08月16日 14:11:29 作者：锦城

这篇文章主要给大家介绍了关于Angular进行简单单元测试的实现方法，文中仅用了几行代码，文中通过示例代码介绍的非常详细，对大家学习或者使用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等等能满足需求，看着也没问题，但是当变量很多的时候，估计写测试的都会忘记每个变量的属性值，更不用说看的人，而且，使用下面的方法写的代码，所需字段以及字段值一目了然，一行代码就能体现所有信息，看着也赏心悦目。

总结

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

您可能感兴趣的文章:

angular将html代码输出为内容的实例
今天小编就为大家分享一篇angular将html代码输出为内容的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
angular父子组件通信详解
这篇文章主要为大家介绍了angular父子组件通信，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
AngularJs篇：使用AngularJs打造一个简易权限系统的实现代码
本篇文章主要介绍了AngularJs篇：使用AngularJs打造一个简易权限系统的实现代码，具有一定的参考价值，有兴趣的可以了解一下。
2016-12-12
Angular的FormArray和模态框结合使用实例详解
这篇文章主要为大家介绍了Angular的FormArray和模态框结合使用实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
angularjs性能优化的方法
这篇文章主要介绍了angularjs性能优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
详解Angular Forms中自定义ngModel绑定值的方式
在Angular应用中有两种方式来实现表单绑定，但是对于一些特殊的表单控件没法实现，这篇文章主要介绍了详解Angular Forms中自定义ngModel绑定值的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
angularjs表格分页功能详解
本文给大家分享的是个人在项目中使用angularjs实现表格分页功能的思路和代码，非常的简单实用，有需要的小伙伴可以参考下。
2016-01-01
Angular懒加载动态创建显示该模块下声明的组件
这篇文章主要为大家介绍了Angular懒加载动态创建显示该模块下声明的组件，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-05-05
详解angular部署到iis出现404解决方案
这篇文章主要介绍了详解angular部署到iis出现404解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
基于AngularJS的简单使用详解
下面小编就为大家带来一篇基于AngularJS的简单使用详解。小编觉得挺不错的，现在就想给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具