Recettes de test pour les composants web : Partie 1 – Test des composants de présentation

Démarrons nos tests unitaires, nous utiliserons mocha pour le langage de test et fixture de open-wc pour le rendu du composant. Nous utiliserons également sinon pour les stubs et les fakes

Comme vous pouvez le voir, J’ai créé un pseudo-rendu à l’intérieur de ‘el’

Passons aux cas de test réels

1. Tester si la carte a un classement de film approprié

Nous allons tester la ligne suivante avec l’entrée donnée

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

Notre cas de test va comme suit

1. Get the element or shadowRoot from fixture renderer. Je teste surtout le shadow renderer
2. check if element contains expected output

So we expecting out movie Rating to be 7.2, so as per our given input, test case should be successful. Vous pouvez essayer en fournissant une entrée différente.

Maintenant, exécutez npm run test pour vérifier et tester la couverture

2. La vérification a un titre de film approprié

3. La vérification a une affiche de film appropriée

4. Négatif : Check has no movie poster

So we comes to end to test our presentation web component, in next part we will go to test stateful components and most important the custom events testing.

Here is our final code

Voir la deuxième partie de la série

.