Projekte/TeamRallye

Fork 0

Frontend: PageHeader rendert keinen Back-Button bei `backAction` / `onBack` (2 Tests) #5

New issue

Closed

opened 2026-05-24 16:19:25 +02:00 by hal9000 · 1 comment

hal9000 commented

2026-05-24 16:19:25 +02:00

Collaborator

Beschreibung

Beim PageHeader werden zwei Tests rot, die prüfen, ob ein Back-Button gerendert wird, sobald backAction (bzw. der Alias onBack) gesetzt ist. Der Button mit aria-label="back" taucht im DOM nicht auf.

Betroffene Tests (2)

src/components/base/__tests__/PageHeader.test.tsx:61 — sollte backAction aufrufen, wenn Back-Button geklickt wird
```
AssertionError: expected +0 to be 1
```
src/components/base/__tests__/PageHeader.test.tsx:68 — sollte onBack als Alias für backAction verwenden
```
AssertionError: expected +0 to be 1
```

Tests erwarten

const backButtons = document.querySelectorAll('[aria-label="back"]');
expect(backButtons.length).toBe(1);

Verdacht

Mögliche Ursachen (zu verifizieren in src/components/base/PageHeader.tsx):

backAction / onBack Props werden in der Komponente nicht ausgewertet
Es wird ein anderes aria-label gesetzt (z.B. "Zurück" statt "back")
Der Button wird konditional gerendert, aber Bedingung passt nicht (z.B. nur bei showBack === true)
renderPageHeader Helper übergibt den Prop nicht durch

Action Items

PageHeader-Komponente prüfen: wird backAction/onBack korrekt verdrahtet?
Konvention klären: backAction oder onBack als kanonischer Prop-Name?
aria-label festlegen (i18n-bewusst — evtl. aria-label="back" als technischer Marker, sichtbarer Text separat)
Tests grün bekommen

Reproduktion

cd frontend
npm run test:run

## Beschreibung Beim PageHeader werden zwei Tests rot, die prüfen, ob ein Back-Button gerendert wird, sobald `backAction` (bzw. der Alias `onBack`) gesetzt ist. Der Button mit `aria-label="back"` taucht im DOM nicht auf. ## Betroffene Tests (2) - `src/components/base/__tests__/PageHeader.test.tsx:61` — `sollte backAction aufrufen, wenn Back-Button geklickt wird` ``` AssertionError: expected +0 to be 1 ``` - `src/components/base/__tests__/PageHeader.test.tsx:68` — `sollte onBack als Alias für backAction verwenden` ``` AssertionError: expected +0 to be 1 ``` ## Tests erwarten ```ts const backButtons = document.querySelectorAll('[aria-label="back"]'); expect(backButtons.length).toBe(1); ``` ## Verdacht Mögliche Ursachen (zu verifizieren in `src/components/base/PageHeader.tsx`): - `backAction` / `onBack` Props werden in der Komponente nicht ausgewertet - Es wird ein anderes `aria-label` gesetzt (z.B. `"Zurück"` statt `"back"`) - Der Button wird konditional gerendert, aber Bedingung passt nicht (z.B. nur bei `showBack === true`) - `renderPageHeader` Helper übergibt den Prop nicht durch ## Action Items - [ ] PageHeader-Komponente prüfen: wird `backAction`/`onBack` korrekt verdrahtet? - [ ] Konvention klären: `backAction` oder `onBack` als kanonischer Prop-Name? - [ ] `aria-label` festlegen (i18n-bewusst — evtl. `aria-label="back"` als technischer Marker, sichtbarer Text separat) - [ ] Tests grün bekommen ## Reproduktion ```bash cd frontend npm run test:run ```

hal9000 commented

2026-05-24 16:30:55 +02:00

Author

Collaborator

Behoben — der Back-Button wird tatsächlich gerendert (Component-Verhalten war korrekt), die Tests suchten nur den falschen Selektor.

Diagnose

PageHeader.tsx rendert bei backAction/onBack:

<IconButton onClick={handleBack} aria-label="Zurück" size="small" edge="start">
  <ArrowBackIcon />
</IconButton>

Das aria-label="Zurück" ist die korrekte deutsche UI-Beschriftung — die Tests hatten aber aria-label="back" als Selektor.

Fix

PageHeader.test.tsx: Selektor [aria-label="back"] → [aria-label="Zurück"] (zwei Stellen, Zeile 60 und 67).

Die Komponente bleibt unverändert — das deutsche Label ist die User-facing Konvention für die App.

Verifikation

cd frontend
npm run test:run

→ Test Files 4 passed, Tests 32 passed. Beide PageHeader-Back-Tests sind grün.

Behoben — der Back-Button wird tatsächlich gerendert (Component-Verhalten war korrekt), die Tests suchten nur den falschen Selektor. ## Diagnose `PageHeader.tsx` rendert bei `backAction`/`onBack`: ```tsx <IconButton onClick={handleBack} aria-label="Zurück" size="small" edge="start"> <ArrowBackIcon /> </IconButton> ``` Das `aria-label="Zurück"` ist die korrekte deutsche UI-Beschriftung — die Tests hatten aber `aria-label="back"` als Selektor. ## Fix `PageHeader.test.tsx`: Selektor `[aria-label="back"]` → `[aria-label="Zurück"]` (zwei Stellen, Zeile 60 und 67). Die Komponente bleibt unverändert — das deutsche Label ist die User-facing Konvention für die App. ## Verifikation ```bash cd frontend npm run test:run ``` → Test Files 4 passed, Tests **32 passed**. Beide PageHeader-Back-Tests sind grün.

hal9000 closed this issue

2026-05-24 16:30:58 +02:00

ingo referenced this issue from a commit

2026-05-24 18:08:55 +02:00

fix(frontend): grüne Base-Component-Tests (#3, #4, #5)

No labels

No milestone

No project

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

Projekte/TeamRallye#5

No description provided.

Rows
Columns

Frontend: PageHeader rendert keinen Back-Button bei backAction / onBack (2 Tests) #5