Wyślij zapytanie Dołącz do Sii

Każdy kod, który piszemy, może być podatny na błędy. Także ten, które jest napisany we frameworku takim jak np. Angular. W związku z tym, dobrym nawykiem powinno stać się przygotowywanie testów jednostkowych do naszego kodu. Testy, oprócz tego, że zadbają o bezpieczeństwo i komfort pracy, to dodatkowo sprawią, że nasz kod będzie miał odpowiednią dokumentację. Dzięki temu, jeśli do zespołu dołączy nowy programista, nie będzie musiał się zastanawiać, jakie były założenia biznesowe naszej aplikacji. Wykonując poprawę tego kodu, będzie potrafił odczytać za pomocą testu jednostkowego, co dana metoda zwraca, co robi i nic nie powinno go zaskoczyć. Zyska swobodę nawet w przypadku bardziej skomplikowanych metod.

Wykorzystanie testów w Angularze

Jednym ze sposobów przetestowania serwisu w Angularze, korzystając z modułu HttpClient, jest użycie wbudowanego modułu HttpClientTestingModule i kontrolera HttpTestingController. Ułatwiają one testy serwisu i wykonywanie żądań HTTP.

Wszystkie testy w Angularze są zapisywane w plikach z rozszerzeniem *.spec.ts. W naszym wypadku jest to serwis products.service.ts oraz plik z testami products.service.spec.ts. Nasz plik products.service.ts i jego kod został przedstawiony poniżej.
ryc.1 1 - Angular/Jasmine – testowanie serwisów HTTP. Część I – metoda GET

Testowanie w Angularze krok po kroku

Aby zacząć testować w Angularze:

  1. W pierwszej kolejności należy ustawić TestBed naszego testowanego serwisu. W tym celu importujemy moduł HttpClientTestingModule, a do tablicy providers wstrzykujemy HttpTestingController.
    Ryc.2 - Angular/Jasmine – testowanie serwisów HTTP. Część I – metoda GET
  2. Musimy również pamiętać o wstrzyknięciu naszego serwisu, który chcemy przetestować 🙂 Przypisujemy service do zmiennej let oraz wstrzykujemy go metodą inject.
    Ryc.3 1 - Angular/Jasmine – testowanie serwisów HTTP. Część I – metoda GET
  3. Kolejnym krokiem jest dodanie metody veryfiy() z HttpTestingController na końcu każdego testu. Upewniamy się w ten sposób, czy nie mamy żadnych zaległych żądań http. Możemy to zrobić w każdym przypadku testowym osobno, tak jak w poniższym kodzie:
    Ryc.4 - Angular/Jasmine – testowanie serwisów HTTP. Część I – metoda GET
  4. Jednak lepszą alternatywą, aby się nie powtarzać, jest dodanie tego sprawdzenia w bloku afterEach, który zostanie wykonany po każdym przypadku testowym.
    Ryc.5 - Angular/Jasmine – testowanie serwisów HTTP. Część I – metoda GET

Testowanie żądania GET krok po kroku

Teraz przyszła pora na przetestowanie żądania. W tym miejscu zajmiemy się metodą GET i napiszemy kilka przypadków testowych odnośnie metody getProducts().

  1. Zaczynamy od sprawdzenia, czy nasze żądanie jest wywołane za pomocą metody GET.
    Ryc.6 - Angular/Jasmine – testowanie serwisów HTTP. Część I – metoda GET
  2. Aby to zrobić, subskrybujemy się do naszej metody getProducts() z serwisu. Wywołujemy adres żądania do naszego API. Z pomocą przychodzi nam metoda expectOne z httpTestingController.
  3. Następnie sprawdzamy, czy nasze żądanie zostało wysłane za pomocą metody GET. W tej sytuacji przychodzi nam z pomocą Jasmine i jego metody expect() oraz toBe(). Na poniższej grafice możemy zauważyć, że funkcja działa prawidłowo.
    Ryc.7 - Angular/Jasmine – testowanie serwisów HTTP. Część I – metoda GET

Dodatkowe testy sprawdzające w metodzie GET

  • Innym testem, sprawdzającym naszą metodę serwisu, jest poprawne odniesienie się do naszego adresu URL wysyłanego w żądaniu.
    Ryc.8 - Angular/Jasmine – testowanie serwisów HTTP. Część I – metoda GET

Test jest podobny do tego, którego użyliśmy w pierwszym przypadku, z tym że tym razem w metodzie expect() sprawdzamy URL naszego żądania zamiast wysyłanej metody.

  • Ostatnim testem godnym uwagi jest sprawdzenie, czy zostały pobrane odpowiednie dane – w tym przypadku poprawna lista produktów.
    Ryc.9 - Angular/Jasmine – testowanie serwisów HTTP. Część I – metoda GET

Należy przygotować w tym celu małą listę produktów i, na przykład, przypisać ją do zmiennej products. Przekazujemy tę listą do metody flush, która zapewnia nam fikcyjne dane jako wartości, a które normalne przyszłyby z serwera http.

Po zasubskrybowaniu się do naszego serwisu, możemy zwrócić te dane i porównać, czy są identyczne z tym, co zadeklarowaliśmy.

Podsumowanie

Jak widać, testowanie naszego żądania HTTP za pomocą metody GET na początku nie wydaje się wcale takie trudne i można obsłużyć kilka przypadków testowych.

W kolejnych artykułach powiemy sobie troszkę więcej o testowaniu metod POST i DELETE oraz o obsłudze przypadków, kiedy wystąpi jakiś błąd.

 

***

Pozostałe artykuły w serii:

Część II – metody POST, PUT oraz DELETE
Część III – przechwytywanie błędów

5/5 ( głosy: 6)
Ocena:
5/5 ( głosy: 6)
Autor
Avatar
Marcin Bogucki

Front-end Developer w Sii. Technologie: HTML, CSS, JavaSript, TypeScript, Angular, React. W wolnym czasie gra w planszówki, lubi gotować i morsować :)

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

  • Jestem na pierwszym kroku, niestety jednak dostaję informacje „Cannot read properties of undefined (reading 'verify’)” itd. httpTestingController jest undefined. Dokumentacja Angular nie mówi za wiele na temat 'HttpTestingController’. Czy jest to na pewno aktualne podejście do testowania serwisów ?

Może Cię również zainteresować

Pokaż więcej artykułów

Bądź na bieżąco

Zasubskrybuj naszego bloga i otrzymuj informacje o najnowszych wpisach.

Otrzymaj ofertę

Jeśli chcesz dowiedzieć się więcej na temat oferty Sii, skontaktuj się z nami.

Wyślij zapytanie Wyślij zapytanie

Natalia Competency Center Director

Get an offer

Dołącz do Sii

Znajdź idealną pracę – zapoznaj się z naszą ofertą rekrutacyjną i aplikuj.

Aplikuj Aplikuj

Paweł Process Owner

Join Sii

ZATWIERDŹ

This content is available only in one language version.
You will be redirected to home page.

Are you sure you want to leave this page?