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>
57 lines
2.6 KiB
TypeScript
57 lines
2.6 KiB
TypeScript
/** STATUS-MODEL: Zucht/Liebhaber wählbar; Verstorben/Abgegeben abgeleitet (read-only). */
|
|
import { de, expect, skipUnlessMock, test, uniqueName } from './fixtures'
|
|
|
|
const t = de.pages.gerbils
|
|
|
|
test('Tier-Formular zeigt nur wählbare Statuswerte im Dropdown', async ({ page }) => {
|
|
skipUnlessMock()
|
|
await page.goto('/rennmaeuse/neu')
|
|
const statusField = page.locator('label.field', {
|
|
has: page.locator(`span:text-is("${t.fields.status}")`),
|
|
})
|
|
// Zucht (Breeding) ist vorausgewählt
|
|
await expect(statusField.locator('select')).toHaveValue('Breeding')
|
|
// Optionen: nur Zucht, Liebhaber, Abzugeben (NICHT Verstorben/Abgegeben)
|
|
const opts = statusField.locator('select option')
|
|
await expect(opts.filter({ hasText: t.statusLabels.Breeding })).toHaveCount(1)
|
|
await expect(opts.filter({ hasText: t.statusLabels.Pet })).toHaveCount(1)
|
|
await expect(opts.filter({ hasText: t.statusLabels.ForSale })).toHaveCount(1)
|
|
await expect(opts.filter({ hasText: t.statusLabels.Deceased })).toHaveCount(0)
|
|
await expect(opts.filter({ hasText: t.statusLabels.GivenAway })).toHaveCount(0)
|
|
})
|
|
|
|
test('Tier-Formular zeigt abgeleiteten Status Verstorben als Text + Hinweis', async ({ page }) => {
|
|
skipUnlessMock()
|
|
// Willi ist Deceased
|
|
await page.goto('/rennmaeuse/willi/bearbeiten')
|
|
// Status-Select ist NICHT vorhanden (abgeleitet)
|
|
const statusField = page.locator('.field', {
|
|
has: page.locator(`span:text-is("${t.fields.status}")`),
|
|
})
|
|
await expect(statusField).toBeVisible()
|
|
await expect(statusField.locator('select')).toHaveCount(0)
|
|
await expect(statusField).toContainText(t.statusLabels.Deceased)
|
|
await expect(statusField).toContainText(t.form.statusDerivedHint.Deceased)
|
|
})
|
|
|
|
test('Tiere-Liste zeigt Zucht als Standard-Status-Filter', async ({ page }) => {
|
|
skipUnlessMock()
|
|
await page.goto('/rennmaeuse')
|
|
// DESIGN (Rennmaus Filter): der Default-Status erscheint als aktiver, entfernbarer Chip.
|
|
await expect(page.locator('.rmf-chip-val', { hasText: t.statusLabels.Breeding })).toBeVisible()
|
|
})
|
|
|
|
test('Neues Tier anlegen mit Status Liebhaber', async ({ page }) => {
|
|
skipUnlessMock()
|
|
const name = uniqueName('Tier')
|
|
await page.goto('/rennmaeuse/neu')
|
|
await page.getByLabel(`${t.fields.name} *`).fill(name)
|
|
await page.getByLabel(`${t.fields.gender} *`).selectOption({ label: t.genderLabels.male })
|
|
const statusField = page.locator('label.field', {
|
|
has: page.locator(`span:text-is("${t.fields.status}")`),
|
|
})
|
|
await statusField.locator('select').selectOption({ label: t.statusLabels.Pet })
|
|
await page.getByRole('button', { name: t.form.save, exact: true }).click()
|
|
await expect(page.getByRole('heading', { name })).toBeVisible()
|
|
})
|