generated from nhcarrigan/template
hikari
514e137590
Adds mirror-function tests for five Svelte components (HighlightedText, CliVersion, AchievementNotification, StatusBar, ConversationTabs) and removes stale eslint-disable comments from existing store test files.
90 lines
2.7 KiB
TypeScript
90 lines
2.7 KiB
TypeScript
/**
|
|
* 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
|
|
* - Houses all toolbar action buttons (settings, stats, panels, etc.)
|
|
*
|
|
* 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
|
|
*/
|
|
|
|
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");
|
|
});
|
|
});
|