Augustus 2024
Augustus 2024
Download de startbestanden. Deze zip bevat twee submappen, één voor deel 1 en één voor deel 2. Alle nodige libraries zijn al toegevoegd aan package.json, je moet dus enkel nog een pnpm install uitvoeren. De startbestanden voor deel 1 worden gebruikt om je React kennis te testen terwijl de bestanden voor deel 2 gebruikt wordt om je kennis over Cypress te testen. Hou de twee mappen afgezonderd, dit zijn twee aparte projecten en je zal dus ook twee keer het pnpm install commando moeten uitvoeren.
Voor sommige componenten is startcode gegeven waarin enkele properties voorzien zijn, deze properties zijn NIET EXHAUSTIEF. Het is dus mogelijk dat je aan de gegeven componenten nog properties moet toevoegen.
Dit is een open-boek, open-internet examen. Het enige wat niet toegestaan is, is het gebruik van (generative) AI en elke vorm van communicatie met iemand anders dan je toezichter.
Startbestanden
Notitie
Dit voorbeeldexamen bevat een deel over testing met Cypress, dit gedeelte van de cursus is geschrapt/verhuist naar backend-frameworks en mag dus genegeerd worden.
Deel 1: React
Tijdens dit examen bouw je een frontend voor een database met trivia vragen waar enkele CRUD-operaties op uitgevoerd kunnen worden.
Startbestanden
De startbestanden bevatten een stylesheet met opmaak voor dit examen. Zorg ervoor dat deze opmaak voor het volledige examen ingeladen wordt. Let op, de startbestanden bevatten ook een bestand cssForStyledComponents.txt, dit zal je in een volgende opgaven als bron moeten gebruiken, je kopieert deze code niet naar het CSS-bestand.
In het verdere verloop van dit examen worden af en toe CSS-klassen vermeld die toegevoegd kunnen worden om de opmaak in de screenshots na te bouwen. Als jouw oplossing er anders uitziet, is dit geen probleem. De focus van het examen ligt op de functionaliteit, focus dus niet op CSS-problemen, deze hebben, behalve het koppelen van de .css file en het gebruik van styled-components geen invloed op je resultaat.
Alle CRUD-operaties moeten gebeuren door middel van TanStack (React) Query. Voor alternatieve oplossingen krijg je geen punten.
Routing
Bouw een routing component die onderstaande routes voorziet en plaats deze op de correcte plaats in de App component.
- Het pad '/' toont de Home component die al te vinden is in de startbestanden.
- Het pad '/detail/id' toont de Detail component die nog aangemaakt moet worden. Het tweede segment (id) is een dynamische parameter waaraan het id van een vraag meegegeven kan worden.
Zorg voor een Suspense boundary rond alle routes. Terwijl een component suspended is moet de LoadingPage component (die te vinden is in de startbestanden) getoond worden.
Trivia vragen tonen
Maak gebruikt van de getAllTriviaQuestions functie uit de startbestanden en TanStack Query om een overzicht te tonen van alle vragen in de database. Om onderstaande lay-out na te bouwen kan je gebruik maken van de QuestionItem component uit de startbestanden.
Vragen verwijderen
Maak gebruik van een afwachtende update om een vraag te verwijderen als er op de 'Delete' knop gedrukt wordt.
Terwijl de vraag verwijderd wordt moet de LoadingPart component (die te vinden is in de startbestanden) getoond worden.
Detailpagina
Zorg er voor dat de gebruiker via de 'Details' knop naar de '/detail/id' route gebracht wordt. Je kan gebruik maken van de DetailUI (die in de startbestanden te vinden is) om onderstaande UI te bouwen.
Terug navigeren
Zorg er voor dat de gebruiker terug kan navigeren naar de vorige pagina door op de '<--' knop te drukken. De gebruiker moet terug gaan naar de vorige pagina, ongeacht wat deze pagina is.
Vraag updaten
Via de DetailUI component worden de mogelijke antwoorden voor de vraag op het scherm getoond. Schrijf de nodige code om het correcte antwoord aan te passen via een optimistische update. Doe dit, voor volledige punten, zonder useState.
Je zal merken dat de volgorde van de antwoorden aangepast wordt als je een nieuw correct antwoord selecteert. Los dit probleem op.
Vragen filteren
Maak gebruik de CSS-code in cssForStyledComponents om een met styled-components opgemaakte <select> component te bouwen. Gebruik deze component vervolgens om aan de 'Category', 'Type' en 'Difficulty' kolommen een filter toe te voegen. Deze filters moeten individueel en allemaal samen werken. In de models map van de startbestanden vind je enums die je kan gebruiken om de opties in de select op te vullen. Via Object.values(enum) haal je alle keys uit een enum op.
Context
Creëer een nieuwe context die de view-modus van de applicatie bijhoud. Er zijn twee modi, 'user' en 'admin'. Standaard wordt de applicatie gestart in de 'admin' modus. Via een checkbox bovenaan beide pagina’s kan de modus gewijzigd worden. Om de lay-out in onderstaand screenshot na te bootsen kan je het label en de checkbox in een <div> met de CSS-klasse content-menu plaatsen.
Context gebruiken
Als de applicatie in 'user' modus staat, moet de delete-kolom in de homepagina verborgen worden.
Verder moeten de radiobutton in de detailpagina uitgeschakeld worden.
Uitgewerkte oplossingen
Deel 2: Testing
De startbestanden bevatten reeds de nodige Cypress configuratie, inclusief de nodige commando’s. Pas de Cypress environment variables aan voordat je testen begint te schrijven.
De startbestanden bevatten reeds de nodige data-cy properties. Je mag er altijd extra toevoegen, maar normaal gezien is dit niet nodig. De properties zijn de volgende:
- plot: Een plot in de tuin.
- planted-filter: De filter waarmee de plots met geplante gewassen geselecteerd kunnen worden.
- trimmed-filter: De filter waarmee de plots met getrimde gewassen geselecteerd kunnen worden.
- harvested-filter: De filter waarmee de plots met geoogste gewassen geselecteerd kunnen worden.
- create-plot: De knop waarmee een nieuw plot aangemaakt kan worden.
- plant-name: De tekst input waarmee de naam van het gewas in een nieuw plot ingegeven kan worden.
End-to-end testen
Schrijf onderstaand testscenario uit voor de '/' route. Drie van de onderstaande tests slagen standaard niet (twee van de tests omwille van dezelfde foute code). Pas de React code aan zodat deze wel slagen, hiervoor moet je tussen de 1 - 5 lijnen code aanpassen of toevoegen.
- Een niet-ingelogde gebruiker
- Kan de plots zien
- Kan de plots filteren, als alle filters af staan, mag geen enkel plot zichtbaar zijn.
- Een ingelogde gebruiker
- Kan geen plot aanmaken met een lege plantnaam.
- Kan een plot aanmaken met een valide plantnaam.