feat: build dashboard design system

src/lib/ui/components/render.test.ts

@@ -0,0 +1,97 @@
+import { render } from "svelte/server";
+import { describe, expect, test } from "vitest";
+import DashboardFrame from "./DashboardFrame.svelte";
+import FooterCell from "./FooterCell.svelte";
+import ServiceRow from "./ServiceRow.svelte";
+import TelemetryCard from "./TelemetryCard.svelte";
+import { dashboardPreviewFixtures } from "../fixtures";
+
+describe("dashboard UI components", () => {
+  test("renders the primary generic dashboard fixture", () => {
+    const { body } = render(DashboardFrame, {
+      props: {
+        dashboard: dashboardPreviewFixtures.primary,
+      },
+    });
+
+    expect(body).toContain("Operations Console");
+    expect(body).toContain("Core Throughput");
+    expect(body).toContain("Queue Workers");
+    expect(body).toContain("data-icon-name=\"mdi:server-network\"");
+    expect(body).toContain("data-severity=\"warning\"");
+    expect(body).not.toContain("dashboard-title");
+  });
+
+  test("renders another generic dashboard fixture through the same component", () => {
+    const { body } = render(DashboardFrame, {
+      props: {
+        dashboard: dashboardPreviewFixtures.secondary,
+      },
+    });
+
+    expect(body).toContain("Support Desk");
+    expect(body).toContain("Response Window");
+    expect(body).toContain("Regional Nodes");
+    expect(body).toContain("data-icon-name=\"mdi:headset\"");
+    expect(body).toContain("data-severity=\"loading\"");
+  });
+
+  test("renders optional service and status links as focusable anchors", () => {
+    const service = render(ServiceRow, {
+      props: {
+        service: {
+          id: "linked-service",
+          label: "Linked Service",
+          description: "Generic linked destination",
+          severity: "ok",
+          detail: "ready",
+          link: { href: "https://example.test/service", external: true },
+        },
+      },
+    });
+    const footer = render(FooterCell, {
+      props: {
+        item: {
+          id: "linked-status",
+          label: "Linked Status",
+          value: "open",
+          severity: "neutral",
+          link: { href: "https://example.test/status" },
+        },
+      },
+    });
+
+    expect(service.body).toContain("<a ");
+    expect(service.body).toContain("href=\"https://example.test/service\"");
+    expect(service.body).toContain("target=\"_blank\"");
+    expect(footer.body).toContain("<a ");
+    expect(footer.body).toContain("href=\"https://example.test/status\"");
+  });
+
+  test("does not render progress bars for non-percent metrics without explicit progress", () => {
+    const withoutProgress = render(TelemetryCard, {
+      props: {
+        card: {
+          id: "bytes",
+          label: "Bytes Metric",
+          value: { kind: "bytes", value: 2048 },
+          severity: "neutral",
+        },
+      },
+    });
+    const withProgress = render(TelemetryCard, {
+      props: {
+        card: {
+          id: "bytes-with-progress",
+          label: "Bytes With Progress",
+          value: { kind: "bytes", value: 2048 },
+          progress: 42,
+          severity: "neutral",
+        },
+      },
+    });
+
+    expect(withoutProgress.body).not.toContain("telemetry-card__bar");
+    expect(withProgress.body).toContain("--metric-progress: 42%");
+  });
+});