Contenido del curso
Componentes
Componentes con dependencias
Directivas
Pipes
Próximos pasos
FakeAsync and tick
Cesar Elías Armendariz Ruano
EstudianteContenido del curso
FakeAsync and tick
Cesar Elías Armendariz Ruano
Estudiante
Carlos Alejandro Hernández Mejía
Estudiante
Pedro Caballero
EstudianteFakeAsync 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:
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.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(); })); });
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