Sportcity project
11/04/2024
Ik ga de aankomende maand werken aan het refactoren van de Sportcity website. De website is eerst in javascript geschreven maar wij moeten dat gaan overzetten naar typescript. Ook moeten er testen geschreven worden wanneer nodig en moeten alle referenties worden aangepast.
Tijdens mijn eerste werkdag op het kantoor van Sportcity hebben mijn collega en ik het project op mijn pc geïnstalleerd. Wij moesten het project clonen met een SSH key. Wij moesten hiervoor eerst een key aanmaken in de terminal en hem koppelen aan Github.
Ook gebruiken wij Yarn in plaats van npm om het project te draaien en moesten hiervoor ook de juiste node versie instellen. Wij gebruikten hiervoor Fast Node Manager(fnm). En volgde deze readme om versie 18 te laten draaien: https://github.com/Schniz/fnm
Je wilt niet dat elke keer wanneer je je visual studio code applicatie opnieuw opstart dat de versie terugspringt naar 20. Je kan hiervoor met deze code instellen dat hij standaard is ingesteld op 18:
fnm alias default 18
Om alle packages te installeren gebruik je het volgende:
yarn install
Hierna voer je het volgende uit:
npm install --global yarn
"yarn install" wordt gebruikt binnen een project directory om dependencies voor dat specifieke project te installeren met behulp van Yarn, terwijl "npm install --global yarn" wordt gebruikt om "Yarn" globaal op je systeem te installeren, waardoor je de "Yarn" command vanuit elke directory kan gebruiken.
dit is hoe je het project lokaal start:
yarn dev
11-04-2024
Er is een projectboard gemaakt in Jira. Ik werk hier nu voor het eerst mee en dit is hoe het projectboard er uit ziet:
Er zijn in totaal 8 kolommen waarvan vrijwel al mijn tickets in "READY FOR DEV 19" staan. De ticket waar ik aan ga werken staat in "IN DEV 3". Als een ticket af is en je een pull request hebt gedaan dan wordt de ticket naar "PEER REVIEW 1" gesleept.
Dit is hoe een ticket er uit kan zien binnen het bedrijf:
De tickets voor het refactoren zijn alleen niet zo uitgebreid:
Hier een voorbeeld van hoe ik zelf een ticket heb aangemaakt omdat ik na het testen er achter kwam dat de performance erg slecht was op de SportCity website:
22-04-2024
Ik heb voor de website van SportCity een sitemap gemaakt om een overzicht te creëren over hoe je bij elke pagina komt. Dit heeft mij veel geholpen bij het vinden van bepaalde pagina's maar ook kon je de structuur hiervan vinden in de code. Zoals je ziet is er een funnel in de sitemap te vinden. Dit is de hoofdbron van alle inkomsten van sportcity. Hier betaal je namelijk voor de lidmaatschap waarvoor je kiest. Wij zorgen ervoor dat de funnel ten alle tijden te bereiken is en goed werkt.
Zo ziet de sitemap er uit:
24-04-2024
Ik kreeg bij het uitwerken van 1 van de tickets een Figma bestand mee. Ik moest op basis van dit bestand mijn ticket uitwerken en het pixel perfect namaken. Dit is hoe de bestanden er uit zien:
Ik ben voor mijn ticket een breakdown schets gaan maken op de uitwerking die ik kreeg in Figma:
Ik heb geprobeerd zoveel mogelijk code op te schrijven in de breakdown schets om het makkelijker voor mezelf te maken. Zo zie je ook heel duidelijk dat er 2 divjes zijn in een section. En dat er een groupLessonsModal component zit in de eerste div. Verder maak ik de 2 divjes beide 50% width door flex 1 te zetten in beide divjes. Ik geef de groupLessonsModal een position relative met top en left 0 zodat hij op de standaard positie staat(linksboven). Waarna ik in de div waar hij in zit justify content: center en align items: center doe.
Hiernaast heb ik ook een breakdown schets geprobeerd te maken van het design op kleine scherm:
Hier zie je ook al een beetje wat ik wil doen. Zo zie je dat ik de GroupLessonsModal een position absolute geef zodat ik dit component over de andere 2 divjes heen krijg.
Hier een link naar het Figma bestand: https://www.figma.com/file/JPdOXIpbiGVTHPD7Wh8nKY/Sportcity?type=design&node-id=0%3A1&mode=design&t=TzRQAOO2jPrT4Zt8-1
Dit is een overzicht van alle designs die gemaakt zijn voor Sportcity:
Je ziet ook dat er goed over nagedacht is hoe de website er uit moet zien op elke screensize, dit maakt het voor de programmeur ook veel makkelijker:
Ook zijn de schetsen verdeeld in atoms/molecules en organisms. Dit is hoe de atoms/molecules er uit zien:
Hier een voorbeeld van de layout:
Hier een voorbeeld van de logo's en kleuren:
03-05-2024
Voor de ticket "Improve menu" moest ik het menu zo maken als hoe het er uit zou zien in het Figma bestand dat gemaakt was. Dit figma bestand is te vinden in de ticket zelf zodat je ook precies weet waar je naar moet kijken. Dit is het design dat ik hem gekregen voor deze ticket:
14-05-2024
Ik gebruik Figma om te kijken hoeveel pixels een bepaalde item staat van een ander. Dit omdat het niet altijd even makkelijk te checken is hoeveel padding/margin of top/bottom er gegeven is. Dit doe ik door een screenshot te maken en er een frame overheen te plaatsen. Je kan zo goed zien hoeveel pixels verschil in de breedte/lengte is:
11-04-2024
Ik moest voor deze ticket de Loading indicator refactoren. Ik heb hiervoor eerst een folder aangemaakt in de features/shared/components folder en hierna 3 bestanden in gemaakt:
Ook moesten alle referenties naar het component veranderd worden en dus op de juiste manier geïmporteerd worden. Ik moest ook default weg halen voor het component:
export function LoadingIndicator() {
return (
<div className={styles.loader}>
<div className={classNames(styles.item, styles.first)} />
<div className={classNames(styles.item, styles.second)} />
<div className={classNames(styles.item, styles.third)} />
</div>
);
}En moest ik curly brackets gebruiken zodat deze component specifiek geïmporteerd wordt en je dus ook geen typfouten kan maken:
import { LoadingIndicator } from 'features/shared/components/loading-indicator';Voor de load indicator van een sectie had ik wel een probleem. Er zat isSmall in de section die ik importeer uit de nieuwe sectie bestand:
export function LoadingIndicatorSection() {
return (
<Section isSmall>
<LoadingIndicator />
</Section>
);
}Alleen zat er geen isSmall prop in de nieuwe sectie die was aangemaakt dus moesten we kijken of deze er anders uit zag in de browser zonder de isSmall. Deze miste inderdaad nog wat styling. Mijn begeleider loste dit zo op:
export function LoadingIndicatorSection() {
return (
<Section>
<Layout.Container>
<Layout.Row>
<Layout.Col>
<LoadingIndicator />
</Layout.Col>
</Layout.Row>
</Layout.Container>
</Section>
);
}Door er deze layout om heen te doen kreeg de loading indicator wel de juiste padding/margins die hij nodig had.
11-04-2024
Ik heb gewerkt aan het refactoren van de looping video component. Ik moest hiervoor weer een nieuwe map aanmaken en daar 3 bestanden in aanmaken.
Dit is de javascript bestand die ik moest refactoren:
import React from 'react';
import styles from './index.module.scss';
import PropTypes from 'prop-types';
import Button from 'components/button';
import LinkResolver from 'components/link-resolver';
import { FontColor, H1 } from 'src/features/shared/components/typography';
export default function LoopingVideo({ title, linkLabel, link, video }) {
return (
<div className={styles.wrapper}>
<video className={styles.video} autoPlay muted loop>
<source src={video.src} type="video/mp4" />
</video>
<div className={styles.content}>
{title && (
<div className={styles.title}>
<H1 color={FontColor.Neutral06}>{title}</H1>
</div>
)}
{link.href && linkLabel && (
<Button {...link} label={linkLabel} component={LinkResolver} />
)}
</div>
</div>
);
}
LoopingVideo.propTypes = {
title: PropTypes.string,
linkLabel: PropTypes.string,
link: PropTypes.object,
video: PropTypes.shape({
src: PropTypes.string,
alt: PropTypes.string,
}),
};Ik ben eerst begonnen met het maken van de 2 interfaces:
interface IVideo {
src: string;
alt: string;
}
interface ILoopingVideoProps {
title?: string;
linkLabel?: string;
link: Record<string, string>;
video?: IVideo;
}Ik had eerst 'any' als type gedefinieerd voor de 'link' prop, wat eigenlijk het hele doel van TypeScript ondermijnt. Mijn buddy had de "Record<string, string>" als oplossing.
Hierna ben ik de default uit de export gaan halen en heb ik de interface toegevoegd aan de props. Ook heb ik de linkLabel toegevoegd als child in plaats van een label prop:
export function LoopingVideo({
title,
linkLabel,
link,
video,
}: ILoopingVideoProps) {
return (
<div className={styles.wrapper}>
<video className={styles.video} autoPlay muted loop>
<source src={video?.src} type="video/mp4" />
</video>
<div className={styles.content}>
{title && (
<div className={styles.title}>
<H1 color={FontColor.Neutral06}>{title}</H1>
</div>
)}
{link && linkLabel && <Button {...link}> {linkLabel}</Button>}
</div>
</div>
);
}15-04-2024
Vandaag heb ik gewerkt aan het refactoren van de navigatie lijst in de header. Ik heb weer eerst een interface gemaakt met items die vanuit een andere interface worden geïmporteerd. Als de prop items geef de type array mee omdat dit een lijst is:
interface INavigationListProps {
items?: IMenuItem[];
isHorizontal?: boolean;
}
export function NavigationList({
items = [],
isHorizontal,
}: INavigationListProps) {
return (
<ul
className={classNames(styles.list, { [styles.horizontal]: isHorizontal })}
>
{theme.login && (
<li className={classNames([styles.item, styles.login])}>
<LoginLink />
</li>
)}
{items &&
items.map((item) => (
<li key={item.link?.label} className={styles.item}>
<Link href={item.link?.href || `/${item.link?.slug}`}>
{item.link?.label}
</Link>
</li>
))}
</ul>
);
}Hier zie je dat ik "link" optioneel heb gemaakt omdat niet elke item een link heeft. Dus hier staat het volgende: als item link heeft return label en anders undefined:
<li key={item.link?.label} className={styles.item}>
<Link href={item.link?.href || `/${item.link?.slug}`}>
{item.link?.label}
</Link>15-04-2024
Ik heb de 2e navigatie lijst gerefactored en die was iets ingewikkelder dan de eerste navigatie lijst. Het gaat om deze lijst:
Voor de interface heb ik weer gebruik gemaakt van de IMenuItem array:
interface NavigationListSecondaryProps {
items?: IMenuItem[];
}
export function NavigationListSecondary({
items = [],
}: NavigationListSecondaryProps) {
return (ik moest echter voor de href een const aanmaken en checken of er een href is. Als deze er niet is dan return hij null(niks) in plaats van undefined. Dit was de error die ik hier dus tegenkwam. Hij zou wel gewoon compilen zonder dit toe te passen maar als er een geval was waar in contentfull geen link is toegevoegd dan zou je op een undefined pagina komen maar nu doet hij dus niks wanneer je op een item klikt die geen link heeft:
return (
<ul>
{items.map((item) => {
const href = item.link?.href;
if (!href) {
return null;
}
return (
<li key={item.link?.label} className={styles.item}>
<Link
href={href}
isHtmlTag={href.startsWith('/funnel')}
className={styles.link}
>
{item.link?.label}
</Link>
</li>
);
})}
</ul>29-04-2024
Ik heb vandaag een ticket op mijn naam gekregen waar ik de oude groepsles rooster pagina moest aanpassen naar een nieuwe versie. Dit is hoe de ticket er uit zag:
Met daarin ook de link naar de Figma images:
Ik ben begonnen met het aanmaken van een CSS file en heb hem erna geïmporteerd. Waarna ik als eerst de layout van de HTMl heb weten te fixen, die ziet er zo uit:
Je ziet hier goed de wijzigingen die ik heb aangebracht. Ik heb hier de oude background component verwijderd en heb er een div van gemaakt. Ook heb ik een section om deze 2 secties heen gezet en maak ik gebruik van classnames om meerdere styles op 1 sectie te zetten.
Na het aanmaken van de HTML structuur ben ik de CSS gaan maken. Ik ben eerst een variabelen CSS file gaan importeren zodat ik toegang kreeg tot alle scherm size variabelen. Hierna ben ik de juiste styling gaan meegeven voor de juiste schermbreedte:
@import '~theme/variables';
.container {
display: flex;
height: calc(100vh - 6.5rem);
overflow: hidden;
background-color: $color-neutral-05;
padding: 0px;
}
.background {
background: url('../../public/static/images/sportcity/groepsles-rooster/yogaImage.png');
background-size: cover;
background-position: center;
}
.leftHalf,
.rightHalf {
flex: 1;
}
.leftHalf {
display: flex;
justify-content: center;
align-items: center;
}
@include breakpoint(xs) {
.container {
flex-direction: column-reverse;
}
}
@include breakpoint(sm) {
.container {
flex-direction: row;
}
}Ik gebruik column-reverse om de background die ik normaal in de rechter sectie heb om te ruilen met de linker sectie. En dit zet ik op de breakpoint (xs) zodat hij alleen op de kleinste schermbreedte dit doet.
Voor de rest heb ik ook de styling moeten aanpassen voor de groupslessonModal component omdat hij alleen op een bepaalde beeldbreedte een position position moet krijgen en anders gewoon een position relative:
de transform translate(0) zorgt ervoor dat de positie van de div niet verplaatst op de x of y as.
07-05-2024
Vandaag heb ik gewerkt aan het verbergen van een button wanneer de image slider helemaal links of rechts is in de carousel. Dit is hoe ik het heb aangepakt:
Ik heb eerst useState geïmporteerd en hier 2 constanten gemaakt die ik allebij true als waarde geef:
const [showLeftArrow, setShowLeftArrow] = useState(true);
const [showRightArrow, setShowRightArrow] = useState(true);Hierna importeer ik de useEffect en gebruik ik deze hook om de scroll event listener op te zetten op het galerij element. Deze activeert de checkScrollPositie functie om de buttons wel of niet te laten zien op basis van de scroll positie. Ook heeft deze hook cleanup logica om de event listener te verwijderen wanneer het component niet gebruikt wordt:
useEffect(() => {
const checkScrollPosition = () => {
if (ref.current) {
const { scrollLeft, scrollWidth, clientWidth } = ref.current;
setShowRightArrow(scrollLeft < scrollWidth - clientWidth);
setShowLeftArrow(scrollLeft > 0);
}
};
if (ref.current) {
ref.current.addEventListener('scroll', checkScrollPosition);
return () => {
if (ref.current) {
ref.current.removeEventListener('scroll', checkScrollPosition);
}
};
}
}, []);Verder voeg ik de classNames toe aan de buttons zodat de buttons de juiste styling meekrijgen en de button dus gehide wordt wanneer de slider positie helemaal links of rechts is:
<div className={classNames(styles.button, styles.left)}>
<IconButton
icon={<Icons.ArrowLeft />}
onClick={handlePreviousClick}
accessibleLabel={formatMessage('club-detail.gallery.left')}
className={classNames({ [styles.hide]: !showLeftArrow })}
/>
</div>
<div className={classNames(styles.button, styles.right)}>
<IconButton
icon={<Icons.ArrowRight />}
onClick={handNextClick}
accessibleLabel={formatMessage('club-detail.gallery.right')}
className={classNames({ [styles.hide]: !showRightArrow })}
/>
</div>16-05-2024
Vandaag heb ik gewerkt aan de 404 error pagina. Dit is hoe hij er eerst uit zag:
Dit is hoe hij er volgens het design uit moest zien:
Ik heb eerst een nieuwe 400 error folder moeten maken met daar de nieuwe pagina:
Zoals je ziet was er ook al een error 500 pagina. Ik heb deze pagina gekopieerd en aangepast naar hoe de 404 er uit moest zien. Verder heb ik de errorhandler pagina aangepast zodat je mijn pagina zou zien en niet de oude component:
In de nl.json file zorg ik ervoor dat de tekst er in staat zodat deze straks ook makkelijk te vertalen is naar het engels:
Zo laat ik de message zien in de html(als een child):
In de Icons index.js file zorg ik ervoor dat ik de Icon die ik nodig heb importeer en in de icon variabele lijst zet. Dit worden allemaal SVG components:
Hierna importeer ik ze zo in mijn html:
<Icons.UniqueBuildingLarge className={styles.cardLarge} />Voor de rest heb ik alles gestyled zodat ze er op de juiste manier uit zien:
.tilesContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 5rem;
@include breakpoint(md) {
flex-wrap: nowrap;
flex-direction: row;
}
}
.tiles {
color: black;
width: 10.4rem;
height: 10.4rem;
padding: 1.2rem;
padding-top: 0.6rem;
margin: 1rem;
border: 1px solid #d0d0d0;
border-radius: 1.6rem;
background-color: white;
box-shadow: 0px 6px 16px 0px #100f0d14;
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-evenly;
word-wrap: break-word;
&:hover {
color: #fff;
background-color: $color-neutral-01;
border-color: $color-neutral-01;
box-shadow: 0px 6px 16px 0px rgba(16, 15, 13, 0.32);
text-decoration: none;
transition: $transition-01;
.detail {
color: $color-neutral-04;
}
.cardLarge {
filter: brightness(0) invert(1);
}
}
@include breakpoint(sm) {
.line {
display: none;
}
.detail {
display: block;
}
.cardLarge {
margin-top: 2.5rem;
width: 5.6rem;
height: 5.6rem;
}
line-height: 1.4;
min-width: 18rem;
min-height: 18rem;
}
}
.link {
text-decoration: none;
}
.detail {
color: gray;
display: none;
font-size: 1.4rem;
}
.tileH4 {
line-height: 2rem;
font-size: 1.4rem;
margin-top: -0.5rem;
}
.cardLarge {
width: 4.8rem;
height: 4.8rem;
}
11-04-2024
Nadat ik klaar was met de ticket heb ik mijn commits gepushed en heb ik een pull request gedaan naar de branch "release/acceptance". Dit omdat hij hier eerst nog moet worden nagecheckt door verschillende testers en designers voor hij naar de main mag(de live website). In mijn PR heb ik de ticket nummer als titel en een link naar de ticket in de beschrijving:
11-04-2024
Ik heb 2 commits gemaakt waar ik in de eerste commit de nieuwe component heb aangemaakt en alle imports heb gefixt. En in de 2e commit heb ik de oude files verwijderd die dus niet meer gebruikt worden. Ik heb toen gepushed en weer een PR gedaan naar de release/accepance branch. Ook heb ik weer de ticket nummer in de titel gestopt en heb ik een link naar de ticket in de beschrijving gezet. Ook heb ik een bericht voor Jaer achtergelaten omdat hij nog naar de link in het onderdeel wou kijken/fixen.
Zo ziet de PR er uit:
12-04-2024
Vandaag heb ik gewerkt aan de card info. Deze component bevind zich in de confirmation details sectie van Contentful die gebruikt wordt in de payment confirmed/failed pagina. Nadat ik deze component gerefactored had heb ik deze gepushed naar github en kreeg ik automatisch deze checks:
Hij runt dus alle unit tests en checkt of er iets mis is maar ook maakt hij een live omgeving in Vercel. Hiermee kan de QA de component testen en zien of er iets mis mee is.
Ik zorg ervoor dat ik de ticket aanpas met notities voor de QA zodat hij ook gelijk weet waar hij naar moet kijken en dit proces dus soepel verloopt:
15-04-2024
Ik had nog feedback gekregen op de refactor card info en heb dit gefixt. Het ging om een styling die ik voor mezelf had toegepast die dus weg kon en 2 types die niet optioneel hoefden te zijn in de interface:
29-04-2024
Ik heb na het implementeren van deze ticket een PR aangemaakt die ik heb verplaatst naar de "peer review" tab:
Hierna heeft mijn buddy Jaer mijn PR nagecheckt en mij comments gegeven. Deze ben ik 1 voor 1 langs gegaan en heb ze na het toepassen van de wijzigingen geclosed. Hier een voorbeeld van de feedback:
Zoals je ziet moest ik ervoor zorgen dat de pagina niet scrollable was. Dit heb ik kunnen fixen en commiten. Ik gebruik commit(amend) om ervoor te zorgen dat ik niet elke keer een nieuwe push hoef te doen voor elke kleine aanpassing. Dit zorgt ervoor dat ik de wijzigingen die ik heb gemaakt toevoeg aan mijn laatste commit. Wel moet ik git push -f gebruiken om dit goed te laten gaan.
Verder zie je dat alle checks hier goed gaan. Dit gaat om de Unit tests en het Vercel deploy process:
Hier de Vercel deploy checks:
De visit preview link gebruik ik om aan de QA door te geven zodat zij de feature zo snel en makkelijk mogelijk kunnen testen. Dit zet ik overigens in de ticket:
Je ziet hier dat ik de link naar de preview van Vercel heb verstuurd met een extra comment waar hij deze feature kan vinden.
02-05-2024
Hier heb je een overzicht van de tickets waar ik aan gewerkt heb sinds het begin van het Sportcity project. Voor nu zijn het er 37:
17-04-2024
Ik gebruik "yarn test" om te checken of hij alle tests doorstaat. Voor het project Sportcity zijn er in totaal 527 unit tests aangemaakt. Voor ik een PR aanmaak test ik de code en kijk ik of alles goed gaat. Hier een voorbeeld van hoe de uitslag van de unit tests er uit zien:
Verder check ik of het component waar ik aan gewerkt heb het nog steeds doet op de lokale omgeving. Als ik geen problemen ondervind stuur ik de ticket door naar de "peer review" kolom. Als de code is nagecheckt en het klopt wordt deze verder gesleept naar de "ready for QA" afdeling(Quality assurance). Voor dit project is dat Mark die checkt of alles visueel klopt op verschillende devices browsers en ook of er geen padding veranderingen zijn vergeleken met de live versie:
18-04-2024
Ik heb vandaag na het refactoren van de radio button ook een unit test ervoor aangemaakt. Ik heb hiervoor een RadioButton.spec.tsx bestand aangemaakt:
Daarna ben ik de test gaan schrijven hier voor maakte ik een nieuwe functie "renderComponent" die de radioButton rendered en de properties van de IRadioButtonProps "override" dit zorgt ervoor dat ik alle values van de properties kan herschrijven in de tests:
describe('RadioButton', () => {
const renderComponent = (overrides: Partial<IRadioButtonProps> = {}) =>
render(
<RadioButton onChange={jest.fn()} value="" name="" id="" {...overrides}>
{overrides.children || ''}
</RadioButton>,
);Daarna ben ik de tests 1 voor 1 in comments op gaan schrijven:
it('renders children', () => {
const { getByText } = renderComponent({ children: 'Check-this' });
expect(getByText('Check-this')).toBeInTheDocument();
});in de it"" beschrijf ik wat de test doet. In de renderComponent geef ik de waarde 'Check-this' mee als child aan de RadioButton. En in de expect definieer ik wat de uitkomst moet zijn van de child. In dit geval dus 'Check-this'
Ik kan ook testen of een specifieke attribuut de juiste waarde meegeeft op deze manier:
expect(getByRole('radio')).toHaveAttribute('name', 'test-name');En als laatst is dit hoe ik check of de onChange werkt:
it('handles onChange', async () => {
const onChangeMock = jest.fn();
const { getByText } = renderComponent({
children: 'check-this',
name: 'radioButton',
onChange: onChangeMock,
});
await userEvent.click(getByText('check-this'));
expect(onChangeMock).toHaveBeenCalledTimes(1);Ik maak eerst een neppe onChange property en geef die mee in het renderComponent. Hierna maak ik een click userEvent die ik importeer uit de testing library die ervoor zorgt dat er op de children text wordt geklikt van het RadioButton component. In de expect pak ik de value van onChange(dus onChangeMock) en kijk of hij 1 keer gecalled is. Als hij hier gecalled is betekend dit dat de onChange werkt.
Hier de gehele RadioButton text:
import { render } from '@testing-library/react';
import { IRadioButtonProps, RadioButton } from './RadioButton';
import userEvent from '@testing-library/user-event';
describe('RadioButton', () => {
const renderComponent = (overrides: Partial<IRadioButtonProps> = {}) =>
render(
<RadioButton onChange={jest.fn()} value="" name="" id="" {...overrides}>
{overrides.children || ''}
</RadioButton>
);
it('renders children', () => {
const { getByText } = renderComponent({ children: 'Check-this' });
expect(getByText('Check-this')).toBeInTheDocument();
});
it('sets name on the input', () => {
const { getByRole } = renderComponent({ name: 'test-name' });
expect(getByRole('radio')).toHaveAttribute('name', 'test-name');
});
it('sets the id on the input if passed', () => {
const { getByRole } = renderComponent({ id: 'test-id' });
expect(getByRole('radio')).toHaveAttribute('id', 'test-id');
});
it('is unchecked by default', () => {
const { getByRole } = renderComponent();
expect(getByRole('radio')).not.toHaveAttribute('checked');
});
it('sets value checked if isChecked is passed as true', () => {
const { getByRole } = renderComponent({ checked: true });
expect(getByRole('radio')).toHaveAttribute('checked');
});
it('handles onChange', async () => {
const onChangeMock = jest.fn();
const { getByText } = renderComponent({
children: 'check-this',
name: 'radioButton',
onChange: onChangeMock,
});
await userEvent.click(getByText('check-this'));
expect(onChangeMock).toHaveBeenCalledTimes(1);
});
});Hier de uitkomst van alle tests van sportcity inclusief mijn test:
06-05-2024
Ik heb een lighthouse test gedaan op de mobiele website van Sportcity. Daar is dit uitgekomen:
Je ziet dat de performance erg slecht is vergeleken met de accessibility.
Dit is de performance grafief:
Je ziet dat CLS wel een goede score heeft. Dit betekend dat er geen elementen boven elkaar schuiven naarmate de schermbreedte veranderd.
Hier een overzicht van de secondes die de website verliest per metric:
Je ziet hier dat het grootste probleem ligt aan het renderen van Javascript en het laden van een image(in dit geval de header image):
Voor accessibility is er alleen een klein probleem met de semantische order van de HTML elementen in de navigatiebalk:
De best practices score was ook niet bepaald al te best en dit komt door de grote aantal third party cookies en missing source maps voor javascript:
In de toekomst support een nieuwere versie van Google geen third party cookies meer.
06-05-2024
Ik heb de Sportcity website in meerdere browsers getest. Op elke browser ziet de website er hetzelfde uit door de reset file die wordt geïmplementeerd. De website doet het daarom prima op elke browser:
Google chrome:
Safari:
Opera gx:
06-05-2024
Ook heb ik de website op verschillende devices getest. Op elke device ziet de website er ook gewoon hetzelfde uit door de reset file. Zo ziet de reset file er uit:
Samsung galaxy s22 ultra:
MacBook Pro:
Ipad Mini:
06-05-2024
Ik heb een tab test gedaan door de website en die ziet er prima uit:
Je ziet duidelijk een blauwe rand om de item heen en als je door tabt dan gaat de scherm ook soepel met je mee.
Wel kan de spacing tussen de lijnen om de item heen wel wat groter zijn. Hier een goed voorbeeld ervan:
Zoals je ziet gaat de lijn hier over de letters heen waardoor het er niet zo netjes uit ziet.
07-05-2025
Hier een Pagespeed insights test van de Sportcity website:
Hier zie je dat eigenlijk alleen de performance slecht scoort:
Hier een lijst aan de problemen die Pagespeed insights aangeeft:
Je ziet hier dat het grootste probleem ligt aan hoe de javascript gecodeerd is en dat de plaatjes nog vrij groot zijn.