Rețete de testare pentru componente web: Partea 1 – Testarea componentelor de prezentare

Să începem testele unitare, vom folosi mocha pentru limbajul de testare și fixture de la open-wc pentru redarea componentei. De asemenea, vom folosi sinon pentru stubs și fakes

Cum puteți vedea, am creat un pseudo renderizator în interiorul lui ‘el’

Să trecem la cazurile de testare propriu-zise

  1. Testăm dacă cardul are o clasificare adecvată a filmului

Vom testa următoarea linie cu o intrare dată

<div class="movie__rating">${movie.vote_average}</div>

Cazul nostru de testare se desfășoară după cum urmează

  1. Obțineți elementul sau shadowRoot din fixture renderer. Eu testez mai ales peste shadow renderer
  2. verificați dacă elementul conține rezultatul așteptat

Așa că ne așteptăm ca ratingul filmului să fie 7.2, deci, conform datelor de intrare, cazul de test ar trebui să aibă succes. Puteți încerca furnizând date de intrare diferite.

Acum rulați npm run test pentru a verifica și testa acoperirea

2. Verificați dacă titlul filmului este corect

3. Verificați dacă afișul filmului este corect

4. Negativ: Check has no movie poster

Acum ajungem la final să testăm componenta noastră web de prezentare, în partea următoare vom trece la testarea componentelor cu stare și, cel mai important, la testarea evenimentelor personalizate.

Iată codul nostru final

Vai la partea a doua a seriei

.

Lasă un răspuns

Adresa ta de email nu va fi publicată.