Product Service Http

Curso de Angular: Unit Testing para Servicios

Contenido del curso

Introducción

Fundamentos de unit testing en Angular

Testing en servicios

Proyecto

Testing en consultas HTTP

Bonus

Próximos pasos

25
Toma el Curso de Angular: Unit Testing para Componentes
01:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:31

Product Service Http

Curso de Angular: Unit Testing para Servicios

Clase 13 de 25

Clase 13 / 25

Cesar Elías Armendariz Ruano

Hace 4 años

El product component se conectara a un servicio que hara llamadas a una API real de la siguiente manera

primero utilizaremos modelos y servicios de otro proyecto de la escuela de angular angular-router en la rama de producción donde buscaremos dentro de la carpeta src/app/models todos los modelos y los copiaremos al proyecto de testing con la misma ruta

Posteriormente haremos lo mismo con el servicio de products que estara en la ruta src/app/services/products.service.ts con los siguientes cambios

products.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams, HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
import { retry, catchError, map } from 'rxjs/operators';
import { throwError, zip } from 'rxjs';

import { Product, CreateProductDTO, UpdateProductDTO } from './../models/product.model';
import { environment } from './../../environments/environment';


@Injectable({
  providedIn: 'root'
})

export class ProductsService {

  private apiUrl = `${environment.API_URL}/api/v1`;

  constructor(
    private http: HttpClient
  ) { }

  getByCategory(categoryId: string, limit?: number, offset?: number){
    let params = new HttpParams();
    if (limit && offset != null) {
      params = params.set('limit', limit);
      params = params.set('offset', offset);
    }
    return this.http.get<Product[]>(`${this.apiUrl}/categories/${categoryId}/products`, { params })
  }

  getAllSimple() {
    return this.http.get<Product[]>(`${this.apiUrl}/products`);
  }

  getAll(limit?: number, offset?: number) {
    let params = new HttpParams();
    if (limit && offset != null) {
      params = params.set('limit', limit);
      params = params.set('offset', offset);
    }
    return this.http.get<Product[]>(`${this.apiUrl}/products`, { params })
    .pipe(
      retry(3),
      map(products => products.map(item => {
        return {
          ...item,
          taxes: .19 * item.price
        }
      }))
    );
  }

  fetchReadAndUpdate(id: string, dto: UpdateProductDTO) {
    return zip(
      this.getOne(id),
      this.update(id, dto)
    );
  }

  getOne(id: string) {
    return this.http.get<Product>(`${this.apiUrl}/products/${id}`)
    .pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === HttpStatusCode.Conflict) {
          return throwError('Algo esta fallando en el server');
        }
        if (error.status === HttpStatusCode.NotFound) {
          return throwError('El producto no existe');
        }
        if (error.status === HttpStatusCode.Unauthorized) {
          return throwError('No estas permitido');
        }
        return throwError('Ups algo salio mal');
      })
    )
  }

  create(dto: CreateProductDTO) {
    return this.http.post<Product>(`${this.apiUrl}/products`, dto);
  }

  update(id: string, dto: UpdateProductDTO) {
    return this.http.put<Product>(`${this.apiUrl}/products/${id}`, dto);
  }
  delete(id: string) {
    return this.http.delete<boolean>(`${this.apiUrl}/products/${id}`);
  }
}

posteriormente haremos cambios a nuestros environments del proyecto para conectar con la API

environments.prod.ts

export const environment = {
  production: true,
  API_URL: 'https://api.escuelajs.co'
};

environments.ts

export const environment = {
  production: false,
  API_URL: 'https://api.escuelajs.co'
};

posteriormente haremos una inyección de dependencia en nuestro product component

product.component.ts

import { Component, OnInit } from '@angular/core';

import { Product } from './../../models/product.model';

import { ProductsService } from './../../services/product.service';


export class ProductsComponent implements OnInit {

  products: Product[] = [];

  constructor(
    private productsService: ProductsService
  ) { }

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

  getAllProducts() {
    this.productsService.getAllSimple()
    .subscribe(products => {
      this.products = products;
    });
  }
}

finalmente estilizaremos en product component html y scss

product.component.html

<section class="container">
  <h2>Products Component</h2>
  <div class="my-grid">
    <figure *ngFor="let product of products">
      <img [src]="product.images[0]" alt="">
      <figcaption>
        {{product.title}} - {{product.price}}
      </figcaption>
    </figure>
  </div>
</section>

product.component.scss

.my-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-gap: 15px
}

Introducción

Unit testing para servicios en Angular

Jest vs. Jasmine: entornos de testing para Angular

Fundamentos de unit testing en Angular

Tu primera prueba en Angular

Explorando matchers

Reporte de coverage

Mocha Report

Testing en servicios

Pruebas unitarias para servicios

Servicios con dependencias

Spies

Angular TestBed

TestBed + Spies

Proyecto

Setup y maquetación del proyecto

Product Service Http

Testing en consultas HTTP

HttpClientTestingModule

Generando Mocks

Pruebas para GET

Pruebas maliciosas para GET

Pruebas para POST

Pruebas para PUT y DELETE

Bonus

Pruebas a errores

Pruebas con interceptores

Pruebas al login

Pruebas a la API del navegador

GitHub Actions

Próximos pasos

Toma el Curso de Angular: Unit Testing para Componentes

Product Service Http