Gulum
6eb82da90c
Neues FilterPanel-Muster (src/components/FilterPanel.tsx + filterPanel.css): - Mobil (<768px): Suchfeld immer sichtbar; alle weiteren Filter hinter einem 'Filter (N)'-Button eingeklappt (Badge = Anzahl aktiver Nicht-Default-Filter). Tippen öffnet/schließt den Drawer. 'Filter zurücksetzen' im Drawer. - Desktop (>=768px): Toggle versteckt, Drawer als display:contents → alle Controls inline in der bestehenden .filters-Flexzeile, wie bisher. Auf GerbilsPage, WuerfeListPage und AnfragenPage ausgerollt. BeckenPage/KontaktePage nur ein Suchfeld → kein Panel nötig. e2e: filter-panel.spec.ts (8 Tests, phone+desktop); bestand/tiere/anfragen-Specs erhalten openFilterPanel-Aufruf vor Drawer-Controls; fixtures.ts +openFilterPanel(). Vitest 78 / e2e 102 grün. Mobil-Pass (390px, Durchsicht): Hauptproblem behoben. Beobachtete Restpunkte für god (nicht selbst gefixed): - .genotype-table in Genetik/Probeverpaarung: Genotyp-Strings können eng werden - Stammbaum (react-d3-tree SVG): kein explizites mobile Viewport-Handling - BreedingResultView Genotyp-Detail-Tabelle: ggf. horizontal scrollbar-los Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
46 lines
2.1 KiB
TypeScript
46 lines
2.1 KiB
TypeScript
/** BESTAND-FILTER: die Tiere-Liste zeigt standardmäßig nur den eigenen Bestand. */
|
|
import { de, expect, gotoSection, openFilterPanel, skipUnlessMock, test } from './fixtures'
|
|
|
|
const t = de.pages.gerbils
|
|
|
|
test('Tiere-Liste blendet externe Ahnen standardmäßig aus', async ({ page }) => {
|
|
skipUnlessMock()
|
|
await gotoSection(page, de.nav.gerbils)
|
|
await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()
|
|
|
|
// Bestand ist sichtbar …
|
|
await expect(page.locator('.gerbil-row', { hasText: 'Krümel' })).toBeVisible()
|
|
// … aber die externe Ahne „Max“ (isResident=false) nicht.
|
|
await expect(page.locator('.gerbil-row', { hasText: 'Max' })).toHaveCount(0)
|
|
})
|
|
|
|
test('Toggle „Externe Ahnen einblenden” zeigt externe Tiere mit Extern-Markierung', async ({ page }) => {
|
|
skipUnlessMock()
|
|
await gotoSection(page, de.nav.gerbils)
|
|
await expect(page.locator('.gerbil-row', { hasText: 'Krümel' })).toBeVisible()
|
|
|
|
// UX-MOBILE-1: Checkbox liegt im Filter-Drawer — auf Mobil erst öffnen.
|
|
await openFilterPanel(page)
|
|
await page.getByRole('checkbox', { name: t.filters.showExternal }).check()
|
|
|
|
const maxRow = page.locator('.gerbil-row', { hasText: 'Max' })
|
|
await expect(maxRow).toBeVisible()
|
|
await expect(maxRow.getByText(t.externalBadge, { exact: true })).toBeVisible()
|
|
// Der Bestand bleibt weiterhin sichtbar.
|
|
await expect(page.locator('.gerbil-row', { hasText: 'Krümel' })).toBeVisible()
|
|
})
|
|
|
|
test('Bearbeiten-Formular kann ein Tier als extern markieren (Bestand-Häkchen)', async ({ page }) => {
|
|
skipUnlessMock()
|
|
// Krümel gehört zum Bestand -> Häkchen entfernen und speichern.
|
|
await page.goto('/rennmaeuse/kruemel/bearbeiten')
|
|
const check = page.getByRole('checkbox', { name: t.form.isResidentLabel })
|
|
await expect(check).toBeChecked()
|
|
await check.uncheck()
|
|
await page.getByRole('button', { name: t.form.save }).click()
|
|
|
|
// Auf der Detailseite ist Krümel jetzt als „Extern“ markiert.
|
|
await expect(page.getByRole('heading', { name: 'Krümel' })).toBeVisible()
|
|
await expect(page.getByText(t.externalBadge, { exact: true })).toBeVisible()
|
|
})
|