126 lines
4.1 KiB
TypeScript
126 lines
4.1 KiB
TypeScript
import { render } from "svelte/server";
|
|
import { describe, expect, test } from "vitest";
|
|
import Button from "./Button.svelte";
|
|
import DashboardFrame from "./DashboardFrame.svelte";
|
|
import FooterCell from "./FooterCell.svelte";
|
|
import IconButton from "./IconButton.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%");
|
|
});
|
|
|
|
test("base button controls forward native attributes", () => {
|
|
const button = render(Button, {
|
|
props: {
|
|
label: "Refresh",
|
|
id: "refresh-action",
|
|
class: "custom-action",
|
|
"aria-controls": "refresh-target",
|
|
},
|
|
});
|
|
const iconButton = render(IconButton, {
|
|
props: {
|
|
icon: "mdi:refresh",
|
|
label: "Refresh status",
|
|
id: "refresh-icon-action",
|
|
class: "custom-icon-action",
|
|
"aria-expanded": "false",
|
|
},
|
|
});
|
|
|
|
expect(button.body).toContain("id=\"refresh-action\"");
|
|
expect(button.body).toContain("class=\"ui-button custom-action ");
|
|
expect(button.body).toContain("aria-controls=\"refresh-target\"");
|
|
expect(iconButton.body).toContain("id=\"refresh-icon-action\"");
|
|
expect(iconButton.body).toContain("class=\"icon-button custom-icon-action ");
|
|
expect(iconButton.body).toContain("aria-expanded=\"false\"");
|
|
});
|
|
});
|