FakeAsync and tick

Clase 15 de 23 • Curso de Angular: Unit Testing para Componentes

Cesar Elías Armendariz Ruano

student•

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

    }));

Carlos Alejandro Hernández Mejía

student•

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:

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.
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.
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.
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();
  }));
});

Pedro Caballero

student•

Tengo una duda profesor, en el método del subscribe. Por ejemplo en la línea 32 me parece, donde tiene : this.offset += this.limit.

Por ejemplo si mi respuesta llegará a tener mas atributos, como puedo realizar eso, estos realizando una prueba unitaria con ese ejemplo pero no puede leer la propiedad, me marca que es indefinida.

Por ejemplo de la siguiente manera

this. offset += this.limit.respuesta

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

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

    }));

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

FakeAsync and tick

Introducción

Unit Testing en Angular para Componentes

Creando el proyecto

Primera prueba

Componentes

Creando un componente & nativeElement

DebugElement & ByCss

Componentes con Inputs

Simulando el clic

Componentes con Outputs

Pruebas aisladas al componente

Pruebas con componente padre

Resolviendo el reto

Componentes con dependencias

Proyecto: creando product component

Componentes con dependencias

Pruebas a getAllProducts

FakeAsync and tick

Pruebas a promesas

Promesas simulando click

Directivas

Creando la Directiva

Pruebas a Directiva

Directiva con ngModel

Pipes

Creando pipe

Testing pipes

Próximos pasos

Continúa con el Curso de Testing en Formularios y Routing