Les 6: Testing

Tijdens deze oefeningenreeks schrijf je testen voor de oplossingen van de tweede herhalingsoefening. Je oefent deze les op:

• Het schrijven van end-to-end tests
• Het schrijven van component tests

Oefening 0: Voorbereiding

Download de oplossingen van de tweede herhalingsoefeningen en installeer en configureer Cypress.

Info

Tijdens deze oefeningenreeks moet je Cypress zelf installeren en configureren, op het examen is Cypress correct geconfigureerd en geïnstalleerd in de startbestanden. Je moet op het examen dus enkel test schrijven.

Oefening 1: Component tests

In deze oefening schrijf je enkele component tests. In de eerst oefeningen zouden alle tests moeten slagen, in de tweede oefening zijn er enkele testen die mislukken.

Oefening 1.1: ResponseMessage

Schrijf een component test die de ResponseMessage component test. De component moet aan volgende eisen voldoen:

• De component kan gemount worden.
• De component toont niets als de success property undefined of null is.
• Toont de successText als de success property true is, en de successText property niet undefined, null of een lege string is.
• Toont de failureText als de success property false is, en de failureText property niet undefined, null of een lege string is

Oefening 1.2: FormSubmitButtonWithLoading

Voor je aan deze oefening begint heb je nog wat extra config nodig. Cypress bevat momenteel een bug waardoor component test niet werken voor componenten die styled-components gebruiken. Het onderstaande is een workarround die te vinden is op de GitHub issue pagina van Cypress.

global.process = global.process || {};
global.process.env = global.process.env || {};

// Dit is slechts een voorbeeld, pas het import pad
// aan in je eigen code.
import '../workaround-cypress-process-issue.js'
import SomeComponent from './someComponent.jsx'

In onderstaande testen zijn er $3$ testen die mislukken. Schrijf eerst je testen en los de problemen dan op zodat alle testen slagen.

Tips

Je kan only toevoegen aan één of meerdere test(en) om enkel deze test(en) opnieuw uit te voeren.

describe('Some test block', () => {
    it('tests something', () => {
        
    })
  
    it('tests something else', () => {
        
    })
  
    it.only('tests a third thing AND IS THE ONLY TESTS WHICH IS RUN', () => {
        
    })
})

• De component toont de loadingText als de loading property true is.
• De component toont de text als de loading property false is.
• De knop is enabled wanneer de loading property false is (zoek naar de juiste chainer in de documentatie van should)
• De knop is disabled wanneer de loading property true is.
• De knop toont de inhoud van de text property wanneer deze defined is, de loading property true is en de loadingText undefined
• De knop toont de defaultwaarde "Loading..." als de loading property true is, de loadingText en text properties undefined zijn.
• De knop toont de defaultwaarde "Save" als de loading property false is en de text property falsy.

Oefening 2: End-to-end tests

In deze oefeningenreeks schrijf je enkele end-to-end testen. In deze oefeningenreeks worden slechts enkele onderdelen van de Social Network getest. Er zijn veel meer mogelijke testen te schrijven dan hier behandeld worden. We raden je aan om dit te doen als voorbereiding op het examen.

Oefening 2.1: Navbar & routing

Schrijf onderstaand testscenario uit voor de navbar. Gebruik geneste describe blokken, volg hiervoor onderstaande structuur. Voor enkele van de testen zul je moeten testen op basis van CSS-klassen in de plaats van data-cy attributen.

• Navbar functionaliteit
  • De navbar start in uitgeklapte modus
  • De app start in dark mode
  • De gebruiker kan wisselen tussen themas
  • De gebruiker kan wisselen tussen uitgeklapt/opengeklapt
  • De icoontjes zijn altijd zichtbaar, ongeacht de status van de navbar
  • De tekst is enkel zichtbaar als de navbar opgengeklapt is
  • De geselecteerde link krijgt de CSS-klasse text-muted (raadpleeg de should documentatie voor de juiste chainer)
• Navigatie als niet geauthenticeerde gebruiker
  • Enkel de links "Social Network" en de "Log in" zijn zichtbaar in de navbar en brengen de gebruiker naar de juiste pagina
  • De /groups pagina kan niet bezocht worden en redirect naar /login
  • De /chat pagina kan niet bezocht worden en redirect naar /login
  • De /user pagina kan niet bezocht worden en redirect naar /login
• Navigatie als ingelogde gebruiker
  • De /login kan niet bezocht worden en redirect naar /groups
  • De Social network, /user, "Groups" en "Chat" links zijn zichtbaar en brengen de gebruiker naar de juiste pagina

Oefening 2.2: Een account registeren

• Standaard is de registreer knop niet geselecteerd en heeft deze de klasse text-muted niet
• De gebruiker kan op de registreer knop drukken, de text-muted wordt dan toegekend aan de knop
• Het formulier kan niet ingestuurd worden als het email adres niet ingevuld is
• Het formulier kan niet ingestuurd worden als het wachtwoord niet ingevuld is
• Het formulier kan niet ingestuurd worden als de username niet ingevuld is
• Het formulier geeft een foutmelding als het wachtwoord korter is dan 6 karakters
• De gebruiker kan registreren en wordt vervolgens geredirect naar de /groups pagina
• De gebruiker kan eenzelfde account geen twee keer registreren

Oefening 2.3: Inloggen

• Standaard is de inlog knop geselecteerd en heeft deze de klasse text-muted
• Het formulier kan niet ingestuurd worden als het email adres niet ingevuld is
• Het formulier kan niet ingestuurd worden als het wachtwoord niet ingevuld is
• Het formulier toont een foutmelding als de gebruikersgegevens ongeldig zijn
• De gebruiker kan inloggen en wordt geredirect naar de /groups pagina

Oefening 2.4: Publieke groepen doorzoeken

• De gebruiker kan de publieke groepen doorzoeken en krijgt enkel de groepen die voldoen aan de zoekcriteria terug (je mag er van uit gaan dat de Lorem 1, 2 3 en 4 groepen aanwezig zijn)

Hint

Je kan aan het contains commando een reguliere expressie meegeven. Via onderstaande reguliere expressie haal je het eerste element op dat niet begint met de tekst lorem.

cy.get('body').contains(/^(?!lorem).*$/i)

Plaats het data-cy attribuut op de juiste plaats. Bovenstaande contains call zal alles teruggeven, ook lege divs. Je plaats het attribuut dus best op de titel van een group.

Oefening 2.4: Group aanmaken

• De gebruiker kan geen group aanmaken zonder naam
• De gebruiker kan geen group aanmaken zonder beschrijving
• De gebruiker kan een publieke groep aanmaken en deze is zichtbaar in "My Groups" en "Explore groups", zowel de naam als beschrijving zijn te zien
• De gebruiker kan een privé groep aanmaken en deze is zichtbaar in "My Groups" en niet zichtbaar in "Explore groups", zowel de naam als beschrijving zijn te zien

Hint

Via de parent query kan het bovenliggende HTML-element opgehaald worden van een element dat opgehaald werdt via cy.get.