{"id":25458,"date":"2023-11-13T05:00:00","date_gmt":"2023-11-13T04:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=25458"},"modified":"2023-11-10T13:56:49","modified_gmt":"2023-11-10T12:56:49","slug":"wydajnosc-pod-kontrola-z-k6-inicjalizacja-frameworka","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/wydajnosc-pod-kontrola-z-k6-inicjalizacja-frameworka\/","title":{"rendered":"Wydajno\u015b\u0107 pod kontrol\u0105 z k6 \u2013 inicjalizacja frameworka"},"content":{"rendered":"\n<p>Odpowiednie rozmieszczenie i zaplanowanie struktury framework\u00f3w stanowi kluczowy etap w projektowaniu wi\u0119kszych projekt\u00f3w. Gdy nasza aplikacja staje si\u0119 coraz bardziej skomplikowana i zyskuje na rozmiarze, wa\u017cne jest, aby jej podstawy by\u0142y odpowiednio u\u0142o\u017cone. To w\u0142a\u015bnie odpowiednio zorganizowana struktura pozwoli na sprawniejsze rozwijanie, utrzymywanie i skalowanie naszego projektu.<\/p>\n\n\n\n<p>Kolejnym istotnym aspektem, nad kt\u00f3rym si\u0119 pochylimy <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/sii.pl\/blog\/wyszukiwarka\/k6\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">w serii artyku\u0142\u00f3w o k6<\/a>, jest automatyzacja. R\u0119czna weryfikacja i testowanie kodu w wi\u0119kszym projekcie s\u0105 czasoch\u0142onne i podatne na b\u0142\u0119dy. Dlatego te\u017c zastosujemy narz\u0119dzia, kt\u00f3re pozwol\u0105 nam na automatyczne testowanie i weryfikacj\u0119 naszego kodu.<\/p>\n\n\n\n<figure class=\"wp-block-embed aligncenter is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Testy wydajno\u015bciowe z k6: Inicjalizacja frameworka | cz\u0119\u015b\u0107 5\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Z3wdsjz3gso?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Node? Go?<\/strong><\/h2>\n\n\n\n<p>NPM (Node Package Manager) to narz\u0119dzie s\u0142u\u017c\u0105ce do zarz\u0105dzania paczkami i bibliotekami JavaScript w \u015brodowisku Node.js. Jest to jeden z najwa\u017cniejszych komponent\u00f3w ekosystemu Node.js, umo\u017cliwiaj\u0105cy deweloperom \u0142atwe pobieranie, instalowanie, aktualizowanie i usuwanie paczek oraz zarz\u0105dzanie ich zale\u017cno\u015bciami.<\/p>\n\n\n\n<p>W poprzednich cz\u0119\u015bciach wspomina\u0142em, \u017ce k6 wykorzystuje j\u0119zyk Go pod pow\u0142ok\u0105, co oznacza, \u017ce nie jest oparty na Node.js. To ma pewne konsekwencje, poniewa\u017c niekt\u00f3re API dost\u0119pne z Node.js, takie jak modu\u0142y fs czy os, nie b\u0119d\u0105 dzia\u0142a\u0107 w k6. Podobnie, API przegl\u0105darek r\u00f3wnie\u017c nie jest dost\u0119pne. Wydaje si\u0119 wi\u0119c, \u017ce korzystanie z Node.js w kontek\u015bcie k6 mo\u017ce by\u0107 ograniczone.<\/p>\n\n\n\n<p>Jednak\u017ce, musimy wyra\u017anie rozr\u00f3\u017cni\u0107 dwie cz\u0119\u015bci naszego frameworka \u2013 funkcjonalno\u015bci samego k6 oraz jego struktur\u0119. Funkcjonalno\u015bci, takie jak wykonywanie \u017c\u0105da\u0144 HTTP czy operacje na danych, w praktyce s\u0105 realizowane pod pow\u0142ok\u0105 w j\u0119zyku Go. Aby uzupe\u0142ni\u0107 ewentualne braki w tych funkcjonalno\u015bciach, mamy mo\u017cliwo\u015b\u0107 tworzenia rozszerze\u0144, na co skupimy si\u0119 w kolejnych cz\u0119\u015bciach serii.<\/p>\n\n\n\n<p>Z drugiej strony, struktura frameworka jest niezale\u017cna od j\u0119zyka Go. Mo\u017cemy wykorzysta\u0107 dowolne narz\u0119dzie, kt\u00f3re pozwoli nam \u0142atwo ustrukturyzowa\u0107, zautomatyzowa\u0107 i upro\u015bci\u0107 nasz projekt. Wyb\u00f3r managera pakiet\u00f3w npm by\u0142 dla mnie naturalny, poniewa\u017c scenariusze testowe pisane s\u0105 w j\u0119zyku JavaScript, a npm jest jednym z najpopularniejszych i najbardziej zaufanych narz\u0119dzi stosowanych przez in\u017cynier\u00f3w od automatyzacji test\u00f3w funkcjonalnych.<\/p>\n\n\n\n<p>Niemniej jednak, w praktyce mo\u017cemy u\u017cy\u0107 dowolnego narz\u0119dzia, kt\u00f3re spe\u0142nia wymagania opisane w dalej cz\u0119\u015bci niniejszego artyku\u0142u i pozwoli nam efektywnie rozwija\u0107 nasz framework.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Inicjalizacja projektu<\/strong><\/h2>\n\n\n\n<p>Om\u00f3wili\u015bmy sobie czym jest node oraz dlaczego wybra\u0142em go do budowania frameworka testowego. Przejd\u017amy zatem do inicjalizacji wst\u0119pnego projektu. Odbywa si\u0119 to poprzez wykonanie polecenia:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-01.png\"><img decoding=\"async\" width=\"446\" height=\"422\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-01.png\" alt=\"Inicjalizacja wst\u0119pnego projektu\" class=\"wp-image-25459\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-01.png 446w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-01-300x284.png 300w\" sizes=\"(max-width: 446px) 100vw, 446px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 1 Inicjalizacja wst\u0119pnego projektu<\/figcaption><\/figure>\n\n\n\n<p>Po wprowadzeniu informacji o projekcie takich jak jego nazwa czy opis zostanie utworzony plik package.json. Jego zawarto\u015b\u0107 prezentuje si\u0119 nast\u0119puj\u0105co:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-02.png\"><img decoding=\"async\" width=\"1024\" height=\"638\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-02-1024x638.png\" alt=\"Zawarto\u015b\u0107 pliku package.json\" class=\"wp-image-25461\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-02-1024x638.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-02-300x187.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-02-768x479.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-02.png 1360w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 2 Zawarto\u015b\u0107 pliku package.json<\/figcaption><\/figure>\n\n\n\n<p>Najbardziej interesuj\u0105ce nas pole znajduje si\u0119 obiekcie scripts. W nim przetrzymywane s\u0105 zdefiniowane przez u\u017cytkownika polecenia, kt\u00f3re s\u0142u\u017c\u0105 jako skr\u00f3t do uruchomie\u0144 d\u0142u\u017cszych polece\u0144. O co dok\u0142adnie chodzi, przekonamy si\u0119 w kolejnych cz\u0119\u015bciach niniejszego artyku\u0142u.<\/p>\n\n\n\n<p>Na tym te\u017c etapie utw\u00f3rzmy katalog scripts z przyk\u0142adowym skryptem o nazwie scenario.js, kt\u00f3rego wn\u0119trze b\u0119dzie przetrzymywa\u0142o pojedyncze polecenie HTTP wraz z kilkoma zmiennymi oraz importami, kt\u00f3re s\u0105 zb\u0119dne. Jego chaotyczna struktura jest utworzona intencjonalnie.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-03.png\"><img decoding=\"async\" width=\"1005\" height=\"1024\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-03-1005x1024.png\" alt=\"Katalog scripts\" class=\"wp-image-25463\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-03-1005x1024.png 1005w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-03-295x300.png 295w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-03-768x782.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-03.png 1084w\" sizes=\"(max-width: 1005px) 100vw, 1005px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 3 Katalog scripts<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Linter<\/strong><\/h2>\n\n\n\n<p>Linter, nazywany czasem statycznym analizatorem kodu, jest narz\u0119dziem programistycznym u\u017cywanym do automatycznej analizy du\u017cych zestaw\u00f3w kodu w celu wykrywania b\u0142\u0119d\u00f3w, niezgodno\u015bci z ustalonymi standardami programistycznymi oraz potencjalnych problem\u00f3w zwi\u0105zanych z bezpiecze\u0144stwem lub wydajno\u015bci\u0105. Jego g\u0142\u00f3wnym zadaniem jest badanie kodu w poszukiwaniu:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>brakuj\u0105cych element\u00f3w,<\/li>\n\n\n\n<li>wadliwych struktur,<\/li>\n\n\n\n<li>braku sp\u00f3jno\u015bci,<\/li>\n\n\n\n<li>innych b\u0142\u0119d\u00f3w.<\/li>\n<\/ul>\n\n\n\n<p>Linter dzia\u0142a na poziomie statycznym, co oznacza, \u017ce analizuje kod bez jego rzeczywistego uruchamiania. Pozwala to na szybkie wykrycie potencjalnych problem\u00f3w przed uruchomieniem aplikacji. Dzi\u0119ki temu programi\u015bci mog\u0105 wcze\u015bniej identyfikowa\u0107 i poprawia\u0107 b\u0142\u0119dy w trakcie tworzenia program\u00f3w, co prowadzi do poprawy jako\u015bci i przewidywalno\u015bci kodu.<\/p>\n\n\n\n<p>Podczas pisania scenariuszy testowych w k6, korzystamy z lintera do wykrywania potencjalnych b\u0142\u0119d\u00f3w w naszym kodzie. W prostych scenariuszach mog\u0105 to by\u0107 najcz\u0119\u015bciej nieu\u017cywane obiekty czy importy.<\/p>\n\n\n\n<p>Teraz, kiedy ju\u017c wiemy, czym jest linter, przejd\u017amy do implementacji go w naszym skrypcie. Aby zainstalowa\u0107 narz\u0119dzie, u\u017cyjmy menad\u017cera npm.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-04.png\"><img decoding=\"async\" width=\"808\" height=\"422\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-04.png\" alt=\"Implementacja lintera w skrypcie\" class=\"wp-image-25465\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-04.png 808w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-04-300x157.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-04-768x401.png 768w\" sizes=\"(max-width: 808px) 100vw, 808px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 4 Implementacja lintera w skrypcie<\/figcaption><\/figure>\n\n\n\n<p>W linterze zasady, kt\u00f3re b\u0119d\u0105 zastosowane w naszym skrypcie, definiuje si\u0119 z poziomu plik\u00f3w konfiguracyjnych. Utw\u00f3rzmy wi\u0119c plik o nazwie .eslintrc.js, w kt\u00f3rym zdefiniujemy cz\u0119\u015b\u0107 naszej konfiguracji.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-05.png\"><img decoding=\"async\" width=\"771\" height=\"1024\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-05-771x1024.png\" alt=\"Definiowanie cz\u0119\u015bci konfiguracji\" class=\"wp-image-25467\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-05-771x1024.png 771w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-05-226x300.png 226w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-05-768x1020.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-05.png 928w\" sizes=\"(max-width: 771px) 100vw, 771px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 5 Definiowanie cz\u0119\u015bci konfiguracji<\/figcaption><\/figure>\n\n\n\n<p>List\u0119 pe\u0142nych opcji znajdziecie <a href=\"https:\/\/eslint.org\/docs\/latest\/use\/getting-started\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >w dokumentacji narz\u0119dzia<\/a>. W istniej\u0105cym pliku package.json zdefiniujmy dwa polecenia, kt\u00f3re b\u0119d\u0105 s\u0142u\u017cy\u0142y nam do:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\">\n<li>Wykrywania b\u0142\u0119d\u00f3w we wszystkich plikach z katalogu scripts, gdzie przechowujemy scenariusze testowe.<\/li>\n\n\n\n<li>Automatycznego naprawiania wykrytych b\u0142\u0119d\u00f3w w zdefiniowanym katalogu.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-06.png\"><img decoding=\"async\" width=\"1024\" height=\"830\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-06-1024x830.png\" alt=\"Definiowanie polece\u0144\" class=\"wp-image-25469\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-06-1024x830.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-06-300x243.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-06-768x622.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-06.png 1256w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 6 Definiowanie polece\u0144<\/figcaption><\/figure>\n\n\n\n<p>Teraz uruchommy pierwsze z polece\u0144.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-07.png\"><img decoding=\"async\" width=\"1024\" height=\"590\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-07-1024x590.png\" alt=\"Uruchomienie pierwszego polecenia\" class=\"wp-image-25471\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-07-1024x590.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-07-300x173.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-07-768x443.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-07-1536x886.png 1536w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-07.png 1842w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 7 Uruchomienie pierwszego polecenia<\/figcaption><\/figure>\n\n\n\n<p>Nast\u0119pnie spr\u00f3bujmy uruchomi\u0107 napraw\u0119 skrypt\u00f3w i sprawd\u017amy, jakie zmiany zostan\u0105 dokonane w skrypcie.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-08.png\"><img decoding=\"async\" width=\"1024\" height=\"495\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-08-1024x495.png\" alt=\"Uruchamianie naprawy skrypt\u00f3w\" class=\"wp-image-25473\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-08-1024x495.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-08-300x145.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-08-768x371.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-08-1536x742.png 1536w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-08.png 1842w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 8 Uruchamianie naprawy skrypt\u00f3w<\/figcaption><\/figure>\n\n\n\n<p>Jak wida\u0107, zb\u0119dne elementy zosta\u0142y usuni\u0119te z kodu. Dzi\u0119ki temu mo\u017cemy utrzymywa\u0107 wysok\u0105 jako\u015b\u0107 kodu. Niestety, cz\u0119\u015b\u0107 b\u0142\u0119d\u00f3w nie zostanie umy\u015blnie usuni\u0119ta \u2013 <strong>wymaga ona manualnego sprawdzenia<\/strong> przez in\u017cyniera kodu.<\/p>\n\n\n\n<p>Linter powinien by\u0107 domy\u015blnie uruchamiany na etapie przesy\u0142ania zmian do repozytorium, aby zapewni\u0107 sp\u00f3jno\u015b\u0107 i poprawno\u015b\u0107 kodu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Prettier<\/strong><\/h2>\n\n\n\n<p>Prettier to narz\u0119dzie do formatowania kodu, kt\u00f3re pozwala automatycznie uporz\u0105dkowa\u0107 struktur\u0119 w okre\u015blonym j\u0119zyku programowania. Jego g\u0142\u00f3wnym celem jest zapewnienie sp\u00f3jno\u015bci formatowania mi\u0119dzy r\u00f3\u017cnymi cz\u0119\u015bciami kodu oraz u\u0142atwienie ich czytania i zrozumienia.<\/p>\n\n\n\n<p>Programi\u015bci mog\u0105 skupi\u0107 si\u0119 na tworzeniu logiki aplikacji z Prettierem, a narz\u0119dzie zadba automatycznie o odpowiednie formatowanie kodu. Zwi\u0119ksza to nie tylko czytelno\u015b\u0107, ale tak\u017ce pozwala zaoszcz\u0119dzi\u0107 czas i prac\u0119, wymagane zwykle przy r\u0119cznym formatowaniu. Prettier jest popularnym narz\u0119dziem w\u015br\u00f3d programist\u00f3w, kt\u00f3rzy ceni\u0105 sobie czysty, sp\u00f3jny i estetyczny wygl\u0105d kodu.<\/p>\n\n\n\n<p>Podczas pisania wielu scenariuszy testowych jednocze\u015bnie, Prettier znajduje swoje zastosowanie w ujednolicania praktyk u\u017cywanych przez r\u00f3\u017cnych in\u017cynier\u00f3w. Dzi\u0119ki temu mo\u017cemy zapewni\u0107 sp\u00f3jny wygl\u0105d i formatowanie kodu w ca\u0142ym projekcie.<\/p>\n\n\n\n<p>Aby zainstalowa\u0107 narz\u0119dzie, wystarczy u\u017cy\u0107 mened\u017cera pakiet\u00f3w npm i wpisa\u0107 polecenie:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-09.png\"><img decoding=\"async\" width=\"842\" height=\"422\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-09.png\" alt=\"Instalowanie Prettiera\" class=\"wp-image-25475\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-09.png 842w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-09-300x150.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-09-768x385.png 768w\" sizes=\"(max-width: 842px) 100vw, 842px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 9 Instalowanie Prettiera<\/figcaption><\/figure>\n\n\n\n<p>Podobnie jak w przypadku lintera, zasady, wed\u0142ug kt\u00f3rych kod ma zosta\u0107 sformatowany, s\u0105 definiowane w r\u00f3\u017cnych formatach plik\u00f3w. W naszym przypadku u\u017cyjemy formatu json do konfiguracji. Przyk\u0142adowa zawarto\u015b\u0107 pliku o nazwie .prettierrc.json prezentuje si\u0119 nast\u0119puj\u0105co:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-10.png\"><img decoding=\"async\" width=\"790\" height=\"720\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-10.png\" alt=\"Przyk\u0142adowa zawarto\u015b\u0107 pliku\" class=\"wp-image-25477\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-10.png 790w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-10-300x273.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-10-768x700.png 768w\" sizes=\"(max-width: 790px) 100vw, 790px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 10 Przyk\u0142adowa zawarto\u015b\u0107 pliku<\/figcaption><\/figure>\n\n\n\n<p>Opcje przedstawione powy\u017cej s\u0105 r\u00f3wnie\u017c konfiguracj\u0105, kt\u00f3r\u0105 osobi\u015bcie stosuj\u0119 w swoich projektach. Zdecydowanie zalecam jej wdro\u017cenie w w\u0142asnych frameworkach.<\/p>\n\n\n\n<p>Po utworzeniu konfiguracji jeste\u015bmy gotowi do zdefiniowania dw\u00f3ch polece\u0144. Pierwsze z nich pos\u0142u\u017cy nam do sprawdzania formatowania, a drugie do jego automatycznego zastosowania.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-11.png\"><img decoding=\"async\" width=\"1024\" height=\"900\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-11-1024x900.png\" alt=\"Definiowanie polece\u0144\" class=\"wp-image-25479\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-11-1024x900.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-11-300x264.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-11-768x675.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-11.png 1256w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 11 Definiowanie polece\u0144<\/figcaption><\/figure>\n\n\n\n<p>Na pocz\u0105tek sprawd\u017amy, czy b\u0142\u0119dy w formatowaniu zostan\u0105 wykryte:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-12.png\"><img decoding=\"async\" width=\"1024\" height=\"487\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-12-1024x487.png\" alt=\"Wykrywanie b\u0142\u0119d\u00f3w\" class=\"wp-image-25481\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-12-1024x487.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-12-300x143.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-12-768x365.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-12.png 1514w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 12 Wykrywanie b\u0142\u0119d\u00f3w<\/figcaption><\/figure>\n\n\n\n<p>Nast\u0119pnie, nale\u017cy uruchomi\u0107 automatyczne sformatowanie kodu w istniej\u0105cych scenariuszach z katalogu scripts.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-13.png\"><img decoding=\"async\" width=\"826\" height=\"636\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-13.png\" alt=\"Automatyczne sformatowanie kodu\" class=\"wp-image-25483\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-13.png 826w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-13-300x231.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-13-768x591.png 768w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 13 Automatyczne sformatowanie kodu<\/figcaption><\/figure>\n\n\n\n<p>Sprawd\u017amy zawarto\u015b\u0107 naszego kodu po sformatowaniu.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-14.png\"><img decoding=\"async\" width=\"945\" height=\"1024\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-14-945x1024.png\" alt=\"Weryfikacja kodu po formatowaniu\" class=\"wp-image-25485\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-14-945x1024.png 945w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-14-277x300.png 277w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-14-768x832.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/p5-attachment-14.png 980w\" sizes=\"(max-width: 945px) 100vw, 945px\" \/><\/a><figcaption class=\"wp-element-caption\">Ryc. 14 Weryfikacja kodu po formatowaniu<\/figcaption><\/figure>\n\n\n\n<p>Podobnie jak w przypadku lintera, Prettier powinien by\u0107 uruchamiany na etapie wprowadzania zmian do repozytorium, aby zapewni\u0107 sp\u00f3jno\u015b\u0107 formatowania kodu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Podsumowanie<\/strong><\/h2>\n\n\n\n<p>W opisanym artykule skupili\u015bmy si\u0119 na pierwszych krokach tworzenia przyk\u0142adowego frameworka testowego, kt\u00f3ry umo\u017cliwi monitorowanie wydajno\u015bci naszych aplikacji za pomoc\u0105 narz\u0119dzia k6. Rozpocz\u0119li\u015bmy od instalacji dw\u00f3ch kluczowych narz\u0119dzi, kt\u00f3re znacz\u0105co u\u0142atwiaj\u0105 prac\u0119 z kodem \u2013 lintera oraz Prettiera. Dzi\u0119ki nim <strong>mo\u017cemy unika\u0107 cz\u0119stych b\u0142\u0119d\u00f3w sk\u0142adniowych i logicznych<\/strong>, a tak\u017ce <strong>utrzyma\u0107 czysto\u015b\u0107 formatowania kodu<\/strong>.<\/p>\n\n\n\n<p>W kolejnych cz\u0119\u015bciach serii o k6 skoncentrujemy si\u0119 na rozbudowywaniu naszego frameworka testowego o dodatkowe elementy, takie jak pliki konfiguracyjne czy przyk\u0142adowe scenariusze testowe.<\/p>\n\n\n\n<p>***<\/p>\n\n\n\n<p>Je\u015bli jeszcze nie mieli\u015bcie okazji zapozna\u0107 si\u0119 z artyku\u0142ami z serii o narz\u0119dziu k6, znajdziecie je tutaj:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/sii.pl\/blog\/wydajnosc-pod-kontrola-co-sklania-mnie-do-wyboru-k6\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Wydajno\u015b\u0107 pod kontrol\u0105 \u2013 co sk\u0142ania mnie do wyboru k6?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/sii.pl\/blog\/wydajnosc-pod-kontrola-z-k6-nagrywanie-parametryzacja-i-uruchamianie-pierwszego-scenariusza-testowego\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Wydajno\u015b\u0107 pod kontrol\u0105 z k6 \u2013 nagrywanie, parametryzacja i uruchamianie pierwszego scenariusza testowego<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/sii.pl\/blog\/wydajnosc-pod-kontrola-z-k6-metryki-progi-jakosci-tagowanie\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Wydajno\u015b\u0107 pod kontrol\u0105 z k6 \u2013 metryki, progi jako\u015bci, tagowanie<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/sii.pl\/blog\/wydajnosc-pod-kontrola-z-k6-dodatkowe-konfiguracje-typy-modeli-scenariuszy-oraz-executorow\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">Wydajno\u015b\u0107 pod kontrol\u0105 z k6 \u2013 dodatkowe konfiguracje, typy modeli scenariuszy oraz executor\u00f3w<\/a><\/li>\n<\/ul>\n\n\n\n<p>Ponadto, zach\u0119cam do zapoznania si\u0119 z <a href=\"https:\/\/github.com\/gpiechnik2\/k6-boilerplate\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\" rel=\"nofollow\" >Repozytorium projektu<\/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;25458&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;1&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 ( vote: 1)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Wydajno\u015b\u0107 pod kontrol\u0105 z k6 \u2013 inicjalizacja frameworka&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 ( vote: 1)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Odpowiednie rozmieszczenie i zaplanowanie struktury framework\u00f3w stanowi kluczowy etap w projektowaniu wi\u0119kszych projekt\u00f3w. Gdy nasza aplikacja staje si\u0119 coraz bardziej &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/wydajnosc-pod-kontrola-z-k6-inicjalizacja-frameworka\/\">Continued<\/a><\/p>\n","protected":false},"author":517,"featured_media":25498,"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":[1317],"tags":[1701,1570,1546],"class_list":["post-25458","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-testowanie","tag-k6","tag-tosca","tag-przeglad-narzedzi"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/11\/Wydajnosc-pod-kontrola-\u2013-co-sklania-mnie-do-wyboru-k6.jpg","category_names":["Testowanie"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/25458"}],"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\/517"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=25458"}],"version-history":[{"count":3,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/25458\/revisions"}],"predecessor-version":[{"id":25514,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/25458\/revisions\/25514"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/25498"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=25458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=25458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=25458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}