From 3772e360e12e0445ae694ae8c3caa58d9a438c33 Mon Sep 17 00:00:00 2001 From: Florian Wilde Date: Sun, 23 Aug 2026 23:28:22 +0200 Subject: [PATCH] Doppelt gerenderte Listen dokumentieren Die Dokumentenliste rendert jeden Eintrag zweimal: als Karte fuers Handy, als Tabellenzeile ab Tablet. Eine Fassung ist per Breakpoint versteckt, steht aber im DOM. Beim Testen trifft getByText(...).first() deshalb die unsichtbare Kopie, und die Pruefung scheitert mit "element is not visible" an einer Stelle, die augenscheinlich in Ordnung ist. Das hat mehrfach Zeit gekostet, weil man den Grund nicht sieht. Nachgemessen an /dokumente mit acht Dokumenten: ein Titel liefert 16 Treffer, davon 8 sichtbar - und first() ist unsichtbar. - Kommentar an der Komponente, mit dem Verweis auf die Hilfsdatei. - In e2e/hilfen.ts das Muster beschrieben und drei Wege genannt, die tragen: innerText fuer "steht das da", visible=true zum Klicken, die Zusammenfassungszeile fuer Anzahlen. Alle drei nachgeprueft, bevor sie aufgeschrieben wurden - eine Anleitung mit kaputtem Rezept waere schlimmer als keine. Zur Frage aus dem Issue, ob sich die Verdopplung vermeiden laesst: nein, nicht ohne Verlust. Eine Tabelle, die 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 Liste mit acht Spalten erst benutzbar. Die Begruendung steht jetzt am Code, statt die Frage offen zu lassen. Betroffen ist uebrigens nur diese eine Stelle, nicht mehrere: kalender-monat.tsx und das Stammdatenformular nutzen Breakpoints, ohne Inhalt doppelt zu rendern. Refs #28 --- e2e/hilfen.ts | 43 +++++++++++++++++++++ src/components/dokumente/dokument-liste.tsx | 15 +++++++ 2 files changed, 58 insertions(+) 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 ( -- 2.54.0