hikari-desktop/src/lib/components/StatusBar.test.ts

/**
 * StatusBar Component Tests
 *
 * Tests the connection status colour and text helpers used by the
 * StatusBar component to display the current Claude connection state.
 *
 * What this component does:
 * - Shows a coloured indicator dot for the connection state
 * - Shows a text label for the connection state
 * - Provides connect/disconnect buttons
 * - Contains the working directory input and browse button
 * - Renders the NavMenu component for all toolbar actions
 *
 * Manual testing checklist:
 * - [ ] Green dot and "Connected" label when Claude is running
 * - [ ] Animated yellow dot and "Connecting..." label whilst connecting
 * - [ ] Red dot and "Error" label on connection error
 * - [ ] Grey dot and "Disconnected" label when not connected
 * - [ ] Directory input is hidden when connected, visible when disconnected
 * - [ ] Connect button transitions to Disconnect button on connection
 * - [ ] NavMenu trigger button visible in the status bar
 */

import { describe, it, expect } from "vitest";

type ConnectionStatus = "connected" | "connecting" | "disconnected" | "error";

function getStatusColor(connectionStatus: ConnectionStatus): string {
  switch (connectionStatus) {
    case "connected":
      return "bg-green-500";
    case "connecting":
      return "bg-yellow-500 animate-pulse";
    case "error":
      return "bg-red-500";
    default:
      return "bg-gray-500";
  }
}

function getStatusText(connectionStatus: ConnectionStatus): string {
  switch (connectionStatus) {
    case "connected":
      return "Connected";
    case "connecting":
      return "Connecting...";
    case "error":
      return "Error";
    default:
      return "Disconnected";
  }
}

// ---

describe("getStatusColor", () => {
  it("returns green for connected status", () => {
    expect(getStatusColor("connected")).toBe("bg-green-500");
  });

  it("returns animated yellow for connecting status", () => {
    expect(getStatusColor("connecting")).toBe("bg-yellow-500 animate-pulse");
  });

  it("returns red for error status", () => {
    expect(getStatusColor("error")).toBe("bg-red-500");
  });

  it("returns grey for disconnected status", () => {
    expect(getStatusColor("disconnected")).toBe("bg-gray-500");
  });
});

describe("getStatusText", () => {
  it("returns 'Connected' for connected status", () => {
    expect(getStatusText("connected")).toBe("Connected");
  });

  it("returns 'Connecting...' for connecting status", () => {
    expect(getStatusText("connecting")).toBe("Connecting...");
  });

  it("returns 'Error' for error status", () => {
    expect(getStatusText("error")).toBe("Error");
  });

  it("returns 'Disconnected' for disconnected status", () => {
    expect(getStatusText("disconnected")).toBe("Disconnected");
  });
});