Kvalitetskontroll

Linters/Formatterare

Javascript/Typescript

Använd er av de ESLint regler som NextJS och SvelteKit erbjuder.

• Se till att alla har en ESLint plugin installerad i sin Editor så att man tidigt får hjälp av lintningen.
• Se till att alla har en Prettier plugin installerad i sin Editor så att man lätt kan formatera sin kod.

Automatisering

Lokal Git

Det kan ibland vara bra att automatisera att man kör sina enhetstester, end-to-end tester, lintning baserat vid olika “events” i git. Då är ett bra paket att utnyttja Husky, där är det lätt att sätta upp så kallade “git hooks”. Som kan starta olika skript baserat på events. Värt att tänka på här, är att de kommandon (ex: commit) man ofta kör i git ska man nog inte ha hooks på, då de gör att git blir långsammare. Men att ha det på t.ex push är riktigt bra.

GitHub

Med hjälp av GitHub Actions så är det lätt att automatisera enhetstester, end-to-end tester (med t.ex Playwright), lintning osv med. Och då se till så att man inte kan avsluta en “pull request” utan att den actionen är har lyckats köra.

Tänk på att det kostar github actions minuter att göra det här.

Några GitHub actions

• Eslint
• Playwrigth

Datavalidering

Vi rekommenderar ju att vi använder oss av Typescript för all vår frontend-kod. Och för att säkra att den data som vi får från API:er etc verkligen stämmer överens med våra Typescript typer och interfaces.

För att slippa skriva en massa “type guards” så är det väldigt smidigt att använda sig av paketet Zod. Med Zod så definierar du scheman, som sedan kan “infer”:as till Typescript typer.

Zod går även utmärkt att använda för validering av formulärdata.

Testning

Enhetstestning

Enhetstestning används främst för att testa logik som är pure. Funktioner som har en tydlig uppgift och saknar side effects. Det baseras på att vi som utvecklare också vet vad man ska lägga i dessa funktioner. Ett exempel på hur man kan strukturera kod och filer är pure components, logiska komponenter samt helperfunktioner.

Pure components är komponenter som givet ett visst state alltid producerar samma resultat. Dessa är i och med det enkla att testa med t.ex. snapshots eller liknande.

"Helperfunktioner" är funktioner som också i stort sett alltid är pure och saknar side effects. Dessa är alltid bra att enhetstesta.

Logiska komponenter är svårare att testa då dessa ofta har referenser till variabler och state som är baserat på mer än komponentens input. Detta leder till att man måste mocka väldigt mycket och i sin tur leder det till test som är plottriga och svårlästa. Om man har en välstrukturerad kod så är behovet av att testa dessa komponenter inte lika stort då den viktiga logiken ligger i helpers och själva UI:t testas via de UI komponenter som då ska vara “pure”.

Test runners

• Jest För ramverk som inte bygger på Vite så är Jest det bibliotek som vi använder för enhetstestning. Det är inte lika snabbt som Vitest men det funkar.
• Vitest Används vite så bör också Vitest användas tack vare dess hastighet. Vitest kan även användas för att testa komponenter om man kompleterar med @testing-library/svelte och använder deras render-funktion för att “rendera” komponenter med specificerad data.