WompSchmiede/FamilienFeierPlaner
SHA256
1
1
Fork 0
Code Issues 18 Pull requests Projects Releases 5 Packages 3 Wiki Activity Actions

chore(frontend): fehlende testids an Dashboard, Sidebar, Toast und Personenliste ergaenzen #260

New issue
Closed
opened 2026-07-06 21:50:33 +02:00 by niboer · 2 comments
niboer commented 2026-07-06 21:50:33 +02:00
Owner
Copy link

Beschreibung

An mehreren Stellen im Frontend fehlen data-testid-Attribute, die von E2E-Tests verwendet werden koennten. Diese sollen nachgeruestet werden.

Betroffene Bereiche

Dashboard (/app/dashboard)

Element testid-Vorschlag
Ueberschrift "Naechste Feier" heading-next-event
Ueberschrift "Offene RSVPs" heading-open-rsvps
Ueberschrift "Personen" (Dashboard-Widget) heading-persons

Sidebar (+layout.svelte)

Element testid-Vorschlag
Logout-Link btn-logout
User-Name text-sidebar-name
User-Email text-sidebar-email
User-Rolle text-sidebar-role
Session-Zeit text-sidebar-session

Toast/Success-Meldungen

Element testid-Vorschlag
Success-Toast nach Aktion toast-success

Personenliste — Gruppen-Header

Gruppen-Namen und Mitglieder-Counts in der gruppierten Personen-Ansicht haben keine testids. Dies ermoeglicht stabilere E2E-Selektoren als die aktuellen text=-Selektoren.

Abgrenzung

Nicht in diesem Issue:

  • Event-Seiten und Guests — bereits vollstaendig mit testids versehen
  • ActionMenu — bereits vollstaendig
  • Consent-Dialog — bereits vollstaendig
  • Personen-Anlegen/Bearbeiten Modal — bereits vollstaendig

Checkliste

  • Dashboard-Widget-Ueberschriften mit data-testid versehen
  • Sidebar: Logout, Userinfo, Session mit data-testid versehen
  • Toast-Komponente mit data-testid fuer Success-Texte versehen
  • Personenliste: Gruppen-Header mit data-testid versehen
  • npm run lint erfolgreich
  • scripts/check-testid.mjs erfolgreich
## Beschreibung An mehreren Stellen im Frontend fehlen `data-testid`-Attribute, die von E2E-Tests verwendet werden koennten. Diese sollen nachgeruestet werden. ## Betroffene Bereiche ### Dashboard (`/app/dashboard`) | Element | testid-Vorschlag | |---------|-----------------| | Ueberschrift "Naechste Feier" | `heading-next-event` | | Ueberschrift "Offene RSVPs" | `heading-open-rsvps` | | Ueberschrift "Personen" (Dashboard-Widget) | `heading-persons` | ### Sidebar (`+layout.svelte`) | Element | testid-Vorschlag | |---------|-----------------| | Logout-Link | `btn-logout` | | User-Name | `text-sidebar-name` | | User-Email | `text-sidebar-email` | | User-Rolle | `text-sidebar-role` | | Session-Zeit | `text-sidebar-session` | ### Toast/Success-Meldungen | Element | testid-Vorschlag | |---------|-----------------| | Success-Toast nach Aktion | `toast-success` | ### Personenliste — Gruppen-Header Gruppen-Namen und Mitglieder-Counts in der gruppierten Personen-Ansicht haben keine testids. Dies ermoeglicht stabilere E2E-Selektoren als die aktuellen `text=`-Selektoren. ## Abgrenzung Nicht in diesem Issue: - Event-Seiten und Guests — bereits vollstaendig mit testids versehen - ActionMenu — bereits vollstaendig - Consent-Dialog — bereits vollstaendig - Personen-Anlegen/Bearbeiten Modal — bereits vollstaendig ## Checkliste - [ ] Dashboard-Widget-Ueberschriften mit `data-testid` versehen - [ ] Sidebar: Logout, Userinfo, Session mit `data-testid` versehen - [ ] Toast-Komponente mit `data-testid` fuer Success-Texte versehen - [ ] Personenliste: Gruppen-Header mit `data-testid` versehen - [ ] `npm run lint` erfolgreich - [ ] `scripts/check-testid.mjs` erfolgreich
niboer commented 2026-07-06 21:50:43 +02:00
Author
Owner
Copy link

Blockiert #261 (E2E-Tests auf getByTestId umstellen).

Blockiert #261 (E2E-Tests auf getByTestId umstellen).
niboer commented 2026-07-08 16:55:51 +02:00
Author
Owner
Copy link

Implementierungsplan (naechster Schritt)

Nach Analyse und Besprechung ergibt sich folgender Plan:

Neue Komponente: Toast

frontend/src/lib/components/toast.svelte ersetzt sowohl die bisherigen Inline-Success-Banner als auch error-alert.svelte.

Props:
  message   (string, required)
  details   (string?, optional)
  variant   ("success" | "primary" | "error", default "success")
  onRetry   (() => void?, optional, nur bei error)

data-testid:
  - "toast-success" fuer variant success/primary
  - "toast-error"   fuer variant error

error-alert.svelte wird zum Re-Export-Wrapper auf <Toast variant="error"> umgestellt, damit bestehende Imports nicht brechen.

Betroffene Dateien (15 Aenderungen + 1 neue)

Neue Komponente:

  • frontend/src/lib/components/toast.svelte

Frontend-Komponenten:

  • frontend/src/lib/components/error-alert.svelte — Wrapper auf Toast
  • frontend/src/lib/components/sidebar.svelte — text-sidebar-name, -email, -role, -session

Seiten (testids + Banner -> Toast):

  • dashboard/+page.svelte — heading-next-event, -open-rsvps, -persons
  • persons/+page.svelte — heading-group-* + member-count
  • persons/[personId]/+page.svelte
  • events/[eventId]/+page.svelte — 2x heading-group-* + 21 Banner
  • account/+page.svelte — 8 Banner/Status
  • groups/+page.svelte
  • groups/[groupId]/+page.svelte
  • templates/+page.svelte
  • deletion-requests/+page.svelte

E2E-Tests:

  • base.spec.ts — getByTestId fuer headings + sidebar
  • persons.max.mustermann.spec.ts — getByTestId fuer toast-success
  • group-create.spec.ts — getByTestId fuer toast-success

Git-Commits

  1. feat(frontend): Toast-Komponente mit success/primary/error-variant
  2. chore(frontend): testids an Dashboard, Sidebar, Gruppen-Header
  3. refactor(frontend): saemtliche Inline-Banner durch Toast-Komponente ersetzen
  4. test(e2e): testids in base, persons und group-create E2E-Tests nutzen
  5. chore: PROJECT_STATE.md aktualisiert

Dokumentation

Die Toast-Komponente wird in docs/design/04-frontend-architektur.md im Abschnitt "App-Template-Komponenten" dokumentiert.

## Implementierungsplan (naechster Schritt) Nach Analyse und Besprechung ergibt sich folgender Plan: ### Neue Komponente: Toast `frontend/src/lib/components/toast.svelte` ersetzt sowohl die bisherigen Inline-Success-Banner als auch `error-alert.svelte`. ``` Props: message (string, required) details (string?, optional) variant ("success" | "primary" | "error", default "success") onRetry (() => void?, optional, nur bei error) data-testid: - "toast-success" fuer variant success/primary - "toast-error" fuer variant error ``` `error-alert.svelte` wird zum Re-Export-Wrapper auf `<Toast variant="error">` umgestellt, damit bestehende Imports nicht brechen. ### Betroffene Dateien (15 Aenderungen + 1 neue) **Neue Komponente:** - `frontend/src/lib/components/toast.svelte` **Frontend-Komponenten:** - `frontend/src/lib/components/error-alert.svelte` — Wrapper auf Toast - `frontend/src/lib/components/sidebar.svelte` — text-sidebar-name, -email, -role, -session **Seiten (testids + Banner -> Toast):** - `dashboard/+page.svelte` — heading-next-event, -open-rsvps, -persons - `persons/+page.svelte` — heading-group-* + member-count - `persons/[personId]/+page.svelte` - `events/[eventId]/+page.svelte` — 2x heading-group-* + 21 Banner - `account/+page.svelte` — 8 Banner/Status - `groups/+page.svelte` - `groups/[groupId]/+page.svelte` - `templates/+page.svelte` - `deletion-requests/+page.svelte` **E2E-Tests:** - `base.spec.ts` — getByTestId fuer headings + sidebar - `persons.max.mustermann.spec.ts` — getByTestId fuer toast-success - `group-create.spec.ts` — getByTestId fuer toast-success ### Git-Commits 1. `feat(frontend): Toast-Komponente mit success/primary/error-variant` 2. `chore(frontend): testids an Dashboard, Sidebar, Gruppen-Header` 3. `refactor(frontend): saemtliche Inline-Banner durch Toast-Komponente ersetzen` 4. `test(e2e): testids in base, persons und group-create E2E-Tests nutzen` 5. `chore: PROJECT_STATE.md aktualisiert` ### Dokumentation Die Toast-Komponente wird in `docs/design/04-frontend-architektur.md` im Abschnitt "App-Template-Komponenten" dokumentiert.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
v0.5.0
v0.4.0
v0.3.0
v0.2.2
v0.2.1
v0.2.0
v0.1.0
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
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
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#260
No description provided.