Testrezepte für Webkomponenten: Teil 1 – Testen von Präsentationskomponenten

Lassen Sie uns mit unseren Unit-Tests beginnen, wir werden Mocha als Testsprache und Fixture von open-wc für das Rendering der Komponente verwenden. Wir werden auch sinon für Stubs und Fakes verwenden

Wie Sie sehen können, Ich habe einen Pseudo-Renderer innerhalb von ‚el‘

Lassen Sie uns zu den eigentlichen Testfällen übergehen

  1. Testen Sie, ob die Karte eine korrekte Filmbewertung hat

Wir werden die folgende Zeile mit der gegebenen Eingabe testen

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

Unser Testfall geht wie folgt

  1. Erhalten Sie das Element oder shadowRoot von fixture renderer. Ich teste meistens über den Shadow Renderer
  2. Prüfe, ob das Element die erwartete Ausgabe enthält

So erwarten wir, dass unsere Filmbewertung 7.2 ist, also sollte der Testfall gemäß unserer Eingabe erfolgreich sein. Sie können es mit einer anderen Eingabe versuchen.

Nun führen Sie npm run test aus, um die Testabdeckung zu überprüfen

2. Check hat den richtigen Filmtitel

3. Check hat das richtige Filmplakat

4. Negativ: Check hat kein Filmplakat

So kommen wir zum Ende, um unsere Präsentations-Webkomponente zu testen, im nächsten Teil werden wir zustandsbehaftete Komponenten testen und vor allem die benutzerdefinierten Ereignisse testen.

Hier ist unser endgültiger Code

Gehen Sie zum zweiten Teil der Serie

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.