Angular Academy · Lektion

Mocka tjänster och beroenden

Tillhandahåll testdubbletter via DI.

Lektion 3 av 413 steg

Mocka tjänster och beroenden är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Varför mocka beroenden

Ett komponenttest bör isolera komponenten. Om den injicerar en tjänst som bygger på HttpClient vill ni inte göra riktiga nätverksanrop. Tillhandahåll i stället en test double: ett fejkobjekt som returnerar kontrollerade data, så att testerna blir snabba och deterministiska.

Tillhandahåll en fejk via useValue

Den enklaste testdubletten är ett vanligt objekt som tillhandahålls med useValue. Tillhandahåll det under samma injektionstoken som komponenten efterfrågar.

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

Jasmine-spioner

jasmine.createSpyObj skapar en fejk med spionmetoder, så att ni både kan ange returvärden och kontrollera anrop.

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

Kontrollera att tjänsten anropades

Efter att ni har utfört en åtgärd på komponenten verifierar ni att spionen tog emot de förväntade argumenten.

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

Returnera Observables från mockar

Tjänster returnerar ofta Observables. Använd RxJS of() för synkrona lyckade resultat och throwError() för fel, så att ni kan testa båda grenarna.

import { of, throwError } from 'rxjs';

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

useClass för återanvändbara fejkobjekt

När ett fejkobjekt återanvänds i många specifikationer definierar ni en klass och kopplar in den med useClass.

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

Mocka HttpClient med HttpTestingController

För att testa tjänster som anropar HTTP utan att fejka hela tjänsten importerar du provideHttpClientTesting() och tömmer begäranden via HttpTestingController.

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

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

Tömma en HTTP-begäran

Förvänta dig en begäran, svara på den med fejkat data och verifiera sedan att inga oväntade anrop återstår.

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

Åsidosätta en provider per test

Ibland behöver ett test en annan fejkad implementation. Använd TestBed.overrideProvider() före createComponent.

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

Mocka precis tillräckligt

En bra testdublett implementerar endast de metoder som komponenten faktiskt använder. Överdriven mocking kopplar testet till interna detaljer, medan för lite mocking gör att verkliga sidoeffekter läcker igenom. Anpassa den efter det publika kontrakt som komponenten är beroende av.

Spionera på verkliga tjänstemetoder

Du kan också behålla en verklig tjänst men spionera på en metod med spyOn(instance, 'method'). Det är användbart när det mesta av tjänsten är ofarligt, men ett anrop måste fångas upp.

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

Snabb kontroll

Hur får du en fejkad implementation att både verifiera anrop OCH styra returvärden?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du ersatte verkliga beroenden med testdubletter med hjälp av useValue, useClass och Jasmine-spioner, returnerade Observables med of/throwError, testade HTTP via HttpTestingController och åsidosatte providers per test. Mocka endast det kontrakt som komponenten använder.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Mocka tjänster och beroenden” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Mocka tjänster och beroenden”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Mocka tjänster och beroenden”?

Tillhandahåll testdubbletter via DI. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Mocka tjänster och beroenden”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy