📱 Je vous prĂ©sente le livre Angular

  • 1) Il offre un contenu clair et concis, tout en couvrant une multitude de concepts d'Angular.
  • 2) Le livre est structurĂ© en trois niveaux : dĂ©butant, intermĂ©diaire et avancĂ©
  • 3) traite des pratiques les plus rĂ©centes d'Angular, comme les signaux, les vues diffĂ©rĂ©es, la gestion des flux, entre autres
  • 4) De plus, vous y trouverez plusieurs liens vers des exemples de code source pour approfondir vos connaissances en pratique.
Consulter un extrait

Skip to content

Tester un composant avec des notions asynchrones ​

Pour tester si une liste d'utilisateurs rĂ©cupĂ©rĂ©e avec une requĂȘte HTTP s'affiche correctement dans le template d'un composant Angular, vous pouvez suivre les Ă©tapes ci-dessous :

  1. Dans votre composant, crĂ©ez une propriĂ©tĂ© users pour stocker la liste d'utilisateurs et une mĂ©thode getUsers() pour rĂ©cupĂ©rer la liste d'utilisateurs en utilisant une requĂȘte HTTP. Par exemple :
ts
import { Component, OnInit, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Liste des utilisateurs</h1>
    <ul>
    @for (user of users ; track user.id) {
      <li>{{ user.name }}</li>
    }
    </ul>
  `
})
export class AppComponent implements OnInit {
  private http = inject(HttpClient);
  users: any = [];

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/users')
      .subscribe(users => {
        this.users = users;
      });
  }
}
  1. Dans le fichier de test unitaire du composant, importez les modules HttpClientTestingModule et HttpTestingController depuis @angular/common/http/testing.

  2. Dans la méthode beforeEach() de votre test unitaire, configurez le module de test en utilisant le HttpClientTestingModule. Par exemple :

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

import { AppComponent } from './app.component';

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let httpMock: HttpTestingController;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [ AppComponent, HttpClientTestingModule ]
    })
    .compileComponents();

    httpMock = TestBed.inject(HttpTestingController);
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  afterEach(() => {
    httpMock.verify()
  })

  // tests go here
});

httpMock.verify() ?

httpMock.verify() est une mĂ©thode utilisĂ©e dans les tests unitaires pour vĂ©rifier si toutes les requĂȘtes HTTP programmĂ©es avec httpMock ont Ă©tĂ© effectuĂ©es correctement.

  1. Dans la méthode beforeEach(), aprÚs avoir configuré le module de test et simulé la réponse HTTP, appelez la méthode fixture.detectChanges() pour mettre à jour le template avec les nouvelles valeurs des variables du composant.

  2. Dans la méthode it() du test, utilisez la méthode whenStable() pour attendre la résolution de toutes les opérations asynchrones avant de vérifier le template. Par exemple :

ts
it('should display a list of users', async () => {
    httpMock.expectOne('https://jsonplaceholder.typicode.com/users')
        .flush([
          { name: 'Leanne Graham' },
          { name: 'Ervin Howell' },
        // etc.
    ]);

    fixture.detectChanges(); // déclenche ngOnInit
    await fixture.whenStable(); // Garantit que toutes les opérations asynchrones se sont terminées 
    fixture.detectChanges(); // Affiche le résultat dans le template
    const userElements = fixture.nativeElement.querySelectorAll('li');
    expect(userElements.length).toBe(10);
    expect(userElements[0].textContent).toBe('Leanne Graham');
    expect(userElements[1].textContent).toBe('Ervin Howell');
});

Dans ce code, le test attend la rĂ©solution de toutes les opĂ©rations asynchrones en appelant la mĂ©thode whenStable() avant de vĂ©rifier les Ă©lĂ©ments du template. Cela garantit que les donnĂ©es rĂ©cupĂ©rĂ©es par la requĂȘte HTTP sont Ă  jour lorsque le test vĂ©rifie les Ă©lĂ©ments du template.

En utilisant la mĂ©thode whenStable() dans ce test unitaire, vous pouvez ĂȘtre sĂ»r que les donnĂ©es dans le template sont Ă  jour et que le test vĂ©rifie la bonne liste d'utilisateurs.

C'est quoi un mock et httpMock ? ​

Un mock est un objet de substitution utilisĂ© dans les tests unitaires pour simuler le comportement d'un objet rĂ©el. Les mocks peuvent ĂȘtre utilisĂ©s pour simuler des rĂ©ponses Ă  des appels de fonction, des retours de valeur ou des Ă©vĂ©nements d'un objet rĂ©el, afin de tester le comportement d'une partie de votre code sans avoir Ă  utiliser l'objet rĂ©el.

Dans l'exemple de test unitaire, l'objet httpMock est un mock de l'objet HttpTestingController qui est utilisĂ© pour simuler une rĂ©ponse HTTP Ă  une requĂȘte faite par le composant. Le mock est utilisĂ© pour vĂ©rifier si la requĂȘte a Ă©tĂ© faite et pour simuler une rĂ©ponse HTTP pour tester le comportement du composant en rĂ©ponse Ă  cette requĂȘte.

Utiliser des mocks dans les tests unitaires est utile pour isoler le code que vous testez et pour éviter les dépendances externes qui pourraient affecter les résultats des tests. Cela permet également de tester des parties spécifiques de votre code de maniÚre plus précise et de détecter les erreurs plus facilement.

Pourquoi utiliser HttpClientTestingModule au lieu de HttpClientModule ? ​

Dans les tests unitaires, il est recommandé d'utiliser le module HttpClientTestingModule au lieu du module HttpClientModule pour les opérations HTTP. Le module HttpClientTestingModule est conçu pour les tests unitaires et permet de simuler des réponses HTTP dans les tests, ce qui n'est pas possible avec le module HttpClientModule.

En utilisant le module HttpClientTestingModule, vous pouvez facilement contrĂŽler les rĂ©ponses HTTP dans vos tests unitaires et vĂ©rifier si votre code gĂšre correctement ces rĂ©ponses. Cela permet de tester les parties de votre code qui utilisent des requĂȘtes HTTP de maniĂšre plus prĂ©cise et sans avoir Ă  se connecter Ă  un serveur rĂ©el.

Chaque mois, recevez en avant-premiÚre notre newsletter avec les derniÚres actualités, tutoriels, astuces et ressources Angular directement par email !