FakeAsync and tick

FakeAsync and tick son dos métodos de Angular para analizar ciertos escenarios que incluyen la participación de execution, observers, setTimeout, promises, funcionando de la siguiente manera

product.component.ts

getAllProducts() {
    this.status = 'loading';
    this.productsService.getAll(this.limit, this.offset)
    .subscribe({
      next: (products) => {
        this.products = [...this.products, ...products];
        this.offset += this.limit;
        this.status = 'success';
      },
      error: (error) => {
        setTimeout(() => {
          this.products = [];
          this.status = 'error';
        }, 3000);
      }
    });
  }

product.component.spec.ts

it('should change the status "loading" to "success"', fakeAsync(() => {
      // Arrange
      const productsMock = generateManyProducts(10);
      productService.getAll.and.returnValue(defer(() => Promise.resolve(productsMock)));
      // Act
      component.getAllProducts();
      fixture.detectChanges();
      expect(component.status).toEqual('loading');
      tick(); // exec, obs, setTimeout, promise
      fixture.detectChanges();
      // Assert
      expect(component.status).toEqual('success');
    }));


    it('should change the status "loading" to "error"', fakeAsync(() => {
      // Arrange
      const productsMock = generateManyProducts(10);
      productService.getAll.and.returnValue(defer(() => Promise.reject('error')));
      // Act
      component.getAllProducts();
      fixture.detectChanges();
      expect(component.status).toEqual('loading');
      tick(4000); // exec, obs, setTimeout, promise
      fixture.detectChanges();
      // Assert
      expect(component.status).toEqual('error');

    }));

fakeAsync & tick

fakeAsync es una función que se utiliza en las pruebas unitarias de Angular para ejecutar código sincrónico de manera asincrónica.

💡 Esta función se encuentra en el módulo @angular/core/testing y se utiliza principalmente para probar código que utiliza el temporizador de JavaScript (setTimeout, setInterval, requestAnimationFrame, etc.).

fakeAsync permite ejecutar el código sincrónicamente, pero avanza el reloj del temporizador de manera controlada utilizando el método tick. De esta manera, puedes verificar el estado del código después de que se haya ejecutado el temporizador.

Al utilizar fakeAsync en las pruebas unitarias de Angular, debes tener en cuenta lo siguiente:

1. No debes utilizar la función “done” de Jasmine dentro de un bloque fakeAsync. fakeAsync controla la ejecución de la prueba de manera sincrónica, por lo que no es necesario utilizar “done” para indicar cuándo ha terminado la prueba.
2. Debes asegurarte de avanzar el reloj del temporizador suficiente para que se ejecuten todas las operaciones que deben ejecutarse. Si no avanzas el reloj suficiente, la prueba puede fallar debido a que no se han completado todas las operaciones en el tiempo suficiente.
3. No debes utilizar fakeAsync para probar código que realice operaciones asincrónicas utilizando Promises o Observables. En estos casos, debes utilizar la función waitForAsync de Angular para probar el código de manera asincrónica.
4. Debes asegurarte de avanzar el reloj del temporizador antes de verificar el estado del código. Si verificas el estado del código antes de avanzar el reloj, la prueba puede fallar debido a que no se han completado todas las operaciones en el tiempo suficiente.

Ejemplo de uso

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

describe('MyComponent', () => {
  it('should do something after a delay', fakeAsync(() => {
    let flag = false;
    setTimeout(() => flag = true, 1000);
    expect(flag).toBeFalsy();
    tick(1000);
    expect(flag).toBeTruthy();
  }));
});