STAMMBAUM-EXPAND: +-Button prominenter + Mini-Legende (Stammbaum-UX)
Punkt 1 - Expand-Button sichtbar/zuverlaessig: - 40px solid-fill (war 32px outline), box-shadow, flex-centered; deutlich sichtbar auf 190px Karte, touch-tauglich (>=40px Tap-Target). Hover/focus-visible: opacity + outline. - Edge-case (Litter mit null-Eltern): +-Button bleibt sichtbar -- unbekannt-Karten sind korrektes Feedback fuer quarantaenierte Eltern. Punkt 2 - Bottom-Hint Mini-Legende: - stammbaum-hint -> stammbaum-hints ul (flex-wrap, 3 Items): Umwurzeln / Name=Akte / +=Nachladen. Gut lesbar auf 390px. de.ts: hintName + hintExpand (neue Keys; tapHint bleibt fuer card title). e2e: +2 Specs x 2 Viewports = 4 neue Tests (Legende + Expand-Klick). Emil (Gen 4, litterId w-emil) liefert Testanker im Mock-Stammbaum. Gate: vitest 122/122 e2e 166+68skipped build+tsc+eslint clean.
This commit is contained in:
@@ -79,3 +79,34 @@ test('Namenloser Ahne zeigt Platzhalter in der Stammbaum-Karte (UI-POLISH-2)', a
|
||||
// Karte selbst zeigt '(ohne Namen)' statt leer
|
||||
await expect(page.locator('.pedigree-card__nametext')).toHaveText(de.pages.gerbils.nameless)
|
||||
})
|
||||
|
||||
test('Mini-Legende zeigt alle drei Interaktionshinweise (STAMMBAUM-EXPAND)', async ({ page }) => {
|
||||
skipUnlessMock()
|
||||
await page.goto('/rennmaeuse/kruemel/stammbaum')
|
||||
await expect(page.locator('.pedigree-card').first()).toBeVisible()
|
||||
|
||||
const hints = page.locator('.stammbaum-hints')
|
||||
await expect(hints).toBeVisible()
|
||||
await expect(hints).toContainText(t.tapHint)
|
||||
await expect(hints).toContainText(t.hintName)
|
||||
await expect(hints).toContainText(t.hintExpand)
|
||||
})
|
||||
|
||||
test('+-Knopf ist sichtbar und lädt weitere Vorfahren nach (STAMMBAUM-EXPAND)', async ({ page }) => {
|
||||
skipUnlessMock()
|
||||
await page.goto('/rennmaeuse/kruemel/stammbaum')
|
||||
await expect(page.locator('.pedigree-card').first()).toBeVisible()
|
||||
|
||||
// Einpassen, damit die 4. Generation (Emil mit +) im Viewport liegt.
|
||||
const fit = page.getByRole('button', { name: t.zoomFit })
|
||||
if (await fit.isVisible()) await fit.click()
|
||||
await page.waitForTimeout(600)
|
||||
|
||||
// +-Button muss an der Tiefengrenze erscheinen (Emil hat litterId w-emil).
|
||||
const expandBtn = page.getByRole('button', { name: t.expand }).first()
|
||||
await expect(expandBtn).toBeVisible()
|
||||
|
||||
// Klick auf +: Emil wird aufgeklappt → Max (sein Vater) taucht als Link auf.
|
||||
await expandBtn.click({ force: true })
|
||||
await expect(page.getByRole('link', { name: 'Max' })).toBeVisible({ timeout: 8000 })
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user