56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
// @vitest-environment jsdom
|
|
import "@testing-library/jest-dom/vitest";
|
|
import React from "react";
|
|
import { render, screen } from "@testing-library/react";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import { PageBody, PageHeader, PageShell } from "./PageShell";
|
|
|
|
describe("PageShell", () => {
|
|
it("renders the title as the page's single h1", () => {
|
|
render(<PageHeader title="Aufgaben" />);
|
|
|
|
const headings = screen.getAllByRole("heading", { level: 1 });
|
|
expect(headings).toHaveLength(1);
|
|
expect(headings[0]).toHaveTextContent("Aufgaben");
|
|
});
|
|
|
|
it("omits subtitle, icon and actions when not supplied", () => {
|
|
const { container } = render(<PageHeader title="Aufgaben" />);
|
|
|
|
expect(container.querySelector("p")).toBeNull();
|
|
expect(screen.queryByRole("button")).toBeNull();
|
|
});
|
|
|
|
it("renders subtitle, icon and actions when supplied", () => {
|
|
render(
|
|
<PageHeader
|
|
icon={<span data-testid="icon" />}
|
|
title="Aufgaben"
|
|
subtitle="Alle offenen Aufgaben"
|
|
actions={<button type="button">Neu</button>}
|
|
/>,
|
|
);
|
|
|
|
expect(screen.getByTestId("icon")).toBeInTheDocument();
|
|
expect(screen.getByText("Alle offenen Aufgaben")).toBeInTheDocument();
|
|
expect(screen.getByRole("button", { name: "Neu" })).toBeInTheDocument();
|
|
});
|
|
|
|
it("keeps the e2e anchor on the shell so header and body stay inside it", () => {
|
|
const { container } = render(
|
|
<PageShell uiId="ui.tasks.list">
|
|
<PageHeader title="Aufgaben" />
|
|
<PageBody>
|
|
<span data-ui-id="ui.tasks.list.table" />
|
|
</PageBody>
|
|
</PageShell>,
|
|
);
|
|
|
|
const shell = container.querySelector('[data-ui-id="ui.tasks.list"]');
|
|
expect(shell).not.toBeNull();
|
|
expect(shell?.querySelector("h1")).toHaveTextContent("Aufgaben");
|
|
expect(shell?.querySelector('[data-ui-id="ui.tasks.list.table"]')).not.toBeNull();
|
|
});
|
|
});
|