diff --git a/README.md b/README.md index a9f1ff0..e7c9a03 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,10 @@ - [x] [JSX, podstawy budowania komponentów](docs/01-podstawy/README.md) - Interaktywność i dynamika aplikacji - - [x] [Stan komponentu (`useState`)](docs/02-stan-komponentu/README.md) - - [x] [Komunikacja z API](docs/03-http/README.md) - - [x] [Formularze](docs/04-form/README.md) + - [x] [Stan komponentu (`useState`)](docs/02-stan-komponentu/README.md) + - [x] [Komunikacja z API](docs/03-http/README.md) + - [x] [Formularze](docs/04-form/README.md) - [x] [Routing](docs/05-routing/README.md) - [x] [Globalny stan aplikacji - Context API](docs/06-context/README.md) -- [ ] [TypeScript](docs/07-typescript/README.md) +- [x] [TypeScript](docs/07-typescript/README.md) +- [ ] [Testy jednostkowe](./docs/08-testy-jednostkowe/README.md) diff --git a/docs/08-testy-jednostkowe/README.md b/docs/08-testy-jednostkowe/README.md new file mode 100644 index 0000000..2b02e8a --- /dev/null +++ b/docs/08-testy-jednostkowe/README.md @@ -0,0 +1,67 @@ +# Projekt: Testy jednostkowe + +Na potrzeby przeprowadzenia testów w katalogu [`dummy`](../../dummy) stworzona została przykładowa aplikacja. + +Przed przystąpieniem do zadań koniecznie zainstaluj zależności. + +Wszelkie ścieżki podane poniżej są relatywne dla katalogu wspomnianego projektu - [`dummy`](../../dummy). + +--- + +Aplikację _Dummy_ uruchom z poziomu katalogu [`dummy`](../../dummy) poleceniem `npm run dev`. + +Testy jednostkowe możesz uruchomić z poziomu katalogu [`dummy`](../../dummy) poleceniem `npm run test`. + +--- + +## Funkcje + +W pliku [`@/lib/form/get-data.ts`](../../dummy/@/lib/form/get-data.ts) znajduje się funkcja `getFormData`. + +Jej zadaniem jest zwrócenie wartości formularza. + +**Przykład** + +```tsx +import {FormEvent} from 'react'; +import {getFormData} from './get-data'; + +function onSubmit(event: FormEvent) { + const formDataJson = getFormData(event.currentTarget) + /* + { + query: 'whatever' + } + */ +} + +function Form() { + return ( +
+ + +
+ ) +} +``` + +W pliku [`@/lib/form/get-data.ts`](../../dummy/@/lib/form/get-data.ts) napisz testy weryfikujące poprawność działania +tej funkcji. + +## _React hooks_ + +W pliku [`@/lib/use-toggle.ts`](../../dummy/@/lib/use-toggle.ts) znajduje się funkcja `useToggle`. + +Jej zadaniem jest zwrócenie stanu typu `boolean` oraz funkcji bezparametrowej zmieniającej ten stan na przeciwny. + +W pliku [`@/lib/use-toggle.test.tsx`](../../dummy/@/lib/use-toggle.test.tsx) napisz testy weryfikujące poprawność +działania tej funkcji. + +## Interaktywne komponenty + +W pliku [`@/lib/auth/sign-in.tsx`](../../dummy/@/lib/auth/sign-in.tsx) znajduje się komponent `SignInForm`. + +Jego zadaniem jest wyświetlenie formularza zawierającego pola `email` oraz `password`. + +W pliku [`@/lib/auth/sign-in.test.tsx`](../../dummy/@/lib/auth/sign-in.test.tsx) napisz testy weryfikujące poprawność +działania tego komponentu. diff --git a/dummy/@/lib/auth/sign-in.test.tsx b/dummy/@/lib/auth/sign-in.test.tsx new file mode 100644 index 0000000..52f34d6 --- /dev/null +++ b/dummy/@/lib/auth/sign-in.test.tsx @@ -0,0 +1,23 @@ +import {describe, expect, it, vi} from 'vitest'; +import {FormEvent} from 'react' +import {signIn, SignInForm} from './sign-in' +import {render, screen} from '@testing-library/react'; +import {getFormData} from '../form/get-data'; + +describe('SignInForm', () => { + it.todo('should display email input') + it.todo('should display password input') + it.todo('should display sign in button') + + it.todo('should be submitted with email and password', () => { + const onSubmit = vi.fn((event: FormEvent) => getFormData(event.currentTarget)) + + render() + }) +}) + +describe('signIn', () => { + it.todo('should return `wrong email` error') + it.todo('should return `invalid password` error') + it.todo('should authenticate user') +}) diff --git a/dummy/@/lib/form/get-data.test.ts b/dummy/@/lib/form/get-data.test.ts new file mode 100644 index 0000000..c8dec04 --- /dev/null +++ b/dummy/@/lib/form/get-data.test.ts @@ -0,0 +1,6 @@ +import {describe, expect, it} from 'vitest'; +import {getFormData} from './get-data' + +describe('getFormData', () => { + it.todo('should return form data as JSON') +}) diff --git a/dummy/@/lib/use-toggle.test.tsx b/dummy/@/lib/use-toggle.test.tsx new file mode 100644 index 0000000..cc82aac --- /dev/null +++ b/dummy/@/lib/use-toggle.test.tsx @@ -0,0 +1,7 @@ +import {describe, expect, it} from 'vitest'; +import {useToggle} from './use-toggle' + +describe('useToggle', () => { + it.todo('should return initial value') + it.todo('should return toggled value') +})