Testowanie signals i kodu asynchronicznego
Testować zachowanie reaktywne i asynchroniczne
Testowanie signals i kodu asynchronicznego to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 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.
Asynchroniczność to najtrudniejsza część testowania
Rzeczywiste komponenty wykonują pracę asynchroniczną: korzystają z timerów, obietnic, HTTP i opóźnionych danych wejściowych. Testy muszą kontrolować czas, aby asercje były wykonywane po zakończeniu pracy asynchronicznej. Angular udostępnia fakeAsync, tick i flush do deterministycznego sterowania czasem.
Testowanie sygnału
Sygnał odczytuje się jak funkcję. Testowanie go jest proste: wywołaj sygnał i sprawdź wartość, następnie zaktualizuj go i ponownie sprawdź wynik.
it('increments the count signal', () => {
const fixture = TestBed.createComponent(CounterComponent);
const c = fixture.componentInstance;
expect(c.count()).toBe(0);
c.increment();
expect(c.count()).toBe(1);
});Sygnały obliczane aktualizują się automatycznie
Wartość computed jest obliczana ponownie, gdy zmienią się jej zależności. W teście zmieniasz sygnał źródłowy, a następnie odczytujesz wartość obliczaną — nie trzeba ręcznie wymuszać ponownego obliczenia.
expect(c.doubled()).toBe(0);
c.count.set(5);
expect(c.doubled()).toBe(10); // computed(() => c.count() * 2)Sygnały i DOM
Aby zobaczyć zmianę sygnału odzwierciedloną w szablonie, po jego zaktualizowaniu wywołaj detectChanges(), tak jak w przypadku każdego innego stanu.
c.count.set(3);
fixture.detectChanges();
expect(fixture.nativeElement.textContent).toContain('3');Wprowadzenie do fakeAsync
Owiń test w fakeAsync, aby przejść do fikcyjnej strefy czasowej. Timery i mikrozadania są kolejkowane zamiast wykonywane, a Ty przesuwasz je ręcznie. Dzięki temu testy asynchroniczne stają się synchroniczne i niezawodne.
import { fakeAsync, tick } from '@angular/core/testing';
it('loads after delay', fakeAsync(() => {
// timers are now under your control
}));Przesuwanie czasu za pomocą tick
tick(ms) przesuwa wirtualny zegar do przodu, uruchamiając wszystkie timery zaplanowane w tym przedziale.
it('fires after 1s', fakeAsync(() => {
let done = false;
setTimeout(() => (done = true), 1000);
expect(done).toBe(false);
tick(1000);
expect(done).toBe(true);
}));flush dla wszystkich oczekujących timerów
Gdy nie znasz dokładnego opóźnienia, flush() opróżnia wszystkie oczekujące makrozadania, aż kolejka będzie pusta.
import { fakeAsync, flush } from '@angular/core/testing';
it('completes debounced search', fakeAsync(() => {
component.search('ang');
flush(); // run all timers (e.g. debounceTime)
expect(component.results().length).toBeGreaterThan(0);
}));Testowanie obietnic za pomocą fakeAsync
Obietnice są rozwiązywane jako mikrozadania. Wewnątrz fakeAsync wywołaj flushMicrotasks() (lub tick()), aby je zrealizować przed wykonaniem asercji.
import { fakeAsync, flushMicrotasks } from '@angular/core/testing';
it('resolves promise', fakeAsync(() => {
let v: number | undefined;
Promise.resolve(42).then((n) => (v = n));
flushMicrotasks();
expect(v).toBe(42);
}));Pomocnik async / waitForAsync
W przypadku testów, które muszą czekać na rzeczywistą operację asynchroniczną bez kontrolowania czasu, owiń treść testu w waitForAsync i użyj fixture.whenStable().
import { waitForAsync } from '@angular/core/testing';
it('settles', waitForAsync(() => {
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(fixture.componentInstance.ready()).toBe(true);
});
}));Testowanie effect()
Element effect jest wykonywany asynchronicznie po zmianie sygnałów, które odczytuje. Aby zaobserwować jego wynik, uruchom detekcję zmian (lub wykonaj flush), tak aby efekt się wykonał, a następnie sprawdź efekt uboczny.
c.theme.set('dark');
fixture.detectChanges(); // effect runs
expect(document.body.classList.contains('dark')).toBe(true);Częsta pułapka: pozostawione timery
Jeśli test fakeAsync zakończy się, gdy w kolejce nadal będą timery, Angular zgłosi błąd. Zawsze wykonuj na nich tick/flush albo czyść interwały w ngOnDestroy, aby po zakończeniu testu wirtualny zegar nie miał żadnych oczekujących zadań.
Szybkie sprawdzenie
Wybierz właściwe narzędzie dla znanego opóźnienia.
Podsumowanie
Sygnały testuje się jak zwykłe funkcje (wywołanie służy do odczytu, set do aktualizacji, a detectChanges do aktualizacji DOM). W przypadku asynchroniczności fakeAsync udostępnia wirtualny zegar, który przesuwasz za pomocą tick, opróżniasz za pomocą flush, a obietnice realizujesz za pomocą flushMicrotasks. Nigdy nie pozostawiaj oczekujących timerów.
Często zadawane pytania
Czy lekcja „Testowanie signals i kodu asynchronicznego” jest bezpłatna?
Tak — pełny tekst „Testowanie signals i kodu asynchronicznego” 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 „Testowanie signals i kodu asynchronicznego”?
Testować zachowanie reaktywne i asynchroniczne Ć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 4 z 4.
Ile czasu zajmuje lekcja „Testowanie signals i kodu asynchronicznego”?
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
- TestBed i elementy testowe komponentów
- Testowanie inputów, outputów i DOM
- Mockowanie serwisów i zależności
- Testowanie signals i kodu asynchronicznego