shipwright-cli 2.3.0 → 2.3.1

package/dashboard/src/core/state.test.ts

@@ -0,0 +1,235 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+// Re-create store for each test to avoid state leakage
+function createStore() {
+  // Reset module cache to get fresh store
+  const mod = require("./state");
+  return mod.store;
+}
+
+// Since the module exports a singleton, we'll test the Store class behavior
+// by importing and using the exported store, resetting between tests
+import { store } from "./state";
+import type { AppState } from "./state";
+
+describe("Store", () => {
+  beforeEach(() => {
+    // Reset to default state
+    store.update({
+      connected: false,
+      connectedAt: null,
+      fleetState: null,
+      activeTab: "overview",
+      selectedPipelineIssue: null,
+      pipelineDetail: null,
+      pipelineFilter: "all",
+      activityFilter: "all",
+      activityIssueFilter: "",
+      activityEvents: [],
+      activityOffset: 0,
+      activityHasMore: false,
+      metricsCache: null,
+      insightsCache: null,
+      machinesCache: null,
+      joinTokensCache: null,
+      costBreakdownCache: null,
+      alertsCache: null,
+      alertDismissed: false,
+      teamCache: null,
+      teamActivityCache: null,
+      daemonConfig: null,
+      currentUser: null,
+      selectedIssues: {},
+      firstRender: true,
+    });
+  });
+
+  describe("get/set", () => {
+    it("returns the initial value for a key", () => {
+      expect(store.get("connected")).toBe(false);
+      expect(store.get("activeTab")).toBe("overview");
+      expect(store.get("firstRender")).toBe(true);
+    });
+
+    it("sets and retrieves a value", () => {
+      store.set("connected", true);
+      expect(store.get("connected")).toBe(true);
+    });
+
+    it("sets activeTab correctly", () => {
+      store.set("activeTab", "pipelines");
+      expect(store.get("activeTab")).toBe("pipelines");
+    });
+
+    it("handles null values", () => {
+      store.set("fleetState", null);
+      expect(store.get("fleetState")).toBeNull();
+    });
+
+    it("handles numeric values", () => {
+      store.set("selectedPipelineIssue", 42);
+      expect(store.get("selectedPipelineIssue")).toBe(42);
+    });
+  });
+
+  describe("getState", () => {
+    it("returns a snapshot of the full state", () => {
+      const state = store.getState();
+      expect(state.connected).toBe(false);
+      expect(state.activeTab).toBe("overview");
+      expect(state).toHaveProperty("fleetState");
+    });
+  });
+
+  describe("update", () => {
+    it("updates multiple keys at once", () => {
+      store.update({
+        connected: true,
+        connectedAt: 1234567890,
+        activeTab: "metrics",
+      });
+      expect(store.get("connected")).toBe(true);
+      expect(store.get("connectedAt")).toBe(1234567890);
+      expect(store.get("activeTab")).toBe("metrics");
+    });
+
+    it("does not trigger listeners when values haven't changed", () => {
+      const listener = vi.fn();
+      store.subscribe("connected", listener);
+      store.update({ connected: false }); // already false
+      expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("triggers listeners for each changed key", () => {
+      const connectedListener = vi.fn();
+      const tabListener = vi.fn();
+      store.subscribe("connected", connectedListener);
+      store.subscribe("activeTab", tabListener);
+
+      store.update({ connected: true, activeTab: "insights" });
+
+      expect(connectedListener).toHaveBeenCalledWith(true, false);
+      expect(tabListener).toHaveBeenCalledWith("insights", "overview");
+    });
+  });
+
+  describe("subscribe", () => {
+    it("calls listener when the subscribed key changes", () => {
+      const listener = vi.fn();
+      store.subscribe("connected", listener);
+      store.set("connected", true);
+      expect(listener).toHaveBeenCalledWith(true, false);
+    });
+
+    it("does not call listener for unchanged value (same reference)", () => {
+      const listener = vi.fn();
+      store.subscribe("connected", listener);
+      store.set("connected", false); // already false
+      expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("returns an unsubscribe function", () => {
+      const listener = vi.fn();
+      const unsub = store.subscribe("connected", listener);
+
+      store.set("connected", true);
+      expect(listener).toHaveBeenCalledTimes(1);
+
+      unsub();
+      store.set("connected", false);
+      expect(listener).toHaveBeenCalledTimes(1); // not called again
+    });
+
+    it("supports multiple listeners on the same key", () => {
+      const listener1 = vi.fn();
+      const listener2 = vi.fn();
+      store.subscribe("activeTab", listener1);
+      store.subscribe("activeTab", listener2);
+
+      store.set("activeTab", "team");
+
+      expect(listener1).toHaveBeenCalledWith("team", "overview");
+      expect(listener2).toHaveBeenCalledWith("team", "overview");
+    });
+
+    it("supports listeners on different keys independently", () => {
+      const connListener = vi.fn();
+      const tabListener = vi.fn();
+      store.subscribe("connected", connListener);
+      store.subscribe("activeTab", tabListener);
+
+      store.set("connected", true);
+      expect(connListener).toHaveBeenCalledTimes(1);
+      expect(tabListener).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("onAny", () => {
+    it("fires on any state change", () => {
+      const listener = vi.fn();
+      store.onAny(listener);
+
+      store.set("connected", true);
+      expect(listener).toHaveBeenCalledTimes(1);
+
+      store.set("activeTab", "metrics");
+      expect(listener).toHaveBeenCalledTimes(2);
+    });
+
+    it("returns an unsubscribe function", () => {
+      const listener = vi.fn();
+      const unsub = store.onAny(listener);
+
+      store.set("connected", true);
+      expect(listener).toHaveBeenCalledTimes(1);
+
+      unsub();
+      store.set("activeTab", "metrics");
+      expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("receives the full state object", () => {
+      const listener = vi.fn();
+      store.onAny(listener);
+      store.set("connected", true);
+
+      const receivedState = listener.mock.calls[0][0] as AppState;
+      expect(receivedState.connected).toBe(true);
+      expect(receivedState.activeTab).toBe("overview");
+    });
+  });
+
+  describe("edge cases", () => {
+    it("handles rapid updates without losing data", () => {
+      for (let i = 0; i < 100; i++) {
+        store.set("activityOffset", i);
+      }
+      expect(store.get("activityOffset")).toBe(99);
+    });
+
+    it("handles object values (reference equality check)", () => {
+      const events = [{ type: "test" }];
+      const listener = vi.fn();
+      store.subscribe("activityEvents", listener);
+
+      store.set("activityEvents", events);
+      expect(listener).toHaveBeenCalledTimes(1);
+
+      // Same reference, should not fire
+      store.set("activityEvents", events);
+      expect(listener).toHaveBeenCalledTimes(1);
+
+      // New reference with same content, WILL fire (reference check)
+      store.set("activityEvents", [...events]);
+      expect(listener).toHaveBeenCalledTimes(2);
+    });
+
+    it("handles selectedIssues record updates", () => {
+      store.set("selectedIssues", { "123": true, "456": true });
+      expect(store.get("selectedIssues")).toEqual({
+        "123": true,
+        "456": true,
+      });
+    });
+  });
+});

package/dashboard/src/core/ws.test.ts

@@ -0,0 +1,216 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+
+describe("WebSocket module", () => {
+  let ws: typeof import("./ws");
+  let store: typeof import("./state");
+
+  // Mock WebSocket
+  class MockWebSocket {
+    url: string;
+    onopen: (() => void) | null = null;
+    onclose: (() => void) | null = null;
+    onerror: (() => void) | null = null;
+    onmessage: ((e: { data: string }) => void) | null = null;
+
+    constructor(url: string) {
+      this.url = url;
+      MockWebSocket.instances.push(this);
+    }
+
+    close() {}
+
+    static instances: MockWebSocket[] = [];
+    static reset() {
+      MockWebSocket.instances = [];
+    }
+  }
+
+  beforeEach(async () => {
+    vi.resetModules();
+    vi.useFakeTimers();
+
+    // Set up DOM elements the ws module expects
+    document.body.innerHTML = `
+      <div id="connection-dot" class="connection-dot offline"></div>
+      <span id="connection-text">OFFLINE</span>
+      <div id="stale-data-banner" style="display:none"></div>
+      <span id="stale-data-age"></span>
+      <div class="main"></div>
+    `;
+
+    // Mock WebSocket
+    MockWebSocket.reset();
+    (global as any).WebSocket = MockWebSocket;
+
+    // Mock location
+    Object.defineProperty(window, "location", {
+      value: {
+        protocol: "http:",
+        host: "localhost:18767",
+        hash: "",
+      },
+      writable: true,
+    });
+
+    // Import fresh
+    store = await import("./state");
+    ws = await import("./ws");
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  describe("connect", () => {
+    it("creates a WebSocket with the correct URL", () => {
+      ws.connect();
+      expect(MockWebSocket.instances).toHaveLength(1);
+      expect(MockWebSocket.instances[0].url).toBe("ws://localhost:18767/ws");
+    });
+
+    it("stores the WebSocket reference", () => {
+      ws.connect();
+      expect(ws.getWebSocket()).toBeTruthy();
+    });
+  });
+
+  describe("onopen", () => {
+    it("sets connected state to true", () => {
+      ws.connect();
+      const instance = MockWebSocket.instances[0];
+      instance.onopen?.();
+
+      expect(store.store.get("connected")).toBe(true);
+      expect(store.store.get("connectedAt")).toBeGreaterThan(0);
+    });
+
+    it("updates connection status to LIVE", () => {
+      ws.connect();
+      MockWebSocket.instances[0].onopen?.();
+
+      const dot = document.getElementById("connection-dot");
+      expect(dot?.className).toContain("live");
+    });
+  });
+
+  describe("onclose", () => {
+    it("sets connected state to false", () => {
+      ws.connect();
+      const instance = MockWebSocket.instances[0];
+      instance.onopen?.();
+      instance.onclose?.();
+
+      expect(store.store.get("connected")).toBe(false);
+      expect(store.store.get("connectedAt")).toBeNull();
+    });
+
+    it("updates connection status to OFFLINE", () => {
+      ws.connect();
+      const instance = MockWebSocket.instances[0];
+      instance.onclose?.();
+
+      const dot = document.getElementById("connection-dot");
+      expect(dot?.className).toContain("offline");
+    });
+
+    it("schedules reconnection", () => {
+      ws.connect();
+      const instance = MockWebSocket.instances[0];
+      instance.onclose?.();
+
+      // Should schedule a reconnect
+      vi.advanceTimersByTime(1500);
+      // A new WebSocket should have been created
+      expect(MockWebSocket.instances.length).toBeGreaterThanOrEqual(2);
+    });
+
+    it("uses exponential backoff for reconnection", () => {
+      ws.connect();
+
+      // First close - 1s delay
+      MockWebSocket.instances[0].onclose?.();
+      vi.advanceTimersByTime(1100);
+      expect(MockWebSocket.instances.length).toBe(2);
+
+      // Second close - 2s delay
+      MockWebSocket.instances[1].onclose?.();
+      vi.advanceTimersByTime(1100);
+      expect(MockWebSocket.instances.length).toBe(2); // not yet
+      vi.advanceTimersByTime(1100);
+      expect(MockWebSocket.instances.length).toBe(3); // now
+    });
+  });
+
+  describe("onmessage", () => {
+    it("parses JSON and updates fleet state", () => {
+      ws.connect();
+      const instance = MockWebSocket.instances[0];
+      instance.onopen?.();
+
+      const mockState = {
+        pipelines: [{ issue: 42, status: "building" }],
+        machines: [],
+      };
+      instance.onmessage?.({ data: JSON.stringify(mockState) });
+
+      expect(store.store.get("fleetState")).toEqual(mockState);
+      expect(store.store.get("firstRender")).toBe(false);
+    });
+
+    it("handles malformed JSON gracefully", () => {
+      ws.connect();
+      const instance = MockWebSocket.instances[0];
+      instance.onopen?.();
+
+      const consoleSpy = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {});
+      instance.onmessage?.({ data: "not json{" });
+
+      // Should not crash, fleet state should remain null
+      expect(store.store.get("fleetState")).toBeNull();
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe("stale data detection", () => {
+    it("shows stale banner after 30s without data", () => {
+      ws.connect();
+      const instance = MockWebSocket.instances[0];
+      instance.onopen?.();
+
+      // Send one message to set lastDataTime
+      instance.onmessage?.({ data: JSON.stringify({ pipelines: [] }) });
+
+      // Advance time by 35 seconds
+      vi.advanceTimersByTime(35000);
+
+      const banner = document.getElementById("stale-data-banner");
+      expect(banner?.style.display).not.toBe("none");
+    });
+  });
+
+  describe("offline banner", () => {
+    it("shows offline banner on disconnect", () => {
+      ws.connect();
+      MockWebSocket.instances[0].onclose?.();
+
+      const banner = document.getElementById("offline-banner");
+      expect(banner).toBeTruthy();
+      expect(banner?.style.display).not.toBe("none");
+    });
+
+    it("hides offline banner on reconnect", () => {
+      ws.connect();
+      MockWebSocket.instances[0].onclose?.();
+
+      // Reconnect
+      vi.advanceTimersByTime(1500);
+      MockWebSocket.instances[1].onopen?.();
+
+      const banner = document.getElementById("offline-banner");
+      expect(banner?.style.display).toBe("none");
+    });
+  });
+});

package/dashboard/src/design/icons.test.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect } from "vitest";
+import { icon, iconNames } from "./icons";
+import type { IconName } from "./icons";
+
+describe("Icons", () => {
+  describe("iconNames", () => {
+    it("exports a non-empty list of icon names", () => {
+      expect(iconNames.length).toBeGreaterThan(0);
+    });
+
+    it("includes essential navigation icons", () => {
+      const essential = [
+        "anchor",
+        "layout-dashboard",
+        "users",
+        "activity",
+        "server",
+      ];
+      for (const name of essential) {
+        expect(iconNames).toContain(name);
+      }
+    });
+
+    it("includes status icons", () => {
+      const status = [
+        "circle-check",
+        "circle-x",
+        "circle-alert",
+        "circle-pause",
+      ];
+      for (const name of status) {
+        expect(iconNames).toContain(name);
+      }
+    });
+
+    it("includes action icons", () => {
+      const actions = ["play", "pause", "send", "plus", "x", "copy"];
+      for (const name of actions) {
+        expect(iconNames).toContain(name);
+      }
+    });
+  });
+
+  describe("icon()", () => {
+    it("returns an SVG string for a valid icon", () => {
+      const svg = icon("anchor");
+      expect(svg).toContain("<svg");
+      expect(svg).toContain("</svg>");
+      expect(svg).toContain('xmlns="http://www.w3.org/2000/svg"');
+    });
+
+    it("returns empty string for unknown icon", () => {
+      const svg = icon("nonexistent-icon-name" as IconName);
+      expect(svg).toBe("");
+    });
+
+    it("uses default size of 16", () => {
+      const svg = icon("anchor");
+      expect(svg).toContain('width="16"');
+      expect(svg).toContain('height="16"');
+    });
+
+    it("respects custom size", () => {
+      const svg = icon("anchor", 24);
+      expect(svg).toContain('width="24"');
+      expect(svg).toContain('height="24"');
+    });
+
+    it("applies color attribute when provided", () => {
+      const svg = icon("anchor", 16, "#ff0000");
+      expect(svg).toContain('color="#ff0000"');
+    });
+
+    it("omits color attribute when not provided", () => {
+      const svg = icon("anchor");
+      expect(svg).not.toContain("color=");
+    });
+
+    it("always includes stroke attributes", () => {
+      const svg = icon("anchor");
+      expect(svg).toContain('stroke="currentColor"');
+      expect(svg).toContain('stroke-width="2"');
+      expect(svg).toContain('stroke-linecap="round"');
+      expect(svg).toContain('stroke-linejoin="round"');
+    });
+
+    it("includes fill=none", () => {
+      const svg = icon("anchor");
+      expect(svg).toContain('fill="none"');
+    });
+
+    it("uses 24x24 viewBox", () => {
+      const svg = icon("anchor");
+      expect(svg).toContain('viewBox="0 0 24 24"');
+    });
+
+    it("renders every registered icon without error", () => {
+      for (const name of iconNames) {
+        const svg = icon(name);
+        expect(svg).toContain("<svg");
+        expect(svg).toContain("</svg>");
+      }
+    });
+  });
+});