JavaScripti jaoks on k\u00e4siraamatus leht QUniti testide k\u00e4itamise<\/a> kohta, kuigi see puudutab rohkem JavaScripti koodi testimist WordPressi tuumas.<\/p>\n Kuigi \u00fckski neist pole WordPressis JavaScripti jaoks standardiseeritud, saame Jest testimiskomplekti kasutades kirjutada suurep\u00e4raseid \u00fchikuteste. Selles artiklis \u00f5pime, kuidas kirjutada JavaScripti \u00fchikuteste n\u00e4idisplugina jaoks, mis laadib Varem h\u00f5lmas JavaScripti \u00fchikutestide kirjutamine Mocha seadistamist testide k\u00e4itamiseks, Chai seadistamist v\u00e4idete esitamiseks ja Sinoni funktsioonide pilkamist ja nende j\u00e4rele luuramist. Kuigi need pakuvad suurt paindlikkust, on kolme paketiga palju keerulisem t\u00f6\u00f6tada kui \u00fche paketiga. Jest<\/a> pakub k\u00f5ike seda \u00fches paketis:<\/p>\n Selleks et see artikkel keskenduks Jestiga testimisele, on testimisprotsessist v\u00e4ljaspool t\u00e4iendavaid seadistusi, nagu Babel v\u00f5i Webpack, mida siin ei k\u00e4sitleta. K\u00f5ik see on leitav selle artikliga kaasas olevast WP Jest Testi repost .<\/a> Asjade kontekstip\u00f5hiseks hoidmiseks lingib iga jaotis \u00fchele asjakohastest failidest, mille kirjutame.<\/p>\n N\u00e4idisplugina PHP,<\/a> mida kasutame JavaScripti \u00fchikutestide kirjutamise \u00f5ppimiseks, on \u00fcsna standardne. Ainsad huvitavad read on need, kui paneme oma JavaScripti faili j\u00e4rjekorda ja lisame sellele muutujate edastamiseks tekstisisese skripti:<\/p>\n P\u00e4rast JavaScripti faili p\u00e4ringut lisame globaalse muutuja Peame esmalt Muutke loodud faili package.json<\/a> ja lisage meie testide k\u00e4ivitamiseks See on k\u00e4sk, mille abil anname Jestile JavaScripti \u00fcksuse testid k\u00e4itada. See on \u00fchekordne k\u00e4itamine, kuid Jest toetab ka failide vaatamist, nii et saate sisestada t\u00e4iendava:<\/p>\n N\u00fc\u00fcd installige Jest arenduss\u00f5ltuvusena, k\u00e4ivitades<\/p>\n Installimise ajal looge fail nimega Vaatame iga\u00fcks neist l\u00e4bi:<\/p>\n Kindlasti m\u00e4rkasite viidet: see on spetsiaalne m\u00e4rk, mille Jest asendab teie projekti juurega, mis tavaliselt on teie L\u00e4heme kahes j\u00e4rgmises jaotises s\u00fcvitsi, kuid esmalt looge kaust ja need kaks eespool viidatud faili:<\/p>\n Kui kasutate sarnaselt selle pistikprogrammiga Webpacki, et kompileerida k\u00f5ike, sealhulgas stiile, ja impordite peate kasutama SASS-failide pilkamiseks JavaScripti faili importimisel faili styleMock.js<\/a>, vastasel juhul jookseb Jest kokku, kuna see ei suuda moodulit lahendada. Selle faili jaoks pole palju vaja, lihtsalt lisage<\/p>\n Jest kasutab seda pilku iga kord, kui leiab T\u00f6\u00f6tame n\u00fc\u00fcd faili globals.js kallal<\/a>. \u00dcks Jesti kasutamise eelistest on see, et see tarnitakse juba konfigureeritud Looge kaust See deklareerib ja pilkab m\u00f5ningaid objekte ja meetodeid, mida hiljem oma testides kasutate. Viimane pakub erilist huvi<\/p>\n See on globaalne muutuja, mille kirjutasime kasutades WordPressi pistikprogrammi kaustas on \u00fcks JavaScripti fail main.js.<\/a> Ekspordite funktsiooni, mis teeb kogu t\u00f6\u00f6:<\/p>\n et saaksite seda Jesti testides kasutada.<\/p>\n N\u00fc\u00fcd saab hakata teste kirjutama! Jest leiab teste mitmel viisil:<\/p>\n Looge J\u00e4rgmisena t\u00fchjendame k\u00f5ik moed, nii et me ei jookse kunagi r\u00e4paste piladega, mis kannavad varasemate testide v\u00e4\u00e4rtusi. See v\u00f5ib p\u00f5hjustada vigu, kuna n\u00e4iteks kui luurame, mitu korda m\u00f5nitatud funktsiooni kutsuti, v\u00f5ime saada vale n\u00e4idu, kui me ei t\u00fchjenda testi ja testi vahelist pilku:<\/p>\n Esimene test, mille me kirjutame, esitab p\u00f5hiv\u00e4ited, kui m\u00f5ni asi eba\u00f5nnestub. N\u00e4iteks kui globaalset Selles koodis<\/p>\n Esimene test ei m\u00e4\u00e4ratle midagi, Teine test m\u00e4\u00e4ratleb J\u00e4rgmine testide komplekt algab<\/p>\n ja selle sees on meil veel \u00fcks rebimise funktsioon:<\/p>\n erinevalt Pilkame esimest lubadust, mis lahendab vastuse, ja teist andmete JSON-i esitust. Need andmed on sarnased WP REST API-lt saadud andmetega. Arvestades, et meie kood vajab ainult pealkirja ja linki, irvitame seda.<\/p>\n N\u00fc\u00fcd saame testi kirjutada pilkatud Algusest peale on see erinev: parameetrile edastatud anon\u00fc\u00fcmne funktsioon Globaalne Helistame \u00dclej\u00e4\u00e4nud on rohkem v\u00e4ited tagamaks, et N\u00fc\u00fcd saate kirjutada<\/p>\n ja Jest k\u00e4ivitab teie WordPressi pistikprogrammi JavaScripti \u00fchikutestid<\/p>\nfetch<\/code>JavaScripti funktsiooni kasutades WP REST API kaudu 5 postitust ja renderdab need lehe teatud DOM-i elemendis.<\/p>\nJesti kasutamise eelised JavaScripti \u00fchikutestide jaoks WordPressis<\/h2>\n
\n
describe<\/code>ja it<\/code>v\u00f5itest<\/code><\/li>\nexpect<\/code>ja toBe<\/code>ning toHaveLength<\/code>palju muud<\/li>\nEnne edasi liikumist<\/h3>\n
PHP poole \u00fclevaade<\/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>koos wp_add_inline_script()<\/code>. See muutuja on eriti huvitav ja keeruline k\u00e4sitleda, kuna see on v\u00e4ljaspool meie JavaScripti faili ja me peame seda oma testides m\u00f5nitama.<\/p>\nSeadistage Jesti testid<\/h2>\n
npm<\/code>oma pistikprogrammi projektis l\u00e4htestama, et saaksime Jesti sellega installida. Liikuge k\u00e4sureal oma pistikprogrammi kausta ja k\u00e4ivitage:<\/p>\nnpm init<\/code>ja tutvuge siinsete viipade seeriaga<\/p>\nscripts<\/code>jaotises uus kirje:<\/p>\n\"test\": \"jest\"<\/code><\/p>\n\"test-watch\": \"jest --watch\"<\/code><\/p>\nnpm install -D jest<\/code><\/p>\njest.config.js<\/code>. See hoiab kogu vajaliku konfiguratsiooni. Lisage j\u00e4rgmine:<\/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>: n\u00e4itab, kas iga \u00fcksikkatse tuleb jooksu ajal aru anda. K\u00f5ik vead kuvatakse ka p\u00e4rast t\u00e4itmist endiselt allosas. Pange t\u00e4hele, et kui k\u00e4ivitamisel on ainult \u00fcks testfail, on see vaikimisi true<\/code>.<\/li>\nsetupFiles<\/code>: loend moodulitest, mis k\u00e4itavad testimiskeskkonna konfigureerimiseks v\u00f5i seadistamiseks mingit koodi. Iga setupFile k\u00e4ivitatakse \u00fcks kord testfaili kohta. Kuna iga test t\u00f6\u00f6tab oma keskkonnas, k\u00e4ivitatakse need skriptid testimiskeskkonnas vahetult enne testkoodi enda k\u00e4ivitamist. Kasutame seda PHP ja WordPressi renderdatud globaalsete muutujate deklareerimiseks selliste k\u00e4skudega nagu wp_add_inline_script<\/code>v\u00f5i wp_localize_script<\/code>.<\/li>\nmoduleNameMapper<\/code>: see on kaart regulaaravaldistest moodulite nimedeni (v\u00f5i moodulinimede massiivideni), mis v\u00f5imaldab \u00fche mooduliga staatilisi ressursse, n\u00e4iteks pilte v\u00f5i stiile, v\u00e4lja j\u00e4tta.<\/li>\n<\/ul>\npackage.json<\/code>.<\/p>\n\n
__mocks__<\/code><\/li>\nstyleMock.js<\/code>jaglobals.js<\/code><\/li>\n<\/ul>\nPildistiilide import Jesti testide jaoks<\/h2>\n
.scss<\/code>faili .js<\/code>faili:<\/p>\nimport '.\/main.scss';<\/code><\/pre>\n.scss<\/code>imporditud faili, ja seostab need prooviga, v\u00f5imaldades teil katsetega edasi liikuda ilma stiilidest hoolimata.<\/p>\nSeadistage Jesti jaoks globaalsed rakendused<\/h2>\n
jsdom<\/code>veebistandardite puhta JavaScript-rakendusega, mis simuleerib DOM-i keskkonda nii, nagu oleksite brauseris, ja me kasutame seda DOM-i elementide pilkamiseks. meie testide jaoks.<\/p>\n__mocks__<\/code>ja selle globals.js<\/code>sees fail. Lisage failile see:<\/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>. Peate seda pilkama kui globaalset muutujat, et saaksite seda oma testides kasutada.<\/p>\nJavaScripti faili \u00fclevaade<\/h2>\n
\/src<\/code>See transpileeritakse hiljem ja v\u00e4ljastatakse \/js\/front.js<\/code>faili, mille PHP laadib. JavaScript laadib WP REST API kaudu viis WordPressi postitust fetch<\/code>standardse JavaScripti funktsiooni abil ja lisab selle pealkirja koos lingiga postitusele div.entry-content<\/code>.<\/p>\nexport const wpJestTestsInit =() => {<\/code><\/pre>\nL\u00f5puks kirjutame Jestiga JavaScripti \u00fchikutestid!<\/h2>\n
\n
test.js<\/code><\/li>\nmain.test.js<\/code><\/li>\n.js<\/code>failid, mis asuvad kaustas nimega__tests__<\/code><\/li>\n<\/ul>\n__tests__<\/code>kaust ja selle sees front.test.js<\/code>. Jesti testide valmis JavaScripti faili<\/a> n\u00e4ete kaasrepos. K\u00e4ime selle plokkide kaupa l\u00e4bi. Esimene rida impordib JS-faili, mida tahame testida:<\/p>\nimport { wpJestTestsInit } from '..\/src\/main';<\/code><\/pre>\nafterEach(() => {\n jest.clearAllMocks();\n} );<\/code><\/pre>\nwpJestTests<\/code>muutujat, millega kirjutasime, wp_add_inline_script<\/code>ei kirjutatud mingil p\u00f5hjusel:<\/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>loob r\u00fchma, mis koosneb mitmest seotud testist<\/li>\ntest<\/code>on see, mis tegelikult testi teeb<\/li>\nexpect<\/code>\u00fcmbritseb meie testitavat subjekti, pakkudes juurdep\u00e4\u00e4su mitmele "sobitajale", mis v\u00f5imaldab teil selle sisu kohta erinevaid v\u00e4iteid esitada<\/li>\ntoBe<\/code>on \u00fcks neist sobitajatest. Jest sisaldab palju sobitajaid<\/a> ja on isegi teisi, mida saate kolmanda osapoole paketiga<\/a> lisada .<\/li>\n<\/ul>\nwpJestTests<\/code>nii et selle v\u00e4\u00e4rtus on see, mida m\u00e4\u00e4rasite jaotises globals.js<\/code>. Kuna see on undefined<\/code>, ei saa me t\u00f6\u00f6tada, seega tahame kinnitada, et funktsioon naaseb midagi tegemata.<\/p>\nwpJestTests<\/code>ja pilkab document.querySelector<\/code>tagastamismeetodi, undefined<\/code>mille see tagastaks, kui ta ei leiaks DOM-ist elementi. Sellisel juhul tahame kinnitada, et naaseme midagi tegemata ja et meie pilkamise funktsiooni document.querySelector<\/code>kutsuti \u00fcks kord v\u00e4lja.<\/p>\nMock Fetch Jesti testides<\/h2>\n
describe( 'Fetch posts', () => {<\/code><\/pre>\nafterAll( () => {\n global.fetch.mockClear();\n delete global.fetch;\n});<\/code><\/pre>\nafterEach<\/code>sellest k\u00e4ivitatakse p\u00e4rast k\u00f5igi selle describe<\/code>ploki sees olevate testide k\u00e4itamist. Kuna meie JavaScript-faili kasutatakse fetch<\/code>postituste laadimiseks, peame kontrollima, kas seda kutsuti ja see tagastas selle, mida k\u00fcsisime, seega hakkame fetch<\/code>funktsiooni m\u00f5nitama:<\/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>\nJavaScripti integratsiooni test Jestiga as\u00fcnkroonses koodis, mis kasutab toomist<\/h2>\n
fetch<\/code>. Sellel testil on teiste JavaScripti \u00fchikutestidega v\u00f5rreldes suur erinevus: see on integratsioonitest. Varasemad siin uuritud testid lihtsalt tagasid, et komponent t\u00f6\u00f6tas h\u00e4sti. Kontrollisime, et kui algoleku globaalset muutujat pole m\u00e4\u00e4ratletud, siis meie komponenti ei renderdataks. See on erinev, kuna me testime, kuidas kogu s\u00fcsteem t\u00f6\u00f6tab, kui algolekumuutuja on m\u00e4\u00e4ratletud, k\u00e4ivitades seega andmetehingu ja l\u00f5puks sisestades dokumenti postituste pealkirjad koos nende linkidega.<\/p>\ntest<\/code>saab done<\/code>parameetri. See on tegelikult funktsioon, mis kutsutakse v\u00e4lja, kui me testi l\u00f5petame. Jest ootab done<\/code>enne testi l\u00f5petamist, kuni talle helistatakse. Kui done<\/code>seda kunagi ei kutsuta, eba\u00f5nnestub test ajal\u00f5pu veaga. See on meie jaoks huvitav, kuna testime koodi, mis h\u00f5lmab fetch<\/code>, mis on as\u00fcnkroonne funktsioon.<\/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>on defineeritud ja meie pilkanud document.querySelector<\/code>tagastab n\u00fc\u00fcd selle, mis sarnaneb HTML-elemendiga, paaris- classList<\/code>ja add<\/code>alammeetodiga.<\/p>\nwpJestTestsInit<\/code>ja eeldame, et see l\u00f5peb \u00f5igesti. N\u00fc\u00fcd, kuna see on as\u00fcnkroonne, fetch<\/code>kasutame Node.js<\/a> -i. In Node.js on j\u00e4rjekord, mis k\u00e4ivitatakse p\u00e4rast seda, kui k\u00f5ik praeguse s\u00fcndmusets\u00fckli s\u00fcndmused on l\u00f5ppenud. See on suurep\u00e4rane, sest k\u00f5ik meie lubadused saavad siis lahendatud, mis on t\u00e4pselt see, mida vajame selle koodi testimiseks, mis h\u00f5lmab .process.nextTick<\/code><\/a>nextTick``fetch<\/code><\/p>\nquerySelector<\/code>leiti midagi, millega t\u00f6\u00f6tada, mida fetch<\/code>t\u00f5esti kutsuti, et loendisse lisati klass ja et meie postituste pealkirjad ja lingid sisestati vastavasse HTML-i elementi. Kui k\u00f5ik on tehtud, helistame done<\/code>ja meie as\u00fcnkroonne test l\u00f5peb.<\/p>\nK\u00e4ivitage oma Jesti testid<\/h2>\n
npm run test<\/code><\/p>\n
![\"Lihtsad](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-157897-61e6c3c169e87.png\")
<\/a><\/p>\n