de Edd Yerburgh

Piramida testului front-end: Cum să vă regândiți testarea

Dacă testați aplicații front-end, ar trebui să știți despre piramida de testare front-end.

În acest articol vom analiza ce este piramida de testare front-end și cum să o utilizați pentru a crea suite de testare complete.

Piramida de testare front-end

Piramida de testare front-end este o reprezentare a modului în care ar trebui structurată o suită de testare front-end.

Suita de testare ideală este alcătuită din teste unitare, unele teste instantanee și câteva teste end-to-end (e2e).

Aceasta este o versiune renovată a piramida de testare, care este specific testării aplicațiilor front-end.

În acest articol vom examina cum arată fiecare dintre aceste tipuri de teste. Pentru aceasta, vom crea o suită de testare pentru un exemplu de aplicație.

Aplicația

Pentru a afla în detaliu piramida de testare front-end, vom analiza cum să testați o aplicație web.

Aplicația este o aplicație modală simplă. Dacă faceți clic pe un buton se deschide un modal, iar dacă faceți clic pe un buton OK pe modal se închide modalul.

Vom construi aplicația dintr-un cadru bazat pe componente. Nu vă faceți griji cu privire la detalii – vom păstra acest nivel înalt.

Aplicația este realizată din trei componente – a Button componentă, a Modal componentă și a App componentă.

Primele teste pe care le vom scrie sunt teste unitare. În piramida de testare front-end, cea mai mare parte a testelor noastre sunt teste unitare.

Teste unitare

Unitatea testează unitățile de testare ale unei baze de cod.

Acestea apelează funcții – sau unități – direct și se asigură că returnează rezultatul corect.

În aplicația noastră, componentele noastre sunt unități. Deci, vom scrie teste unitare pentru Button și Modal. Nu este nevoie să scrieți teste pentru noi App componentă deoarece nu există nicio logică în ea.

Testele unitare vor fi redare superficială componente și afirmă că se comportă corect atunci când interacționăm cu ele.

Redare superficială înseamnă că redăm componenta la un nivel adânc. În acest fel ne putem asigura că testăm doar componenta, unitatea noastră și nu o componentă secundară cu mai multe niveluri.

În testele noastre vom declanșa acțiuni asupra componentelor și vom verifica dacă componentele se comportă conform așteptărilor.

Nu ne vom uita la cod. Dar specificațiile pentru componentele noastre arată astfel:

• Modal are clasa is-active când displayModal este adevărat
• Modal nu are clasa is-active atunci când displayModal este fals
• Apeluri modale comută Modal atunci când se face clic pe butonul de succes
• Apeluri modale comută Modal când se face clic pe butonul de ștergere
• Butonul apelează toggleModal când se face clic pe buton

Testele noastre vor reda superficial componentele și vor verifica apoi fiecare dintre specificații.

Există câteva motive pentru care testele unitare ar trebui să constituie cea mai mare parte a suitei noastre de teste:

Testele unitare sunt rapide.

O serie de sute de teste unitare rulează în câteva secunde.

Acest lucru face ca testele unitare să fie utile pentru dezvoltare. Când refactorizăm codul, putem schimba codul și putem rula testele unitare pentru a verifica dacă modificările nu au rupt componenta. Vom afla în câteva secunde dacă am spart ceva, deoarece unul dintre teste va eșua.

Testele unitare sunt granulare

Cu alte cuvinte, sunt foarte specifice.

Dacă un test unitar eșuează, testul defect ne va spune cum și de ce eșuează.

Testele unitare sunt bune pentru a verifica detaliile fine despre modul în care funcționează aplicația noastră. Acestea sunt cel mai bun instrument de utilizat atunci când se dezvoltă, mai ales dacă urmați dezvoltarea bazată pe teste.

Dar nu pot testa totul.

Pentru a ne asigura că redăm stilul corect, trebuie să folosim teste instantanee.

Teste instantanee

Testele instantanee sunt teste care fac o fotografie a componentei redate și o compară cu o imagine anterioară a componentei dvs.

Cel mai bun mod de a scrie teste instantanee în JavaScript este cu Glumă.

În loc să facă o fotografie a componentei redate, Jest face un instantaneu al marcajului componentei redate. Acest lucru face ca testele instantanee Jest să fie mult mai rapide decât testele instantanee tradiționale.

Pentru a înregistra un test instantaneu în Jest, trebuie să adăugați ceva de genul codului de mai jos:

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

Odată ce înregistrați un instantaneu, Jest se ocupă de orice altceva. De fiecare dată când se execută testele unitare, regenerează un instantaneu și îl compară cu instantaneul anterior.

Dacă codul se modifică, Jest aruncă o eroare și avertizează că marcajul s-a schimbat. Dezvoltatorul poate verifica apoi manual dacă nicio clasă nu a fost ștearsă accidental.

În testul de mai jos, cineva a șters fișierul modal-card-foot clasa din <footer>.

Testele instantanee sunt un mod de a verifica dacă nu s-a schimbat nimic despre stilul sau marcajul unei componente.

Dacă testele instantanee trec, știm că modificarea codului nostru nu a afectat afișarea componentelor noastre.

Dacă testele eșuează, atunci știm că noi făcut afectează randarea componentelor și poate verifica manual dacă stilul este încă corect.

Ar trebui să aveți cel puțin 1 test instantaneu per componentă. Un test de instantaneu tipic redă componenta cu o anumită stare pentru a verifica redarea corectă.

Acum avem teste unitare și teste instantanee, este timpul să analizăm testele cap la cap (e2e).

Testele cap la cap

Testele cap la cap (e2e) sunt teste la nivel înalt.

Aceștia efectuează aceleași acțiuni ca și noi dacă am testa manual o aplicație.

În aplicația noastră avem o călătorie de utilizator. Când utilizatorul face clic pe buton, modalul se va deschide, când face clic pe butonul din modal, modalul se închide.

Putem scrie un test end to end care parcurge această călătorie. Testul va deschide browserul, va naviga la pagina web și va rula prin fiecare acțiune pentru a vă asigura că aplicația se comportă corect.

Aceste teste ne spun că unitățile noastre funcționează corect împreună. Ne oferă încredere ridicată că funcționalitatea principală a aplicației funcționează.

Există câteva modalități de a scrie teste de la capăt la cap pentru aplicații JavaScript. Există programe precum test cafe care te înregistrează efectuând acțiuni într-un browser și le redau ca teste.

Există, de asemenea, proiecte precum Nightwatch care vă permit să scrieți testele în JavaScript. Aș recomanda utilizarea unei biblioteci precum Nightwatch. Este ușor de ridicat, iar testele rulează mai repede decât testele înregistrate.

Acestea fiind spuse, testele de noapte sunt încă relativ lente. O suită de 200 de teste unitare durează câteva secunde, o suită de 200 de teste end-to-end durează câteva minute.

Cealaltă problemă cu testele end-to-end este că acestea sunt dificil de depanat. Când un test eșuează, este greu să aflăm de ce a eșuat, deoarece testele acoperă o mulțime de funcționalități.

Concluzie

Pentru a testa în mod eficient aplicațiile web bazate pe componente front-end, trebuie să efectuați trei tipuri de teste. Teste unitare, teste instantanee și teste e2e.

Ar trebui să aveți mai multe teste unitare pentru fiecare componentă, unul sau două teste instantanee pentru fiecare componentă și unul sau două teste cap la cap care testează mai multe componente conectate împreună.

Testul unitar global va constitui cea mai mare parte a testelor dvs., veți avea câteva teste instantanee și câteva teste e2e.

Dacă urmați piramida de testare front-end, veți crea aplicații web care pot fi întreținute cu suite de testare killer.

Puteți vedea un exemplu de depozit al aplicației cu teste instantanee, teste unitare și teste de la capăt la capăt pe GitHub.