• 全国 [切换]
  • 二维码
    晒展网

    晒展APP

    手机也能玩展会,信息同步6大终端平台!

    微信小程序

    微信公众号

    当前位置: 首页 » 行业新闻 » 热点新闻 » 正文

    Angular 单元测试简介

    放大字体  缩小字体 发布日期:2020-01-15 09:31:41   浏览次数:296  发布人:6109****  IP:117.173.23.***  评论:0
    导读

    随着应用开发的持续进行,越来越多的组件,服务,指令,管道等 Angular 元件不断涌现。那么,如何验证这些元件的功能是否正常,从而确保应用功能正常使用呢?答案是单元测试。 认识单元测试 单元测试就是把应用的源代码分割出一个个代码片段,即单元,然后验证这些代码片段(单元)的正确性。一个单元可以是单个函数,方法,过程,模块或对象。 在敏捷开发过程中,单元测试是不可或缺的一个重要部分。首先,在编写代码

    随着应用开发的持续进行,越来越多的组件,服务,指令,管道等 Angular 元件不断涌现。那么,如何验证这些元件的功能是否正常,从而确保应用功能正常使用呢?答案是单元测试。

    认识单元测试

    单元测试就是把应用的源代码分割出一个个代码片段,即单元,然后验证这些代码片段(单元)的正确性。一个单元可以是单个函数,方法,过程,模块或对象。

    在敏捷开发过程中,单元测试是不可或缺的一个重要部分。首先,在编写代码前,先针对要实现的功能构建单元测试,验证输出和逻辑的正确性。然后,开发功能代码实现这一特征,使得单元测试成功通过。

    虽然编写单元测试增加了工作量,但是添加单元测试还是有很多益处:

    • 有助于代码的良好设计。
    • 减少在源代码中引入Bug.
    • 有利于对源代码文档化。

    剖析单元测试

    单元测试的结构通常由两部分组成:

    • 测试用例(Test Spec):一段实际的单元测试代码。
    • 测试集合(Test Suite):测试集合是测试用例的逻辑分组。例如,为某一个功能特征,创建一个测试集合,包含了所有相关的测试用例。

    下面,我们使用 Jasmine 测试框架,也是 Angular 默认使用的测试框架,编写一个简单的测试用例。这是一个计算器的单元测试,包括了加法和减法两个功能。

    describe('计算器', () => { let total: number; beforeEach(() => total = 1); it('should add two numbers', () => { total = total + 1; expect(total).toBe(2); }); it('should subtract two numbers', () => { total = total - 1; expect(total).toBe(0); }); afterEach(() => total = 0); });

    describe 方法定义了一个测试集合,第一个参数描述了集合的名称 计算器,第二个参数是一个箭头函数,包含了实际的测试用例。每一个测试用例,都是使用 it 方法定义的。

    beforeEach 方法负责在运行每一个测试前,执行初始化工作,如把 total 变量设置为 1。 afterEach 方法则是在每一个测试用例运行完后,执行清理工作,如把 total 变量设置为 0。

    Angular 单元测试

    Angular 框架为我们提供了三大工具,帮助我们更愉快地编写和运行单元测试:

    • Jasmine:一款主流的测试框架。
    • Karma:一款主流的单元测试执行引擎。
    • Angular testing utilities:一个工具类,增强在 Angular 框架下,编写单元测试的体验。

    在使用 Angular CLI 创建项目的同时,单元测试环境也已经配置好了,可以直接编写单元测试。但是,在编写实际的单元测试之前,我们先来对 Karma 和测试工具类进行初步的介绍。

    Karma 的配置文件是 karma.conf.js,可以配置各种插件,测试文件的位置,测试覆盖测量工具,报表形式,以及指定不同的浏览器运行测试。

    Angular 测试工具类帮助我们创建编写单元测试的环境,主要包括 TestBed 类和各种助手方法,都位于 @angular/core/testing 名称空间下。

    TestBed 类是一个很重要的概念,他会创建一个测试模块,模拟一个正常的 Angular 模块的行为。我们可以通过 configureTestingModule 方法配置这个测试模块。

    此外,我们可以使用 ComponentFixture 与组件及其元素进行交互;还可以使用 DebugElement 实现跨平台测试。

    在下一篇文章中,我们会对 Angular 的常见元件进行单元测试。

     
    (文/匿名(若涉版权问题请联系我们核实发布者) / 非法信息举报 / 删稿)
    打赏
    免责声明
    • 
    本文为昵称为 6109**** 发布的作品,本文仅代表发布者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,发布者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们154208694@qq.com删除,我们积极做(权利人与发布者之间的调停者)中立处理。郑重说明:不 违规举报 视为放弃权利,本站不承担任何责任!
    有个别老鼠屎以营利为目的遇到侵权情况但不联系本站或自己发布违规信息然后直接向本站索取高额赔偿等情况,本站一概以诈骗报警处理,曾经有1例诈骗分子已经绳之以法,本站本着公平公正的原则,若遇 违规举报 我们100%在3个工作日内处理!
    0相关评论
     

    (c)2008-2022 展会信息发布,找展会,请上晒展网All Rights Reserved.