Testing Recepten voor web componenten: Deel 1 – Het testen van presentatiecomponenten

Laten we beginnen met onze unit tests, we zullen mocha gebruiken als testtaal en fixture van open-wc voor het renderen van de component. We zullen ook sinon gebruiken voor stubs en fakes

Zoals u kunt zien,

Laten we naar de eigenlijke testcases gaan

  1. Test of de kaart de juiste filmwaardering heeft

We gaan de volgende regel testen met de gegeven input

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

Onze testcase gaat als volgt

  1. Haal het element of shadowRoot op van de fixture renderer. Ik test meestal over shadow renderer
  2. controleer of element verwachte output bevat

Wij verwachten dus dat onze film Rating 7.2 is, dus volgens onze gegeven input, zou de test case succesvol moeten zijn. U kunt proberen door het leveren van andere input.

Nu run npm run test om te controleren en test dekking

2. Controle heeft juiste film titel

3. Controle heeft juiste film poster

4. Negatief: Controle heeft geen filmposter

Zo komen we aan het einde om onze presentatie web component te testen, in het volgende deel gaan we stateful componenten testen en het belangrijkste de aangepaste events testen.

Hier is onze definitieve code

Ga naar het tweede deel van de serie

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.