Projekt: Testy jednostkowe

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)

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<HTMLFormElement>) {
+	const formDataJson = getFormData(event.currentTarget)
+	/*
+       {
+         query: 'whatever'
+       }
+     */
+}
+
+function Form() {
+	return (
+		<form onSubmit={onSubmit}>
+			<input name='query'/>
+			<button>Search</button>
+		</form>
+	)
+}
+```
+
+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.

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<HTMLFormElement>) => getFormData(event.currentTarget))
+
+		render(<SignInForm onSubmit={onSubmit}/>)
+	})
+})
+
+describe('signIn', () => {
+	it.todo('should return `wrong email` error')
+	it.todo('should return `invalid password` error')
+	it.todo('should authenticate user')
+})

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')
+})

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')
+})