Januari 2022 - 2023
Januari 2022 - 2023
Info
Dit voorbeeldexamen is een combinatie van versies die in januari 2022-2023 gebruikt zijn. Bij elke vraag wordt aangegeven of het een vraag is die uit versie (Versie 1) of versie (Versie 2) komt. Het examen kan zonder problemen als één geheel gemaakt worden.
We weten dat dit examen relatief groot (maar zeker haalbaar) is, hier wordt rekening mee gehouden in de beoordeling. Het is verder ook niet noodzakelijk dat alles werkt om te slagen voor dit examen (en andere examens binnen het vak).
Dit is een open-boek en open-internet examen. Alles is toegestaan behalve communicatie met derden.
Aanvang van het examen Versie 1Versie 2
Download Startbestanden.zip. Alle nodige libraries zijn al toegevoegd aan package.json, je moet enkel de nodige libraries nog installeren via onderstaand commando. Deze startbestanden zijn bedoeld om zowel versie als te maken en verschillen dus van de versies die op het examen voorzien werden.
pnpm install
Tijdens dit examen bouw je een heel gelimiteerde versie van sites zoals GitHub of Bitbucket. We beperken ons natuurlijk tot de UI en niet tot het achterliggend gebruik van git en het beheren van bestanden. Repositories zullen deel uitmaken van een project, elke gebruiker die toegang heeft tot een project zal ook toegang hebben tot de repositories binnen een project. Indien een project publiek is, heeft iedereen toegang.
Dit examen gebruikt willekeurig gegenereerde data, jouw oplossing zal dus andere data tonen dan de screenshots. Je moet natuurlijk wel dezelfde structuur en functionaliteit implementeren.
Voor sommige componenten is startcode gegeven met enkele properties, deze properties zijn NIET EXHAUSTIEF. Het is dus mogelijk dat je aan de gegeven componenten nog properties moet toevoegen.
CSS Versie 1Versie 2
De startbestanden bevatten een stylesheet met opmaak voor dit examen. Zorg ervoor dat deze opmaak voor het volledige project ingeladen wordt. Let op, de startbestanden bevatten ook een bestand cssForStyledComponents.txt, dit zal je in de volgende opgaven als bron moeten gebruiken, je kopieert deze code niet naar een 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 geen invloed op je resultaat.
Navigatie, routing & context Versie 1Versie 2
Bouw een navigatiebalk uit, gebruik hierbij styled-components waaraan de navigationContainer en navigationItem CSS (te vinden in cssForStyledComponents.txt) toegekend wordt. De navigatiebalk bevat onderstaande links:
- My Repositories: Verwijst naar '/' en toont de component MyRepositories die al terug te vinden is in de startbestanden.
- Projects: Verwijst naar '/projects' en toont de component Projects die al terug te vinden is in de startbestanden.
Voorzie ook alvast een detailpagina voor een repository, e.g. '/dffc8423-aeac-4a0f-ba05-659f6ba26a3a'. Dit pad toont de component RepositoryDetail (te vinden in de startbestanden). Plaats tenslotte de routing-component binnen suspense, gebruik de LoadingPage component uit de startbestanden als fallback. Omring de routing-component tenslotte nog met een div die de klasse container krijgt.
Context Versie 1Versie 2
Tenslotte bevat de navigatiebalk ook nog een overzicht van de ingelogde gebruiker en de gebruikers waarmee ingelogd kan worden. De getAllUsers en getCurrentUser methodes zijn synchroon, react-query is dus overbodig, je gebruik context om de ingelogde gebruiker bij te houden en geen react-query. (De setCurrentUser functie is asynchroon maar je roept deze gewoon op in een event handler, je hoeft hier geen mutation voor te schrijven).
Hou er rekening mee dat de gebruikers over de volledige applicatie uitgelezen moeten kunnen worden.
In het geval dat er nog geen gebruiker gekozen is, ziet het menu er als volgt uit:
Als de gebruiker over de tekst 'Kies een gebruiker V' beweegt met zijn muis (te detecteren via het onMouseEnter event), wordt een overzicht getoond van alle beschikbare gebruikers. Daarnaast wordt ook een ‘log out’ knop getoond. Als de cursor niet langer in het gebruikersmenu zit, wordt dit automatisch verborgen. Je kan dit detecteren via het onMouseLeave event.
In de startbestanden is reeds een component User te vinden, gebruik deze om onderstaand overzicht te bouwen. Bekijk de documentatie in /src/utils/user.jsx voor meer informatie over de gebruikte properties (deze komen bijna allemaal overeen met de eigenschappen van een user object). Om onderstaande lay-out volledig te dupliceren, omring je het usermenu in een <div> die de klasse userMenu krijgt.
Een ingelogde gebruiker ziet er als volgt uit.
My repositories pagina Versie 1
Deze pagina stelt de gebruiker in staat om een overzicht te bekijken van alle projecten waar hij/zij toegang tot heeft en de repositories die in deze projecten zitten.
De lay-out voor deze component is al te vinden in de startbestanden, je moet enkel de functionaliteit nog uitwerken.
Info
In versie is deze volledige pagina gegeven en wordt er verder gewerkt op de detailpagina.
Privé en publieke repositories Versie 1
De gebruiker kan kiezen tussen twee tabbladen, het eerste tabblad, dat standaard geselecteerd is, toont alle privéprojecten waar de gebruiker toegang tot heeft. Het tweede tabblad toont de publieke projecten. Het actieve tabblad kan gewijzigd worden door op de naam te klikken. Het actieve tabblad krijgt de CSS-klasse active.
Overzicht projecten Versie 1
Binnen elk tabblad worden de overeenkomstige projecten getoond (op te halen via de getProjects methode uit projectsAPI.js). In het geval er geen ingelogde gebruiker is, of er geen enkel privé repository te vinden is voor de ingelogde gebruiker, wordt onderstaande tekst getoond.
In de eerste kolom worden de projecten getoond voor de ingelogde gebruiker (of de publieke projecten als dit tab geselecteerd is). Let op, er zijn geen methodes gegeven in de startbestanden om deze data te filteren, je krijgt alle projecten terug waar de ingelogde gebruiker toegang tot heeft en je moet deze zelf filteren.
Elk project wordt weergegeven door middel van een knop (<button>), de actieve knop krijgt de CSS-klasse active, standaard is de eerste knop in een tabblad geselecteerd. Als de gebruiker wisselt tussen tabbladen, moet het geselecteerde project natuurlijk ook wijzigen.
Overzicht repositories Versie 1
De rechterkolom past zich automatisch aan als een nieuw project geselecteerd wordt, terwijl de inhoud aan het laden is, wordt de LoadingPart component (beschikbaar in de startbestanden) getoond.
Om de repositories weer te geven, kan je de Repository component gebruiken die al beschikbaar is startbestanden. De lay-out is reeds aanwezig, enkel de functionaliteit moet nog geïmplementeerd worden. Zorg ervoor dat de details knop de gebruiker naar de detailpagina brengt. Je kan de repositories ophalen via de getRepositories functie uit repositoriesAPI.js.
Niet elk project bevat noodzakelijk repositories.
Repository aanmaken Versie 1
Voeg bovenaan een knop toe waarmee een gebruiker een nieuw repository kan aanmaken.
Als de gebruiker op deze knop drukt, wordt een nieuw modaal venster getoond. De lay-out is reeds in de startbestanden te vinden (in de component NewRepoModal), de functionaliteit moet nog geïmplementeerd worden. Bekijk de JSDoc string van deze component voor informatie over de properties.
Het input veld voor de naam van het repository wordt automatisch in focus gebracht als het formulier verschijnt. Via de cancel knop wordt het modaal venster gesloten (intern reeds geïmplementeerd, je moet nog een goede waarde meegeven voor de closeHandler property).
Via de create knop wordt een nieuw repository aangemaakt. Dit moet gebeuren doormiddel van optimistische updates. Je kan de methode createRepository (repositoriesAPI.js) gebruiken om een nieuw repository aan te maken. Zorg er voor dat het nieuwe repository in de optimistische update bovenaan in de lijst van repositories verschijnt.
Detailpagina (Versie 1) Versie 1
De detailpagina moet niet in detail uitgewerkt worden. Lees de navigatieparameter uit en zorg ervoor dat deze in het <h1> tag getoond wordt. Zorg er tenslotte ook voor dat de terug-knop (<) werkt en de gebruiker terugbrengt naar de vorige pagina, ongeacht of deze pagina de root pagina is of niet. Het eindresultaat ziet er als volgt uit.
Detailpagina (Versie 2) Versie 2
De detailpagina wordt gebruikt om overzicht te geven van de activiteit en gebruikers in een repository. Verder kunnen deze gegevens natuurlijk ook aangepast worden. Voor de volgende opgaven vertrek je van de DetailPage component in de /src/pages/my-repositories/detail map.
Navigatie & navigatieparameters Versie 2
Pas de detailpagina aan zodat de navigatieparameter uitgelezen wordt. Zorg er verder ook voor dat de terug knop (<) werkt en de gebruiker terugbrengt naar de vorige pagina, ongeacht of deze pagina de root pagina is of niet.
Branches & commits Versie 2
Gebruik de navigatieparameter om de gegevens voor een repository op te halen, gebruik hiervoor de getRepository functie die te vinden is in de API-files. Zorg er vervolgens voor dat de titel en beschrijving van het repository ingevuld worden. Toon vervolgens een overzicht van alle branches en de commits in deze branches.
Om het overzicht te bouwen kan je gebruik maken van de Branch en Commit componenten die te vinden zijn in de startbestanden. Merk op dat een commit geen id property heeft maar een sha property. Elke branch moet dichtgeklapt of opengeklapt kunnen worden. Het resultaat is als volgt.
Commits filteren Versie 2
Voeg de mogelijkheid toe om de commits te filteren. De gebruiker kan kiezen om alle commits te tonen, of enkel diegene die hij/zij zelf gemaakt heeft.
Niet elke gebruiker heeft noodzakelijk commits gemaakt in elk repository.
Gewijzigde bestanden uitlezen Versie 2
De rechterkolom toont de bestanden die aangepast zijn in de geselecteerde commit. Initieel moet onderstaande boodschap getoond worden.
Zodra een gebruiker op de knop "Show details" drukt, worden de bestanden die aangepast zijn in de commit uitgelezen en uitgeprint. Je kan elke file uitprinten in een <p> tag. De uitgeprinte files veranderen natuurlijk als een nieuw repository geselecteerd wordt.
Commits aanmaken Versie 2
Voeg in elke branch een nieuwe knop toe waarmee we het formulier tonen om een nieuwe commit toe te voegen aan de branch. De knop moet altijd zichtbaar zijn, ook als de branch dichtgeklapt is.
Als de gebruiker op deze nieuwe knop drukt, wordt de component NewCommitForm getoond. Deze component is reeds beschikbaar in de startbestanden, de lay-out is voorzien, enkel de functionaliteit moet nog geïmplementeerd worden. Het formulier wordt als volgt getoond. Het formulierelement voor de commitboodschap moet automatisch in focus gebracht worden als de component zichtbaar gemaakt wordt, dit moet ook telkens opnieuw gebeuren als er van branch gewisseld wordt.
Als het formulier ingezonden wordt, wordt de nieuwe commit toegevoegd via een optimistische update. Je gebruikt hiervoor de functie createNewCommit uit /src/api/repositoriesAPI.js. In deze file is een methode addNewCommitToRepo voorzien die je moet gebruiken in de optimistische update. Onderstaande UI is al aangemaakt, enkel de update moet geschreven worden.
Zorg er tenslotte voor dat het formulier leeg gemaakt wordt als de commit aangemaakt is. Ter info, de API-methode splits de files parameter op, een puntkomma kan gebruikt worden om twee files van elkaar te scheiden.
Testing Versie 1 Versie 2
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 al de nodige data-cy properties. Je mag er altijd extra toevoegen, maar normaal gezien is dit niet nodig.
End-to-end testen Versie 1 Versie 2
Schrijf onderstaand testscenario uit voor de '/projects' route. Drie van de onderstaande tests slagen niet standaard. Pas de React code aan zodat de tests wel slagen.
- Een niet-ingelogde gebruiker:
- Kan het nieuw-project formulier niet zien Versie 1 Versie 2
- Een ingelogde gebruiker:
- Kan het formulier niet inzenden zonder name of beschrijving (er wordt geen nieuw project aangemaakt na een druk op de knop). Versie 1
- Kan een nieuw project aanmaken waarna er exact één nieuw project verschijnt met de juiste naam en beschrijving.Versie 2
- Kan een privéproject aanmaken en dit niet langer zien nadat hij/zij uitlogt. Versie 1
- Kan een publiek project aanmaken en dit nog steeds zien nadat hij/zij uitlogt.Versie 2
- Kan een project verwijderen nadat het aangemaakt is. Versie 1
- Kan een project aanmaken, daarna wordt het formulier terug leeg gemaakt. Versie 2