lagt inn mine erfaringer og formatert seksjoner

README.md

@@ -131,19 +131,46 @@ pnpm test:run # 1 gjennomkjørign
 
 ```
 
-Vi har per nå 18 tester frodelt på 5 filer:
 
-**sortAndFilterMovies.test.ts** er ren logikk uten React. Den tester filtreringen på minmumsvurdering etter alle tre sorteringene og at funksjonen ikke endrer lista den får inn.
-
-**SeachField.test.tsx** denne tester brukerinteraksjon. Feltet finnes via getByLabelText, som betyr at koblingen mellom htmlFor og id er riktig. Dette er samme kobling en skjermleser bruker. Skrivingen med userEvent bekrefter at feltet er kontrollert. Det melder fra oppover for hvert tastetrykk i stedet for å holde egen state.
-
-**Sidebar.test.tsx** er for React State. Å klikke på pil ai sidebar endrer både menyen og aria-expanded samtidig, og aria-current settes riktig på favorittsiden.
-
-**MovieCard.test.tsx** – props og snapshot. Sjekker at tittel og rating vises, og at favorittknappen kaller tilbake med riktig film-id.
-
-**MovieList.test.tsx** er for mocking. vi.mock bytter ut API-modulen, og testen sjekker i itillegg at global fetch aldri kalles. Dette er slik at vi vet at testene ikke går ut på nettet.
-
-Testoppsettet ligger som det er nå i src/test/setup.ts . Den inneholder en stub for window.matchMedia som ikke finnes i jsdom. Uten den kr@sjer alt som rendrer Sidebar, fordi useMediaQuery kaller den ved føeste render...
+Vi har per nå 18 tester fordelt på 5 filer. De dekker de fire testtypene kravene
+ber om. Snapshot, props, state og brukerinteraksjon, samt mocking så testene
+ikke henter data.
+
+**sortAndFilterMovies.test.ts** er ren logikk uten React. Den tester at
+filtreringen på minimumsvurdering fjerner riktige filmer, at alle tre
+sorteringene gir riktig rekkefølge, og at funksjonen ikke endrer lista den får
+inn.
+
+**MovieCard.test.tsx** er props og snapshot. Den sjekker at tittel og rating fra
+props faktisk vises, og at favorittknappen kaller tilbake med riktig film-id.
+Snapshotet venter til skuespillerne er lastet før det tas. Gjør den ikke det
+bytter kortet utseende midt i, og testen feiler tilfeldig. Snapshot-fila ligger i
+src/components/__snapshots__ og er committet. Uten den har ikke testen noe å
+sammenligne med.
+
+**Sidebar.test.tsx** er for React state. Å klikke på pila i sidebaren endrer
+både menyen og aria-expanded samtidig, og aria-current settes riktig på
+favorittsiden.
+
+**SearchField.test.tsx** tester brukerinteraksjon. Feltet finnes via
+getByLabelText, som betyr at koblingen mellom htmlFor og id er riktig. Det er
+samme kobling en skjermleser bruker. Skriving med userEvent bekrefter at feltet
+er kontrollert. Det melder fra oppover for hvert tastetrykk i stedet for å holde
+egen state.
+
+**MovieList.test.tsx** er for mocking. vi.mock bytter ut API-modulen, og testen
+sjekker i tillegg at global fetch aldri kalles. Det er den delen som faktisk
+beviser at testene ikke går ut på nettet.
+
+Testoppsettet ligger i src/test/setup.ts og kjøres før hver testfil. Den
+inneholder en stub for window.matchMedia, som ikke finnes i jsdom. Uten den
+krasjer alt som rendrer Sidebar, fordi useMediaQuery kaller den ved første
+render.
+
+I src/test/utils.tsx ligger to hjelpere vi bruker på tvers av testene. lagFilm
+lager en testfilm så vi slipper å skrive ut alle feltene hver gang, og
+renderMedQuery pakker komponenten i en QueryClientProvider. Alt som bruker
+TanStack Query krasjer uten en sånn rundt seg.
 
 ### Manuell testing
 
@@ -352,6 +379,32 @@ KI ble også brukt til å:
 
 #### Clemens
 
+Jeg har hovedsakling brukt Claude av Anthropic gjennom prosjektet. Claude har blitt brukt som en veileder og ikke til å generere all koden for meg. 
+
+KI er brukt til:
+
+- Forklaring av ting jeg ikke hadde mye kunnskap til før, da dette er første gang jeg bruker mange av ressursene vi skulle i prosjektet. Jeg stilte spørsmål om hooks, hvordan man benytter seg av komponenter og hvordan mange av de forksjellige filene henger og holder sammen.
+- Diskutering av løsninger før jeg begynte å skrive kode. For eksmepel var det å lage en mobillayout litt mer krevende og hjalp med å bestemme hvilke mengde pixler som hadde passet bra til f.eks knappe størrelser. 
+- Feilsøking av diverse problemer. 401 mot TMDB, CSS som ikke virket eller så veldig rar ut. Det var veldig nyttig da mye av koden man skriver her ikke nødvendigvis er "feil", men bare ikke er veldig intuitiv eller ikke er best practice. Da kunne Claude fortelle om alternativer og andre muligheter man kunne prøve seg på. 
+- Tilgjengelighet på mobil, som f.eks hvilke aria-attributter som trengs og hvorfor. Her var det igjen hjelpelig med noen som fortalte meg hvor stor kanpper måtte være for å kunne trykkes på med tommelen på mobil før jeg kunne teste det selv på serveren.
+- Oppsett av Vitest og de første testene. Claude gidde også en god forklaring hva de forskjellige testene gjorde og hvorfor de var nyttige å benytte seg av. 
+
+Erfaringer:
+
+KI var klart best på feilsøking. Flere av feilene vi hadde var slik at ingenting skjedde i det hele tatt, og det er nesten umulig å google. Da var KI en super hjelp da den kunne få en bedre oversikt over filene noe i til tider ikke fikk til. 
+
+Jeg tok med først god tid til å fortså kode som KI foreslo slik at jeg fikk utbytte av lærestoffet og ikke bare kopierte og limte inn koden. Det å få Claude til å forklare koden til meg først hjalp også meg med å kunne gjøre små endringer senere uten bruk av KI samt å kunne justere koden til KI før jeg pushet og merget det til main. 
+
+Claude var en stor hjelp i spesielt CSS. Dette merket jeg da vi alle skulle gjøre våre egen CSS som ikke laget veldig fin sammenhengende CSS gjennom nettsiden. Jeg kunne da benytte meg av å screenshotte endringer som noen andre gjorde på nettsiden og få claude til å gi forklag til CSS som kunne passe. Dette brukte jeg til å kopiere CSS fra MovieCard til å lage CSS på Sidebar. 
+
+Det som ikke var like bra ved bruk av KI var når den ville gjøre veldig store endringer og den ville endre kode til mine gruppe medlemmer. Her måtte jeg gjøre flere små endringer istedet og passe på at den holdt seg innenfor rammene til "issuet" som jeg skulle løse på den branchen og ikke bare gi meg masse tips til ting som ikke var relevant til det jeg jobbet med. 
+
+Når jeg hadde problemer med min personlige kode, spurte jeg Claude også om å gi meg flere alternativ til problemet og ikke bare ett sett med kode. Dette lærte meg nyansene og de forskjellige måtene jeg kunne håndtere feil i koden på, uten å føle at KI gjorde alt for meg. 
+
+Det å la KI hjelpe ved lagingen av testene hjalp oss også å finne ekte feil i koden. Vi merket da at MovieList manglet key og MovieCard sender en tom streng som src når en film ikke har plakat. Begge ga advarsler som var nyttige. 
+
+
+
 #### Albert
 
 Oversikten under er generert av Claude basert på all chat-historikken min fra autust-september (17.09.2026). Utover det Claude har lagt inn i oversikten er KI generelt brukt til feilsøking, forklaring av teknologier vi bruker som react og typescript. I tillegg er KI brukt for å effektivisere enkelte oppgaver slik som å søke gjennom historikk i github, o.l.