feat(web): hydrate dashboard tiles independently

This commit is contained in:
vince 2026-06-20 12:21:36 +02:00
parent 021f2cf20e
commit 23c8f0964c
7 changed files with 642 additions and 20 deletions

View file

@ -1,5 +1,6 @@
import { renderToString } from "react-dom/server";
import { describe, expect, test } from "vitest";
import { genericDashboardFixture } from "@dimensionlab/dashboard-model/fixtures";
import { AppStateView } from "./App";
describe("React app dashboard state view", () => {
@ -41,4 +42,35 @@ describe("React app dashboard state view", () => {
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: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"');
});
});