Appearance
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 :
- 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;
});
}
}
Dans le fichier de test unitaire du composant, importez les modules
HttpClientTestingModule
etHttpTestingController
depuis@angular/common/http/testing
.Dans la méthode
beforeEach()
de votre test unitaire, configurez le module de test en utilisant leHttpClientTestingModule
. 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.
Dans la méthode
beforeEach()
, aprÚs avoir configuré le module de test et simulé la réponse HTTP, appelez la méthodefixture.detectChanges()
pour mettre à jour le template avec les nouvelles valeurs des variables du composant.Dans la méthode
it()
du test, utilisez la méthodewhenStable()
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.