Phase 5: App-Shell mit responsivem Layout, Navigation und Theme

Zwei Layouts aus derselben Zusammensetzung: unter 1000px Tab-Leiste unten, darueber Seitenleiste links mit Brotkrume statt Zurueck-Pfeil. Navigation ist wie im alten Panel ein flacher Zustand mit fester ZURUECK-Tabelle statt eines Router-Pakets - die Verschachtelung ist hoechstens dreistufig. Theme und Tab-Beschriftung ueberleben einen Neustart (localStorage, abgesichert fuer den Privatmodus), Startwert folgt der Systemeinstellung. Symbole aus dem alten Panel uebernommen, damit App und Panel gleich aussehen. Neun Rendertests belegen die Abnahmekriterien: Layoutwechsel in beide Richtungen, Zurueck-Ziel ueber die Tabelle, Zahnrad statt Tab-Leiste fuer die Einstellungen, Theme-Persistenz.
2026-08-11 10:55:10 +02:00
parent 2fe3576682
commit 5c0c2d1898
14 changed files with 1616 additions and 12 deletions
@@ -0,0 +1,73 @@
+/**
+ * Abnahmekriterien aus Phase 5 des Umsetzungsplans: Die App muss beide
+ * Layouts beherrschen und die Zurück-Navigation über die ZURUECK-Tabelle
+ * korrekt auflösen.
+ */
+
+import { fireEvent, render, screen } from "@testing-library/react"
+import { beforeEach, describe, expect, it, vi } from "vitest"
+
+import { Shell } from "./Shell"
+import { bereichVon } from "./navigation"
+import { bildschirmbreiteSetzen } from "./tests/aufbau"
+
+function rahmen(routeName: Parameters<typeof bereichVon>[0], geheZu = vi.fn()) {
+  render(
+    <Shell route={{ name: routeName }} geheZu={geheZu} tabBeschriftung>
+      <p>Inhalt</p>
+    </Shell>,
+  )
+  return geheZu
+}
+
+describe("Shell", () => {
+  beforeEach(() => {
+    bildschirmbreiteSetzen(390)
+  })
+
+  it("zeigt auf schmalen Bildschirmen die Tab-Leiste unten", () => {
+    const { container } = render(
+      <Shell route={{ name: "home" }} geheZu={vi.fn()} tabBeschriftung>
+        <p>Inhalt</p>
+      </Shell>,
+    )
+    expect(container.querySelector(".ads-tabbar")).not.toBeNull()
+    expect(container.querySelector(".dm-seitenleiste")).toBeNull()
+  })
+
+  it("zeigt auf breiten Bildschirmen die Seitenleiste statt der Tab-Leiste", () => {
+    bildschirmbreiteSetzen(1280)
+    const { container } = render(
+      <Shell route={{ name: "home" }} geheZu={vi.fn()} tabBeschriftung>
+        <p>Inhalt</p>
+      </Shell>,
+    )
+    expect(container.querySelector(".dm-seitenleiste")).not.toBeNull()
+    expect(container.querySelector(".ads-tabbar")).toBeNull()
+  })
+
+  it("führt der Zurück-Pfeil zur übergeordneten Seite", () => {
+    const geheZu = rahmen("beitrag")
+    fireEvent.click(screen.getByLabelText("Zurück"))
+    // beitrag -> vers laut ZURUECK-Tabelle
+    expect(geheZu).toHaveBeenCalledWith("vers")
+  })
+
+  it("blendet den Zurück-Pfeil auf Hauptbereichen aus", () => {
+    rahmen("trips")
+    expect(screen.queryByLabelText("Zurück")).toBeNull()
+  })
+
+  it("hebt den Hauptbereich hervor, zu dem eine Unterseite gehört", () => {
+    // schutz -> vertragsdetails -> vers -> audi
+    expect(bereichVon("schutz")).toBe("audi")
+    expect(bereichVon("fill")).toBe("fuel")
+    expect(bereichVon("trip")).toBe("trips")
+  })
+
+  it("erreicht die Einstellungen über das Zahnrad, nicht über die Tab-Leiste", () => {
+    const geheZu = rahmen("home")
+    fireEvent.click(screen.getByLabelText("Einstellungen"))
+    expect(geheZu).toHaveBeenCalledWith("einst")
+  })
+})