En bedre måte å teste HTML i WordPress med assertEqualHTML()
Utgangspunkt
Testing av HTML-output i WordPress kan ofte være en frustrerende oppgave. Mange utviklere har opplevd at testene fungerer lokalt, men feiler under kontinuerlig integrering (CI) på grunn av små forskjeller i HTML-strukturen, som rekkefølgen av attributter eller semikolon i stilene. WordPress 6.9 introduserte en ny metode kalt assertEqualHTML(), som adresserer disse problemene ved å sammenligne HTML på en mer semantisk måte.
Hvorfor dette er relevant
Det er avgjørende for utviklere at tester gir pålitelig tilbakemelding om funksjonaliteten til koden deres. Tidligere metoder som assertSame() var strenge og følsomme for selv minimale forskjeller mellom HTML-strenger, noe som ofte førte til unødvendige feilmeldinger. I en verden der både kode og krav konstant endres, tilbyr assertEqualHTML() en mer robust tilnærming. Den normaliserer HTML-strukturene og sammenligner dem på en måte som ikke tar hensyn til uvesentlige forskjeller som ikke påvirker den visuelle presentasjonen i nettleseren.
Slik bruker du assertEqualHTML()
1. Forstå metoden
assertEqualHTML() er en metode på WPUnitTestCase som ble introdusert i WordPress 6.9. Denne metoden parser først HTML-strengene og lager et normalisert tre ved hjelp av WPHTML_Processor. Deretter sammenligner den de normale trærne, noe som gir deg tilbakemelding basert på den semantiske likheten.
2. Erstatte gamle metoder
Her er et enkelt eksempel på hvordan du kan oppdatere testene dine:
«php function testlazyloading() { $html = myfunctiontoaddlazy_loading(); $expected = '<img loading="lazy" src="image.jpg" alt="image">'; $this->assertEqualHTML($expected, $html); } «
Denne koden viser en test for en funksjon som skal legge til loading="lazy"-attributtet til bilder. Ved å bruke assertEqualHTML() unngår du utfordringen med å måtte matche nøyaktig rekkefølge av attributter.
3. Håndtere HTML-tegnreferanser
Metoden håndterer også HTML-tegnreferanser på en mer fleksibel måte. Det innebærer at referanser kan skrives på ulike måter (for eksempel, ,  , eller  ), og alle vil bli ansett som like. Dette gir deg mer frihet til å fokusere på det semantiske innholdet i HTML-en din.
Eksempel på kompleks testing
La oss se på et mer komplekst eksempel der en funksjon pakker inn eksterne lenker med en <span> og injiserer et data-external-attributt:
«php function testexternallinkwrapper() { $html = mywrapper_function($input); $expected = '<span><a href="https://external.com" data-external="true" rel="noopener noreferrer">Link</a></span>'; $this->assertEqualHTML($expected, $html); } «
I dette tilfellet, uavhengig av hvordan HTML API-en serialiserer nye attributter, vil testene fortsatt bekrefte den semantiske intensjonen, hvilket er mye mer effektivt.
Fallgruver å unngå
1. Ikke overoptimere tester: Selv om assertEqualHTML() gjør testene dine mer robuste, er det fortsatt viktig å sikre at testene er klare og enkle å forstå. Bruk metoden kun der det er hensiktsmessig, for eksempel når du vet at HTML-koden kan variere, men at den visuelle utdataen faktisk er lik.
2. Oppdateringer til WordPress: Sørg for å sjekke dokumentasjonen for WordPress når det gjelder oppdateringer til assertEqualHTML() og lignende metoder. Nyere versjoner kan introdusere viktige endringer som påvirker måten du skriver tester på.
3. Kompatibilitet med eksisterende tester: Når du oppdaterer testene dine til å bruke assertEqualHTML(), husk at noen av de gamle testene, avhengig av hvordan de er skrevet, kan kreve omfattende revisjoner. Planlegg testene dine nøye for å unngå overraskelser.
Oppsummering
Overgangen til å bruke assertEqualHTML() gir utviklere en mer pålitelig og robust metode for testing av HTML i WordPress. Ved å sammenligne HTML semantisk fremfor bokstavelig, forenkler metoden prosessen med å sikre at koden din fungerer som forventet, uten å la små fravikelser i HTML-struktur skape problemer. Med en grundig forståelse av denne metoden kan utviklere forbedre kvaliteten på kodens testing og til slutt oppnå en bedre brukeropplevelse på sine nettsteder.
