聊聊Angular中的单元测试


当前第2页 返回上一页

1

2

3

4

it('#loadBalance for BCT should return real value', async () => {

  jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000;

  ...

})

或者在BeforeEach中统一设置TimeOut时间:

1

2

3

4

5

6

7

8

9

10

11

12

13

describe("my async specs", function() {

    var originalTimeout;

    beforeEach(function() {

      originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;

      jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000;

    });

 

    ...

 

    afterEach(function() {

      jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;

    });

  });

定义测试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

"architect":{

    "test":{

        ...

        "configurations": {

            "test": {

              "fileReplacements": [

                {

                  "replace": "src/environments/environment.ts",

                  "with": "src/environments/environment.test.ts"

                }

              ]

            }

          }

    }

}

修改package.json文件:

1

2

3

"scripts": {

  "test": "ng test --configuration=test",

}

这样执行如下命令:

1

2

3

npm test

//或者

ng test --configuration=test

执行测试时,使用的就是environment.test.ts文件中配置的内容。

测试数据回滚

做过Grails开发的伙计应该知道,单元测试、集成测试后,数据库中的测试数据会通过配置文件清除掉。在前端测试中,测试数据需要自行调用清除代码,对于使用LocalStorage、SessionStorage保持的数据亦是如此,方法很简单,在afterEach添加清除代码:

1

2

3

4

5

6

describe("my async specs", function() {

   

  afterEach(function() {

    //在这里清除测试数据

  });

});

与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中组件(@component)基本知识

浅谈Angular中控制器、服务和指令的关系

浅谈Angular中优化绑定(脏检查)性能的小技巧

浅谈Angular中导入本地json文件的方法

深入了解Angular中的表单

Angular中关于单元测试的面试题,你能回答上来吗?

浅谈Angular中elem.scope()、elem.isolatescope和$compile(elem)(scope)中scope的区别

浅谈Angular中的dom操作

浅谈Angular如何编译打包?如何使用docker发布?

浅谈Angular中父子组件相互传参的方法

更多相关阅读请进入《Angular》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...