Übung 17: ImageGallery Benutzerinteraktionstest

In dieser Übung ist es deine Aufgabe, einen neuen Testfall zu ImageGallery.test.tsx hinzuzufügen, in dem du testest, ob sich die Bilder ändern, wenn die Pfeiltasten gedrückt werden (Benutzerverhalten).

Wenn du den Shop öffnest und zu einem beliebigen Produkt gehst und die Pfeiltasten benutzt, solltest du die Bilder ändern können. Du kannst dies mit der Methode .keyboard('{ArrowRight}') oder .keyboard('{ArrowLeft}') tun.

Das folgende Verhalten sollte getestet werden:

  1. Du musst zum zweiten Bild gehen können, wenn du die rechte Pfeiltaste drückst. Überprüfe das Attribut src.
  2. Gehe zurück zum ersten Bild nach Schritt 1.
  3. Wenn du nach den Schritten 1 und 2 die linke Pfeiltaste drückst, wird das letzte Bild angezeigt.

Übung 18: Test der Footer-Komponente

Deine Aufgabe ist es, einen Unit-Test für die Footer-Komponente in src/components/Footer.tsx zu schreiben. Der Test sollte einen Fall enthalten, der die korrekte Darstellung der Navigationselemente überprüft.

Übung 19: CategorySection Komponentenprüfung

Deine Aufgabe ist es, einen Unit-Test für die Komponente Category Section in src/components/CategorySection.tsx zu schreiben. Der Test sollte zwei Testfälle enthalten, die auf Folgendes testen:

  1. Der erste Testfall sollte die Überschrift des Kategoriebereichs prüfen
  2. Der zweite Testfall sollte prüfen, ob alle drei Links und Bilder gerendert werden.
  3. Verwende das untenstehende Kategorienfeld, um den Test zu erstellen.