85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
import { renderToString } from "react-dom/server";
|
|
import { describe, expect, test } from "vitest";
|
|
import { genericDashboardFixture } from "@dimensionlab/dashboard-model/fixtures";
|
|
import { dimensionLabDashboardFixture } from "$lib/dashboard-seed/dimensionlab";
|
|
import { AppStateView, dashboardHydrationTiles } from "./App";
|
|
|
|
describe("React app dashboard state view", () => {
|
|
test("renders loading dashboard state", () => {
|
|
const html = renderToString(
|
|
<AppStateView
|
|
dashboard={{
|
|
state: "loading",
|
|
title: "Loading Dashboard",
|
|
subtitle: "Fetching active model",
|
|
message: "Waiting for the active dashboard document.",
|
|
}}
|
|
/>,
|
|
);
|
|
|
|
expect(html).toContain("Loading Dashboard");
|
|
expect(html).toContain("Fetching active model");
|
|
});
|
|
|
|
test("renders an accessible theme toggle with the active theme", () => {
|
|
const html = renderToString(
|
|
<AppStateView
|
|
dashboard={{
|
|
state: "loading",
|
|
title: "Loading Dashboard",
|
|
subtitle: "Fetching active model",
|
|
message: "Waiting for the active dashboard document.",
|
|
}}
|
|
theme="dark"
|
|
onThemeChange={() => undefined}
|
|
/>,
|
|
);
|
|
|
|
expect(html).toContain('data-ui-theme-toggle="true"');
|
|
expect(html).toContain('data-ui-theme-current="dark"');
|
|
expect(html).toContain('aria-label="Light theme"');
|
|
expect(html).toContain('aria-pressed="false"');
|
|
expect(html).toContain("Theme");
|
|
expect(html).toContain("Dark");
|
|
expect(html).toContain("Light");
|
|
});
|
|
|
|
test("renders the dashboard shell while individual items hydrate", () => {
|
|
const html = renderToString(
|
|
<AppStateView
|
|
dashboard={{
|
|
state: "ready",
|
|
document: genericDashboardFixture,
|
|
schemaVersion: "dashboard.v1",
|
|
currentRevisionId: "revision-1234567890",
|
|
}}
|
|
hydratingItemIds={new Set([
|
|
"telemetry:service-uptime",
|
|
"service:core-services:identity",
|
|
"module:ambient",
|
|
"status:runtime:status",
|
|
])}
|
|
/>,
|
|
);
|
|
|
|
expect(html).toContain("Operations Console");
|
|
expect(html).toContain("Service Uptime");
|
|
expect(html).toContain("Identity");
|
|
expect(html).toContain("Environment");
|
|
expect(html).not.toContain("Loading Dashboard");
|
|
expect(html).toContain(
|
|
'data-severity="loading" data-model-id="service-uptime"',
|
|
);
|
|
expect(html).toContain('data-severity="loading" data-model-id="identity"');
|
|
expect(html).toContain('data-severity="loading" data-model-id="ambient"');
|
|
expect(html).toContain('data-severity="loading" data-model-id="runtime:status"');
|
|
});
|
|
|
|
test("hydrates every status cell from the Dimension Lab shell", () => {
|
|
expect(dashboardHydrationTiles(dimensionLabDashboardFixture)).toContainEqual({
|
|
kind: "status",
|
|
stripId: "footer-status",
|
|
id: "auto-refresh",
|
|
});
|
|
});
|
|
});
|