\section{Tesztelés} \begin{frame}{Miért teszteljünk?} \begin{block}{Az alapmotiváció} A tesztek nem csak hibákat fednek fel --- \textbf{dokumentálják a szándékolt viselkedést} és biztosítékot adnak arra, hogy jövőbeli módosítások nem törnek el meglévő funkciókat. Refaktorálás és csapatmunka esetén különösen értékes. \end{block} \end{frame} \begin{frame}{Tesztelési szintek} \begin{itemize} \item \textbf{Unit teszt:} egyetlen függvény, hook vagy logikai egység viselkedését ellenőrzi, függetlenül a többitől. Gyors, izolált. \item \textbf{Integrációs teszt:} több komponens vagy réteg együttműködését vizsgálja --- pl. egy form elküldésének teljes folyamata, beleértve az állapotkezelést. \item \textbf{E2E teszt} (End-to-End): egy valódi böngészőben szimulál felhasználói lépéseket --- pl. Playwright-tal. Lassabb, de a legvalóságosabb visszajelzést adja. \end{itemize} \end{frame} \begin{frame}{Ajánlott eszközök} \begin{itemize} \item \textbf{Vitest:} modern, Vite-alapú tesztfuttató --- gyors, könnyen konfigurálható, ES module-barát. \item \textbf{Jest:} régebben az iparági standard, nagyon elterjedt, rengeteg dokumentáció. \item \textbf{React Testing Library:} komponenseket \emph{felhasználói szemszögből} tesztel --- nem implementációs részleteket, hanem azt, amit a felhasználó lát és tehet. \item \textbf{Mock Service Worker (MSW):} API válaszokat szimulál hálózati szinten --- nem kell valódi szerver a tesztekhez. \end{itemize} \end{frame} \begin{frame}{Mit érdemes tesztelni?} \begin{itemize} \item \textbf{Kritikus folyamatok:} regisztráció, bejelentkezés, fizetés, jogosultság-ellenőrzés. \item \textbf{Hibaállapotok:} mi történik, ha a hálózat megszakad, a szerver hibát ad, az input érvénytelen? \item \textbf{Szélsőértékek (edge case):} üres lista, nagyon hosszú szöveg, speciális karakterek. \item \textbf{Hozzáférhetőség:} a kritikus UI elemek megfelelő ARIA szerepkörrel és felirattal rendelkeznek-e? \end{itemize} \end{frame}