feat: build housekeeping command deck shell

src/features/housekeeping/foundation/page/housekeeping-page-state.test.tsx

@@ -0,0 +1,84 @@
+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>");
+	});
+});