Pruebas a promesas

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

Cesar Elías Armendariz Ruano

student•

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

Andrés Medina

student•

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.

Juan Luna

student•

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...