Angular进行简单单元测试的实现方法实例
前言
之前对单元测试的认知就是复杂，难搞，思路有，就是不知道怎样去实现，最近一次开会解决问题的过程中，发现原来单元测试可以十分简单，简单到几行代码就能实现。
示例
下面代码实现的功能是，判断课程所在的学院
/**
*观察课程学院是否与用户所在学院相同
*@paramcollege课程学院
*@paramcolleges用户学院
*/
publicwhetherShow(college:{id:number},colleges:Array<{id:number}>){
Assert.notNull(college,'college未定义');
constcollegeId=college.id;
letshow=colleges!=null&&colleges&&colleges.length>0?false:true;
if(colleges!=null){
colleges.forEach(selectCollege=>{
if(collegeId===selectCollege.id){
show=true;
}
});
}
returnshow;
}
要对该方法进行单元测试，思路就是传值进去进行对比，重点在于传值，用之前的思路就是，定义college和colleges,然后进行对比：
it('isshow',()=>{
constcourse=newCourse({id:1})
constcollegeOne=newCollege({id:1});
constcollegeTwo=newCollege({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('isshow',()=>{
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);
});
值传进去了，方法也能判断了，比起之前的写法简直要好太多，而且对于一些方法来说，这种方法省力不少，尤其是对多种情况进行测试，要进行多个变量的定义：
/**
*判断查询的关键字是否课程代码或名称中
*@paramcourse课程
*@paramsearchKey查询关键字
*/
publicisCodeOrNameContainsSearchKey(course:{code:string,name:string},searchKey:string){
returnsearchKey===null
||course.code.toLowerCase().indexOf(searchKey.toLowerCase())!==-1
||course.name.toLowerCase().indexOf(searchKey.toLowerCase())!==-1;
}
该方法实现的是通过课程名称或代码进行查询操作，通过对查询关键字和课程名称或代码进行对比实现该功能，要考虑以下几种情况：查询关键字为null、查询关键字与课程名称或代码部分完全不相同、查询关键字与课程名称或代码部分相同、查询关键字与课程名称或代码完全相同、查询关键字包含课程名称或代码。
如果用旧思想进行测试：
it('isCodeOrNameContainsSearchKey',()=>{
constcourseOne=newCourse({code:'',name:''});
constcourseTwo=newCourse({code:'222',name:''});
constcourseThree=newCourse({code:'',name:'222'});
constcourseFour=newCourse({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等等能满足需求，看着也没问题，但是当变量很多的时候，估计写测试的都会忘记每个变量的属性值，更不用说看的人，而且，使用下面的方法写的代码，所需字段以及字段值一目了然，一行代码就能体现所有信息，看着也赏心悦目。
总结
简单的单元测试写起来真的要简单很多，而且感觉比之前的要优雅很多，看起来真的挺整洁的，整整齐齐的看着很舒服，感谢潘老师的指导，也感谢小伙伴们给予的帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。