HttpClientTestingModule

Cursos Empresas Blog Live Conf Precios

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

HttpClientTestingModule

Rafael Ortiz

student

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

student

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

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