Lesson 3 exercises

Del 1: Error boundary

  1. Bygg en egen Error Boundary-komponent som fångar upp fel som uppstår i underliggande komponenter och renderar en fallback-komponent istället.
  2. Utgå ifrån följande exempel:

https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

  1. Gör en testimplementation av Error Boundary-komponenten. Testa att den renderar en fallback-komponent om en underliggande komponent kastar ett fel.

Del 2: React Testing Library

  1. Skapa en ny komponent som hämtar data från ett API och visar upp datan i en lista.
  2. Använd React Testing Library för att testa att komponenten renderar korrekt.
  3. Använd React Testing Library för att testa att komponenten renderar en fallback-komponent om API-anropet misslyckas.

Del 3: Cypress

  1. Skapa ett Cypress-test som navigerar till sidan https://viaplay.se/se-sv
  2. Klicka på "Godkänna alla" i cookies-dialogen
  3. Klicka på "Logga in"
  4. Fyll i en korrekt e-postadress som användarnamn och ett felaktigt lösenord och klicka på "Logga in"
  5. Kontrollera att felmeddelandet "Användarnamn och lösenord hör inte ihop. Försök igen." visas