Angular 单元测试简介

Zad • 2023-05-03 07:58 • 杂文

随着应用开发的持续进行，越来越多的组件，服务，指令，管道等 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。