Front-end-testpyramiden: Sådan genovervejes din test

Hvis du tester front-end-apps, skal du vide om front-end-testpyramiden.

I denne artikel skal vi se på, hvad front-end-testpyramiden er, og hvordan vi bruger den til at oprette omfattende testsuiter.

Den forreste testpyramide

Front-end-testpyramiden er en repræsentation af, hvordan en front-end test suite skal struktureres.

Den ideelle testpakke består af enhedstest, nogle snapshot-tests og et par end-to-end (e2e) tests.

Den forreste testpyramide

Dette er en fornyet version af testpyramiden, der er specifik for test af frontend-applikationer.

I denne artikel gennemgår vi, hvordan hver af disse testtyper ser ud. For at gøre det opretter vi en testsuite til en eksempelapp.

Appen

For at lære mere om front-end-testpyramiden i detaljer, skal vi se på, hvordan man tester en webapp.

Appen er en simpel modal app. Hvis du klikker på en knap, åbnes et modal, og ved at klikke på en OK-knap på modalen lukkes modalen.

Den færdige app

Vi bygger appen ud fra en komponentbaseret ramme. Du skal ikke bekymre dig om detaljerne - vi vil holde dette på højt niveau.

Appen er lavet af tre komponenter - en knapkomponent, en modalkomponent og en appkomponent.

De første test, vi skriver, er enhedstests. I front-end-testpyramiden er hovedparten af ​​vores test enhedsprøver.

Enhedstest

Enhed tester testenheder på en kodebase.

De kalder funktioner - eller enheder - direkte og sørger for, at de returnerer det rigtige resultat.

I vores app er vores komponenter enheder. Så vi skriver enhedstest for knap og modal. Det er ikke nødvendigt at skrive test til vores app-komponent, fordi der ikke er nogen logik i den.

Enhedstestene vil lavvandede gengivelseskomponenter og hævde, at de opfører sig korrekt, når vi interagerer med dem.

Lav rendering betyder, at vi gengiver komponenten et niveau dybt. På denne måde kan vi sikre os, at vi kun tester komponenten, vores enhed og ikke en underordnet komponent flere niveauer nede.

I vores test udløser vi handlinger på komponenterne og kontrollerer, at komponenterne opfører sig som forventet.

Vi ser ikke på koden. Men specifikationerne for vores komponenter ser sådan ud:

  • Modal har klasse er-aktiv, når displayModal er sandt
  • Modal har ikke klasse is-active, når displayModal er falsk
  • Modale opkald toggleModal, når der klikkes på succes-knappen
  • Modale opkald toggleModal, når der klikkes på knappen Slet
  • Knappen ringer toggleModal, når der klikkes på knappen

Vores test vil lave komponenterne og derefter kontrollere, at hvert af specifikationerne fungerer.

Der er nogle få grunde til, at enhedstest bør udgøre hovedparten af ​​vores testsuite:

Enhedstest er hurtige.

En pakke på hundreder af enhedstest kører på få sekunder.

Dette gør enhedstests nyttige til udvikling. Når vi refactoring-kode, kan vi ændre koden og køre enhedstestene for at kontrollere, at ændringerne ikke ødelagte komponenten. Vi ved inden for få sekunder, om vi brød noget, fordi en af ​​testene mislykkes.

Enhedstest er kornede

Med andre ord, de er meget specifikke.

Hvis en enhedstest mislykkes, fortæller den ødelagte test os, hvordan og hvorfor den mislykkes.

Enhedstest er gode til at kontrollere de fine detaljer om, hvordan vores applikation fungerer. De er det bedste værktøj til brug, når du udvikler, især hvis du følger testdrevet udvikling.

Men de kan ikke teste alt.

For at sikre, at vi gengiver den rigtige stil, skal vi bruge snapshot-tests.

Snapshot-test

Snapshot-tests er tests, der tager et billede af din gengivne komponent og sammenligner det med et tidligere billede af din komponent.

Den bedste måde at skrive snapshot-tests i JavaScript er med Jest.

I stedet for at tage et billede af den gengivne komponent, tager Jest et snapshot af markeringen af ​​den gengivne komponent. Dette gør Jest-snapshot-tests meget hurtigere end traditionelle snapshot-tests.

For at registrere en snapshot-test i Jest skal du tilføje noget som koden nedenfor:

const renderedMarkup = renderToString (ModalComponent)
forventer (renderedMarkup) .toMatchSnapshot ()

Når du registrerer et snapshot, tager Jest sig af alt andet. Hver gang enhedstestene køres, regenererer det et snapshot og sammenligner det med det forrige snapshot.

Hvis koden ændres, kaster Jest en fejl og advarer om, at markeringen er ændret. Udvikleren kan derefter kontrollere manuelt, at ingen klasse er blevet slettet ved et uheld.

I testen nedenfor har nogen slettet modal-kort-fodklassen fra .

En mislykket snapshot-test

Snapshot-tests er en måde at kontrollere, at der ikke er ændret noget om stilen eller markeringen af ​​en komponent.

Hvis snapshot-prøverne består, ved vi, at vores kodeændring ikke påvirkede visningen af ​​vores komponenter.

Hvis testene mislykkes, ved vi, at vi påvirkede gengivelsen af ​​komponenterne og kan kontrollere manuelt, at stilen stadig er korrekt.

Du skal have mindst 1 snapshot-test pr. Komponent. En typisk snapshot-test gengiver komponenten med en vis tilstand for at kontrollere, at den gengives korrekt.

Nu har vi enhedstests og snapshot-test, det er tid til at se på ende til ende (e2e) tests.

Ende til ende prøver

Ende til ende (e2e) test er test på højt niveau.

De udfører de samme handlinger, som vi ville, hvis vi testede en app manuelt.

I vores app har vi en brugerrejse. Når brugeren klikker på knappen åbnes modalen, når de klikker på knappen i modalen lukker modalen.

Vi kan skrive en ende til ende-test, der løber gennem denne rejse. Testen åbner browseren, navigerer til websiden og løber gennem hver handling for at sikre, at appen opfører sig korrekt.

Disse test fortæller os, at vores enheder fungerer korrekt. Det giver os stor tillid til, at appens vigtigste funktionalitet fungerer.

Der er et par måder at skrive ende til ende test for JavaScript-applikationer. Der er programmer som testcafé, der registrerer dig, der udfører handlinger i en browser og afspiller dem som tests.

Der er også projekter som natur, der giver dig mulighed for at skrive testene i JavaScript. Jeg vil anbefale at bruge et bibliotek som naturur. Det er nemt at afhente, og testene kører hurtigere end registrerede tests.

Når det er sagt, er natururforsøg stadig relativt langsomme. Det tager sekunder at køre en pakke på 200 enhedsprøver, og det tager minutter at køre en pakke på 200 ende til ende tests.

Det andet problem med ende til slut test er, at de er vanskelige at fejlsøge. Når en test mislykkes, er det svært at finde ud af, hvorfor den mislykkedes, fordi testene dækker en masse funktionalitet.

Konklusion

For at teste front-end komponentbaserede webapps effektivt skal du tre typer test. Enhedstest, snapshot-tests og e2e-tests.

Du skal have flere enhedstest for hver komponent, en eller to snapshot-test pr. Komponent og en eller to ende til ende-tests, der tester flere komponenter, der er forbundet sammen.

Samlet enhedstest udgør hovedparten af ​​dine test, du har nogle snapshot-tests og et par e2e-tests.

Hvis du følger den forreste testpyramide, opretter du vedligeholdelige webapps med killer test suiter.

Du kan se et eksempel på et arkiv med appen med snapshot-test, enhedstest og ende til ende-test på GitHub.