Promesas simulando click

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

Cesar Elías Armendariz Ruano

student•

cuando simulamos eventos desde el render es necesario usar el fakeasync y tick

products.component.html

<section class="container">
  <h2>Products Component</h2>
  <h4>Rta</h4>
  <button class="btn-promise" (click)="callPromise()">Call promise</button>
  <p class="rta">{{ rta }}</p>
  <div class="my-grid">
    <app-product
      *ngFor="let product of products"
      [product]="product">
  </app-product>
  </div>
  <button class="btn-products" [disabled]="status === 'loading'" (click)="getAllProducts()">
    <span *ngIf="status === 'init' || status === 'success'">Load more</span>
    <span *ngIf="status === 'loading'">Loading...</span>
    <span *ngIf="status === 'error'">Error</span>
    </button>
</section>

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

    it('should show "my mock string" in <p> when btn was clicked', fakeAsync(() => {
      // Arrange
      const mockMsg = 'my mock string';
      valueService.getPromiseValue.and.returnValue(Promise.resolve(mockMsg));
      const btnDe = fixture.debugElement.query(By.css('.btn-promise'));

      // Act
      btnDe.triggerEventHandler('click', null);
      tick();
      fixture.detectChanges();
      const rtaDe = fixture.debugElement.query(By.css('p.rta'));
      // Assert
      expect(component.rta).toEqual(mockMsg);
      expect(valueService.getPromiseValue).toHaveBeenCalled();
      expect(rtaDe.nativeElement.textContent).toEqual(mockMsg);
    }));
  });

Reto

it('should change the status "loading" to "error" when btn-products was clicked', fakeAsync(() => {
      // Arrange
      productService.getAll.and.returnValue(defer(() => Promise.reject('error')));
      const btnDe = fixture.debugElement.query(By.css('.btn-products'));
      // Act
      btnDe.triggerEventHandler('click', null);
      fixture.detectChanges();
      expect(component.status).toEqual('loading');
      tick(4000); // exec, obs, setTimeout, promise
      fixture.detectChanges();
      // Assert
      expect(component.status).toEqual('error');
    }));

Luis Enrique Villalobos Melendez

student•

¿Por qué al agregarle el await al trigger del botón pasa correctamente la prueba?

it('should show "mocking string" in <p> when button was clicked', async () => {
      // arrange
      const mockMessage = 'mocking string';
      valueService.getPromiseValue.and.returnValue(Promise.resolve(mockMessage));
      const buttonDebug = fixture.debugElement.query(By.css('.btn-promise'));

      // act
      await buttonDebug.triggerEventHandler('click', null);
      fixture.detectChanges();
      const pDebug = fixture.debugElement.query(By.css('p.rta'));

      // assert
      expect(component.rta).toEqual(mockMessage);
      expect(valueService.getPromiseValue).toHaveBeenCalled();
      expect(pDebug.nativeElement.textContent).toEqual(mockMessage);
    });

Jorge Luis Silva Medina

student•

Nico duda, es una buena practica agregar clases a los elementos HTML como identificadores para realizarles pruebas?

Ana Velez Ossa

student•

La solución al reto:

it('should change the status "loading" to "error"', fakeAsync(() => {
      const productsMock = generateManyProducts(10);
      productService.getAll.and.returnValue(defer(() => Promise.reject('error')));
    
      const btnDeb = fixture.debugElement.query(By.css('.btn-getAllProducts'));
      fixture.detectChanges();
      btnDeb.triggerEventHandler('click', null);
      expect(component.status).toEqual('loading');
      tick(4000);
      fixture.detectChanges();
      
      expect(component.status).toEqual('error');
    }));

Danny Alejandro fernandez gallego

student•

La solución al reto:


      it('Test for status "loading" to "sucess"', fakeAsync(()=>{
         //Arrange
         const productsMock = generateManyProducts(10);
         productsService.getAll.and.returnValue(defer(()=>Promise.reject('error')));

         //Act
         const btnCall = fixture.debugElement.query(By.css('.btn-call'))
         btnCall.triggerEventHandler('click', null)
         fixture.detectChanges();

         expect(component.status).toEqual('loading')
         //Asert
         tick(4000);

         fixture.detectChanges();
         expect(component.status).toEqual('error');
         expect(productsService.getAll).toHaveBeenCalled();

      }));

Carlos Alejandro Hernández Mejía

student•

Mi solución al reto:

it('should change the status property from "loading" to "success" when the getAll method from ProductService returns an array of products', fakeAsync(() => {
      // Arrange
      const productsMock = generateManyProducts(5);
      productServiceSpy.getAll.and.returnValue(
        defer(() => Promise.resolve(productsMock))
      );
      spyOn(component, 'getProducts').and.callThrough();
      const debugButton = fixture.debugElement.query(By.css('button[name="loadMore"]'));

      // Act
      debugButton.triggerEventHandler('click', null);
      fixture.detectChanges();
      expect(component.status).toEqual('loading');

      tick();
      fixture.detectChanges();
      // Assert
      expect(component.getProducts).toHaveBeenCalledTimes(1);
      expect(component.status).toEqual('success');
}));

it('should change the status property from "loading" to "error" when the getAll method from ProductService return an error', fakeAsync(() => {
      // Arrange
      const errorMock = new HttpErrorResponse({ status: 404 });
      productServiceSpy.getAll.and.returnValue(
        defer(() => Promise.reject(errorMock))
      );
      spyOn(component, 'getProducts').and.callThrough();
      const debugButton = fixture.debugElement.query(By.css('button[name="loadMore"]'));

      // Act
      debugButton.triggerEventHandler('click', null);
      fixture.detectChanges();
      expect(component.status).toEqual('loading');

      tick();
      fixture.detectChanges();
      // Assert
      expect(component.getProducts).toHaveBeenCalledTimes(1);
      expect(component.status).toEqual('error');
}));

Armando Rivera

student•

Mi solución al reto


  it('should change the status "loading" => "success" by clicking the button', fakeAsync(() => {
      // Arrange
      const productsMock = generateManyProducts();
      productService.getAll.and.returnValue(
        defer(() => Promise.resolve(productsMock))
      );
      const debugButton = fixture.debugElement.query(
        By.css('.getAllProductsButton')
      );

      // Act
      debugButton.triggerEventHandler('click', null);
      fixture.detectChanges();

      const debugSpanButtonBefore = fixture.debugElement.query(
        By.css('.getAllProductsButton span')
      ).nativeElement;
      expect(debugSpanButtonBefore.textContent).toContain('Loading');

      tick(); // Exec all pending observers, promises, setTimeout, etc;
      fixture.detectChanges();
      const debugSpanButtonAfter = fixture.debugElement.query(
        By.css('.getAllProductsButton span')
      ).nativeElement;

      // Assert
      expect(component.status).toEqual('success');
      expect(debugSpanButtonAfter.textContent).toContain('Load more');
    }));

<section class="container">
  <h2>Products Component</h2>
  <h4>Rta</h4>
  <button class="btn-promise" (click)="callPromise()">Call promise</button>
  <p class="rta">{{ rta }}</p>
  <div class="my-grid">
    <app-product
      *ngFor="let product of products"
      [product]="product">
  </app-product>
  </div>
  <button class="btn-products" [disabled]="status === 'loading'" (click)="getAllProducts()">
    <span *ngIf="status === 'init' || status === 'success'">Load more</span>
    <span *ngIf="status === 'loading'">Loading...</span>
    <span *ngIf="status === 'error'">Error</span>
    </button>
</section>

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

    it('should show "my mock string" in <p> when btn was clicked', fakeAsync(() => {
      // Arrange
      const mockMsg = 'my mock string';
      valueService.getPromiseValue.and.returnValue(Promise.resolve(mockMsg));
      const btnDe = fixture.debugElement.query(By.css('.btn-promise'));

      // Act
      btnDe.triggerEventHandler('click', null);
      tick();
      fixture.detectChanges();
      const rtaDe = fixture.debugElement.query(By.css('p.rta'));
      // Assert
      expect(component.rta).toEqual(mockMsg);
      expect(valueService.getPromiseValue).toHaveBeenCalled();
      expect(rtaDe.nativeElement.textContent).toEqual(mockMsg);
    }));
  });

it('should change the status "loading" to "error" when btn-products was clicked', fakeAsync(() => {
      // Arrange
      productService.getAll.and.returnValue(defer(() => Promise.reject('error')));
      const btnDe = fixture.debugElement.query(By.css('.btn-products'));
      // Act
      btnDe.triggerEventHandler('click', null);
      fixture.detectChanges();
      expect(component.status).toEqual('loading');
      tick(4000); // exec, obs, setTimeout, promise
      fixture.detectChanges();
      // Assert
      expect(component.status).toEqual('error');
    }));

it('should show "mocking string" in <p> when button was clicked', async () => {
      // arrange
      const mockMessage = 'mocking string';
      valueService.getPromiseValue.and.returnValue(Promise.resolve(mockMessage));
      const buttonDebug = fixture.debugElement.query(By.css('.btn-promise'));

      // act
      await buttonDebug.triggerEventHandler('click', null);
      fixture.detectChanges();
      const pDebug = fixture.debugElement.query(By.css('p.rta'));

      // assert
      expect(component.rta).toEqual(mockMessage);
      expect(valueService.getPromiseValue).toHaveBeenCalled();
      expect(pDebug.nativeElement.textContent).toEqual(mockMessage);
    });

it('should change the status "loading" to "error"', fakeAsync(() => {
      const productsMock = generateManyProducts(10);
      productService.getAll.and.returnValue(defer(() => Promise.reject('error')));
    
      const btnDeb = fixture.debugElement.query(By.css('.btn-getAllProducts'));
      fixture.detectChanges();
      btnDeb.triggerEventHandler('click', null);
      expect(component.status).toEqual('loading');
      tick(4000);
      fixture.detectChanges();
      
      expect(component.status).toEqual('error');
    }));

      it('Test for status "loading" to "sucess"', fakeAsync(()=>{
         //Arrange
         const productsMock = generateManyProducts(10);
         productsService.getAll.and.returnValue(defer(()=>Promise.reject('error')));

         //Act
         const btnCall = fixture.debugElement.query(By.css('.btn-call'))
         btnCall.triggerEventHandler('click', null)
         fixture.detectChanges();

         expect(component.status).toEqual('loading')
         //Asert
         tick(4000);

         fixture.detectChanges();
         expect(component.status).toEqual('error');
         expect(productsService.getAll).toHaveBeenCalled();

      }));

it('should change the status property from "loading" to "success" when the getAll method from ProductService returns an array of products', fakeAsync(() => {
      // Arrange
      const productsMock = generateManyProducts(5);
      productServiceSpy.getAll.and.returnValue(
        defer(() => Promise.resolve(productsMock))
      );
      spyOn(component, 'getProducts').and.callThrough();
      const debugButton = fixture.debugElement.query(By.css('button[name="loadMore"]'));

      // Act
      debugButton.triggerEventHandler('click', null);
      fixture.detectChanges();
      expect(component.status).toEqual('loading');

      tick();
      fixture.detectChanges();
      // Assert
      expect(component.getProducts).toHaveBeenCalledTimes(1);
      expect(component.status).toEqual('success');
}));

it('should change the status property from "loading" to "error" when the getAll method from ProductService return an error', fakeAsync(() => {
      // Arrange
      const errorMock = new HttpErrorResponse({ status: 404 });
      productServiceSpy.getAll.and.returnValue(
        defer(() => Promise.reject(errorMock))
      );
      spyOn(component, 'getProducts').and.callThrough();
      const debugButton = fixture.debugElement.query(By.css('button[name="loadMore"]'));

      // Act
      debugButton.triggerEventHandler('click', null);
      fixture.detectChanges();
      expect(component.status).toEqual('loading');

      tick();
      fixture.detectChanges();
      // Assert
      expect(component.getProducts).toHaveBeenCalledTimes(1);
      expect(component.status).toEqual('error');
}));

  it('should change the status "loading" => "success" by clicking the button', fakeAsync(() => {
      // Arrange
      const productsMock = generateManyProducts();
      productService.getAll.and.returnValue(
        defer(() => Promise.resolve(productsMock))
      );
      const debugButton = fixture.debugElement.query(
        By.css('.getAllProductsButton')
      );

      // Act
      debugButton.triggerEventHandler('click', null);
      fixture.detectChanges();

      const debugSpanButtonBefore = fixture.debugElement.query(
        By.css('.getAllProductsButton span')
      ).nativeElement;
      expect(debugSpanButtonBefore.textContent).toContain('Loading');

      tick(); // Exec all pending observers, promises, setTimeout, etc;
      fixture.detectChanges();
      const debugSpanButtonAfter = fixture.debugElement.query(
        By.css('.getAllProductsButton span')
      ).nativeElement;

      // Assert
      expect(component.status).toEqual('success');
      expect(debugSpanButtonAfter.textContent).toContain('Load more');
    }));

Promesas simulando click

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

Pruebas a promesas

Promesas simulando click

Directivas

Creando la Directiva

Pruebas a Directiva

Directiva con ngModel

Pipes

Creando pipe

Testing pipes

Próximos pasos

Continúa con el Curso de Testing en Formularios y Routing