HttpClientTestingModule

Es la primera vez que escribo un test,

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

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

Debido a que Angular puede conectarse a API’s desde sus herramientas, específicamente las de HttpClientModule tambien puede hacer testing desde otra herramienta llamada HttpClientTestingModule.

Hay que tener en cuenta
El API funcionan desde el backend asi que no hay responsabilidad de frontend. Por lo que se hara mocking para hacer el testing a la funcionalidad de conexión. Ya que si hacemos prueba directas de conexión podemos causar bloqueos a la API.

lo primero sera crear el archivo de pruebas de product.service.ts y lo llamaremos product.service.spec.ts y lo modificaremos de la siguiente manera.

product.service.spec.ts

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

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

fdescribe('ProductsService', () => {
  let productsService: ProductsService;
  let httpController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        HttpClientTestingModule
      ],
      providers: [
        ProductsService
      ]
    });
    productsService = TestBed.inject(ProductsService);
    httpController = TestBed.inject(HttpTestingController);
  });
  
  it('should be create', () => {
    expect(productsService).toBeTruthy();
  });

  describe('tests for getAllSimple', () => {
    it('should return a product list', () => {
      //Arrange
      const mockData: Product[] = [
        {
          id: '123',
          title: 'title',
          price: 12,
          description: 'blablabla',
          category: {
            id: 112,
            name: 'as'
          },
          images: ['img', 'img']
        }
      ];
      //Act
      productsService.getAllSimple()
      .subscribe((data) => {
        //Assert
        expect(data.length).toEqual(mockData.length);
        //doneFn();
      });
      //http config
      const url = `${environment.API_URL}/api/v1/products`;
      const req = httpController.expectOne(url);
      req.flush(mockData);
      httpController.verify();
    });
  });
});

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

HttpClientTestingModule

HttpClientTestingModule es un módulo de Angular que se utiliza para realizar pruebas unitarias de componentes y servicios que utilizan HttpClient, que es la clase de Angular encargada de realizar solicitudes HTTP.

Este módulo proporciona mocks o sustitutos de dependencias que pueden utilizarse para simular diferentes respuestas HTTP y controlar el comportamiento de HttpClient durante las pruebas.

Para utilizar HttpClientTestingModule, debes importarlo en tu módulo de pruebas y agregarlo a la lista de imports del método configureTestingModule.

Una vez importado, puedes utilizar la clase HttpTestingController para realizar pruebas sobre las solicitudes HTTP realizadas por HttpClient.
\

Por ejemplo, puedes utilizar el método expectOne para verificar que se ha realizado una solicitud específica y utilizar el método flush para proporcionar una respuesta HTTP simulada.

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

describe('ExampleService', () => {
  let service: ExampleService;
  let httpController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [ExampleService]
    });
    service= TestBed.inject(ExampleService);
    httpController = TestBed.inject(HttpTestingController);
  });

	// Another tests

	it('Using HttpTestingController', (doneFn) => {
		// Arrange
		const mockData = // Mock data here!

		// Act
    exampleService.makeRequest().subscribe({
			next: (data) => {
				// Assert
				doneFn();
			},
		});
		
		const request = httpController.expectOne('URL');
    request.flush(mockData);
    httpController.verify();
	});
});