Gulum
5732398e60
Filter-UX aus dem Design: - Quick-Chip-Kategorien (Status/Geschlecht/Farbschlag/Herkunft) öffnen ein Bottom-Sheet mit Mehrfachauswahl (suchbar bei Farbschlag/Herkunft); aktive Filter als entfernbare Chips; Sortierung + "Externe Ahnen" als gleich große Chips (Sortierung öffnet dasselbe Drawer). - Neue zweizeilige Tierkarte (Name + Geschlechts-Kreis + Status-Badge, Meta-Zeile), cardIn/Chip/Sheet-Animationen, Titel blendet beim Scrollen aus. App-weit: - Design-Palette (Creme/Braun/Terrakotta), Hanken-Grotesk-Schrift und gemeinsamer --shadow-Token; obere "Rennmaus-Manager"-Titelleiste entfernt (mobil bleibt die untere Aktionsleiste); fixe Shell-Höhe, nur der Hauptbereich scrollt. Funktion: - Infinite Scroll via useInfiniteList (seitenweise) + IntersectionObserver-Sentinel. - Namensgenerator: Option männlich/weiblich/egal. - Mehrfach-OR-Filter über gridify orGroup; e2e an die neue UI angepasst. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
55 lines
2.3 KiB
TypeScript
55 lines
2.3 KiB
TypeScript
/**
|
||
* DESIGN (Rennmaus Filter.html): Quick-Chips-Filter der Rennmäuse-Liste.
|
||
*
|
||
* Eine Pillen-Reihe (Status / Geschlecht / Farbschlag / Herkunft) öffnet je ein
|
||
* Bottom-Sheet mit Mehrfachauswahl; gewählte Werte erscheinen als entfernbare
|
||
* Chips, „Alle löschen" setzt zurück. Mobile-first; identisches Verhalten auf Desktop.
|
||
*/
|
||
import { de, expect, gotoSection, selectListFilter, skipUnlessMock, test } from './fixtures'
|
||
|
||
const t = de.pages.gerbils
|
||
|
||
test.describe('Quick-Chips-Filter – Rennmäuse-Liste', () => {
|
||
test('Kategorie-Pillen sind sichtbar', async ({ page }) => {
|
||
skipUnlessMock()
|
||
await gotoSection(page, de.nav.gerbils)
|
||
await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()
|
||
|
||
const quickrow = page.locator('.rmf-quickrow')
|
||
await expect(quickrow.getByRole('button', { name: t.filters.status })).toBeVisible()
|
||
await expect(quickrow.getByRole('button', { name: t.filters.gender })).toBeVisible()
|
||
await expect(quickrow.getByRole('button', { name: t.filters.colorVariety })).toBeVisible()
|
||
await expect(quickrow.getByRole('button', { name: t.fields.origin })).toBeVisible()
|
||
})
|
||
|
||
test('Mehrfachauswahl erzeugt entfernbare Chips, „Alle löschen" setzt zurück', async ({
|
||
page,
|
||
}) => {
|
||
skipUnlessMock()
|
||
await gotoSection(page, de.nav.gerbils)
|
||
|
||
// Default: Zucht-Chip ist aktiv.
|
||
await expect(page.locator('.rmf-chip-val', { hasText: t.statusLabels.Breeding })).toBeVisible()
|
||
|
||
// Geschlecht = männlich über das Sheet wählen → zweiter Chip erscheint.
|
||
await selectListFilter(page, t.filters.gender, t.genderLabels.male)
|
||
await expect(page.locator('.rmf-chip-val', { hasText: t.genderLabels.male })).toBeVisible()
|
||
|
||
// „Alle löschen" entfernt sämtliche Chips.
|
||
await page.getByRole('button', { name: de.filterBar.clearAll }).click()
|
||
await expect(page.locator('.rmf-chip')).toHaveCount(0)
|
||
})
|
||
|
||
test('Einzelner Chip lässt sich per Klick entfernen', async ({ page }) => {
|
||
skipUnlessMock()
|
||
await gotoSection(page, de.nav.gerbils)
|
||
|
||
const breedingChip = page.locator('.rmf-chip', {
|
||
has: page.locator('.rmf-chip-val', { hasText: t.statusLabels.Breeding }),
|
||
})
|
||
await expect(breedingChip).toBeVisible()
|
||
await breedingChip.click()
|
||
await expect(breedingChip).toHaveCount(0)
|
||
})
|
||
})
|