141 lines
4.0 KiB
TypeScript
141 lines
4.0 KiB
TypeScript
import { renderToStaticMarkup } from "react-dom/server";
|
|
import { describe, expect, it } from "vitest";
|
|
import en from "@/messages/en.json";
|
|
import itMessages from "@/messages/it.json";
|
|
import { HousekeepingPageShell } from "./housekeeping-page-shell";
|
|
import { HousekeepingPageState } from "./housekeeping-page-state";
|
|
|
|
describe("HousekeepingPageState", () => {
|
|
it.each([
|
|
["loading", "status"],
|
|
["empty", "status"],
|
|
["partial", "status"],
|
|
["error", "alert"],
|
|
["forbidden", "alert"],
|
|
["ready", "status"],
|
|
] as const)("renders %s with the %s role", (state, role) => {
|
|
const pageState =
|
|
state === "partial" ? (
|
|
<HousekeepingPageState
|
|
state="partial"
|
|
partialLabel="Partial data"
|
|
title={`${state} title`}
|
|
description={`${state} description`}
|
|
/>
|
|
) : (
|
|
<HousekeepingPageState
|
|
state={state}
|
|
title={`${state} title`}
|
|
description={`${state} description`}
|
|
/>
|
|
);
|
|
const html = renderToStaticMarkup(pageState);
|
|
|
|
expect(html).toContain(`role="${role}"`);
|
|
expect(html).toContain(`>${state} title<`);
|
|
expect(html).toContain(`>${state} description<`);
|
|
});
|
|
|
|
it.each([
|
|
["loading", "polite"],
|
|
["empty", "polite"],
|
|
["partial", "polite"],
|
|
["error", "assertive"],
|
|
["forbidden", "assertive"],
|
|
["ready", "polite"],
|
|
] as const)("announces %s changes with %s priority", (state, live) => {
|
|
const pageState =
|
|
state === "partial" ? (
|
|
<HousekeepingPageState
|
|
state="partial"
|
|
partialLabel="Partial"
|
|
title={`${state} title`}
|
|
description={`${state} description`}
|
|
/>
|
|
) : (
|
|
<HousekeepingPageState
|
|
state={state}
|
|
title={`${state} title`}
|
|
description={`${state} description`}
|
|
/>
|
|
);
|
|
const html = renderToStaticMarkup(pageState);
|
|
|
|
expect(html).toContain(`data-page-state="${state}"`);
|
|
expect(html).toContain(`aria-live="${live}"`);
|
|
});
|
|
|
|
it("announces loading politely", () => {
|
|
const loading = renderToStaticMarkup(
|
|
<HousekeepingPageState
|
|
state="loading"
|
|
title="Loading title"
|
|
description="Loading description"
|
|
/>,
|
|
);
|
|
|
|
expect(loading).toContain('aria-live="polite"');
|
|
});
|
|
|
|
it.each([
|
|
["English", en.pages.housekeeping.states.partial],
|
|
["Italian", itMessages.pages.housekeeping.states.partial],
|
|
] as const)(
|
|
"preserves the partial-state heading and separate localized warning in %s",
|
|
(_locale, copy) => {
|
|
const html = renderToStaticMarkup(
|
|
<HousekeepingPageState
|
|
state="partial"
|
|
partialLabel={copy.label}
|
|
title={copy.title}
|
|
description={copy.description}
|
|
/>,
|
|
);
|
|
|
|
expect(html).toMatch(new RegExp(`<h2[^>]*>${copy.title}</h2>`));
|
|
expect(html).toContain(`>${copy.label}</p>`);
|
|
expect(html).toContain('data-state-tone="warning"');
|
|
expect(html).toContain("--admin-warning-border");
|
|
expect(html).toContain("--admin-warning-subtle");
|
|
},
|
|
);
|
|
|
|
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="/ase-next/operations">Retry preview</a>}
|
|
/>,
|
|
);
|
|
|
|
expect(html).toContain('role="alert"');
|
|
expect(html).toContain('href="/ase-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="/ase-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="/ase-next/people/new"');
|
|
expect(html).toContain(">Create preview<");
|
|
expect(html).toContain(">Page body</p>");
|
|
});
|
|
});
|