WordPress on testannut PHP-koodiaan pitkään. JavaScript-yksikkötestien ja integrointitestien kirjoittaminen teemojen ja laajennusten koodille ei kuitenkaan ole samassa tilassa. Katsotaanpa, kuinka voit testata JavaScriptiä WordPress-laajennuksissamme ja teemoissamme Jestillä.

Tässä artikkelissa käsitellään seuraavia sisältöjä:

JavaScript-yksikkötestit WordPressissä

Joten miksi kirjoittaa yksikkötestejä ja integrointitestejä? Ne varmistavat erinomaisesti, että funktio, luokkamenetelmä tai jopa React-komponentti tekee sen, mitä niiden pitäisi tehdä. Se auttaa havaitsemaan koodin virheet ja auttaa myös säilyttämään eheyden, kun koodiin myöhemmin tehdään muutoksia, varmistamalla, että se toimii edelleen tarkoitetulla tavalla päivityksen jälkeen.

WordPress -laajennukset ja -teemat on kirjoitettu enimmäkseen PHP:llä, ja ne voivat käyttää PHPUnit-ohjelmistoa testien suorittamiseen, väitteiden tekemiseen, pilkkaamiseen ja muuhun. Käsikirjassa on jopa osio, jossa selitetään kuinka yksikkötestaukset määritetään nopeasti WP-CLI:n avulla.

JavaScriptille käsikirjassa on sivu QUnit-testien suorittamisesta, vaikka kyse on enemmän JavaScript-koodin testaamisesta WordPress-ytimessä.

Vaikka mikään näistä ei ole standardoitu JavaScriptille WordPressissä, voimme kirjoittaa upeita yksikkötestejä Jest-testausohjelmistolla. Tässä artikkelissa opimme kirjoittamaan JavaScript-yksikkötestejä esimerkkilaajennukselle, joka lataa 5 viestiä WP REST API:n fetchkautta JavaScript-funktion avulla ja renderöi ne tietyssä DOM-elementissä sivulla.

Jestin käytön edut JavaScript-yksikkötesteissä WordPressissä

Aiemmin JavaScript-yksikkötestien kirjoittamiseen sisältyi Mochan asettaminen suorittamaan testejä, Chai tekemään väitteitä ja Sinon pilkkaamaan toimintoja ja vakoilemaan niitä. Vaikka ne tarjoavat suurta joustavuutta, on paljon monimutkaisempaa työskennellä kolmen paketin kuin yhden kanssa. Jest tarjoaa kaiken tämän yhdessä paketissa:

voit suorittaa testejä ja ilmoittaa ne näppäimillä describeja ittaitest
voit tehdä väitteitä – expectja -painikkeilla toBeja toHaveLengthmonilla muilla
Voit pilkata toimintoja ja vakoilla niitä, ja tähän on useita tapoja

Ennen kuin jatkat

Jotta tässä artikkelissa keskitytään testaamiseen Jestillä, testausprosessin ulkopuolisia lisäasetuksia, kuten Babel tai Webpack, ei käsitellä tässä. Kaikki tämä löytyy tämän artikkelin mukana tulevasta WP Jest Tests -repostiosta . Jotta asiat pysyisivät asiayhteyden mukaisina, jokaisessa osiossa on linkki johonkin asiaankuuluvista tiedostoista, jotka kirjoitamme.

Yleiskatsaus PHP-puolelle

Esimerkkilaajennuksen PHP, jota käytämme JavaScript-yksikkötestien kirjoittamiseen, on melko vakio. Ainoat mielenkiintoiset rivit ovat ne, kun asetamme JavaScript-tiedostomme jonoon ja lisäämme tekstin sisäisen komentosarjan muuttujien välittämiseksi sille:

JavaScript-tiedostomme kyselyn jälkeen lisäämme globaalin muuttujan wpJestTests. wp_add_inline_script()Tämä muuttuja on erityisen mielenkiintoinen ja hankala käsitellä, koska se on JavaScript-tiedostomme ulkopuolinen ja meidän on pilkattava sitä testeissämme.

Määritä Jest-testit

Meidän on ensin alustettava npmlaajennusprojektimme, jotta voimme asentaa Jestin sen kanssa. Siirry komentorivillä laajennuskansioosi ja suorita:

npm initja käy läpi kehotteet täältä

Muokkaa luotua paketti.json – tiedostoa ja lisää uusi merkintä suorittaaksesi testimme scriptsosiossa:

"test": "jest"

Tämä on komento, jota käytämme käskemään Jestiä suorittamaan JavaScript-yksikkötestit. Tämä on kertakäyttöinen, mutta Jest tukee myös tiedostojen katselua, joten voit syöttää toisen:

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

Asenna nyt Jest kehitysriippuvuutena suorittamalla

npm install -D jest

Luo asennuksen aikana tiedosto nimeltä jest.config.js. Tämä säilyttää kaikki tarvittavat asetukset. Lisää seuraavat:


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

Käydään läpi jokainen:

verbose: osoittaa, tuleeko jokainen yksittäinen testi raportoida ajon aikana. Kaikki virheet näkyvät myös alareunassa suorituksen jälkeen. Huomaa, että jos käynnissä on vain yksi testitiedosto, sen oletusarvo on true.
setupFiles: luettelo poluista moduuleille, jotka suorittavat koodia testausympäristön määrittämiseksi tai määrittämiseksi. Jokainen setupFile ajetaan kerran testitiedostoa kohden. Koska jokainen testi suoritetaan omassa ympäristössään, nämä skriptit suoritetaan testausympäristössä välittömästi ennen itse testikoodin suorittamista. Käytämme tätä ilmoittamaan PHP:n ja WordPressin renderöimät globaalit muuttujat komennoilla, kuten wp_add_inline_scripttai wp_localize_script.
moduleNameMapper: tämä on kartta säännöllisistä lausekkeista moduulien nimiin (tai moduulien nimien joukkoihin), joiden avulla voidaan poistaa staattiset resurssit, kuten kuvat tai tyylit yhdellä moduulilla.

Huomasit varmasti viittauksen: tämä on erityinen merkki, jonka Jest korvaa projektisi juurella, joka on yleensä package.json.

Menemme perusteellisesti kahdessa seuraavassa osiossa, mutta luo ensin kansio ja nämä kaksi edellä mainittua tiedostoa:

luo kansio nimeltä__mocks__
luo kansion sisällä tiedostot styleMock.jsjaglobals.js

Mock tyylien tuonti Jest-testejä varten

Jos käytät Webpackia kääntääksesi kaiken, mukaan lukien tyylit, kuten tämän laajennuksen, ja tuot .scsstiedoston .jstiedostoon:


import './main.scss';

sinun on käytettävä styleMock.js :ää pilkataksesi SASS-tiedostoja, kun tuot ne JavaScript-tiedostoomme, muuten Jest kaatuu, koska se ei pysty ratkaisemaan moduulia. Et tarvitse paljon tähän tiedostoon, lisää vain

Jest käyttää tätä pilkkua joka kerta, kun se löytää .scsstuonnin, ja yhdistää ne malliin, jolloin voit siirtyä testeihin välittämättä tyyleistä.

Aseta globaalit Jestille

Työstetään nyt globals.js- tiedostoa. Yksi Jestin käytön eduista on, että se toimitetaan valmiiksi määritetyn jsdomverkkostandardien puhtaan JavaScript-toteutuksen kanssa, joka simuloi DOM-ympäristöä ikään kuin olisit selaimessa, ja käytämme sitä DOM-elementtien pilkkaamiseen. meidän testejä varten.

Luo kansio __mocks__ja globals.jstiedosto sen sisään. Lisää tämä tiedostoon:


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

Tämä ilmoittaa ja pilkaa joitain objekteja ja menetelmiä, joita käytät myöhemmin testeissäsi. Viimeinen kiinnostaa erityisesti


global.window.wpJestTests = undefined;

Tämä on globaali muuttuja, jonka kirjoitimme käyttämällä wp_add_inline_script. Sinun täytyy pilkata sitä globaaliksi muuttujaksi, jotta voit käyttää sitä testeissäsi.

JavaScript-tiedoston yleiskatsaus

WordPress-laajennuksen kansiossa on yksi JavaScript-tiedosto main.js. /srcTämä siirretään myöhemmin ja tulostetaan /js/front.jstiedostoon, jonka PHP lataa. JavaScript lataa viisi WordPress-viestiä käyttämällä fetchtavallista JavaScript-toimintoa WP REST API:n kautta ja lisää otsikon, jossa on linkki viestiin, div.entry-content.

Aiot viedä funktion, joka tekee kaiken työn:

joten voit käyttää sitä testeissäsi Jestissä.

JavaScript-yksikkötestien kirjoittaminen Jestillä, vihdoin!

Nyt voit aloittaa kokeiden kirjoittamisen! Jest voi löytää testejä monella tavalla:

jos tiedoston nimi ontest.js
tai sen etuliitteenä on testattavan tiedoston nimi, kutenmain.test.js
jos ne ovat .jstiedostoja, jotka sijaitsevat kansiossa nimeltä__tests__

Luo __tests__kansio ja sen sisällä front.test.js. Näet valmiin JavaScript-tiedoston Jest-testejä varten täydentävässä repossa. Käydään se läpi lohkoissa. Ensimmäinen rivi tuo JS-tiedoston, jonka haluamme testata:


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

Seuraavaksi tyhjennämme kaikki pilkat, joten emme koskaan juokse likaisten pilkkien kanssa, jotka sisältävät arvoja aikaisemmista testeistä. Tämä voi johtaa virheisiin, koska esimerkiksi jos vakoilemme, kuinka monta kertaa pilkattua funktiota kutsuttiin, voimme saada virheellisen lukeman, jos emme poista pilaa testin ja testin välillä:

Ensimmäinen testi, jonka kirjoitamme, tekee perusväitteitä, kun jotkut asiat epäonnistuvat. Jos esimerkiksi globaalia wpJestTestsmuuttujaa, jolla kirjoitimme, wp_add_inline_scriptei kirjoitettu jostain syystä:

Tässä koodissa

describeluo ryhmän, joka koostuu useista toisiinsa liittyvistä testeistä
teston se, mikä todella suorittaa testin
expectkaataa testikohdeemme tarjoamalla pääsyn useisiin "vastaaviin", joiden avulla voit tehdä erilaisia väitteitä sen sisällöstä
toBeon yksi näistä vastaajista. Jestissä on mukana paljon vastaavia, ja on jopa muita, jotka voit lisätä kolmannen osapuolen paketilla.

Ensimmäinen testi ei määrittele mitään, wpJestTestsjoten sen arvo on se, mitä määritit kohdassa globals.js. Koska se on undefined, emme voi toimia, joten haluamme varmistaa, että funktio palaa tekemättä mitään.

Toinen testi määrittelee wpJestTestsja pilkkaa document.querySelectorpalautusmenetelmän, undefinedjonka se palauttaisi, jos se ei löydä elementtiä DOM:sta. Siinä tapauksessa haluamme vahvistaa, että palaamme tekemättä mitään ja että funktiomme pilkkaaminen document.querySelectorkutsuttiin kerran.

Mock fetch Jest-testeissä

Seuraava testisarja alkaa

ja tämän sisällä meillä on toinen purkaustoiminto:

toisin kuin tämä, se suoritetaan, kun kaikki tämän lohkon afterEachtestit on suoritettu. describeKoska JavaScript-tiedostomme fetchlataa viestit, meidän on varmistettava, että sitä kutsuttiin ja se palautti pyytämämme, joten pilkkaamme fetchtoimintoa:

Pilkkaamme ensimmäistä lupausta, joka ratkaisee vastauksen, ja toista tietojen JSON-esitystä varten. Nämä tiedot ovat samanlaisia kuin mitä saamme WP REST API:sta. Koska koodimme tarvitsee vain otsikon ja linkin, pilkkaamme sitä.

JavaScript-integraatiotesti Jestin kanssa asynkronisessa koodissa, joka käyttää noutoa

Voimme nyt kirjoittaa testin käyttämällä pilkattua fetch. Tässä testissä on suuri ero muihin JavaScript-yksikkötesteihin verrattuna: tämä on integrointitesti. Tässä tutkitut aiemmat testit yksinkertaisesti varmistivat, että komponentti toimi hyvin. Tarkistimme, että jos alkutilan globaalia muuttujaa ei ole määritetty, komponenttimme ei hahmonnu. Tämä on erilainen, koska aiomme testata, kuinka koko järjestelmä toimii, kun alkutilamuuttuja on määritetty, käynnistäen näin datatapahtuman ja lisäämällä lopuksi viestien otsikot linkkeineen dokumenttiin.

Heti alusta lähtien tämä on erilaista: nimetön funktio testvastaanottaa doneparametrin. Tämä on itse asiassa funktio, jota kutsutaan, kun lopetamme testin. Jest odottaa, kunnes häntä donekutsutaan ennen testin suorittamista. Jos donesitä ei koskaan kutsuta, testi epäonnistuu aikakatkaisuvirheen vuoksi. Se on meille mielenkiintoista, koska testaamme koodia fetch, joka sisältää asynkronisen funktion.

Globaali wpJestTestson määritelty ja pilkattu document.querySelectornyt palauttaa sen, mikä muistuttaa HTML-elementtiä, parillinen classListja sen addalimetodi.

Soitamme wpJestTestsInitja odotamme sen päättyvän oikein. Nyt, koska fetchse on asynkroninen, aiomme hyödyntää process.nextTickNode.js : sta. Node.js: nextTickssä on jono, joka suoritetaan sen jälkeen, kun kaikki nykyisen tapahtumasilmukan tapahtumat on suoritettu. Tämä on hienoa, koska kaikki lupauksemme ratkaistaan silloin, mikä on juuri sitä, mitä tarvitsemme testataksemme tätä koodia, johon sisältyy fetch.

Loput ovat enemmän väitteitä, joilla varmistetaan, että querySelectorlöytyi jotain työstettävää, jota fetchtodellakin kutsuttiin, että luokka lisättiin luetteloon ja että viestiemme otsikot ja linkit lisättiin vastaavaan HTML-elementtiin. Kun kaikki on tehty, soitamme doneja asynkroninen testimme päättyy.

Suorita Jest-testit

Nyt voit kirjoittaa

npm run test

ja Jest suorittaa JavaScript-yksikkötestit WordPress-laajennuksellesi

Johtopäätös

Jest on siis loistava ja yksinkertainen ratkaisu WordPress-laajennuksiemme tai teemoidemme JavaScript-koodin kattavien testien kirjoittamiseen. Mutta on muutakin. Jos kirjoitamme React-sovellusta laajennuksellemme, saatamme haluta esittää väitteitä siitä. Jest voi myös auttaa jossain määrin, ja jos tarvitsemme lisää, voimme lisätä Enzymen työkaluihimme ja alkaa kirjoittaa integraatiotestejä sen avulla.

Ole hyvä ja lahjoita!

Jos pidit tästä hyödyllisenä, osta minulle kahvia, jotta voin pysyä hereillä ja luoda sinulle hyödyllisiä opetusohjelmia!

3,00 dollaria

: startfunction.com