Paul Nothaft
5c0c2d1898
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.
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
/**
|
|
* 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")
|
|
})
|
|
})
|