{"id":12619,"date":"2022-01-24T07:00:46","date_gmt":"2022-01-24T06:00:46","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=12619"},"modified":"2025-05-07T13:04:21","modified_gmt":"2025-05-07T11:04:21","slug":"angular-jasmine-testowanie-serwisow-http-czesc-ii-metody-post-put-oraz-delete","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/angular-jasmine-testowanie-serwisow-http-czesc-ii-metody-post-put-oraz-delete\/","title":{"rendered":"Angular\/Jasmine \u2013 testowanie serwis\u00f3w HTTP. Cz\u0119\u015b\u0107 II \u2013 metody POST, PUT oraz DELETE"},"content":{"rendered":"\n<p>W ostatnim artykule na temat <a href=\"https:\/\/sii.pl\/blog\/angular-jasmine-testowanie-serwisow-http-czesc-i-metoda-get\/\">testowania serwis\u00f3w http we frameworku Angular<\/a> przy pomocy Karma\/Jasmine, opisa\u0142em podstawy testowania serwis\u00f3w http oraz to, jak dzia\u0142a modu\u0142&nbsp;<strong>HttpClientTestingModule<\/strong> oraz kontroler&nbsp;<strong>HttpTestingController<\/strong>.<\/p>\n\n\n\n<p>Zach\u0119cam do zapoznania si\u0119 z tym tekstem, poniewa\u017c zosta\u0142a tam opisana pierwsza metoda <strong>GET<\/strong>.<\/p>\n\n\n\n<p>Teraz przyszed\u0142 czas na kolejne metody naszego REST API, a mianowicie b\u0119d\u0105 to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>POST <\/strong>\u2013 metoda, kt\u00f3ra s\u0142u\u017cy do tworzenia i przesy\u0142ania nowych danych na serwer.<\/li>\n\n\n\n<li><strong>PUT<\/strong> \u2013 metoda potrzebna do przesy\u0142ania zaktualizowanych przez nas danych, czyli do zmiany istniej\u0105cych informacji.<\/li>\n\n\n\n<li><strong>DELETE <\/strong>\u2013 metoda s\u0142u\u017c\u0105ca do usuwania danych.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Wykorzystanie metody POST<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Zacznijmy wi\u0119c od utworzenia metody dla naszego serwisu z produktami z poprzedniego artyku\u0142u. B\u0119dzie odpowiada\u0142a za dodawanie produkt\u00f3w do bazy danych. W takim razie stw\u00f3rzmy metod\u0119 addProduct, kt\u00f3ra przyjmie jeden parametr <strong>product, <\/strong>zawieraj\u0105cy nazw\u0119 produktu, cen\u0119 oraz ilo\u015b\u0107 sztuk.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/1.png\"><img decoding=\"async\" width=\"734\" height=\"434\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/1.png\" alt=\"kod\" class=\"wp-image-12622\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/1.png 734w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/1-300x177.png 300w\" sizes=\"(max-width: 734px) 100vw, 734px\" \/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>W testach jednostkowych mo\u017cna sprawdzi\u0107, podobnie jak w przypadku GET, czy nasz serwis tym razem komunikuje si\u0119 z REST API za pomoc\u0105 metody POST.<\/li>\n<\/ol>\n\n\n\n<p>Jednak w tym przypadku musimy utworzy\u0107 nasz przyk\u0142adowy Produkt, kt\u00f3ry chcemy wys\u0142a\u0107 na serwer. B\u0119dzie on przekazywany jako argument w naszej metodzie do dodawania produkt\u00f3w.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/2.png\"><img decoding=\"async\" width=\"733\" height=\"570\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/2.png\" alt=\"kod\" class=\"wp-image-12623\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/2.png 733w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/2-300x233.png 300w\" sizes=\"(max-width: 733px) 100vw, 733px\" \/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"3\">\n<li>W drugiej kolejno\u015bci mo\u017cna sprawdzi\u0107, czy wysy\u0142a zapytanie na prawid\u0142owy adres URL.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/3.png\"><img decoding=\"async\" width=\"735\" height=\"525\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/3.png\" alt=\"kod\" class=\"wp-image-12624\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/3.png 735w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/3-300x214.png 300w\" sizes=\"(max-width: 735px) 100vw, 735px\" \/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>Jednak dodatkowym przypadkiem testowym b\u0119dzie sprawdzenie czy serwis zwraca odpowiednie dane po wys\u0142aniu do naszego API nowoutworzonego produktu. W tym celu nale\u017cy utworzy\u0107 produkt, kt\u00f3ry b\u0119dziemy chcieli otrzyma\u0107 po odpowiedzi serwera i przekaza\u0107 go do metody <strong>flush<\/strong>.<\/li>\n\n\n\n<li>Gdy zasubskrybujemy si\u0119 do naszej metody <strong>service.addProduct <\/strong>z przekazanym argumentem jako wynik serwera, powinni\u015bmy otrzyma\u0107 nowo utworzony produkt.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"731\" height=\"614\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/4.png\" alt=\"kod\" class=\"wp-image-12625\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/4.png 731w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/4-300x252.png 300w\" sizes=\"(max-width: 731px) 100vw, 731px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Metoda PUT \u2013 czyli zaktualizujmy jakie\u015b dane<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Jak zawsze zaczynamy od stworzenia metody <strong>updateProduct<\/strong>, kt\u00f3rej parametrem b\u0119dzie produkt z wymaganym id oraz opcjonalnymi pozosta\u0142ymi warto\u015bciami, jak nazwa, ilo\u015b\u0107 oraz cena. Musimy wys\u0142a\u0107 zapytanie na odpowiedni adres URL oraz przes\u0142a\u0107 dane produktu, kt\u00f3re chcemy zaktualizowa\u0107.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/5.png\"><img decoding=\"async\" width=\"735\" height=\"550\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/5.png\" alt=\"kod\" class=\"wp-image-12626\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/5.png 735w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/5-300x224.png 300w\" sizes=\"(max-width: 735px) 100vw, 735px\" \/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>Maj\u0105c metod\u0119 updateProduct, mo\u017cemy napisa\u0107 do niej przypadek testowy np. taki, kt\u00f3ry sprawdza czy zaktualizowali\u015bmy odpowiedni produkt. W tym celu przygotowujemy dane do aktualizacji, nasz produkt o id r\u00f3wnym 1 oraz zmieniamy jego warto\u015b\u0107 na 100.<\/li>\n\n\n\n<li>Po zasubskrybowaniu si\u0119 do metody <strong>updateProduct()<\/strong> i wys\u0142aniu zapytania do serwera, w odpowiedzi powinni\u015bmy dosta\u0107 nasz ca\u0142y produkt, ze zmienion\u0105 warto\u015bci\u0105 ilo\u015bci. Oczywi\u015bcie dane z serwera przesy\u0142am za pomoc\u0105 metody <strong>flush()<\/strong>.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/6.png\"><img decoding=\"async\" width=\"734\" height=\"683\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/6.png\" alt=\"kod\" class=\"wp-image-12627\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/6.png 734w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/6-300x279.png 300w\" sizes=\"(max-width: 734px) 100vw, 734px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Jak usuwa\u0107 dane, czyli metoda DELETE<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>W pierwszej kolejno\u015bci przygotujmy nasz serwis, a w nim, tym razem, skorzystamy z metody <strong>.delete() <\/strong>do usuwania danych z serwera. Jako parametr metody przesy\u0142amy id produktu, kt\u00f3ry chcemy usun\u0105\u0107.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/7.png\"><img decoding=\"async\" width=\"735\" height=\"436\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/7.png\" alt=\"kod\" class=\"wp-image-12628\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/7.png 735w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/7-300x178.png 300w\" sizes=\"(max-width: 735px) 100vw, 735px\" \/><\/a><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"2\">\n<li>W naszym przepadku testowym mo\u017cemy sprawdzi\u0107, podobnie jak w <strong>GET<\/strong>, czy nasz serwis komunikuje si\u0119 za pomoc\u0105 metody <strong>DELETE<\/strong> oraz czy komunikujemy si\u0119 z poprawnym adresem URL do naszego API.<\/li>\n\n\n\n<li>My natomiast sprawdzimy czy po zasubskrybowaniu si\u0119 do naszej metody <strong>deleteProduct<\/strong>, otrzymujemy poprawne id produktu, kt\u00f3ry chcemy usun\u0105\u0107.<\/li>\n<\/ol>\n\n\n\n<p>Tworzymy zatem produkt do usuni\u0119cia, a nast\u0119pnie przekazujemy id naszego produktu jako argument do metody <strong>deleteProduct(). <\/strong>Jako wynik dla metody <strong>expect() <\/strong>powinni\u015bmy otrzyma\u0107 z serwera Id usuwanego produktu. W tym wypadku id = 1.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/8.png\"><img decoding=\"async\" width=\"733\" height=\"638\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/8.png\" alt=\"kod\" class=\"wp-image-12629\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/8.png 733w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/01\/8-300x261.png 300w\" sizes=\"(max-width: 733px) 100vw, 733px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Podsumowanie<\/h2>\n\n\n\n<p>Przedstawione w dzisiejszym artykule metody <strong>POST<\/strong>, <strong>PUT<\/strong>, <strong>DELETE<\/strong> oraz <a href=\"https:\/\/sii.pl\/blog\/angular-jasmine-testowanie-serwisow-http-czesc-i-metoda-get\/\"><strong>GET<\/strong> z wcze\u015bniejszego artyku\u0142u<\/a>, to <strong>CRUD<\/strong> dla naszego REST API, za pomoc\u0105 kt\u00f3rych mo\u017cemy \u0142\u0105czy\u0107 si\u0119 z nasz\u0105 baz\u0105 danych i modyfikowa\u0107 w niej r\u00f3\u017cne informacje.<\/p>\n\n\n\n<p>Dzi\u0119ki Jasmine\/Karma we frameworku Angular, mo\u017cemy wszystkie te metody przetestowa\u0107 i by\u0107 pewni i bezpieczni, \u017ce nasza aplikacja nie b\u0119dzie podatna na b\u0142\u0119dy.<\/p>\n\n\n\n<p>W ostatniej, trzeciej cz\u0119\u015bci ca\u0142ej serii artyku\u0142\u00f3w na temat testowania metod http we frameworku Angular, przedstawi\u0119 jeszcze obs\u0142ug\u0119 b\u0142\u0119d\u00f3w i jak, mo\u017cna napisa\u0107 do nich testy jednostkowe.<\/p>\n\n\n\n<p>***<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pozosta\u0142e artyku\u0142y w serii:<\/h3>\n\n\n\n<p><a href=\"https:\/\/sii.pl\/blog\/angular-jasmine-testowanie-serwisow-http-czesc-i-metoda-get\/\">Cz\u0119\u015b\u0107 I &#8211; metoda GET<\/a><br><a href=\"https:\/\/sii.pl\/blog\/angular-jasmine-testowanie-serwisow-http-czesc-iii-przechwytywanie-bledow\/\">Cz\u0119\u015b\u0107 III &#8211; przechwytywanie b\u0142\u0119d\u00f3w<\/a><\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;12619&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;4&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;11&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5 ( votes: 4)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Angular\\\/Jasmine \u2013 testowanie serwis\u00f3w HTTP. Cz\u0119\u015b\u0107 II \u2013 metody POST, PUT oraz DELETE&quot;,&quot;width&quot;:&quot;139.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ( {votes}: {count})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 139.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 14.4px;\">\n            5\/5 ( votes: 4)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>W ostatnim artykule na temat testowania serwis\u00f3w http we frameworku Angular przy pomocy Karma\/Jasmine, opisa\u0142em podstawy testowania serwis\u00f3w http oraz &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/angular-jasmine-testowanie-serwisow-http-czesc-ii-metody-post-put-oraz-delete\/\">Continued<\/a><\/p>\n","protected":false},"author":270,"featured_media":12376,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1314],"tags":[867,146],"class_list":["post-12619","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-twardo","tag-angular","tag-testing"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/12\/Angular-i-Jasmine-Testowanie-serwisow-HTTP-metoda-GET.png","category_names":["Development na twardo"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12619"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/270"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=12619"}],"version-history":[{"count":2,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12619\/revisions"}],"predecessor-version":[{"id":24874,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/12619\/revisions\/24874"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/12376"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=12619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=12619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=12619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}