Simuler les services et les dépendances
Fournissez des doublures de test via DI
Simuler les services et les dépendances est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Pourquoi simuler les dépendances
Un test de composant doit isoler le composant. S’il injecte un service utilisant HttpClient, vous ne voulez pas effectuer de véritables appels réseau. Fournissez plutôt une doublure de test : un objet factice qui renvoie des données contrôlées afin que les tests soient rapides et déterministes.
Fournir un objet factice avec useValue
La doublure la plus simple est un objet ordinaire fourni avec useValue. Fournissez-le avec le même jeton d’injection que celui demandé par le composant.
const fakeApi = { getUser: () => of({ name: 'Ada' }) };
TestBed.configureTestingModule({
imports: [ProfileComponent],
providers: [{ provide: UserApi, useValue: fakeApi }],
});Espions Jasmine
jasmine.createSpyObj construit un objet factice doté de méthodes espionnes, ce qui permet à la fois de simuler les valeurs renvoyées et de vérifier les appels.
const apiSpy = jasmine.createSpyObj<UserApi>('UserApi', ['getUser']);
apiSpy.getUser.and.returnValue(of({ name: 'Ada' }));
TestBed.configureTestingModule({
providers: [{ provide: UserApi, useValue: apiSpy }],
});Vérifier que le service a été appelé
Après avoir agi sur le composant, vérifiez que l’espion a reçu les arguments attendus.
fixture.componentInstance.load(7);
fixture.detectChanges();
expect(apiSpy.getUser).toHaveBeenCalledWith(7);
expect(apiSpy.getUser).toHaveBeenCalledTimes(1);Renvoyer des observables depuis les simulations
Les services renvoient souvent des observables. Utilisez of() de RxJS pour une réussite synchrone et throwError() pour les échecs, afin de tester les deux branches.
import { of, throwError } from 'rxjs';
apiSpy.getUser.and.returnValue(of({ name: 'Ada' })); // success
apiSpy.getUser.and.returnValue(throwError(() => new Error('boom'))); // erroruseClass pour les objets factices réutilisables
Lorsqu’un objet factice est réutilisé dans plusieurs spécifications, définissez une classe et reliez-la avec useClass.
class FakeUserApi {
getUser() { return of({ name: 'Test' }); }
}
TestBed.configureTestingModule({
providers: [{ provide: UserApi, useClass: FakeUserApi }],
});Simuler HttpClient avec HttpTestingController
Pour tester des services qui effectuent des appels HTTP sans simuler l’ensemble du service, importez provideHttpClientTesting() et videz les requêtes via HttpTestingController.
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
TestBed.configureTestingModule({
providers: [provideHttpClient(), provideHttpClientTesting()],
});Vider une requête HTTP
Attendez une requête, répondez-y avec des données simulées, puis vérifiez qu’il ne reste aucun appel inattendu.
const http = TestBed.inject(HttpTestingController);
service.load();
const req = http.expectOne('/api/users/7');
expect(req.request.method).toBe('GET');
req.flush({ name: 'Ada' });
http.verify();Remplacer un fournisseur pour chaque spécification
Parfois, un seul test nécessite une simulation différente. Utilisez TestBed.overrideProvider() avant createComponent.
TestBed.overrideProvider(UserApi, {
useValue: { getUser: () => throwError(() => new Error('fail')) },
});
const fixture = TestBed.createComponent(ProfileComponent);Simuler uniquement le nécessaire
Une bonne simulation implémente uniquement les méthodes réellement utilisées par le composant. Une simulation excessive lie votre test aux détails internes ; une simulation insuffisante laisse s’échapper de vrais effets secondaires. Respectez le contrat public dont dépend le composant.
Espionner les méthodes d’un service réel
Vous pouvez également conserver un service réel, mais espionner une méthode à l’aide de spyOn(instance, 'method'), ce qui est utile lorsque la majeure partie du service est sans danger, mais qu’un appel doit être intercepté.
const svc = TestBed.inject(AnalyticsService);
spyOn(svc, 'track');
fixture.componentInstance.onClick();
expect(svc.track).toHaveBeenCalledWith('click');Vérification rapide
Comment faire en sorte qu’une simulation vérifie les appels ET contrôle les valeurs renvoyées ?
Récapitulatif
Vous avez remplacé les dépendances réelles par des simulations à l’aide de useValue, useClass et des espions Jasmine ; renvoyé des Observables avec of/throwError ; testé HTTP avec HttpTestingController ; et remplacé des fournisseurs pour chaque spécification. Simulez uniquement le contrat utilisé par le composant.
Questions Fréquemment Posées
La leçon « Simuler les services et les dépendances » est-elle gratuite ?
Oui — le texte complet de « Simuler les services et les dépendances » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Simuler les services et les dépendances » ?
Fournissez des doublures de test via DI Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Simuler les services et les dépendances » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- TestBed et appareils de test de composants
- Tester les entrées, les sorties et le DOM
- Simuler les services et les dépendances
- Tester les signaux et le code asynchrone