diff --git a/src/lib/components/StatusBarCalendar.svelte.test.ts b/src/lib/components/StatusBarCalendar.svelte.test.ts
new file mode 100644
index 00000000..5540f66b
--- /dev/null
+++ b/src/lib/components/StatusBarCalendar.svelte.test.ts
@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import { render } from "vitest-browser-svelte";
+import StatusBarCalendar from "./StatusBarCalendar.svelte";
+import type { TimestampStatusCount } from "$lib/server/types/db";
+
+// Noon UTC keeps the rendered calendar date stable for any machine timezone
+// with an offset within ±11 hours (the timezone store defaults to browser TZ).
+const NOON_UTC = 1768478400; // 2026-01-15T12:00:00Z
+
+const day = (overrides: Partial<TimestampStatusCount>): TimestampStatusCount => ({
+  ts: NOON_UTC,
+  countOfUp: 0,
+  countOfDown: 0,
+  countOfDegraded: 0,
+  countOfMaintenance: 0,
+  avgLatency: 0,
+  maxLatency: 0,
+  minLatency: 0,
+  ...overrides,
+});
+
+describe("StatusBarCalendar", () => {
+  it("labels the canvas with the number of days", async () => {
+    const data = [day({ countOfUp: 10 }), day({ countOfUp: 10 }), day({ countOfUp: 10 })];
+    const screen = await render(StatusBarCalendar, { data, monitorTag: "test-monitor", disableClick: true });
+
+    await expect.element(screen.getByLabelText("Status calendar showing 3-day uptime data")).toBeInTheDocument();
+  });
+
+  it("shows status summary, date, and latency in the tooltip of the hovered day", async () => {
+    // Three bars: hovering the canvas center lands on the middle bar (index 1),
+    // which is 90% down => "Major System Outage" (>= 75% threshold).
+    const data = [
+      day({ countOfUp: 100 }),
+      day({ countOfDown: 90, countOfUp: 10, avgLatency: 250 }),
+      day({ countOfUp: 90, countOfDegraded: 10 }),
+    ];
+    const screen = await render(StatusBarCalendar, { data, monitorTag: "test-monitor", disableClick: true });
+
+    await screen.getByLabelText("Status calendar showing 3-day uptime data").hover();
+
+    await expect.element(screen.getByText("Major System Outage")).toBeInTheDocument();
+    // page.data.dateAndTimeFormat.dateOnly is mocked as "yyyy-MM-dd" in vitest-setup-client.ts
+    await expect.element(screen.getByText("2026-01-15", { exact: false })).toBeInTheDocument();
+    await expect.element(screen.getByText("250ms")).toBeInTheDocument();
+  });
+
+  it("reports a partial outage when downtime is below the 75% threshold", async () => {
+    const data = [day({ countOfUp: 100 }), day({ countOfDown: 20, countOfUp: 80 }), day({ countOfUp: 100 })];
+    const screen = await render(StatusBarCalendar, { data, monitorTag: "test-monitor", disableClick: true });
+
+    await screen.getByLabelText("Status calendar showing 3-day uptime data").hover();
+
+    await expect.element(screen.getByText("Partial System Outage")).toBeInTheDocument();
+  });
+});