Ted Danson Day A TDD workshop

Hurdal 28.04.23

Forutsetninger

• ha med pc/mac med idé, installert npm
• en fordel med noe forkunskaper om javascript/typescript, React og react-redux

Beskrivelse

Denne workshopen tar sikte på å vise hvordan man kan jobbe for å utvikle en ordre-app i React ved hjelp av testdreven utvikling. Vi vil belyse testing av komponenter, kontainere, state selectors og util-funksjoner, samt ta en kikk på redux-håndtering. Deltakerene oppfordres til å jobbe 2 og 2 med parprogrammering.

1 Component

• Checkout 01-component
• kjør: npm ci
• kjør: npm run test --watch & npm start i hver sin terminal
• åpne fil App.tsx
• åpne Customer.spec.tsx / Customer.tsx. For hver test som er kommentert ut, skriv test-kode og implementer dernest i komponenten.
• • Gitt at et element er rendret med data-testid-attributt, kan du sjekke om dette er rendret vha @testing-library/react:
• • • expect(screen.getByTestId('some-test-id')).toBeInTheDocument();
• • • expect(screen.queryByTestId("some-test-id")).toBeNull());
• gjenta mønster fra ^^ i filen Oprder.spec.tsx / Order.tsx:
• • @testing-library/react tilbyr funksjonen screen.getByText(STRING) for å finne rendrede tekster i et dokument, med jest-expectations kan det brukes som:

expect(screen.getByText("some text")).toBeInTheDocument());
expect(screen.getByText("some other text")).not.toBeInTheDocument));

• • Hvis meny ikke er lastet skal komponenten vise "Vent mens vi henter menyen"
• • Hvis menyen feiler under innlasting, skal komponenten vise : "Vi klarer ikke å laste menyen nå"
• • Hvis menyen laster med { lager: 50, ipa: 100, porter: 50 }; (som definert i mock: ted-dansons-tdd/src/api/mocks/index.ts) skal den liste ut disse med som:

* lager: 50,-
* ipa: 100,-
* porter: 50,-

2 Data-fangst: selectors

• Checkout 02-selectors
• kjør: npm ci
• åpne filen src/redux/app/types.ts for å inspisere state-objektet
• åpne app.selectors.spec.ts & app.selectors.ts
• følg anvisningene i spec-fil

3 Data-fangst: reducers

• Checkout 03-reducer
• kjør: npm ci
• kjør: git submodule update
• åpne app.reducer.spec.ts & app.reducer.ts
• følg anvisningene i spec-fil

4 Data-fangst: saga

• Checkout 04-saga
• kjør: npm ci
• åpne app.saga.spec.ts & app.saga.ts
• fullfør de tre testene i app.saga.spec.tsx med test og kode / implementasjon

5 Containers / Connection

• Checkout 05-container
• kjør: npm ci
• imoplementer de manglende testene og kode for mapping av state properties og dispatch-funksjoner