{"id":12354,"date":"2021-12-20T07:00:44","date_gmt":"2021-12-20T06:00:44","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=12354"},"modified":"2025-05-07T13:05:32","modified_gmt":"2025-05-07T11:05:32","slug":"angular-jasmine-testowanie-serwisow-http-czesc-i-metoda-get","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/angular-jasmine-testowanie-serwisow-http-czesc-i-metoda-get\/","title":{"rendered":"Angular\/Jasmine \u2013 testowanie serwis\u00f3w HTTP. Cz\u0119\u015b\u0107 I \u2013 metoda GET"},"content":{"rendered":"

Ka\u017cdy kod, kt\u00f3ry piszemy, mo\u017ce by\u0107 podatny na b\u0142\u0119dy. Tak\u017ce ten, kt\u00f3re jest napisany we frameworku takim jak np. Angular. W zwi\u0105zku z tym, dobrym nawykiem powinno sta\u0107 si\u0119 przygotowywanie test\u00f3w jednostkowych do naszego kodu. Testy, opr\u00f3cz tego, \u017ce zadbaj\u0105 o bezpiecze\u0144stwo i komfort pracy, to dodatkowo sprawi\u0105, \u017ce nasz kod b\u0119dzie mia\u0142 odpowiedni\u0105 dokumentacj\u0119. Dzi\u0119ki temu, je\u015bli do zespo\u0142u do\u0142\u0105czy nowy programista, nie b\u0119dzie musia\u0142 si\u0119 zastanawia\u0107, jakie by\u0142y za\u0142o\u017cenia biznesowe naszej aplikacji. Wykonuj\u0105c popraw\u0119 tego kodu, b\u0119dzie potrafi\u0142 odczyta\u0107 za pomoc\u0105 testu jednostkowego, co dana metoda zwraca, co robi i nic nie powinno go zaskoczy\u0107. Zyska swobod\u0119 nawet w przypadku bardziej skomplikowanych metod.<\/p>\n

Wykorzystanie test\u00f3w w Angularze<\/h2>\n

Jednym ze sposob\u00f3w przetestowania serwisu w Angularze, korzystaj\u0105c z modu\u0142u HttpClient, jest u\u017cycie wbudowanego modu\u0142u HttpClientTestingModule <\/strong>i kontrolera HttpTestingController<\/strong>. U\u0142atwiaj\u0105 one testy serwisu i wykonywanie \u017c\u0105da\u0144 HTTP.<\/p>\n

Wszystkie testy w Angularze s\u0105 zapisywane w plikach z rozszerzeniem *.spec.ts. W naszym wypadku jest to serwis products.service.ts<\/strong> oraz plik z testami products.service.spec.ts<\/strong>. Nasz plik products.service.ts<\/strong> i jego kod zosta\u0142 przedstawiony poni\u017cej.
\"\"<\/p>\n

Testowanie w Angularze krok po kroku<\/h2>\n

Aby zacz\u0105\u0107 testowa\u0107 w Angularze:<\/p>\n

    \n
  1. W pierwszej kolejno\u015bci nale\u017cy ustawi\u0107 TestBed <\/strong>naszego testowanego serwisu. W tym celu importujemy modu\u0142 HttpClientTestingModule<\/strong>, a do tablicy providers <\/strong>wstrzykujemy HttpTestingController<\/strong>.
    \"\"<\/li>\n
  2. Musimy r\u00f3wnie\u017c pami\u0119ta\u0107 o wstrzykni\u0119ciu naszego serwisu, kt\u00f3ry chcemy przetestowa\u0107 \ud83d\ude42 Przypisujemy service do zmiennej let oraz wstrzykujemy go metod\u0105 inject.
    \"\"<\/li>\n
  3. Kolejnym krokiem jest dodanie metody veryfiy()<\/strong> z HttpTestingController<\/em> na ko\u0144cu ka\u017cdego testu. Upewniamy si\u0119 w ten spos\u00f3b, czy nie mamy \u017cadnych zaleg\u0142ych \u017c\u0105da\u0144 http. Mo\u017cemy to zrobi\u0107 w ka\u017cdym przypadku testowym osobno, tak jak w poni\u017cszym kodzie:
    \"\"<\/li>\n
  4. Jednak lepsz\u0105 alternatyw\u0105, aby si\u0119 nie powtarza\u0107, jest dodanie tego sprawdzenia w bloku afterEach<\/strong>, kt\u00f3ry zostanie wykonany po ka\u017cdym przypadku testowym.
    \"\"<\/li>\n<\/ol>\n

    Testowanie \u017c\u0105dania GET krok po kroku<\/h2>\n

    Teraz przysz\u0142a pora na przetestowanie \u017c\u0105dania. W tym miejscu zajmiemy si\u0119 metod\u0105 GET <\/strong>i napiszemy kilka przypadk\u00f3w testowych odno\u015bnie metody getProducts().<\/p>\n

      \n
    1. Zaczynamy od sprawdzenia, czy nasze \u017c\u0105danie jest wywo\u0142ane za pomoc\u0105 metody GET.
      \"\"<\/li>\n
    2. Aby to zrobi\u0107, subskrybujemy si\u0119 do naszej metody getProducts()<\/strong> z serwisu. Wywo\u0142ujemy adres \u017c\u0105dania do naszego API. Z pomoc\u0105 przychodzi nam metoda expectOne <\/strong>z httpTestingController.<\/strong><\/li>\n
    3. Nast\u0119pnie sprawdzamy, czy nasze \u017c\u0105danie zosta\u0142o wys\u0142ane za pomoc\u0105 metody GET<\/strong>. W tej sytuacji przychodzi nam z pomoc\u0105 Jasmine <\/strong>i jego metody expect()<\/strong> oraz toBe()<\/strong>. Na poni\u017cszej grafice mo\u017cemy zauwa\u017cy\u0107, \u017ce funkcja dzia\u0142a prawid\u0142owo.
      \"\"<\/li>\n<\/ol>\n

      Dodatkowe testy sprawdzaj\u0105ce w metodzie GET<\/h3>\n