cesnimda
54 lines
3.2 KiB
TypeScript
54 lines
3.2 KiB
TypeScript
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");
|
|
});
|