Angular
Tests Unitaires • Module 4

Tests des Requêtes HTTP

Maîtriser HttpTestingController (et provideHttpClientTesting()) pour intercepter, inspecter et répondre aux requêtes HTTP sans jamais faire de vrais appels réseau.

Intercepteur HTTP Mocké
Réponse Mockée reçue :
{
  "success": true,
  "count": 42,
  "data": ["Angular 19", "Signals", "RxJS"]
}
Vérifications HttpTestingController :
const req = httpTesting.expectOne('/api/cours');
expect(req.request.method).toBe('GET');
req.flush({ success: true, count: 42 });
httpTesting.verify(); // Aucun résidu
1️⃣
expectOne(url)

Capture l'unique requête attendue vers l'URL indiquée. Échoue si 0 ou plus de 1 requête a été émise.

2️⃣
req.flush(data)

Simule la réponse HTTP envoyée par le serveur avec le code statut (par défaut 200 OK) et le body JSON.

3️⃣
httpTesting.verify()

À appeler dans afterEach() pour s'assurer qu'aucune requête pendante n'a été oubliée.

Configuration avec provideHttpClient & provideHttpClientTesting
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';

describe('CoursApiService', () => {
  let service: CoursApiService;
  let httpTesting: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        provideHttpClient(),
        provideHttpClientTesting(),
        CoursApiService
      ]
    });
    service = TestBed.inject(CoursApiService);
    httpTesting = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    httpTesting.verify();
  });

  it('devrait retourner les cours depuis l\'API', () => {
    service.getCours().subscribe(data => {
      expect(data.length).toBe(2);
    });

    const req = httpTesting.expectOne('/api/cours');
    expect(req.request.method).toBe('GET');
    req.flush([{ id: 1, titre: 'Angular' }, { id: 2, titre: 'React' }]);
  });
});