Lihtsad JavaScripti üksuste testid WordPressis koos Jestiga

WordPress on oma PHP-koodi testinud pikka aega. Teemades ja pistikprogrammides oleva koodi jaoks JavaScripti ühikutestide ja integratsioonitestide kirjutamisel ei ole aga sama olekut. Vaatame, kuidas testida JavaScripti meie WordPressi pistikprogrammides ja teemades Jesti abil.

Selles artiklis käsitleme järgmist sisu:

JavaScripti ühikutestid WordPressis

Miks siis kirjutada ühikuteste ja integratsiooniteste? Need tagavad suurepäraselt, et funktsioon, klassimeetod või isegi Reacti komponent teeb seda, mida nad peaksid tegema. See aitab tuvastada koodis vigu ja aitab säilitada terviklikkust, kui koodi hiljem tehakse muudatusi, kontrollides, et see töötab pärast värskendamist ikka nii nagu ette nähtud.

WordPressi pistikprogrammid ja teemad on enamasti kirjutatud PHP-s ning võivad kasutada PHPUnit komplekti testide käitamiseks, väidete tegemiseks, funktsioonide pilkamiseks ja muuks. Käsiraamatus on isegi osa, mis selgitab, kuidas WP-CLI-ga üksuse testimist kiiresti seadistada.

JavaScripti jaoks on käsiraamatus leht QUniti testide käitamise kohta, kuigi see puudutab rohkem JavaScripti koodi testimist WordPressi tuumas.

Kuigi ükski neist pole WordPressis JavaScripti jaoks standardiseeritud, saame Jest testimiskomplekti kasutades kirjutada suurepäraseid ühikuteste. Selles artiklis õpime, kuidas kirjutada JavaScripti ühikuteste näidisplugina jaoks, mis laadib fetchJavaScripti funktsiooni kasutades WP REST API kaudu 5 postitust ja renderdab need lehe teatud DOM-i elemendis.

Jesti kasutamise eelised JavaScripti ühikutestide jaoks WordPressis

Varem hõlmas JavaScripti ühikutestide kirjutamine Mocha seadistamist testide käitamiseks, Chai seadistamist väidete esitamiseks ja Sinoni funktsioonide pilkamist ja nende järele luuramist. Kuigi need pakuvad suurt paindlikkust, on kolme paketiga palju keerulisem töötada kui ühe paketiga. Jest pakub kõike seda ühes paketis:

• saate käivitada teste, mis deklareerivad neid märkidega describeja itvõitest
• väiteid saate teha klahvidega expectja toBening toHaveLengthpalju muud
• saate funktsioone mõnitada ja nende järele luurata ning selleks on mitu võimalust

Enne edasi liikumist

Selleks et see artikkel keskenduks Jestiga testimisele, on testimisprotsessist väljaspool täiendavaid seadistusi, nagu Babel või Webpack, mida siin ei käsitleta. Kõik see on leitav selle artikliga kaasas olevast WP Jest Testi repost . Asjade kontekstipõhiseks hoidmiseks lingib iga jaotis ühele asjakohastest failidest, mille kirjutame.

PHP poole ülevaade

Näidisplugina PHP, mida kasutame JavaScripti ühikutestide kirjutamise õppimiseks, on üsna standardne. Ainsad huvitavad read on need, kui paneme oma JavaScripti faili järjekorda ja lisame sellele muutujate edastamiseks tekstisisese skripti:

Pärast JavaScripti faili päringut lisame globaalse muutuja wpJestTestskoos wp_add_inline_script(). See muutuja on eriti huvitav ja keeruline käsitleda, kuna see on väljaspool meie JavaScripti faili ja me peame seda oma testides mõnitama.

Seadistage Jesti testid

Peame esmalt npmoma pistikprogrammi projektis lähtestama, et saaksime Jesti sellega installida. Liikuge käsureal oma pistikprogrammi kausta ja käivitage:

npm initja tutvuge siinsete viipade seeriaga

Muutke loodud faili package.json ja lisage meie testide käivitamiseks scriptsjaotises uus kirje:

"test": "jest"

See on käsk, mille abil anname Jestile JavaScripti üksuse testid käitada. See on ühekordne käitamine, kuid Jest toetab ka failide vaatamist, nii et saate sisestada täiendava:

"test-watch": "jest --watch"

Nüüd installige Jest arendussõltuvusena, käivitades

npm install -D jest

Installimise ajal looge fail nimega jest.config.js. See hoiab kogu vajaliku konfiguratsiooni. Lisage järgmine:

module.exports = {
    verbose: true,
    setupFiles: [
        '/__mocks__/globals.js'
    ],
    moduleNameMapper: {
        '.(css|less|sass|scss)$': '/__mocks__/styleMock.js'
   }
};

Vaatame igaüks neist läbi:

• verbose: näitab, kas iga üksikkatse tuleb jooksu ajal aru anda. Kõik vead kuvatakse ka pärast täitmist endiselt allosas. Pange tähele, et kui käivitamisel on ainult üks testfail, on see vaikimisi true.
• setupFiles: loend moodulitest, mis käitavad testimiskeskkonna konfigureerimiseks või seadistamiseks mingit koodi. Iga setupFile käivitatakse üks kord testfaili kohta. Kuna iga test töötab oma keskkonnas, käivitatakse need skriptid testimiskeskkonnas vahetult enne testkoodi enda käivitamist. Kasutame seda PHP ja WordPressi renderdatud globaalsete muutujate deklareerimiseks selliste käskudega nagu wp_add_inline_scriptvõi wp_localize_script.
• moduleNameMapper: see on kaart regulaaravaldistest moodulite nimedeni (või moodulinimede massiivideni), mis võimaldab ühe mooduliga staatilisi ressursse, näiteks pilte või stiile, välja jätta.

Kindlasti märkasite viidet: see on spetsiaalne märk, mille Jest asendab teie projekti juurega, mis tavaliselt on teie package.json.

Läheme kahes järgmises jaotises süvitsi, kuid esmalt looge kaust ja need kaks eespool viidatud faili:

• looge kaust nimega__mocks__
• looge kaustas failid styleMock.jsjaglobals.js

Pildistiilide import Jesti testide jaoks

Kui kasutate sarnaselt selle pistikprogrammiga Webpacki, et kompileerida kõike, sealhulgas stiile, ja impordite .scssfaili .jsfaili:

import './main.scss';

peate kasutama SASS-failide pilkamiseks JavaScripti faili importimisel faili styleMock.js, vastasel juhul jookseb Jest kokku, kuna see ei suuda moodulit lahendada. Selle faili jaoks pole palju vaja, lihtsalt lisage

Jest kasutab seda pilku iga kord, kui leiab .scssimporditud faili, ja seostab need prooviga, võimaldades teil katsetega edasi liikuda ilma stiilidest hoolimata.

Seadistage Jesti jaoks globaalsed rakendused

Töötame nüüd faili globals.js kallal. Üks Jesti kasutamise eelistest on see, et see tarnitakse juba konfigureeritud jsdomveebistandardite puhta JavaScript-rakendusega, mis simuleerib DOM-i keskkonda nii, nagu oleksite brauseris, ja me kasutame seda DOM-i elementide pilkamiseks. meie testide jaoks.

Looge kaust __mocks__ja selle globals.jssees fail. Lisage failile see:

import { JSDOM } from 'jsdom';
const dom = new JSDOM();
global.document = dom.window.document;
global.window = dom.window;
global.window.wpJestTests = undefined;

See deklareerib ja pilkab mõningaid objekte ja meetodeid, mida hiljem oma testides kasutate. Viimane pakub erilist huvi

global.window.wpJestTests = undefined;

See on globaalne muutuja, mille kirjutasime kasutades wp_add_inline_script. Peate seda pilkama kui globaalset muutujat, et saaksite seda oma testides kasutada.

JavaScripti faili ülevaade

WordPressi pistikprogrammi kaustas on üks JavaScripti fail main.js. /srcSee transpileeritakse hiljem ja väljastatakse /js/front.jsfaili, mille PHP laadib. JavaScript laadib WP REST API kaudu viis WordPressi postitust fetchstandardse JavaScripti funktsiooni abil ja lisab selle pealkirja koos lingiga postitusele div.entry-content.

Ekspordite funktsiooni, mis teeb kogu töö:

et saaksite seda Jesti testides kasutada.

Lõpuks kirjutame Jestiga JavaScripti ühikutestid!

Nüüd saab hakata teste kirjutama! Jest leiab teste mitmel viisil:

• kui faili nimi ontest.js
• või selle eesliide on testitava faili nimi, näiteksmain.test.js
• kui need on .jsfailid, mis asuvad kaustas nimega__tests__

Looge __tests__kaust ja selle sees front.test.js. Jesti testide valmis JavaScripti faili näete kaasrepos. Käime selle plokkide kaupa läbi. Esimene rida impordib JS-faili, mida tahame testida:

import { wpJestTestsInit } from '../src/main';

Järgmisena tühjendame kõik moed, nii et me ei jookse kunagi räpaste piladega, mis kannavad varasemate testide väärtusi. See võib põhjustada vigu, kuna näiteks kui luurame, mitu korda mõnitatud funktsiooni kutsuti, võime saada vale näidu, kui me ei tühjenda testi ja testi vahelist pilku:

Esimene test, mille me kirjutame, esitab põhiväited, kui mõni asi ebaõnnestub. Näiteks kui globaalset wpJestTestsmuutujat, millega kirjutasime, wp_add_inline_scriptei kirjutatud mingil põhjusel:

Selles koodis

• describeloob rühma, mis koosneb mitmest seotud testist
• teston see, mis tegelikult testi teeb
• expectümbritseb meie testitavat subjekti, pakkudes juurdepääsu mitmele "sobitajale", mis võimaldab teil selle sisu kohta erinevaid väiteid esitada
• toBeon üks neist sobitajatest. Jest sisaldab palju sobitajaid ja on isegi teisi, mida saate kolmanda osapoole paketiga lisada .

Esimene test ei määratle midagi, wpJestTestsnii et selle väärtus on see, mida määrasite jaotises globals.js. Kuna see on undefined, ei saa me töötada, seega tahame kinnitada, et funktsioon naaseb midagi tegemata.

Teine test määratleb wpJestTestsja pilkab document.querySelectortagastamismeetodi, undefinedmille see tagastaks, kui ta ei leiaks DOM-ist elementi. Sellisel juhul tahame kinnitada, et naaseme midagi tegemata ja et meie pilkamise funktsiooni document.querySelectorkutsuti üks kord välja.

Mock Fetch Jesti testides

Järgmine testide komplekt algab

ja selle sees on meil veel üks rebimise funktsioon:

erinevalt afterEachsellest käivitatakse pärast kõigi selle describeploki sees olevate testide käitamist. Kuna meie JavaScript-faili kasutatakse fetchpostituste laadimiseks, peame kontrollima, kas seda kutsuti ja see tagastas selle, mida küsisime, seega hakkame fetchfunktsiooni mõnitama:

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.

JavaScripti integratsiooni test Jestiga asünkroonses koodis, mis kasutab toomist

Nüüd saame testi kirjutada pilkatud fetch. Sellel testil on teiste JavaScripti ühikutestidega võrreldes suur erinevus: see on integratsioonitest. Varasemad siin uuritud testid lihtsalt tagasid, et komponent töötas hästi. Kontrollisime, et kui algoleku globaalset muutujat pole määratletud, siis meie komponenti ei renderdataks. See on erinev, kuna me testime, kuidas kogu süsteem töötab, kui algolekumuutuja on määratletud, käivitades seega andmetehingu ja lõpuks sisestades dokumenti postituste pealkirjad koos nende linkidega.

Algusest peale on see erinev: parameetrile edastatud anonüümne funktsioon testsaab doneparameetri. See on tegelikult funktsioon, mis kutsutakse välja, kui me testi lõpetame. Jest ootab doneenne testi lõpetamist, kuni talle helistatakse. Kui doneseda kunagi ei kutsuta, ebaõnnestub test ajalõpu veaga. See on meie jaoks huvitav, kuna testime koodi, mis hõlmab fetch, mis on asünkroonne funktsioon.

Globaalne wpJestTestson defineeritud ja meie pilkanud document.querySelectortagastab nüüd selle, mis sarnaneb HTML-elemendiga, paaris- classListja addalammeetodiga.

Helistame wpJestTestsInitja eeldame, et see lõpeb õigesti. Nüüd, kuna see on asünkroonne, fetchkasutame Node.js -i. In Node.js on järjekord, mis käivitatakse pärast seda, kui kõik praeguse sündmusetsükli sündmused on lõppenud. See on suurepärane, sest kõik meie lubadused saavad siis lahendatud, mis on täpselt see, mida vajame selle koodi testimiseks, mis hõlmab .process.nextTicknextTick``fetch

Ülejäänud on rohkem väited tagamaks, et querySelectorleiti midagi, millega töötada, mida fetchtõesti kutsuti, et loendisse lisati klass ja et meie postituste pealkirjad ja lingid sisestati vastavasse HTML-i elementi. Kui kõik on tehtud, helistame doneja meie asünkroonne test lõpeb.

Käivitage oma Jesti testid

Nüüd saate kirjutada

npm run test

ja Jest käivitab teie WordPressi pistikprogrammi JavaScripti ühikutestid

Järeldus

Seega on Jest suurepärane ja lihtne lahendus meie WordPressi pistikprogrammide või teemade JavaScripti koodi katvate testide kirjutamiseks. Aga seal on veel. Kui kirjutame oma pistikprogrammi jaoks Reacti rakendust, võiksime soovida selle kohta väiteid. Ka Jest saab teatud määral aidata ja kui vajame rohkem, saame lisada oma tööriistadesse Enzyme’i ja hakata sellega integratsiooniteste kirjutama.

Palun annetage!

Kui see oli teile kasulik, ostke mulle kohvi , et saaksin ärkvel püsida ja teile kasulikke õpetusi koostada!

3,00 dollarit