0Pricing
Angular Academy · Lekcja

Mockowanie serwisów i zależności

Udostępniać zastępniki testowe za pomocą DI

Mockowanie serwisów i zależności to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Dlaczego warto używać atrap zależności

Test komponentu powinien izolować komponent. Jeśli wstrzykuje on usługę opartą na HttpClient, nie należy wykonywać rzeczywistych żądań sieciowych. Zamiast tego należy dostarczyć test double: fikcyjny obiekt zwracający kontrolowane dane, dzięki czemu testy są szybkie i deterministyczne.

Dostarczanie atrapy przez useValue

Najprostszą atrapą jest zwykły obiekt dostarczony za pomocą useValue. Należy dostarczyć go pod tym samym tokenem wstrzykiwania, o który prosi komponent.

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

Szpiegi Jasmine

jasmine.createSpyObj tworzy atrapę z metodami-szpiegami, dzięki czemu można zarówno zastępować wartości zwracane, jak i sprawdzać wywołania.

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

Sprawdzanie, czy wywołano usługę

Po wykonaniu działania na komponencie należy sprawdzić, czy szpieg otrzymał oczekiwane argumenty.

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

Zwracanie Observable z atrap

Usługi często zwracają Observable. Należy użyć RxJS of() dla synchronicznego powodzenia i throwError() dla błędów, aby można było przetestować obie ścieżki.

import { of, throwError } from 'rxjs';

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

useClass dla wielokrotnego użytku atrap

Gdy atrapa jest używana w wielu specach, należy zdefiniować klasę i podłączyć ją za pomocą useClass.

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

Mockowanie HttpClient za pomocą HttpTestingController

Aby testować serwisy wywołujące HTTP bez symulowania całego serwisu, należy zaimportować provideHttpClientTesting() i opróżniać żądania za pomocą HttpTestingController.

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

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

Opróżnianie żądania HTTP

Oczekuj żądania, odpowiedz na nie fikcyjnymi danymi, a następnie sprawdź, czy nie pozostały żadne nieoczekiwane wywołania.

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

Zastępowanie providera dla pojedynczej specyfikacji

Czasami jeden test wymaga innego obiektu zastępczego. Użyj TestBed.overrideProvider() przed wywołaniem createComponent.

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

Twórz tylko niezbędne mocki

Dobry obiekt zastępczy implementuje tylko te metody, których komponent faktycznie używa. Nadmiarowe mockowanie wiąże test z implementacją wewnętrzną, a zbyt ubogie mockowanie pozwala przedostawać się rzeczywistym efektom ubocznym. Odwzoruj publiczny kontrakt, od którego zależy komponent.

Szpieguj metody rzeczywistego serwisu

Możesz także zachować rzeczywisty serwis, ale szpiegować jedną z jego metod za pomocą spyOn(instance, 'method'). Jest to przydatne, gdy większość serwisu jest nieszkodliwa, ale jedno wywołanie musi zostać przechwycone.

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

Szybkie sprawdzenie

Jak sprawić, aby obiekt zastępczy sprawdzał wywołania ORAZ kontrolował zwracane wartości?

Podsumowanie

Zastąpiłeś rzeczywiste zależności obiektami zastępczymi za pomocą useValue, useClass i szpiegów Jasmine; zwracałeś Observables za pomocą of/throwError; testowałeś HTTP przez HttpTestingController; oraz zastępowałeś providery dla pojedynczej specyfikacji. Mockuj tylko kontrakt używany przez komponent.

Często zadawane pytania

Czy lekcja „Mockowanie serwisów i zależności” jest bezpłatna?

Tak — pełny tekst „Mockowanie serwisów i zależności” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Mockowanie serwisów i zależności”?

Udostępniać zastępniki testowe za pomocą DI Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Mockowanie serwisów i zależności”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. TestBed i elementy testowe komponentów
  2. Testowanie inputów, outputów i DOM
  3. Mockowanie serwisów i zależności
  4. Testowanie signals i kodu asynchronicznego
← Powrót do Angular Academy