Angular Academy · Les

Services en dependencies mocken

Lever test doubles via DI

Les 3 van 413 stappen

Services en dependencies mocken is een gratis Angular Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.

Waarom afhankelijkheden nabootsen

Een componenttest moet de component isoleren. Als deze een service injecteert die op HttpClient is gebaseerd, wil je geen echte netwerkaanroepen doen. Geef in plaats daarvan een testdubbel door: een nepobject dat gecontroleerde gegevens retourneert, zodat tests snel en voorspelbaar zijn.

Een nepobject doorgeven via useValue

Het eenvoudigste testdubbel is een normaal object dat je met useValue doorgeeft. Geef het door onder hetzelfde injectietoken waar de component om vraagt.

const fakeApi = { getUser: () => of({ name: 'Ada' }) };
TestBed.configureTestingModule({
  imports: [ProfileComponent],
  providers: [{ provide: UserApi, useValue: fakeApi }],
});

Jasmine-spionnen

jasmine.createSpyObj bouwt een nepobject met spionmethoden, zodat je zowel geretourneerde waarden kunt instellen als aanroepen kunt controleren.

const apiSpy = jasmine.createSpyObj<UserApi>('UserApi', ['getUser']);
apiSpy.getUser.and.returnValue(of({ name: 'Ada' }));
TestBed.configureTestingModule({
  providers: [{ provide: UserApi, useValue: apiSpy }],
});

Controleren of de service is aangeroepen

Controleer na de actie op de component of de spion de verwachte argumenten heeft ontvangen.

fixture.componentInstance.load(7);
fixture.detectChanges();
expect(apiSpy.getUser).toHaveBeenCalledWith(7);
expect(apiSpy.getUser).toHaveBeenCalledTimes(1);

Observables retourneren vanuit nabootsingen

Services retourneren vaak Observables. Gebruik RxJS of() voor synchrone successen en throwError() voor fouten, zodat je beide vertakkingen kunt testen.

import { of, throwError } from 'rxjs';

apiSpy.getUser.and.returnValue(of({ name: 'Ada' }));     // success
apiSpy.getUser.and.returnValue(throwError(() => new Error('boom'))); // error

useClass voor herbruikbare nabootsingen

Wanneer een nepobject in veel tests wordt hergebruikt, definieer je een klasse en koppel je deze met useClass.

class FakeUserApi {
  getUser() { return of({ name: 'Test' }); }
}
TestBed.configureTestingModule({
  providers: [{ provide: UserApi, useClass: FakeUserApi }],
});

HttpClient nabootsen met HttpTestingController

Om services te testen die HTTP-aanroepen doen zonder de hele service na te bootsen, importeert u provideHttpClientTesting() en maakt u aanvragen af via HttpTestingController.

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

TestBed.configureTestingModule({
  providers: [provideHttpClient(), provideHttpClientTesting()],
});

Een HTTP-aanvraag afmaken

Verwacht een aanvraag, reageer erop met nepgegevens en controleer vervolgens of er geen onverwachte aanroepen zijn overgebleven.

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

Een provider per specificatie overschrijven

Soms heeft één test een andere nepimplementatie nodig. Gebruik TestBed.overrideProvider() vóór createComponent.

TestBed.overrideProvider(UserApi, {
  useValue: { getUser: () => throwError(() => new Error('fail')) },
});
const fixture = TestBed.createComponent(ProfileComponent);

Mock precies genoeg

Een goede testdubbel implementeert alleen de methoden die de component daadwerkelijk gebruikt. Te veel mocken koppelt uw test aan interne details; te weinig mocken laat echte neveneffecten lekken. Stem de mock af op het openbare contract waarvan de component afhankelijk is.

Echte servicemethoden spioneren

U kunt ook een echte service behouden, maar één methode bespioneren met spyOn(instance, 'method'). Dat is nuttig wanneer het grootste deel van de service onschadelijk is, maar één aanroep moet worden onderschept.

const svc = TestBed.inject(AnalyticsService);
spyOn(svc, 'track');
fixture.componentInstance.onClick();
expect(svc.track).toHaveBeenCalledWith('click');

Snelle controle

Hoe zorgt u ervoor dat een nepimplementatie aanroepen kan controleren én retourwaarden kan bepalen?

Beantwoord dit in de interactieve les

Samenvatting

U hebt echte afhankelijkheden vervangen door testdubbels met useValue, useClass en Jasmine-spies; Observables teruggegeven met of/throwError; HTTP getest via HttpTestingController; en providers per specificatie overschreven. Mock alleen het contract dat de component gebruikt.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 38
Lessen: 144

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Services en dependencies mocken” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Services en dependencies mocken”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.

Wat leer ik in “Services en dependencies mocken”?

Lever test doubles via DI Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Angular Academy te beginnen?

Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Services en dependencies mocken”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Angular Academy?

Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Angular Academy