Pruebas a getAllProducts

Clase 14 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

 products: Product[] = [];
 limit = 10;
 offset = 0;
 status: 'loading' | 'success' | 'error' | 'init'= 'init';

  constructor(
    private productsService: ProductsService
  ) { }

  ngOnInit(): void {
    this.getAllProducts();
  }

  getAllProducts() {
    this.status = 'loading';
    this.productsService.getAll(this.limit, this.offset)
    .subscribe(products => {
      this.products = [...this.products, ...products];
      this.offset += this.limit;
      this.status = 'success';
    });
  }

<section class="container">
  <h2>Products Component</h2>
  <div class="my-grid">
    <app-product
      *ngFor="let product of products"
      [product]="product">
  </app-product>
  </div>
  <button [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 getAllProducts()', () => {
    it('should return product list from service', () => {
      // Arrange
      const productsMock = generateManyProducts(10);
      productService.getAll.and.returnValue(of(productsMock));
      const countPrev = component.products.length;
      // Act
      component.getAllProducts();
      // TODO
      const expectedImg = fixture.debugElement.query(By.css('app-product img'));
      fixture.detectChanges();
      // Assert

      expect(component.products.length).toEqual(productsMock.length + countPrev);
      expect(component.products[0].images[0]).toEqual(expectedImg.nativeElement.src);
    });
  });
});

 products: Product[] = [];
 limit = 10;
 offset = 0;
 status: 'loading' | 'success' | 'error' | 'init'= 'init';

  constructor(
    private productsService: ProductsService
  ) { }

  ngOnInit(): void {
    this.getAllProducts();
  }

  getAllProducts() {
    this.status = 'loading';
    this.productsService.getAll(this.limit, this.offset)
    .subscribe(products => {
      this.products = [...this.products, ...products];
      this.offset += this.limit;
      this.status = 'success';
    });
  }

<section class="container">
  <h2>Products Component</h2>
  <div class="my-grid">
    <app-product
      *ngFor="let product of products"
      [product]="product">
  </app-product>
  </div>
  <button [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 getAllProducts()', () => {
    it('should return product list from service', () => {
      // Arrange
      const productsMock = generateManyProducts(10);
      productService.getAll.and.returnValue(of(productsMock));
      const countPrev = component.products.length;
      // Act
      component.getAllProducts();
      // TODO
      const expectedImg = fixture.debugElement.query(By.css('app-product img'));
      fixture.detectChanges();
      // Assert

      expect(component.products.length).toEqual(productsMock.length + countPrev);
      expect(component.products[0].images[0]).toEqual(expectedImg.nativeElement.src);
    });
  });
});

Pruebas a getAllProducts

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