{"id":13498,"date":"2022-04-22T07:00:29","date_gmt":"2022-04-22T05:00:29","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=13498"},"modified":"2025-05-07T13:01:48","modified_gmt":"2025-05-07T11:01:48","slug":"angular-jasmine-testowanie-serwisow-http-czesc-iii-przechwytywanie-bledow","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/angular-jasmine-testowanie-serwisow-http-czesc-iii-przechwytywanie-bledow\/","title":{"rendered":"Angular\/Jasmine \u2013 testowanie serwis\u00f3w HTTP. Cz\u0119\u015b\u0107 III \u2013 przechwytywanie b\u0142\u0119d\u00f3w"},"content":{"rendered":"\n

Z ostatniego ju\u017c artyku\u0142u serii na temat testowania serwis\u00f3w http w Angular dowiecie si\u0119 wi\u0119cej na temat przechwytywanie b\u0142\u0119d\u00f3w i testowanie b\u0142\u0119dnych odpowiedzi z serwera.<\/p>\n\n\n\n

Je\u015bli interesuje Was ta tematyka, to zach\u0119cam do przeczytania dw\u00f3ch pozosta\u0142ych artyku\u0142\u00f3w, jakie zaprezentowa\u0142em do tej pory. Dotycz\u0105 testowania serwis\u00f3w http we frameworku Angular. Oczywi\u015bcie, wszystkie testy by\u0142y pisane za pomoc\u0105 Karma<\/strong> oraz Jasmine<\/strong>. Pierwszy artyku\u0142 opisywa\u0142 testowania serwis\u00f3w http za pomoc\u0105 metody GET<\/a>. W drugim skupi\u0142em si\u0119 na trzech pozosta\u0142ych metodach naszego CRUD-a, czyli PUT, DELETE oraz POST<\/a>, a tak\u017ce tym, w jaki spos\u00f3b mo\u017cna napisa\u0107 do nich przypadki testowe.<\/p>\n\n\n\n

RxJS i operator catchError<\/h2>\n\n\n\n
    \n
  1. Zacznijmy od tego w jaki spos\u00f3b mo\u017cemy za pomoc\u0105 Angulara przechwyci\u0107 b\u0142\u0105d, je\u017celi co\u015b po drodze p\u00f3jdzie nie tak, jak by\u015bmy chcieli. Przecie\u017c nie zawsze b\u0119dziemy mieli nasz przys\u0142owiowy \u201ehappy path\u201d, gdzie uzyskamy poprawne dane.<\/li>\n\n\n\n
  2. Z pomoc\u0105 przychodzi operator RxJS \u2013 catchError<\/strong>, kt\u00f3ry mo\u017cemy dopisa\u0107 do naszego serwisu i przechwyci\u0107 w nim b\u0142\u0105d oraz co\u015b zwr\u00f3ci\u0107. Przyk\u0142adowo w naszym wypadku b\u0119dzie to komunikat tekstowy, \u017ce co\u015b wydarzy\u0142o si\u0119 \u017ale.<\/li>\n<\/ol>\n\n\n\n
    \"fragment<\/a><\/figure>\n\n\n\n
      \n
    1. Teraz, gdy nasz komponent skorzysta z serwisu ProductsService i wywo\u0142amy na nim metod\u0119 getProducts, a serwer odpowie nam b\u0142\u0119dnie, to zachowanie to zostanie przechwycone przez nasz operator<\/li>\n\n\n\n
    2. Wewn\u0105trz catchError mo\u017cemy odebra\u0107 b\u0142\u0105d o typie HttpErrorResponse z Angulara, kt\u00f3ry zawiera m.in. status b\u0142\u0119du, statusText, url itp.<\/li>\n<\/ol>\n\n\n\n

      Przechwycenie wiadomo\u015bci o b\u0142\u0119dzie<\/h2>\n\n\n\n
        \n
      1. Nasz pierwszy przypadek testowy zaczniemy od sprawdzenia, czy podczas wys\u0142ania \u017c\u0105dania i niepowodzenia dostaniemy odpowiedni komunikat tekstowy.<\/li>\n\n\n\n
      2. Tym razem do metody flush, przeka\u017cemy dwa argumenty. Pierwszy z list\u0105 produkt\u00f3w \u2013 w tym wypadku pusty obiekt \u2013 oraz drugi argument, czyli odpowied\u017a z serwera z b\u0142\u0119dem, zawieraj\u0105cy takie klucze jak status<\/strong> czy statusText<\/strong>.<\/li>\n<\/ol>\n\n\n\n
        \"fragment<\/a><\/figure>\n\n\n\n
          \n
        1. Poniewa\u017c w naszym serwisie zwr\u00f3cili\u015bmy poprzez throw<\/strong> obiekt jak poni\u017cej, to po zasubskrybowaniu si\u0119 i odebraniu b\u0142\u0119du, mo\u017cemy przechwyci\u0107 tekst naszego b\u0142\u0119du pod kluczem message<\/strong>.<\/li>\n<\/ol>\n\n\n\n
          \"fragment<\/a><\/figure>\n\n\n\n
            \n
          1. Nasz pierwszy test przeszed\u0142 pomy\u015blnie i odebrali\u015bmy oczekiwany komunikat.<\/li>\n<\/ol>\n\n\n\n
            \"fragment<\/a><\/figure>\n\n\n\n
            <\/div>\n\n\n\n

            Kod odpowiedzi serwera HTTP np. 404, 500, itp.<\/h2>\n\n\n\n
              \n
            1. W drugim przypadku testowym spr\u00f3bujemy przechwyci\u0107 kod odpowiedzi http.<\/li>\n\n\n\n
            2. W Rest API mo\u017cemy je podzieli\u0107 na 5 rodzaj\u00f3w:\n