Introduction to the use of fakeAsync in the field of Angular application unit test development

The author has been working on the front-end development of the SAP Commerce Cloud (e-commerce cloud) product at SAP China Research Institute for the past three years. The e-commerce cloud Storefront is based on the open source project Spartacus, and its Github code warehouse address can be accessed through this link .

The team I am currently working on has been responsible for the development of Spartacus server-side rendering (SSR) logic, including the development of the rendering engine (Rendering Engine) and supporting unit test code. During the development process, there was a lot of code to be tested that required the use of @angular/core/testingfakeAsync in this development package to complete unit testing. Therefore, I also took advantage of the opportunity at work to conduct in-depth research on the use of fakeAsync.

As is easy to tell from its name fakeAsync, this tool is used to simulate asynchronous operations and handle time-related tasks. @angular/core/testingAs you can imagine from the development package in which it is located , the purpose of this tool is to make it easier for Angular developers to write and execute test cases.

fakeAsyncAllows us to write synchronous style test code while simulating asynchronous operations without actually waiting for the asynchronous task to complete. This is very valuable in unit testing of Angular applications, as we often need to test components or services related to asynchronous operations.

what is fakeAsyncit

fakeAsyncIt is part of the Angular testing framework and provides a way to simulate asynchronous operations so that test cases can be written in a synchronous manner. Usually, in Angular applications, we will use asyncand awaitto handle asynchronous operations, but in testing, this may cause the code of the test case to become complex and difficult to understand. The goal of introducing fakeAsyncis to simplify test code, making it easier to read and maintain.

fakeAsyncThe main functions include:

1. Simulating timers : Developers can use fakeAsyncto simulate setTimeout, setIntervaletc. timer functions so that time waiting in tests does not result in actual waiting.

2. Controlling Time : fakeAsyncThe ability to explicitly advance time to simulate the completion of an asynchronous operation rather than waiting for actual time to pass.

3. Synchronous test code : You can fakeAsyncwrite synchronous code inside a block without using asyncand awaitto handle asynchronous operations.

How to use fakeAsync?

To use fakeAsync, you first need to import it and wrap the test code block. By convention, we use code blocks in test suites describeto wrap test code fakeAsyncinside functions. You can then use tickthe function to advance time, simulating the completion of an asynchronous operation.

Here are fakeAsyncthe general steps to use :

1. Import fakeAsync:

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

2. In the test suite use fakeAsync:

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

3. Use tickto advance time:

it('should do something asynchronously', fakeAsync(() => {
    
    
  // 模拟异步操作
  setTimeout(() => {
    
    
    // 这里可以编写异步操作完成后要执行的代码
  }, 1000);

  // 推进时间，模拟异步操作完成
  tick(1000);
}));

#Example: fakeAsynccomponent testing using

Let's walk through an example to demonstrate how it can be used in Angular component testing fakeAsync. Let's say we have a simple component CounterComponentthat contains a button that increments a counter by 1 each time the button is clicked. We'll write a test case to make sure the counter behaves correctly.

First, create 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++;
  }
}

Next, write a test case to fakeAsynctest CounterComponentthe behavior of :

// 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);
  }));
});

In the above test case, we first simulate the click event of the button, and then use tickto advance the time to simulate the completion of the asynchronous operation. Next, we assert that the value of the counter is increasing as expected.

Using fakeAsync, we can treat asynchronous operations as synchronous, making it easier to write and understand test cases.

Analog timer

fakeAsyncCan also be used to simulate timer functions such as setTimeoutand setInterval.

Also explained through examples.

Let's say we have a component TimerComponentthat waits 5 seconds after initialization and then displays a message. We will write a test case to ensure that the message is displayed correctly after 5 seconds.

First, create 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);
  }
}

Next, write test cases using fakeAsyncand tickto test TimerComponentthe behavior of :

// 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');
  }));
});

In the above test case, we first trigger the component ngOnInit, and then use tickadvance time to simulate waiting for 5 seconds. Finally, we assert whether the message was displayed correctly after 5 seconds.

Summarize

fakeAsyncIt is a powerful tool in the Angular testing framework that simplifies the writing and execution of asynchronous test cases. It allows developers to treat asynchronous operations as synchronous, simulate timer functions, and control the advancement of time during unit test writing, making tests easier to write and understand.