Pruebas a promesas
Clase 16 de 23 • Curso de Angular: Unit Testing para Componentes
Contenido del curso
Cesar Elías Armendariz Ruano
student•
hace 4 años
Clase 16 de 23 • Curso de Angular: Unit Testing para Componentes
Contenido del curso
Cesar Elías Armendariz Ruano
Andrés Medina
Juan Luna
Aqui ejecutaremos pruebas a promesas desde componentes para lo cual probaremos utilizando value service que tiene una función de llamada a una promesa
primero lo inyectaremos como dependencia
products.component.ts
import { ValueService } from './../../services/value.service'; constructor( private valueService: ValueService, ) { } async callPromise () { const rta = await this.valueService.getPromiseValue(); this.rta = rta; }
luego lo llamaremos para hacer las pruebas
products.component.spec.ts
import { ValueService } from './../../services/value.service'; describe('ProductsComponent', () => { let valueService: jasmine.SpyObj<ValueService>; beforeEach(async () => { const productServiceSpy = jasmine.createSpyObj('ProductsService', ['getAll']); const valueServiceSpy = jasmine.createSpyObj('ValueService', ['getPromiseValue']); await TestBed.configureTestingModule({ declarations: [ ProductsComponent, ProductComponent ], providers: [ { provide: ProductsService, useValue: productServiceSpy }, { provide: ValueService, useValue: valueServiceSpy } ] }) .compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(ProductsComponent); component = fixture.componentInstance; productService = TestBed.inject(ProductsService) as jasmine.SpyObj<ProductsService>; valueService = TestBed.inject(ValueService) as jasmine.SpyObj<ValueService>; const productsMock = generateManyProducts(3); productService.getAll.and.returnValue(of(productsMock)); fixture.detectChanges(); //ngOnInit() }); describe('test for callPromise', () => { it('should call to promise', async() => { // Arrange const mockMsg = 'my mock string'; valueService.getPromiseValue.and.returnValue(Promise.resolve(mockMsg)); // Act await component.callPromise(); fixture.detectChanges(); // Assert expect(component.rta).toEqual(mockMsg); expect(valueService.getPromiseValue).toHaveBeenCalled(); });
No lograba hacer funcionar este test, siempre fallaba porque quería suscribirse a algo que no estaba definido.
Entonces entedí que al ejecutar fixture.detectChanges() estaba ejecutando el ciclo de vida del componente, por lo que se estaba ejecuntando el ngOnInit del componente Products.
En el ngOnInit, este componente llama a getAllProducts() y ahí es donde se genera esta suscripción.
Por lo tanto para solucionar las fallas en este test tuve que añadir también un espía para el productsService con un mock de productos.
Entonces mi duda es, ¿porqué debemos usar fakeAsync() y tick, si podemos hacerlo directamente con Async() y await? o es que esto último es solo válido para promesas y lo otro para observables y setTimeout(), no me quedó claro del todo...