53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import { render, screen, waitFor } from "@testing-library/react";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import { PageHeader } from "../../src/presentation/components/page-header.tsx";
|
|
|
|
describe("page header focus ownership", () => {
|
|
it("takes over focus handed off by the route main region", async () => {
|
|
const { rerender } = render(
|
|
<>
|
|
<main id="main-content" tabIndex={-1} />
|
|
<PageHeader title="Loading" />
|
|
</>,
|
|
);
|
|
const main = screen.getByRole("main");
|
|
main.focus();
|
|
|
|
rerender(
|
|
<>
|
|
<main id="main-content" tabIndex={-1} />
|
|
<PageHeader title="Loaded" />
|
|
</>,
|
|
);
|
|
|
|
await waitFor(() =>
|
|
expect(
|
|
screen.getByRole("heading", { level: 1, name: "Loaded" }),
|
|
).toHaveFocus(),
|
|
);
|
|
});
|
|
|
|
it("does not steal focus from a user-controlled element", () => {
|
|
const { rerender } = render(
|
|
<>
|
|
<button type="button">Menu</button>
|
|
<PageHeader title="Loading" />
|
|
</>,
|
|
);
|
|
const menu = screen.getByRole("button", { name: "Menu" });
|
|
menu.focus();
|
|
|
|
rerender(
|
|
<>
|
|
<button type="button">Menu</button>
|
|
<PageHeader title="Loaded" />
|
|
</>,
|
|
);
|
|
|
|
expect(menu).toHaveFocus();
|
|
});
|
|
});
|