88 lines
2.1 KiB
Markdown
88 lines
2.1 KiB
Markdown
# TodoList React - Vitest Projekt
|
|
|
|
Ez egy egyszerű React TodoList komponens, amely Vitest keretrendszerrel tesztelve van.
|
|
|
|
## Funkciók
|
|
|
|
- **Új teendő hozzáadása**: Az input mezőbe írhat és az "Hozzáadás" gombra kattintva vagy Enter billentyűt nyomva adhat hozzá új teendőt
|
|
- **Teendő törlése**: Minden teendő mellett van egy "Törlés" gomb a teendő eltávolításához
|
|
- **Üres input kezelése**: Az alkalmazás nem engedélyez üres vagy csak szóközöket tartalmazó teendőket
|
|
|
|
## Projekt Struktúra
|
|
|
|
```
|
|
src/
|
|
├── components/
|
|
│ ├── TodoList.jsx # TodoList komponens
|
|
│ └── TodoList.test.jsx # TodoList tesztek
|
|
├── App.jsx # Fő alkalmazás komponens
|
|
├── setup.js # Vitest setup (jest-dom matchers)
|
|
└── ...
|
|
```
|
|
|
|
## Telepítés
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## Elérhető Scripts
|
|
|
|
### Fejlesztési szerver indítása
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Az alkalmazás [http://localhost:5173](http://localhost:5173) címen érhető el.
|
|
|
|
### Tesztek futtatása
|
|
|
|
```bash
|
|
npm test
|
|
```
|
|
|
|
### Build
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
## Tesztek
|
|
|
|
A projekt 5 tesztet tartalmaz:
|
|
|
|
1. **hozzáadás működik** - Ellenőrzi, hogy új teendő sikeresen hozzáadódik-e az listához
|
|
2. **törlés működik** - Ellenőrzi, hogy a törlés gomb működik és eltávolítja a teendőt
|
|
3. **üres input nem adódik hozzá** - Ellenőrzi, hogy üres input nem adódik az listához
|
|
4. **üres input csak szóközökkel nem adódik hozzá** - Ellenőrzi, hogy csak szóközöket tartalmazó input nem adódik az listához
|
|
5. **Enter billentyű is működik a hozzáadáshoz** - Ellenőrzi, hogy Enter billentyűvel is lehet teendőt hozzáadni
|
|
|
|
### Tesztek futtatása
|
|
|
|
```bash
|
|
npm test
|
|
```
|
|
|
|
## Technológiák
|
|
|
|
- **React** - UI komponens keretrendszer
|
|
- **Vite** - Build és fejlesztési szerver
|
|
- **Vitest** - Teszt keretrendszer
|
|
- **@testing-library/react** - React komponens teszteléshez
|
|
- **@testing-library/jest-dom** - DOM matcher-ek
|
|
|
|
## Egyéb Parancsok
|
|
|
|
### ESLint
|
|
|
|
```bash
|
|
npm run lint
|
|
```
|
|
|
|
### Preview (build után)
|
|
|
|
```bash
|
|
npm run preview
|
|
```
|