关于前端:关于-fakeAsync-在-Angular-应用单元测试开发领域的使用介绍

笔者最近三年始终在 SAP 中国研究院从事 SAP Commerce Cloud (电商云)这款产品的前端开发。电商云 Storefront 基于开源我的项目 Spartacus，其 Github 代码仓库地址能够通过这个链接拜访。

我最近所在的团队始终在负责 Spartacus 服务器端渲染 (SSR) 逻辑的开发，蕴含渲染引擎(Rendering Engine) 和配套的单元测试代码开发工作。在开发过程中有不少待测试的代码须要借助 @angular/core/testing 这个开发包里的 fakeAsync 来实现单元测试，因而我也利用工作中的机会，深入研究了 fakeAsync 的应用。

从其名称 fakeAsync 不难判断，这个工具用于模仿异步操作和解决工夫相干的工作。从其所处的开发包 @angular/core/testing 也能联想到，这个工具的目标是让 Angular 开发人员更轻松地编写和执行测试用例。

fakeAsync容许咱们编写同步格调的测试代码，同时模仿异步操作，而无需理论期待异步工作实现。这在 Angular 利用的单元测试中十分有价值，因为咱们常常须要测试与异步操作相干的组件或服务。

什么是 fakeAsync？

fakeAsync 是 Angular 测试框架的一部分，它提供了一种形式来模仿异步操作，使测试用例能够以同步的形式编写。通常，在 Angular 利用中，咱们会应用 async 和await 来解决异步操作，但在测试中，这可能会导致测试用例的代码变得复杂和难以了解。引入 fakeAsync 的指标是简化测试代码，使其更易于浏览和保护。

fakeAsync 的次要性能包含：

1. 模仿定时器：开发人员能够应用 fakeAsync 来模仿 setTimeout、setInterval 等定时器函数，以便测试中的工夫期待不会导致理论期待。
2. 管制工夫：fakeAsync 能显式地推动工夫，以模仿异步操作的实现，而不是期待理论工夫过来。
3. 同步测试代码：能够在 fakeAsync 块内编写同步代码，而不须要应用 async 和 await 来解决异步操作。

如何应用 fakeAsync？

要应用 fakeAsync，首先须要导入它并包裹测试代码块。依照常规，咱们会在测试套件中应用 describe 代码块，将测试代码包裹在 fakeAsync 函数外部。而后，能够应用 tick 函数来推动工夫，模仿异步操作的实现。

以下是应用 fakeAsync 的个别步骤：

1. 导入 fakeAsync：

import {fakeAsync} from '@angular/core/testing';

2. 在测试套件中应用 fakeAsync：

describe('MyComponent', () => {it('should do something asynchronously', fakeAsync(() => {// 测试代码}));
});

3. 应用 tick 来推动工夫：

it('should do something asynchronously', fakeAsync(() => {
  // 模仿异步操作
  setTimeout(() => {// 这里能够编写异步操作实现后要执行的代码}, 1000);

  // 推动工夫，模仿异步操作实现
  tick(1000);
}));

示例：应用 fakeAsync 进行组件测试

让咱们通过一个示例来演示如何在 Angular 组件测试中应用 fakeAsync。假如咱们有一个简略的组件 CounterComponent，它蕴含一个按钮，每次点击按钮时计数器的值减少 1。咱们将编写一个测试用例来确保计数器的行为是正确的。

首先，创立CounterComponent：

// counter.component.ts
import {Component} from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <button (click)="increment()">Increment</button>
    <p>{{count}}</p>
  `,
})
export class CounterComponent {
  count = 0;

  increment() {this.count++;}
}

接下来，编写一个测试用例，应用 fakeAsync 来测试 CounterComponent 的行为：

// counter.component.spec.ts
import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
import {CounterComponent} from './counter.component';

describe('CounterComponent', () => {
  let fixture: ComponentFixture<CounterComponent>;
  let component: CounterComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({declarations: [CounterComponent],
    });

    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
  });

  it('should increment count when the button is clicked', fakeAsync(() => {
    // 触发按钮点击事件
    const button = fixture.nativeElement.querySelector('button');
    button.click();

    // 推动工夫，模仿异步操作实现
    tick();

    // 断言计数器的值是否减少
    expect(component.count).toBe(1);

    // 再次触发按钮点击事件
    button.click();

    // 推动工夫，模仿异步操作实现
    tick();

    // 断言计数器的值是否进一步减少
    expect(component.count).toBe(2);
  }));
});

在上述测试用例中，咱们首先模仿了按钮的点击事件，而后应用 tick 来推动工夫，以模仿异步操作的实现。接着，咱们断言计数器的值是否按预期减少。

应用 fakeAsync，咱们能够将异步操作看作是同步的，从而更容易编写和了解测试用例。

模仿定时器

fakeAsync 还能够用于模仿定时器函数，如 setTimeout 和 setInterval.

同样通过例子来阐明。

假如咱们有一个组件TimerComponent，它在初始化后期待 5 秒钟，而后显示一条音讯。咱们将编写一个测试用例来确保音讯在 5 秒后正确显示。

首先，创立 TimerComponent：

// timer.component.ts
import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-timer',
  template: `
    <p *ngIf="showMessage">{{message}}</p>
  `,
})
export class TimerComponent implements OnInit {
  showMessage = false;
  message = 'Message after 5 seconds';

  ngOnInit() {setTimeout(() => {this.showMessage = true;}, 5000);
  }
}

接下来，编写测试用例，应用 fakeAsync 和 tick 来测试 TimerComponent 的行为：

// timer.component.spec.ts
import {ComponentFixture, TestBed, fakeAsync, tick} from '@angular/core/testing';
import {TimerComponent} from './timer.component';

describe('TimerComponent', () => {
  let fixture: ComponentFixture<TimerComponent>;
  let component: TimerComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({declarations: [TimerComponent],
    });

    fixture = TestBed.createComponent(TimerComponent);
    component = fixture.componentInstance;
  });

  it('should display the message after 5 seconds', fakeAsync(() => {
    // 触发组件的 ngOnInit，模仿定时器启动
    fixture.detectChanges();

    // 断言音讯未显示
    expect(component.showMessage).toBe(false);

    // 推动工夫，模仿期待 5 秒钟
    tick(5000);

    // 断言音讯已显示
    expect(component.showMessage).toBe(true);

    // 获取音讯元素并断言音讯文本
    const messageElement = fixture.nativeElement.querySelector('p');
    expect(messageElement.textContent).toBe('Message after 5 seconds');
  }));
});

在上述测试用例中，咱们首先触发组件的 ngOnInit，而后应用 tick 推动工夫，模仿期待 5 秒钟。最初，咱们断言音讯是否在 5 秒后正确显示。

总结

fakeAsync 是 Angular 测试框架中的一个功能强大的工具，用于简化异步测试用例的编写和执行。它容许开发人员在单元测试编写过程中，将异步操作看作是同步的，模仿定时器函数，并管制工夫的后退，从而使测试更容易编写和了解。