Je\u015bli chodzi o JavaScript, w Podr\u0119czniku znajduje si\u0119 strona o uruchamianiu test\u00f3w QUnit<\/a>, chocia\u017c bardziej chodzi o testowanie kodu JavaScript w rdzeniu WordPressa.<\/p>\n Chocia\u017c \u017cadna z tych rzeczy nie jest ustandaryzowana dla JavaScript w WordPress, mo\u017cemy pisa\u0107 \u015bwietne testy jednostkowe za pomoc\u0105 zestawu testowego Jest. W tym artykule dowiemy si\u0119, jak pisa\u0107 testy jednostkowe JavaScript dla przyk\u0142adowej wtyczki, kt\u00f3ra \u0142aduje 5 post\u00f3w przez WP REST API za pomoc\u0105 W przesz\u0142o\u015bci pisanie test\u00f3w jednostkowych JavaScript wi\u0105za\u0142o si\u0119 z konfiguracj\u0105 Mocha do uruchamiania test\u00f3w, Chai do tworzenia asercji, a Sinon do symulowania funkcji i ich szpiegowania. Chocia\u017c oferuj\u0105 du\u017c\u0105 elastyczno\u015b\u0107, praca z trzema pakietami jest znacznie bardziej skomplikowana ni\u017c z jednym. Jest<\/a> to wszystko w jednym pakiecie:<\/p>\n Aby ten artyku\u0142 koncentrowa\u0142 si\u0119 na testowaniu za pomoc\u0105 Jest, istnieje dodatkowa konfiguracja zewn\u0119trzna w stosunku do procesu testowania, taka jak Babel lub Webpack, kt\u00f3ra nie zostanie tutaj om\u00f3wiona. Wszystko to mo\u017cna znale\u017a\u0107 w repozytorium WP Jest Tests<\/a>, kt\u00f3re towarzyszy temu artyku\u0142owi. Aby zachowa\u0107 kontekst, ka\u017cda sekcja b\u0119dzie zawiera\u0107 link do jednego z odpowiednich plik\u00f3w, kt\u00f3re napiszemy.<\/p>\n Przyk\u0142adowa wtyczka PHP<\/a>, kt\u00f3rej u\u017cyjemy do nauki pisania test\u00f3w jednostkowych JavaScript, jest do\u015b\u0107 standardowa. Jedyne interesuj\u0105ce wiersze to te, w kt\u00f3rych umieszczamy w kolejce nasz plik JavaScript i dodajemy skrypt inline, kt\u00f3ry przekazuje do niego zmienne:<\/p>\n Po zaszyfrowaniu naszego pliku JavaScript dodajemy zmienn\u0105 globaln\u0105 Najpierw musimy zainicjowa\u0107 Edytuj utworzony plik package.json<\/a> i dodaj nowy wpis, aby uruchomi\u0107 nasze testy w B\u0119dzie to polecenie, kt\u00f3rego u\u017cyjemy, aby powiedzie\u0107 Jest, aby uruchomi\u0142 nasze testy jednostkowe JavaScript. Jest to jednorazowe uruchomienie, ale Jest r\u00f3wnie\u017c obs\u0142uguje ogl\u0105danie plik\u00f3w, wi\u0119c mo\u017cesz wprowadzi\u0107 dodatkowy:<\/p>\n Teraz zainstaluj Jest jako zale\u017cno\u015b\u0107 programistyczn\u0105, uruchamiaj\u0105c<\/p>\n Podczas instalacji utw\u00f3rz plik o nazwie Przyjrzyjmy si\u0119 ka\u017cdemu z nich:<\/p>\n Na pewno zauwa\u017cy\u0142e\u015b odniesienie: jest to specjalny token, kt\u00f3ry jest zast\u0119powany przez Jest z korzeniem twojego projektu, kt\u00f3rym zwykle jest lokalizacja twojego Om\u00f3wimy szczeg\u00f3\u0142owo kolejne dwie sekcje, ale najpierw utw\u00f3rz folder i te dwa pliki, o kt\u00f3rych mowa powy\u017cej:<\/p>\n Je\u015bli, tak jak ta wtyczka, u\u017cywasz Webpacka do kompilacji wszystkiego, w tym styl\u00f3w, i importujesz musisz u\u017cy\u0107 styleMock.js<\/a>, aby mockowa\u0107 pliki SASS podczas importowania ich do naszego pliku JavaScript, w przeciwnym razie Jest zawieszony, poniewa\u017c nie b\u0119dzie w stanie rozwi\u0105za\u0107 modu\u0142u. Nie potrzebujesz wiele do tego pliku, po prostu dodaj<\/p>\n Jest u\u017cyje tej makiety za ka\u017cdym razem, gdy znajdzie Popracujmy teraz nad plikiem globals.js<\/a>. Jedn\u0105 z zalet u\u017cywania Jest jest to, \u017ce jest ju\u017c dostarczany z ju\u017c skonfigurowan\u0105 Utw\u00f3rz folder Spowoduje to deklaracj\u0119 i mock niekt\u00f3rych obiekt\u00f3w i metod, kt\u00f3rych b\u0119dziesz p\u00f3\u017aniej u\u017cywa\u0107 w swoich testach. Szczeg\u00f3lnie interesuj\u0105ca jest ta ostatnia<\/p>\n Jest to zmienna globalna, kt\u00f3r\u0105 napisali\u015bmy za pomoc\u0105 Wtyczka WordPress zawiera pojedynczy plik JavaScript main.js<\/a> w Zamierzasz wyeksportowa\u0107 funkcj\u0119, kt\u00f3ra wykonuje ca\u0142\u0105 prac\u0119:<\/p>\n wi\u0119c mo\u017cesz go u\u017cywa\u0107 w swoich testach w Jest.<\/p>\n Teraz mo\u017cesz zacz\u0105\u0107 pisa\u0107 testy! Testy mo\u017cna znale\u017a\u0107 na wiele sposob\u00f3w:<\/p>\n Utw\u00f3rz Nast\u0119pnie czy\u015bcimy wszystkie mocki, wi\u0119c nigdy nie uruchamiamy brudnych mock\u00f3w nios\u0105cych warto\u015bci z poprzednich test\u00f3w. Mo\u017ce to prowadzi\u0107 do b\u0142\u0119d\u00f3w, poniewa\u017c na przyk\u0142ad, je\u015bli \u015bledzimy, ile razy zosta\u0142a wywo\u0142ana funkcja, mo\u017cemy uzyska\u0107 niepoprawny odczyt, je\u015bli nie wyczy\u015bcimy makiety mi\u0119dzy testem a testem:<\/p>\n Pierwszy test, kt\u00f3ry napiszemy, b\u0119dzie zawiera\u0142 podstawowe stwierdzenia, gdy pewne rzeczy zawiod\u0105. Na przyk\u0142ad, je\u015bli W tym kodzie<\/p>\n Pierwszy test niczego nie definiuje, Drugi test definiuje Kolejny zestaw test\u00f3w zaczyna si\u0119 od<\/p>\n a wewn\u0105trz mamy kolejn\u0105 funkcj\u0119 burzenia:<\/p>\n w przeciwie\u0144stwie do Wy\u015bmiewamy pierwsz\u0105 obietnic\u0119, kt\u00f3ra dotyczy odpowiedzi, a drug\u0105 reprezentacj\u0119 danych w formacie JSON. Te dane s\u0105 podobne do tych, kt\u00f3re otrzymujemy z API WP REST. Bior\u0105c pod uwag\u0119, \u017ce nasz kod potrzebuje tylko tytu\u0142u i linku, kpimy z tego.<\/p>\n Mo\u017cemy teraz napisa\u0107 test za pomoc\u0105 mocked Od samego pocz\u0105tku jest inaczej: funkcja anonimowa przekazana do Globalny Wzywamy Reszta to wi\u0119cej asercji, aby upewni\u0107 si\u0119, \u017ce Teraz mo\u017cesz pisa\u0107<\/p>\n a Jest uruchomi testy jednostkowe JavaScript dla Twojej wtyczki WordPress<\/p>\nfetch<\/code>funkcji z JavaScript i renderuje je w okre\u015blonym elemencie DOM na stronie.<\/p>\nKorzy\u015bci z u\u017cywania Jest do test\u00f3w jednostkowych JavaScript w WordPress<\/h2>\n
\n
describe<\/code>i it<\/code>lubtest<\/code><\/li>\nexpect<\/code>i toBe<\/code>i toHaveLength<\/code>wielu innych<\/li>\nPrzed przej\u015bciem dalej<\/h3>\n
Przegl\u0105d strony PHP<\/h2>\n
$initial_state = rawurlencode( wp_json_encode( array(\n 'restUrl' => esc_url_raw( rest_url() ),\n 'posts' => 5,)) );\nwp_enqueue_script( \n 'wp-jest-tests',\n plugins_url( 'front.js', __FILE__ ),\n array(),\n $plugin_version,\n true\n);\nwp_add_inline_script(\n 'wp-jest-tests',\n 'window.wpJestTests = JSON.parse(decodeURIComponent(\"'. $initial_state. '\"));',\n 'before'\n);<\/code><\/pre>\nwpJestTests<\/code>z wp_add_inline_script()<\/code>. Ta zmienna jest szczeg\u00f3lnie interesuj\u0105ca i trudna w obs\u0142udze, poniewa\u017c jest zewn\u0119trzna w stosunku do naszego pliku JavaScript i b\u0119dziemy musieli j\u0105 wy\u015bmiewa\u0107 w naszych testach.<\/p>\nSkonfiguruj testy Jest<\/h2>\n
npm<\/code>nasz projekt wtyczki, aby m\u00f3c z nim zainstalowa\u0107 Jest. Przejd\u017a w wierszu polece\u0144 do folderu wtyczek i uruchom:<\/p>\nnpm init<\/code>i przejd\u017a przez seri\u0119 podpowiedzi tutaj<\/p>\nscripts<\/code>sekcji:<\/p>\n\"test\": \"jest\"<\/code><\/p>\n\"test-watch\": \"jest --watch\"<\/code><\/p>\nnpm install -D jest<\/code><\/p>\njest.config.js<\/code>. To utrzyma ca\u0142\u0105 niezb\u0119dn\u0105 konfiguracj\u0119. Dodaj nast\u0119puj\u0105ce informacje:<\/p>\nmodule.exports = {\n verbose: true,\n setupFiles: [\n '\/__mocks__\/globals.js'\n ],\n moduleNameMapper: {\n '.(css|less|sass|scss)$': '\/__mocks__\/styleMock.js'\n }\n};<\/code><\/pre>\n\n
verbose<\/code>: wskazuje, czy ka\u017cdy indywidualny test powinien by\u0107 raportowany podczas przebiegu. Po wykonaniu wszystkie b\u0142\u0119dy b\u0119d\u0105 nadal wy\u015bwietlane na dole. Zauwa\u017c, \u017ce je\u015bli uruchomiony jest tylko jeden plik testowy, domy\u015blnie jest to true<\/code>.<\/li>\nsetupFiles<\/code>: lista \u015bcie\u017cek do modu\u0142\u00f3w, kt\u00f3re uruchamiaj\u0105 kod w celu skonfigurowania lub skonfigurowania \u015brodowiska testowego. Ka\u017cdy plik setupFile zostanie uruchomiony raz na plik testowy. Poniewa\u017c ka\u017cdy test dzia\u0142a we w\u0142asnym \u015brodowisku, skrypty te zostan\u0105 wykonane w \u015brodowisku testowym bezpo\u015brednio przed wykonaniem samego kodu testowego. U\u017cyjemy tego do deklarowania zmiennych globalnych renderowanych przez PHP i WordPress za pomoc\u0105 polece\u0144 takich jak wp_add_inline_script<\/code>lub wp_localize_script<\/code>.<\/li>\nmoduleNameMapper<\/code>: jest to mapa od wyra\u017ce\u0144 regularnych do nazw modu\u0142\u00f3w (lub tablic nazw modu\u0142\u00f3w), kt\u00f3ra pozwala na zablokowanie zasob\u00f3w statycznych, takich jak obrazy lub style za pomoc\u0105 pojedynczego modu\u0142u.<\/li>\n<\/ul>\npackage.json<\/code>.<\/p>\n\n
__mocks__<\/code><\/li>\nstyleMock.js<\/code>iglobals.js<\/code><\/li>\n<\/ul>\nImport mock\u00f3w do test\u00f3w Jest<\/h2>\n
.scss<\/code>plik w .js<\/code>pliku:<\/p>\nimport '.\/main.scss';<\/code><\/pre>\n.scss<\/code>import i zmapuje je do makiety, co pozwoli ci przej\u015b\u0107 do przodu z testami bez zwracania uwagi na style.<\/p>\nSkonfiguruj globalne dla Jest<\/h2>\n
jsdom<\/code>, implementacj\u0105 standard\u00f3w sieciowych w czystym j\u0119zyku JavaScript, kt\u00f3ra symuluje \u015brodowisko DOM tak, jakby\u015b by\u0142 w przegl\u0105darce, i u\u017cyjemy jej do symulowania element\u00f3w DOM do naszych test\u00f3w.<\/p>\n__mocks__<\/code>i globals.js<\/code>plik w nim. Dodaj to do pliku:<\/p>\nimport { JSDOM } from 'jsdom';\nconst dom = new JSDOM();\nglobal.document = dom.window.document;\nglobal.window = dom.window;\nglobal.window.wpJestTests = undefined;<\/code><\/pre>\nglobal.window.wpJestTests = undefined;<\/code><\/pre>\nwp_add_inline_script<\/code>. Musisz zakpi\u0107 j\u0105 jako zmienn\u0105 globaln\u0105, aby m\u00f3c u\u017cywa\u0107 jej w swoich testach.<\/p>\nPrzegl\u0105d pliku JavaScript<\/h2>\n
\/src<\/code>folderze. Jest to p\u00f3\u017aniej transpilowane i wyprowadzane do \/js\/front.js<\/code>pliku, kt\u00f3ry zostanie za\u0142adowany przez PHP. JavaScript \u0142aduje pi\u0119\u0107 post\u00f3w WordPress za fetch<\/code>pomoc\u0105 standardowej funkcji JavaScript, za po\u015brednictwem interfejsu API WP REST i wstawia tytu\u0142 wraz z linkiem do posta do div.entry-content<\/code>.<\/p>\nexport const wpJestTestsInit =() => {<\/code><\/pre>\nNareszcie pisanie test\u00f3w jednostkowych JavaScript za pomoc\u0105 Jest!<\/h2>\n
\n
test.js<\/code><\/li>\nmain.test.js<\/code><\/li>\n.js<\/code>pliki znajduj\u0105ce si\u0119 w folderze o nazwie__tests__<\/code><\/li>\n<\/ul>\n__tests__<\/code>folder, a wewn\u0105trz niego front.test.js<\/code>. Mo\u017cesz zobaczy\u0107 gotowy plik JavaScript dla test\u00f3w Jest<\/a> w repozytorium towarzysz\u0105cym. Przejd\u017amy przez to blokami. Pierwsza linia importuje plik JS, kt\u00f3ry chcemy przetestowa\u0107:<\/p>\nimport { wpJestTestsInit } from '..\/src\/main';<\/code><\/pre>\nafterEach(() => {\n jest.clearAllMocks();\n} );<\/code><\/pre>\nwpJestTests<\/code>zmienna globalna, kt\u00f3r\u0105 pisali\u015bmy, wp_add_inline_script<\/code>nie zosta\u0142a zapisana z jakiegokolwiek powodu:<\/p>\ndescribe( 'Initialization', () => {\n test( 'if wpJestTests is undefined, nothing happens', () => {\n expect( wpJestTestsInit() ).toBe( false );\n } );\n\n test( 'if .entry-content is missing, nothing happens', () => {\n wpJestTests = { posts: 5 };\n const mockQuerySelector = jest.spyOn( document, 'querySelector') .mockImplementation( () => undefined );\n expect( wpJestTestsInit() ).toBe( false );\n expect( mockQuerySelector ).toHaveBeenCalledTimes( 1 );\n } );\n} );<\/code><\/pre>\n\n
describe<\/code>tworzy grup\u0119 z\u0142o\u017con\u0105 z kilku powi\u0105zanych ze sob\u0105 test\u00f3w<\/li>\ntest<\/code>jest tym, co faktycznie wykonuje test<\/li>\nexpect<\/code>otacza nasz obiekt testowy, zapewniaj\u0105c dost\u0119p do wielu \u201edopasowa\u0144", kt\u00f3re pozwalaj\u0105 na wysuwanie r\u00f3\u017cnych twierdze\u0144 na temat jego zawarto\u015bci<\/li>\ntoBe<\/code>jest jednym z tych dopasowa\u0144. Jest zawiera wiele element\u00f3w dopasowuj\u0105cych<\/a>, a nawet inne mo\u017cna doda\u0107 za pomoc\u0105 pakietu innej<\/a> firmy .<\/li>\n<\/ul>\nwpJestTests<\/code>wi\u0119c jego warto\u015b\u0107 b\u0119dzie taka, jak zdefiniowa\u0142e\u015b w globals.js<\/code>. Poniewa\u017c jest to undefined<\/code>, nie mo\u017cemy pracowa\u0107, wi\u0119c chcemy potwierdzi\u0107, \u017ce funkcja powraca bez robienia czegokolwiek.<\/p>\nwpJestTests<\/code>i na\u015bladuje document.querySelector<\/code>metod\u0119, kt\u00f3ra ma zosta\u0107 zwr\u00f3cona undefined<\/code>, czyli to, co zwr\u00f3ci\u0142aby, gdyby nie mog\u0142a znale\u017a\u0107 elementu w DOM. W takim przypadku chcemy potwierdzi\u0107, \u017ce wracamy bez robienia czegokolwiek i \u017ce nasza funkcja mocking document.querySelector<\/code>zosta\u0142a wywo\u0142ana raz.<\/p>\nPr\u00f3bne pobieranie w testach Jest<\/h2>\n
describe( 'Fetch posts', () => {<\/code><\/pre>\nafterAll( () => {\n global.fetch.mockClear();\n delete global.fetch;\n});<\/code><\/pre>\nafterEach<\/code>tego zostanie uruchomione po wykonaniu wszystkich test\u00f3w w tym describe<\/code>bloku. Poniewa\u017c nasz plik JavaScript u\u017cywa fetch<\/code>do \u0142adowania post\u00f3w, musimy sprawdzi\u0107, czy zosta\u0142 wywo\u0142any i zwr\u00f3ci\u0142 to, o co prosili\u015bmy, wi\u0119c zamierzamy zakpi\u0107 fetch<\/code>funkcj\u0119:<\/p>\nglobal.fetch = jest.fn().mockImplementation(\n () => Promise.resolve({\n ok: true,\n status: 200,\n json: () => Promise.resolve( [\n {\n link: 'test-1',\n title: { rendered: 'Post 1' }\n },\n {\n link: 'test-2',\n title: { rendered: 'Post 2' }\n },\n {\n link: 'test-3',\n title: { rendered: 'Post 3' }\n },\n {\n link: 'test-4',\n title: { rendered: 'Post 4' }\n },\n {\n link: 'test-5',\n title: { rendered: 'Post 5' }\n },\n ] ),\n })\n);<\/code><\/pre>\nTest integracji JavaScript z Jest w asynchronicznym kodzie, kt\u00f3ry u\u017cywa fetch<\/h2>\n
fetch<\/code>. Istnieje zasadnicza r\u00f3\u017cnica mi\u0119dzy tym testem a innymi testami jednostkowymi JavaScript: jest to test integracyjny. Poprzednie testy, kt\u00f3re tutaj om\u00f3wiono, po prostu zapewni\u0142y, \u017ce komponent dzia\u0142a dobrze. Sprawdzili\u015bmy, czy je\u015bli zmienna globalna stanu pocz\u0105tkowego nie zosta\u0142a zdefiniowana, nasz komponent nie b\u0119dzie renderowa\u0142 si\u0119. Jest to inne, poniewa\u017c zamierzamy przetestowa\u0107 dzia\u0142anie ca\u0142ego systemu, gdy zdefiniowana jest zmienna stanu pocz\u0105tkowego, uruchamiaj\u0105c w ten spos\u00f3b transakcj\u0119 danych, a na koniec wstawiaj\u0105c tytu\u0142y post\u00f3w wraz z linkami do dokumentu.<\/p>\ntest<\/code>otrzymuje done<\/code>parametr. W rzeczywisto\u015bci jest to funkcja, kt\u00f3ra zostanie wywo\u0142ana po zako\u0144czeniu testu. Jest czeka done<\/code>na wywo\u0142anie przed zako\u0144czeniem testu. Je\u015bli done<\/code>nigdy nie zostanie wywo\u0142any, test zako\u0144czy si\u0119 niepowodzeniem z b\u0142\u0119dem przekroczenia limitu czasu. Jest to dla nas interesuj\u0105ce, poniewa\u017c testujemy kod z udzia\u0142em fetch<\/code>funkcji asynchronicznej.<\/p>\ntest( 'if posts are fetch, inserts them', done => {\n wpJestTests = { posts: 5 };\n const mockClassListAdd = jest.fn();\n const divElem = {\n tagName: 'DIV',\n classList: { add: mockClassListAdd },\n innerHTML: ''\n };\n const mockQuerySelector = jest.spyOn( document, 'querySelector') .mockImplementation( () => divElem );\n\n expect( wpJestTestsInit() ).toBe( true );\n\n process.nextTick(() => {\n expect( mockQuerySelector ).toHaveBeenCalledTimes( 1 );\n expect( global.fetch ).toHaveBeenCalledTimes( 1 );\n expect( mockClassListAdd ).toHaveBeenCalledTimes( 1 );\n expect( divElem.innerHTML.match( \/test-[1-5]\/g ).length ).toBe( 5 );\n\n done();\n });\n} );<\/code><\/pre>\nwpJestTests<\/code>jest zdefiniowany, a nasz mocked document.querySelector<\/code>teraz zwraca co\u015b, co przypomina element HTML, z parzyst\u0105 classList<\/code>i jego add<\/code>metod\u0105 potomn\u0105.<\/p>\nwpJestTestsInit<\/code>i oczekujemy, \u017ce zako\u0144czy si\u0119 to poprawnie. Teraz, poniewa\u017c jest fetch<\/code>asynchroniczny, u\u017cyjemy Node.js<\/a>. In Node.js to kolejka, kt\u00f3ra zostanie uruchomiona po zako\u0144czeniu wszystkich zdarze\u0144 w bie\u017c\u0105cej p\u0119tli zdarze\u0144. To \u015bwietnie, poniewa\u017c wszystkie nasze obietnice zosta\u0142yby wtedy rozwi\u0105zane, co jest dok\u0142adnie tym, czego potrzebujemy do testowania tego kodu, kt\u00f3ry obejmuje .process.nextTick<\/code><\/a>nextTick``fetch<\/code><\/p>\nquerySelector<\/code>znaleziono co\u015b do pracy, co fetch<\/code>rzeczywi\u015bcie zosta\u0142o wywo\u0142ane, \u017ce klasa zosta\u0142a dodana do listy, a tytu\u0142y i linki naszych post\u00f3w zosta\u0142y wstawione w odpowiednim elemencie HTML. Gdy wszystko jest zrobione, wywo\u0142ujemy done<\/code>i ko\u0144czymy nasz test asynchroniczny.<\/p>\nUruchom testy Jest<\/h2>\n
npm run test<\/code><\/p>\n
![\"Proste](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157897-61e6c3c169e87.png\")
<\/a><\/p>\n