Pruebas a promesas

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

Contenido del curso

Introducción

Componentes

Componentes con dependencias

Directivas

Pipes

Próximos pasos

23
Continúa con el Curso de Testing en Formularios y Routing
00:56 min

Tomar examen

Comentarios

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

import { ValueService } from './../../services/value.service';

constructor(
    private valueService: ValueService,
  ) { }

async callPromise () {
    const rta = await this.valueService.getPromiseValue();
    this.rta = rta;
  }

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

Pruebas a promesas

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