Zum Inhalt springen
Tibi Doku

Tests

Der Starter bringt eine Playwright-Suite mit: E2E im Browser, API-Tests, Admin-Smoke-Tests und visuelle Regression. Basis ist playwright.config.ts; tests/global-setup.ts legt deterministische Seed-Daten an, tests/global-teardown.ts räumt sie wieder auf.

Projekte und Ordner

Abschnitt betitelt „Projekte und Ordner“
Projekt Ordner Wofür
chromium tests/e2e/ Desktop-E2E gegen die Website
api tests/api/ API-Tests mit den Fixtures api/adminApi
admin tests/e2e-admin/ Admin-Smoke-Tests, eigene Basis-URL TEST_ADMIN_BASE_URL
mobile-iphonese, mobile-ipad tests/e2e-mobile/ Mobile-E2E (iPhone SE, iPad Mini)
visual-desktop, visual-iphonese, visual-ipad tests/e2e-visual/ Screenshots gegen Baselines in __screenshots__/

Rahmen aus playwright.config.ts: Die Suite startet keinen eigenen Web-Server (kein webServer-Schlüssel) — sie läuft gegen die erreichbare Basis-URL. TEST_BASE_URL kommt aus der Env-Variable CODING_URL, sonst aus .env, sonst http://localhost:3000; TEST_ADMIN_BASE_URL folgt derselben Kette aus CODING_TIBIADMIN_URL. HTML-Report ohne Auto-Open, Trace an, domcontentloaded als Standard (BrowserSync hält load sonst offen), Wiederholungen und Worker-Zahl hängen von CI ab. Anfragen mit Playwright im User-Agent umgehen die Basic-Auth (siehe Kommentar in playwright.config.ts).

Seed-Daten leben in tests/api/helpers/seed-data.ts, die Routen-Konstanten in tests/fixtures/test-constants.ts (SEEDED_TEST_CONTENT: Home, Pagebuilder-Vorschau, Kontakt, inaktiv — je mit translationKey und Pfad). Das Setup prüft / und /api/content und sät die Datensätze; _testdata markiert Seed-Einträge.

Starten

Abschnitt betitelt „Starten“
Befehle aus package.json und Makefile
yarn test                 # alles (playwright test)
yarn test:e2e             # nur tests/e2e (Projekt chromium)
yarn test:api             # nur tests/api (Projekt api)
yarn test:visual          # visuelle Regression (drei visual-Projekte)
yarn test:visual:update   # Baselines neu schreiben und committen
yarn test:report          # HTML-Report öffnen (playwright show-report)
npx playwright test tests/e2e/home.spec.ts   # einzelne Datei
npx playwright test -g "Titelwort"            # einzelner Test per Titel
make test test-e2e test-api test-visual       # gleiche Ziele via Makefile

Voraussetzung: Der Stack läuft und liefert unter der Basis-URL Website plus /api/... aus. Artefakte: playwright-report/ (HTML-Report) und test-results/ (Traces).

Mock-Betrieb

Abschnitt betitelt „Mock-Betrieb“

Ohne Backend arbeiten: MOCK=1 schaltet den API-Interceptor ein.

Frontend ohne Server starten
yarn start:mock   # MOCK=1 node scripts/esbuild-wrapper.js start

Wirkung (frontend/src/lib/mock.ts, frontend/src/lib/api.ts, esbuild.config.js):

  • Mit MOCK=1 steht __MOCK__ auf true; api() beantwortet Lesezugriffe aus frontend/mocking/*.json (Sammlungen content, medialib, navigation, comment).
  • Unterstützt Filter (auch $and/$or, $in, $regex), Sortierung, limit/offset, Projection, Einzelabruf per ID, Kommentar-Zähler und Lookups.
  • Ohne MOCK=1 ersetzt ein esbuild-Plugin das Mock-Modul durch einen No-Op — Mock-Daten landen nicht im Produktions-Bundle.

Grenzen:

  • Nur Lesen: Schreibaufrufe speichern nichts (_body bleibt ungenutzt); Sammlungen ohne Mock-Daten antworten mit 404.
  • tags.json liegt in frontend/mocking/, ist aber nicht im Mock-Register — Tag-Abfragen fallen auf 404.
  • Der Mock greift nur in api(); direkte fetch-Aufrufe, Server-Hooks und SSR laufen unverändert.
  • Im Compose-Stack ist MOCK Standard 0, in .env als Kommentar hinterlegt.

Eigene Tests ergänzen

Abschnitt betitelt „Eigene Tests ergänzen“
  1. E2E-Spec in tests/e2e/ anlegen und die Fixtures aus ../fixtures nutzen (waitForSpaReady, navigateToRoute, clickSpaLink).
  2. Selektoren per Rolle formulieren (getByRole), wie tests/e2e/home.spec.ts; Navigation nutzt immer domcontentloaded (die Fixture überschreibt goto/reload wegen BrowserSync).
  3. API-Spec in tests/api/ schreiben mit den Fixtures api/adminApi; Seed-Routen stehen in SEEDED_TEST_CONTENT, neue Seed-Daten gehören in tests/api/helpers/seed-data.ts plus _testdata-Flag.
  4. Visuellen Test in tests/e2e-visual/ mit prepareForScreenshot und expectScreenshot aufbauen; dynamische Bereiche per getDynamicMasks ausblenden und Baselines committen.

Verifiziert am e3f92eb 2026-10-14 (tibi-svelte-starter, package.json, playwright.config.ts, tests/, frontend/src/lib/mock.ts)