85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
import { renderToStaticMarkup } from "react-dom/server";
|
|
import { describe, expect, it } from "vitest";
|
|
import { HousekeepingPageShell } from "./housekeeping-page-shell";
|
|
import { HousekeepingPageState } from "./housekeeping-page-state";
|
|
|
|
describe("HousekeepingPageState", () => {
|
|
it.each([
|
|
["loading", "status"],
|
|
["empty", "status"],
|
|
["partial", "status"],
|
|
["error", "alert"],
|
|
] as const)("renders %s with the %s role", (state, role) => {
|
|
const html = renderToStaticMarkup(
|
|
<HousekeepingPageState
|
|
state={state}
|
|
title={`${state} title`}
|
|
description={`${state} description`}
|
|
/>,
|
|
);
|
|
|
|
expect(html).toContain(`role="${role}"`);
|
|
expect(html).toContain(`>${state} title<`);
|
|
expect(html).toContain(`>${state} description<`);
|
|
});
|
|
|
|
it("announces loading politely and makes the partial warning visible", () => {
|
|
const loading = renderToStaticMarkup(
|
|
<HousekeepingPageState
|
|
state="loading"
|
|
title="Loading title"
|
|
description="Loading description"
|
|
/>,
|
|
);
|
|
const partial = renderToStaticMarkup(
|
|
<HousekeepingPageState
|
|
state="partial"
|
|
title="Partial title"
|
|
description="Partial description"
|
|
/>,
|
|
);
|
|
|
|
expect(loading).toContain('aria-live="polite"');
|
|
expect(partial).toContain('data-state-tone="warning"');
|
|
expect(partial).toContain(">Partial title<");
|
|
});
|
|
|
|
it("renders supplied retry content for an error without owning a callback", () => {
|
|
const html = renderToStaticMarkup(
|
|
<HousekeepingPageState
|
|
state="error"
|
|
title="Could not load"
|
|
description="Try again later"
|
|
retryAction={<a href="/admin-next/operations">Retry preview</a>}
|
|
/>,
|
|
);
|
|
|
|
expect(html).toContain('role="alert"');
|
|
expect(html).toContain('href="/admin-next/operations"');
|
|
expect(html).toContain(">Retry preview<");
|
|
});
|
|
});
|
|
|
|
describe("HousekeepingPageShell", () => {
|
|
it("renders supplied header, context, action, and body content", () => {
|
|
const html = renderToStaticMarkup(
|
|
<HousekeepingPageShell
|
|
title="People"
|
|
description="Review operator-facing people data"
|
|
context={<span>Preview context</span>}
|
|
primaryAction={<a href="/admin-next/people/new">Create preview</a>}
|
|
>
|
|
<p>Page body</p>
|
|
</HousekeepingPageShell>,
|
|
);
|
|
|
|
expect(html).toContain("<header");
|
|
expect(html).toContain(">People<");
|
|
expect(html).toContain(">Review operator-facing people data<");
|
|
expect(html).toContain(">Preview context<");
|
|
expect(html).toContain('href="/admin-next/people/new"');
|
|
expect(html).toContain(">Create preview<");
|
|
expect(html).toContain(">Page body</p>");
|
|
});
|
|
});
|