当前位置: 移动技术网 > IT编程>脚本编程>AngularJs > Angular进行简单单元测试的实现方法实例

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

2020年08月17日  | 移动技术网IT编程  | 我要评论
前言之前对单元测试的认知就是复杂,难搞,思路有,就是不知道怎样去实现,最近一次开会解决问题的过程中,发现原来单元测试可以十分简单,简单到几行代码就能实现。示例下面代码实现的功能是,判断课程所在的学院&

前言

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

示例

下面代码实现的功能是,判断课程所在的学院<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等等能满足需求,看着也没问题,但是当变量很多的时候,估计写测试的都会忘记每个变量的属性值,更不用说看的人,而且,使用下面的方法写的代码,所需字段以及字段值一目了然,一行代码就能体现所有信息,看着也赏心悦目。

总结

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

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网