No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

FakeAsync and tick

15/23
Recursos

Aportes 2

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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