Cursos Empresas Blog Live Conf Eventos Precios

0:0016:57

HttpClientTestingModule

Curso de Angular: Unit Testing para Servicios

Clase 14 de 25

Clase 14 / 25

Rafael Ortiz

Hace 3 años

Me está generando este error al correr las pruebas:

Así tengo mi product.service.spec.ts:

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpClientModule } from '@angular/common/http';

import { ProductService } from './product.service';
import { Product } from '../models/product.model';
import { environment } from 'src/environments/environment';

describe('ProductService', () => {
  let productService: ProductService;
  let httpController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientModule,
        HttpClientTestingModule,
      ]
    });

    productService = TestBed.inject(ProductService);
    httpController = TestBed.inject(HttpTestingController);
  });

  it('should be created', () => {
    expect(productService).toBeTruthy();
  });



  describe('getAllSimple', () => {
    it('should return an array of products', (doneFn) => {
      // Arrange
      const dummyProducts: Product[] = [
        {
          id: '1',
          title: 'product 1',
          price: 100,
          description: 'description 1',
          category: {
            id: 1,
            name: 'category 1'
          },
          images: [
            'https://img.uswitch.com/n36b8lzdmgnp/6flMYPMjJ0sZzNs16Fsqa/c525a3f838b0e62716631f003390506b/shutterstock_1736005427212121212.jpg?auto=format%2Ccompress&q=35&ixlib=react-9.5.1-beta.1',
            'https://i0.wp.com/imgs.hipertextual.com/wp-content/uploads/2020/02/hipertextual-samsung-galaxy-a51-2020945736.jpg?resize=800%2C600&quality=50&strip=all&ssl=1'
          ]
        },
        {
          id: '2',
          title: 'product 2',
          price: 200,
          description: 'description 2',
          category: {
            id: 2,
            name: 'category 2'
          },
          images: [
            'https://m-cdn.phonearena.com/images/article/64576-wide-two_1200/The-Best-Phones-to-buy-in-2023---our-top-10-list.jpg',
            'https://www.todoparaelhogar.net/wp-content/uploads/2023/09/mejores-marcas-de-celulares-800x533.jpg'
          ]
        }
      ];

      productService.getAllSimple()
        .subscribe(products => {
          // Assert
          expect(products.length).toEqual(dummyProducts.length);
          expect(products).toEqual(dummyProducts);
          doneFn();
        });

      const url = `${environment.API_URL}/api/v1/products`;
      const req = httpController.expectOne(url);
      expect(req.request.method).toBe('GET');
      req.flush(dummyProducts);
      httpController.verify();
    });
  });
});

Y así tengo mi product.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 ProductService {

  public 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}`);
  }
}

¿Por qué me genera el error?

Víctor Rolack

Hace 2 años

Qué versión de angular estás usando? Estoy en la 19 con una aplicación full standalone y me salió ese mismo error porque la implementación cambia un poquito. Si no estás usando ngModules, prueba con colocar en tus providers de product.service.spec provideHttpClient() y luego provideHttpClientTesting() (importante ese orden)

 beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        ProductsService,
        provideHttpClient(),
        provideHttpClientTesting(),
      ],
    });

Comentarios (6)6 comentarios

Miguel Angel Coy Triana

Hace 4 años

Hasta el momento el mejor curso de Unit testing que he visto! Gracias Nicolas!

Luis Eduardo

Sii, yo vengo del curso de React unit testing y no le entendi nada a ese

Kengya Moncada

certifico ♥

Cesar Elías Armendariz Ruano

Franklin Gil

Estoy usando angular 14, y en este punto, no es necesario colocarle providers en la configuracion funciona perfecto.

beforeEach(() => {
    TestBed.configureTestingModule({
      imports:[HttpClientTestingModule]
    });
    service = TestBed.inject(PokemonService);
  });

Andrés Quintero Arias

En los métodos de los servicios es buena práctica tipar siempre la salida

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

Carlos Alejandro Hernández Mejía

HttpClientTestingModule

Progreso del curso

Introducción

Fundamentos de unit testing en Angular

Testing en servicios

Proyecto

Testing en consultas HTTP

Bonus

Próximos pasos