feat(ui): establish Settings page layout primitives

2026-09-12 21:59:35 +02:00
parent 806eee4e1e
commit 2cdcab9e21
58 changed files with 3019 additions and 94 deletions
@@ -0,0 +1,53 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { Alert, Button, ThemeProvider } from "@mui/material";
+import { getTheme } from "./theme";
+import { PageHeader, PageSection } from "./layout/PageLayout";
+import ViewStateNotice from "./components/ViewStateNotice";
+import { I18nProvider } from "./i18n/I18nProvider";
+
+test("[PRES-E08] page and nested section headings retain full names and independent actions", () => {
+  const save = jest.fn();
+  const manage = jest.fn();
+  render(<ThemeProvider theme={getTheme("light")}>
+    <PageHeader title="Innstillinger for oppfølginger og jobbpreferanser" description="Ærlig informasjon om dine valg."
+      actions={<Button onClick={save}>Lagre varslingsinnstillinger</Button>} />
+    <PageSection title="Tilkoblede kontoer" description="Administrer innbokstilkoblinger separat."
+      actions={<Button onClick={manage}>Administrer tilkoblede kontoer</Button>}>
+      <PageSection title="Kontotilgang" level="h3"><Button disabled>Utilgjengelig</Button></PageSection>
+    </PageSection>
+  </ThemeProvider>);
+  expect(screen.getAllByRole("heading", { level: 1 })).toHaveLength(1);
+  expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Innstillinger for oppfølginger og jobbpreferanser");
+  const section = screen.getByRole("region", { name: "Tilkoblede kontoer" });
+  expect(within(section).getByRole("heading", { level: 2 })).toHaveTextContent("Tilkoblede kontoer");
+  expect(within(section).getByRole("heading", { level: 3 })).toHaveTextContent("Kontotilgang");
+  expect(section).not.toHaveAttribute("tabindex");
+  fireEvent.click(screen.getByRole("button", { name: "Lagre varslingsinnstillinger" }));
+  fireEvent.click(within(section).getByRole("button", { name: "Administrer tilkoblede kontoer" }));
+  fireEvent.click(screen.getByRole("button", { name: "Utilgjengelig" }));
+  expect(save).toHaveBeenCalledTimes(1);
+  expect(manage).toHaveBeenCalledTimes(1);
+});
+
+test("[PRES-E08] section composition retains loaded, error/retry and empty child semantics", () => {
+  const retry = jest.fn();
+  const content = (loading: boolean, failed: boolean) => <ThemeProvider theme={getTheme("dark")}><I18nProvider>
+    <PageSection title="Notifications">
+      <ViewStateNotice loading={loading} title="Could not load" onRetry={retry}
+        error={failed ? { kind: "unavailable", message: "Could not load", retryable: true } : null} />
+      {!loading && !failed ? <Alert severity="info">No notifications.</Alert> : null}
+    </PageSection>
+  </I18nProvider></ThemeProvider>;
+  const view = render(content(true, false));
+  expect(screen.getByRole("status")).toHaveTextContent("Loading");
+  view.rerender(content(false, true));
+  fireEvent.click(screen.getByRole("button", { name: "Retry" }));
+  expect(retry).toHaveBeenCalledTimes(1);
+  expect(screen.getByRole("alert")).toHaveTextContent("Could not load");
+  view.rerender(content(false, false));
+  expect(screen.getByRole("status")).toHaveTextContent("Content loaded.");
+  expect(screen.getByRole("alert")).toHaveTextContent("No notifications.");
+  expect(screen.getByRole("region", { name: "Notifications" })).not.toHaveAttribute("tabindex");
+});