1 2 3 4 |
|
或者在BeforeEach中统一设置TimeOut时间:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
定义测试Environment
Angular缺省针对开发和产品提供了不同的Environment,对于测试,我们同样可以设置Enviroment。
在src/environment下创建environment.test.ts,并修改angular.json内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
修改package.json文件:
1 2 3 |
|
这样执行如下命令:
1 2 3 |
|
执行测试时,使用的就是environment.test.ts文件中配置的内容。
测试数据回滚
做过Grails开发的伙计应该知道,单元测试、集成测试后,数据库中的测试数据会通过配置文件清除掉。在前端测试中,测试数据需要自行调用清除代码,对于使用LocalStorage、SessionStorage保持的数据亦是如此,方法很简单,在afterEach添加清除代码:
1 2 3 4 5 6 |
|
与StoryBook的配合
先前我发布了一篇题为《StoryBook实战》的文章,StoryBook也是用来测试组件的,它与Karma+Jasmine有什么区别呢?
二者都能测试的:
Pipe
Servcie
Component
StoryBook不能测、Karma + Jasmine可测试的:
Router
Component的界面元素属性、Input、Output
Karma + Jasmine不能做的,StoryBook能做的:
Component交互测试
组件管理
编写组件文档
从上面可以看出,Storybook进行的是黑盒测试,Karma + Jasmine则注重白盒测试,二者侧重点不同,没有谁强谁弱之分,只有扬长避短,利用好各自的优点,方可让前端测试更完美,将前端bug扼杀在开发阶段。
一些前端测试感悟
虽然前端开发的工作比较繁琐,也是客户Challenge最多的地方,但是不代表前端只有页面,没有架构。以前之所以觉得Angular的单元测试难做,就是觉得都是页面的东西怎么测?其实,终其原因,还是没有架构,所有的代码都集中在Component中,为了赶进度,通过拷贝、粘贴,怎么快怎么来。结果,悲剧了,后期代码维护困难,一点改动就需要人肉测试。
费时不说,开发人员也没有成长。接触Angular前端测试后,我的脑海里又出现了“测试驱动开发”。一段好代码,前提是要易于测试,不管这段代码是用于前端还是后端。 前端开发人员不仅仅要关注页面的易用性、美观性,同样需要关注前端的架构,一个易于测试的架构才是最好的“武器”。
更多编程相关知识,请访问:编程入门!!
以上就是聊聊Angular中的单元测试的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
浅谈Angular中elem.scope()、elem.isolatescope和$compile(elem)(scope)中scope的区别
浅谈Angular项目中如何引入第三方ui库(Angular material)
更多相关阅读请进入《Angular》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者