Testningsrecept för webbkomponenter: Del 1 – Testning av presentationskomponenter

Låt oss börja våra enhetstester, vi kommer att använda mocha som testspråk och fixture från open-wc för rendering av komponenten. Vi kommer också att använda sinon för stubs och fakes

Som du kan se, Jag har skapat en pseudo renderer inuti ’el’

Låt oss gå till faktiska testfall

  1. Testar om kortet har ett korrekt filmbetyg

Vi kommer att testa följande linje med given indata

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

Vårt testfall går till såhär

  1. Hämta elementet eller shadowRoot från fixturens renderer. Jag testar oftast över shadow renderer
  2. check if element contains expected output

Så vi förväntar oss att vår film Rating ska vara 7.2, så enligt vår givna indata bör testfallet vara framgångsrikt. Du kan prova genom att ange annan indata.

Kör nu npm run test för att kontrollera och testa täckningen

2. Kontrollera har rätt filmtitel

3. Kontrollera har rätt filmaffisch

4. Negativt: I nästa del kommer vi att testa tillståndskrävande komponenter och det viktigaste är testning av anpassade händelser.

Här är vår slutliga kod

Gå till den andra delen av serien

Lämna ett svar

Din e-postadress kommer inte publiceras.