diff --git a/e2e/hilfen.ts b/e2e/hilfen.ts index d9c3e16..3f75144 100644 --- a/e2e/hilfen.ts +++ b/e2e/hilfen.ts @@ -117,3 +117,46 @@ export function beispielPdf(text = 'Bescheid'): Buffer { return Buffer.from(pdf, 'latin1') } + +/** + * Doppelt gerenderte Listen — was beim Suchen schiefgeht. + * + * Die Dokumentenliste (und moeglicherweise kuenftig weitere) rendert + * denselben Inhalt ZWEIMAL: als Karten fuers Handy, als Tabelle ab + * Tablet. Eine der beiden Fassungen ist per Breakpoint versteckt, steht + * aber im DOM. + * + * Die Folge im Test: + * + * await expect(page.getByText('Bescheid').first()).toBeVisible() + * // -> "element is not visible", obwohl die Seite richtig aussieht + * + * `.first()` nimmt, was zuerst im Baum steht - und das ist die Karte, + * also am Schreibtisch die unsichtbare Fassung. Es liegt NICHT an der + * Anwendung. + * + * Nachgemessen an /dokumente mit acht Dokumenten: Ein Titel liefert 16 + * Treffer, davon 8 sichtbar - und `.first()` ist unsichtbar. + * + * Drei Wege, die tragen: + * + * 1. Ueber den Seitentext pruefen, wenn es nur um "steht das da?" geht: + * + * const inhalt = await page.locator('body').innerText() + * expect(inhalt).toContain('Bescheid') + * + * innerText liefert nur sichtbaren Text - die versteckte Fassung + * faellt von selbst weg. (Fuer Inhalt in einem zugeklappten + *
braucht es dagegen textContent.) + * + * 2. Auf die sichtbare Fassung einschraenken, wenn geklickt wird: + * + * page.getByRole('link', { name: 'Bescheid' }).locator('visible=true') + * + * 3. Die Zusammenfassungszeile pruefen ("12 Dokumente"), wenn es um + * Anzahlen geht - die steht nur einmal. + * + * Was nicht traegt: eine feste Anzahl erwarten. `getByText(...)` findet + * jeden Eintrag zweimal, und wer das mit toHaveCount(1) prueft, schreibt + * einen Test, der bei jeder Layoutaenderung umfaellt. + */ diff --git a/src/components/dokumente/dokument-liste.tsx b/src/components/dokumente/dokument-liste.tsx index da0e20c..e735d93 100644 --- a/src/components/dokumente/dokument-liste.tsx +++ b/src/components/dokumente/dokument-liste.tsx @@ -17,6 +17,21 @@ import { * * Am Handy eine Karte je Dokument, ab Tablet eine Tabelle - die Tabelle * scrollt dabei im eigenen Rahmen, nie die ganze Seite. + * + * ACHTUNG, jeder Inhalt steht ZWEIMAL im DOM: einmal als Karte, einmal + * als Tabellenzeile. Eine der beiden Fassungen ist per Breakpoint + * versteckt, steht aber trotzdem im Baum. + * + * Fuer Tests heisst das: getByText(...).first() trifft womoeglich die + * unsichtbare Kopie, und die Pruefung scheitert mit "element is not + * visible" an einer Stelle, die augenscheinlich in Ordnung ist. Der Weg, + * der traegt, steht in e2e/hilfen.ts unter "Doppelt gerenderte Listen". + * + * Warum nicht eine Fassung fuer beide? Eine Tabelle, die sich zu Karten + * umbricht, verlangt display:block auf Zeilen und Zellen. Damit ist es + * keine Tabelle mehr - Vorlesesoftware verliert den Zusammenhang von + * Spaltenkopf und Wert, und genau der macht eine Dokumentenliste mit + * acht Spalten erst benutzbar. Die Verdopplung ist der Preis dafuer. */ export function DokumentListe({ eintraege }: { eintraege: Listeneintrag[] }) { return (