Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu16:theorie:b_testing [2026/06/28 22:59] – gkoch
+++ de:modul:m291:learningunits:lu16:theorie:b_testing [2026/06/28 23:14] (aktuell) – gkoch
@@ Zeile 54: / Zeile 54: @@
 </WRAP>
+<WRAP center round box 80%>
 ^ Eigenschaft ^ Unit Test ^
 | Geschwindigkeit | Sehr schnell (Millisekunden) |
@@ Zeile 59: / Zeile 60: @@
 | Echte API nötig? | Nein |
 | Testet | Eine einzelne Funktion |
+</WRAP>
 ===== Integration Test =====
@@ Zeile 65: / Zeile 67: @@
 <WRAP center round box 80%>
-{{ :m291:lu16:integration_test_vitest.png?direct&700 | Vitest – Integration Test Screenshot }}\\
+{{:de:modul:m291:learningunits:lu16:theorie:integration_test_fetch.png?nolink&600| Vitest – Integration Test}}\\
-//[Platzhalter: Screenshot Vitest mit Integration Test und gemocktem fetch]//
+//Vitest mit Integration Test//
 </WRAP>
@@ Zeile 90: / Zeile 92: @@
 </WRAP>
-<WRAP center round info 80%>
+<WRAP center round 80% box>
-**Warum ''fetch'' mocken?** Im Test soll nicht die echte MockAPI.io aufgerufen werden. Mit ''vi.stubGlobal'' wird ''fetch'' durch eine Fake-Version ersetzt, die sofort antwortet – ohne Internetverbindung, immer gleich.
+**Warum ''fetch'' mocken?** Im Test soll nicht die echte MockAPI.io aufgerufen werden. Mit ''vi.stubGlobal'' wird ''fetch'' durch eine Fake-Version ersetzt, die sofort antwortet – ohne Internetverbindung.
 </WRAP>
+<WRAP center round 80% box>
 ^ Eigenschaft ^ Integration Test ^
 | Geschwindigkeit | Schnell (Millisekunden) |
@@ Zeile 99: / Zeile 101: @@
 | Echte API nötig? | Nein (gemockt) |
 | Testet | Fetch + Datenverarbeitung zusammen |
+</WRAP>
-----
 ===== End-to-End Test (E2E) =====
 Ein E2E Test öffnet einen **echten Browser** und simuliert, wie eine Nutzerin oder ein Nutzer mit der App interagiert – Klicks, Formular-Eingaben, Navigation.
-<WRAP center round box 80%>
-{{ :m291:lu16:e2e_playwright.png?direct&700 | Playwright – UI mit laufendem Test }}\\
+{{:de:modul:m291:learningunits:lu16:theorie:e2e_playwright.gif | Playwright – UI mit laufendem Test }}\\
-//[Platzhalter: Screenshot Playwright Test Runner mit Browserfenster und Testergebnis]//
+//Screenshot Playwright Test Runner mit Browserfenster und Testergebnis//
-</WRAP>
 **Werkzeug:** [[https://playwright.dev|Playwright]]
@@ Zeile 142: / Zeile 142: @@
 <WRAP center round info 80%>
-**Warum ''networkidle''?** Die FAQ-Daten werden von MockAPI.io geladen. ''waitUntil: 'networkidle''' wartet, bis alle Netzwerkanfragen abgeschlossen sind – erst dann starten die Tests.
-</WRAP>
 ^ Eigenschaft ^ E2E Test ^
 | Geschwindigkeit | Langsam (Sekunden pro Test) |
 | Browser nötig? | Ja (Chromium, Firefox, WebKit) |
 | Echte API nötig? | Ja (oder Staging-URL) |
-| Testet | Vollständiger Nutzerfluss im Browser |
+| Testet | Vollständige Interaktion eines Users im Browser |
+</WRAP>
-----
 ===== Manuelles Testen =====
@@ Zeile 162: / Zeile 158: @@
   * Accessibility mit Tastatur und Screenreader prüfen
-<WRAP center round box 80%>
+{{:de:modul:m291:learningunits:lu16:theorie:screenshot_2026-06-28_at_23.07.29.png?direct&1100| Chrome DevTools – Responsive Design Mode }}\\
-{{ :m291:lu16:devtools_responsive.png?direct&700 | Chrome DevTools – Responsive Design Mode }}\\
+//Screenshot Chrome DevTools mit aktivierter Device Toolbar//
-//[Platzhalter: Screenshot Chrome DevTools mit aktivierter Device Toolbar, verschiedene Geräte-Voreinstellungen sichtbar]//
-</WRAP>
-**Werkzeug: Chrome DevTools (kostenlos, im Browser integriert)**
+**Werkzeug: Chrome DevTools (im Browser integriert)**
 Öffnen Sie die DevTools mit **F12**, dann klicken Sie auf das **Geräte-Symbol** oben links oder drücken Sie **Ctrl+Shift+M**. Sie können nun die Breite frei einstellen oder ein Gerät aus der Liste wählen.
 Empfohlene Testbreiten:
+<WRAP center round box 80%>
 ^ Gerät ^ Breite ^
-| Mobile (z.B. iPhone SE) | 375 px |
+| Mobile (z.B. iPhone SE) | bis 375px |
-| Tablet (z.B. iPad) | 768 px |
+| Tablet (z.B. iPad) | 768px |
-| Desktop | 1280 px |
+| Desktop | ab 1280px |
+</WRAP>
 ==== Testprotokoll ====
 Für das manuelle Testen wird ein **Testprotokoll** geführt. Es dokumentiert, was getestet wurde, was erwartet wurde und was tatsächlich passiert ist.
+<WRAP center round box 80%>
 ^ # ^ Testfall ^ Erwartetes Resultat ^ Effektives Resultat ^ Status ^
 | 1 | Seite aufrufen | FAQ-Liste wird geladen und angezeigt | | ☐ ✅  ☐ ❌ |
@@ Zeile 191: / Zeile 186: @@
 | 7 | Echtes Smartphone | App funktioniert, Klick öffnet die Antwort | | ☐ ✅  ☐ ❌ |
 | 8 | Firefox oder Edge | App lädt und verhält sich gleich wie in Chrome | | ☐ ✅  ☐ ❌ |
+</WRAP>
-----
-===== Vergleich: Die vier Testarten =====
-^ ^ Unit Test ^ Integration Test ^ E2E Test ^ Manueller Test ^
-| **Werkzeug** | Vitest | Vitest | Playwright | Mensch + DevTools |
-| **Geschwindigkeit** | ⚡ ms | ⚡ ms | 🐢 Sekunden | 🐢🐢 Minuten |
-| **Browser?** | Nein | Nein | Ja | Ja |
-| **Echte API?** | Nein | Nein (Mock) | Ja | Ja |
-| **Testet** | 1 Funktion | Mehrere Schritte | Nutzerfluss | Visuell, UX, A11y |
-→ [[de:modul:m291:learningunits:lu16:theorie:3_deploy|Bundling & Deploy]]