117991daebcef14303d05db01177cf86431a9312
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
npm install
Elérhető Scripts
Fejlesztési szerver indítása
npm run dev
Az alkalmazás http://localhost:5173 címen érhető el.
Tesztek futtatása
npm test
Build
npm run build
Tesztek
A projekt 5 tesztet tartalmaz:
- hozzáadás működik - Ellenőrzi, hogy új teendő sikeresen hozzáadódik-e az listához
- törlés működik - Ellenőrzi, hogy a törlés gomb működik és eltávolítja a teendőt
- üres input nem adódik hozzá - Ellenőrzi, hogy üres input nem adódik az listához
- ü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
- 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
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
npm run lint
Preview (build után)
npm run preview
Description
Languages
JavaScript
67.7%
CSS
25.7%
HTML
6.6%