refactor(frontend): zentrale Test-Infrastruktur + Component-Rendering-Tests + Coverage #269

Merged

niboer merged 6 commits from issue-frontend-test-optimization into main 2026-07-08 19:46:05 +02:00

Conversation 0 Commits 6 Files changed 48 +850 -256

niboer commented 2026-07-08 19:35:33 +02:00

Owner

Copy link

Allgemein

• refs #268 (Phase 1 und 2)
• refs #265 (Backend-Analog)

Altes Verhalten

• 27 Testdateien in frontend/src/tests/, alle ohne shared Infrastruktur
• 12+ readFileSync-Tests testen String-Inhalt statt Verhalten
• @testing-library/svelte und jsdom installiert aber ungenutzt
• Kein vitest.setup.ts, keine Coverage-Thresholds
• data-table.svelte: latenter Bug (fehlender {#each}-Index)
• backend/src/__tests__/no-umlauts.test.ts scannte gesamtes Projekt mit gemischten Ausnahmen
• Verzeichnisstruktur uneinheitlich: src/tests/ + src/test-utils/ (Backend: src/__tests__/ + src/test/)

Neues Verhalten

• Shared Test-Infrastruktur in frontend/src/test/: vitest.setup.ts, Factories (person, event, guest), Helpers (fetch, form, request, app-mocks), Barrel-Export
• 3 Component-Rendering-Tests (*.component.test.ts) ersetzen readFileSync-Tests:
  • status-badge: 13 Tests (alle Status-Kombinationen)
  • empty-state: 3 Tests (title/description/SVG)
  • data-table: 5 Tests (columns/data/rowIdKey/empty/loading)
• Coverage: v8-Provider, Thresholds (stmts 20%, branches 15%, funcs 15%, lines 20%)
• Bugfix: data-table.svelte — {#each}-Index deklariert (as row, i statt as row)
• Helper-Extraktion: events.test.ts nutzt shared createFormData, mockFetchOk, mockFetchError
• Verzeichnisstruktur vereinheitlicht: src/__tests__/ + src/test/ (analog Backend)
• no-umlauts-Tests getrennt: backend scannt backend/, frontend scannt frontend/
• Neue Abhaengigkeiten: @testing-library/jest-dom, @vitest/coverage-v8

Test-Hinweise

• cd frontend && npm run test — 28 Files, 921 Tests
• cd frontend && npx vitest run --coverage — Coverage mit Thresholds
• cd backend && npm test — 31 Files, 550 Tests

Checkliste

• use:testid an neuen <button>, <a>, <form>-Elementen gesetzt?
• Korrespondierender E2E-Test in e2e/specs/ angelegt?

### Allgemein - refs #268 (Phase 1 und 2) - refs #265 (Backend-Analog) ### Altes Verhalten - 27 Testdateien in `frontend/src/tests/`, alle ohne shared Infrastruktur - 12+ readFileSync-Tests testen String-Inhalt statt Verhalten - `@testing-library/svelte` und `jsdom` installiert aber ungenutzt - Kein `vitest.setup.ts`, keine Coverage-Thresholds - `data-table.svelte`: latenter Bug (fehlender `{#each}`-Index) - `backend/src/__tests__/no-umlauts.test.ts` scannte gesamtes Projekt mit gemischten Ausnahmen - Verzeichnisstruktur uneinheitlich: `src/tests/` + `src/test-utils/` (Backend: `src/__tests__/` + `src/test/`) ### Neues Verhalten - **Shared Test-Infrastruktur** in `frontend/src/test/`: `vitest.setup.ts`, Factories (person, event, guest), Helpers (fetch, form, request, app-mocks), Barrel-Export - **3 Component-Rendering-Tests** (`*.component.test.ts`) ersetzen readFileSync-Tests: - `status-badge`: 13 Tests (alle Status-Kombinationen) - `empty-state`: 3 Tests (title/description/SVG) - `data-table`: 5 Tests (columns/data/rowIdKey/empty/loading) - **Coverage**: v8-Provider, Thresholds (stmts 20%, branches 15%, funcs 15%, lines 20%) - **Bugfix**: `data-table.svelte` — `{#each}`-Index deklariert (`as row, i` statt `as row`) - **Helper-Extraktion**: `events.test.ts` nutzt shared `createFormData`, `mockFetchOk`, `mockFetchError` - **Verzeichnisstruktur vereinheitlicht**: `src/__tests__/` + `src/test/` (analog Backend) - **no-umlauts-Tests** getrennt: backend scannt `backend/`, frontend scannt `frontend/` - **Neue Abhaengigkeiten**: `@testing-library/jest-dom`, `@vitest/coverage-v8` ### Test-Hinweise - `cd frontend && npm run test` — 28 Files, 921 Tests - `cd frontend && npx vitest run --coverage` — Coverage mit Thresholds - `cd backend && npm test` — 31 Files, 550 Tests ### Checkliste - [x] `use:testid` an neuen `<button>`, `<a>`, `<form>`-Elementen gesetzt? - [x] Korrespondierender E2E-Test in `e2e/specs/` angelegt?

niboer added 6 commits 2026-07-08 19:35:33 +02:00

refactor(frontend): zentrale Test-Infrastruktur + Component-Rendering-Tests + Coverage ... 407dce300e

refs #268

Aktuelles:
- 27 Testdateien in frontend/src/tests/, alle ohne shared Infrastruktur
- 12+ readFileSync-Tests testen String-Inhalt statt Verhalten
- @testing-library/svelte und jsdom installiert aber ungenutzt
- Kein vitest.setup.ts, keine Coverage-Thresholds
- data-table.svelte hatte latenten Bug: fehlender Index in {#each}

Neu:
- test-utils/ mit vitest.setup.ts, factories (person, event, guest), helpers
  (fetch, form, request, app-mocks) und Barrel-Export index.ts
- vitest.config.ts: setupFiles, Coverage-v8 mit Thresholds (stmts 20%,
  branches 15%, funcs 15%, lines 20%), resolve.conditions fuer jsdom
- 3 .component.test.ts-Dateien ersetzen readFileSync-Tests:
  - status-badge: 13 Rendering-Tests (alle Status-Kombinationen)
  - empty-state: 3 Rendering-Tests (title/description/SVG)
  - data-table: 5 Rendering-Tests (columns/data/rowIdKey/empty/loading)
- data-table.svelte: #each-Index deklariert (row, i statt row)
- events.test.ts: nutzt shared createFormData/mockFetchOk/mockFetchError
- @testing-library/jest-dom und @vitest/coverage-v8 installiert

docs(frontend): Test-Infrastruktur in AGENTS.md und frontend-architektur.md dokumentiert ... 65b5df2645

refs #268

Aktuelles:
- frontend/AGENTS.md erwaehnte nur environment: node
- Keine Doku zu test-utils, Component-Tests, Coverage

Neu:
- frontend/AGENTS.md: Test-Arten, test-utils, Coverage dokumentiert
- docs/design/04-frontend-architektur.md: Test-Infrastruktur-Sektion mit
  Tabellen-Uebersicht

refactor(frontend): Verzeichnisstruktur an Backend angeglichen ... d03d311bed

refs #268

Aktuelles:
- frontend/src/tests/ (abweichend von backend/src/__tests__/)
- frontend/src/test-utils/ (abweichend von backend/src/test/)

Neu:
- frontend/src/tests/ -> frontend/src/__tests__/
- frontend/src/test-utils/ -> frontend/src/test/
- Alle Pfade in vitest.config.ts, AGENTS.md, docs/design/*.md
  und .opencode/prompts/ aktualisiert
- events.test.ts Import aktualisiert

Projektweit einheitlich:
  backend:  src/__tests__/ + src/test/
  frontend: src/__tests__/ + src/test/

fix(backend): no-umlauts.test.ts Pfad zu frontend/src/__tests__/ aktualisiert ... adce13d8e8

refs #268

Aktuelles:
- no-umlauts.test.ts ignorierte frontend/src/tests/groups.test.ts
- Nach Rename existiert der Pfad nicht mehr

Neu:
- Pfad auf frontend/src/__tests__/groups.test.ts aktualisiert

test(frontend): no-umlauts-Test nur fuer frontend/ ... 96b9bcfc63

refs #268

Aktuelles:
- frontend no-umlauts-Test existierte nicht
- Backend-Test scannte ueber frontend/ hinweg

Neu:
- frontend/src/__tests__/no-umlauts.test.ts erstellt, scannt nur frontend/
- Ausnahmen: i18n-Ordner, eslint.config.js, groups.test.ts
- backend/src/__tests__/no-umlauts.test.ts auf backend/ beschraenkt
- coverage/ in beiden Tests ausgeschlossen

chore(frontend): ueberfluessiges 'output' aus no-umlauts-EXCLUDE_DIRS entfernt ... 4fcfef863e

refs #268

Aktuelles:
- 'output' in EXCLUDE_DIRS: existiert nicht in frontend/

Neu:
- 'output' entfernt

niboer merged commit d2de8563fc into main 2026-07-08 19:46:05 +02:00

niboer deleted branch issue-frontend-test-optimization 2026-07-08 19:46:05 +02:00

niboer referenced this pull request from a commit 2026-07-08 19:46:07 +02:00

refactor(frontend): zentrale Test-Infrastruktur + Component-Rendering-Tests + Coverage (#269)

niboer referenced this pull request 2026-07-08 19:47:12 +02:00

refactor(frontend): zentrale Test-Infrastruktur + Component-Rendering-Tests + Coverage #268

niboer referenced this pull request 2026-07-08 19:59:49 +02:00

feat(frontend): Shared Helpers + Component-Rendering-Tests Stufe 1-2 #270

niboer referenced this pull request from a commit 2026-07-08 20:15:14 +02:00

feat(frontend): Shared Helpers + Component-Rendering-Tests Stufe 1-2 (#270)

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

component/backend

Backend-Komponente

  

component/docs

Dokumentation (README, design.md, AGENTS.md)

  

component/e2e

E2E-Testinfrastruktur (Playwright, Docker-E2E-Runner)

  

component/frontend

Frontend (Cloudflare Worker, BFF, UI)

  

component/infra

Infrastruktur (Docker, CI/CD, Build)

  

component/keycloak

Keycloak (Realm, Theme, Admin API)

  

prio/high

Hohe Prioritaet (blockierend/kritisch)

  

prio/low

Niedrige Prioritaet

  

prio/medium

Mittlere Prioritaet

  

type/bug

Fehler oder unerwartetes Verhalten

  

type/chore

Wartungs- und Konfigurationsaufgaben

  

type/feature

Neues Feature

  

type/refactor

Refactoring

  

type/test

Tests

No labels

component/backend

component/docs

component/e2e

component/frontend

component/infra

component/keycloak

prio/high

prio/low

prio/medium

type/bug

type/chore

type/feature

type/refactor

type/test

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

WompSchmiede/FamilienFeierPlaner!269

No description provided.