frontend elmélet

Frontend_ppt/react_js/testing.tex

@@ -0,0 +1,33 @@
+\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}