微信号:ZTEdeveloper

介绍:中兴开发者社区是一站式云端产品研发社区,为开发者和项目提供项目管理、开源协作、代码托管、持续交付、资源服务、技术交流等服务.让开发更简单,让创新更便捷!

干货∣Angular 单元测试编写入门指南 之 孤立的单元测试

2017-07-03 17:31 王继宏

前篇: Angular单元测试入门指南(点击阅读)


孤立的单元测试意味着它很孤独,但同时又是轻量级的。属于小清新之类的。这里讲的是Angular,所以默认语言是TypeScript.

  • 推荐的使用范围:
    可用于测试服务、带依赖的服务、管道、组件api边界测试(静态测试,输入可以是动作,输出可以是结果)。

建议: 独立测试对象尽量调用简单。被测对象要有全局变量或返回值,以便进行expect断言。

  • 编写方法:
    编写孤立的单元测试,就是将对象看成类,通过new的方式创建类。这个你一定很熟悉。

在被测对象中使用了多个注入类的(常见的,router,activatedroute,http,location等),需要用复制、stub等另外定义,引入后才可以避免编译问题。需要根据编译错误提示来见招拆招。

孤立测试案例

【被测组件介绍】

先说明下,组件使用到的类和函数

ut-isolatedTest1.component.ts的export class ut-isolatedTest1构造函数为

并且在ut-isolatedTest1中使用了以下的类及函数

1.activatedRoute — activatedRoute.params.subscribe()

2.http — http.get()

3.自定义服务 — devcfgservice.create()

【测试代码编写】

被测组件有几类注入服务以及自定义的服务,这些服务有的有构造函数,有的没有构造函数。

独立的单元测试要通过new的方式创建被测对象的组件类实例,因此,在没有构造函数的类的stub中需要增加构造函数。

1 根据类的入参,定义相关文件和类

1.1 route桩文件—routestub.ts

1.2 http桩文件—httpstub.ts(仅供参考,可以有多种写法)

1.3 activatedroutes桩文件—activatedroutestub.ts

1.4 Observable桩文件—可观察对象ObservableStub.ts

因为被测对象使用了activatedRoute的params,所以ActivatedRouteStub调用的ObservableStub也是重载来的。

1.5 location桩文件—locationstub.ts( export LocationStub)

  • 这几个构造函数与库提供服务的构造函数不同,且用到了服务的函数或变量,所以需要写复制品,并且import到测试组件spec.ts中。

  • DeviceConfigService 自定义的构造函数没有参数,且比较简单,只需要引入即可,不需要写复制品。

  • route http类都有构造函数,因此用new,而ActivatedRoute没有构造函数,所以需要重载成有构造函数的类。

2 在ut-isolatedTest1.component .spec.ts的beforeEach()中,通过new的方式创建被测对象的组件类实例

3 测试用例it编写 —直接使用对象实例

孤立测试只关心被测对象逻辑,没有DOM操作,不需要进行测试准备。

编完,运行angular框架带的相关命令即可测试。如angular-seed 的npm test就可以测试。出现以下summary即表明测试成功。

框架如何配置以进行测试,另文描述。


一些可能错误的FAQ

1.复制服务后,测试结果ok但出现 ALERT:false什么意思?

如果被测组件中有alert语句,运行到时会由此输出,不影响测试结果。

2.如果没有测试用例,运行结果也会提示错误

npm ERR! Test failed. See above for more details.

3.spec测试文件new stub类的时候,如何保证stub与被测对象类型一致

建议采用XXXStub extends XXX的写法。

 
中兴开发者社区 更多文章 干货丨 Angular单元测试入门指南 干货丨基于angular\/cli的种子工程 干货丨我理解的代码整洁之道 干货丨Bash源码分析 干货丨Docker为何这么火
猜您喜欢 如何建立重构的机制 龙果学院双旦福利!!请抱团领取!!! 近几年前端技术盘点以及 2016 年技术发展方向 这是一些神奇的情人节约会秘籍 我是如何从Web开发转向移动开发的?