test(web): add Mission Control frontend tests for phase 2 gate

apps/web/src/components/mission-control/OrchestratorPanel.test.tsx

@@ -0,0 +1,218 @@
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+
+interface MockButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+interface MockContainerProps extends HTMLAttributes<HTMLElement> {
+  children: ReactNode;
+}
+
+type MockConnectionStatus = "connected" | "connecting" | "error";
+type MockRole = "user" | "assistant" | "tool" | "system";
+
+interface MockMessage {
+  id: string;
+  role: MockRole;
+  content: string;
+  timestamp: string;
+}
+
+interface MockSession {
+  id: string;
+  status: string;
+}
+
+interface MockSessionStreamResult {
+  messages: MockMessage[];
+  status: MockConnectionStatus;
+  error: string | null;
+}
+
+interface MockSessionsResult {
+  sessions: MockSession[];
+  loading: boolean;
+  error: Error | null;
+}
+
+interface MockPanelControlsProps {
+  sessionId: string;
+  status: string;
+  onStatusChange?: (nextStatus: string) => void;
+}
+
+interface MockBargeInInputProps {
+  sessionId: string;
+}
+
+const mockUseSessionStream = vi.fn<(sessionId: string) => MockSessionStreamResult>();
+const mockUseSessions = vi.fn<() => MockSessionsResult>();
+const mockPanelControls = vi.fn<(props: MockPanelControlsProps) => React.JSX.Element>();
+const mockBargeInInput = vi.fn<(props: MockBargeInInputProps) => React.JSX.Element>();
+
+vi.mock("date-fns", () => ({
+  formatDistanceToNow: (): string => "moments ago",
+}));
+
+vi.mock("@/hooks/useMissionControl", () => ({
+  useSessionStream: (sessionId: string): MockSessionStreamResult => mockUseSessionStream(sessionId),
+  useSessions: (): MockSessionsResult => mockUseSessions(),
+}));
+
+vi.mock("@/components/mission-control/PanelControls", () => ({
+  PanelControls: (props: MockPanelControlsProps): React.JSX.Element => mockPanelControls(props),
+}));
+
+vi.mock("@/components/mission-control/BargeInInput", () => ({
+  BargeInInput: (props: MockBargeInInputProps): React.JSX.Element => mockBargeInInput(props),
+}));
+
+vi.mock("@/components/ui/button", () => ({
+  Button: ({ children, ...props }: MockButtonProps): React.JSX.Element => (
+    <button {...props}>{children}</button>
+  ),
+}));
+
+vi.mock("@/components/ui/badge", () => ({
+  Badge: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <span {...props}>{children}</span>
+  ),
+}));
+
+vi.mock("@/components/ui/card", () => ({
+  Card: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <section {...props}>{children}</section>
+  ),
+  CardHeader: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <header {...props}>{children}</header>
+  ),
+  CardContent: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <div {...props}>{children}</div>
+  ),
+  CardTitle: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <h2 {...props}>{children}</h2>
+  ),
+}));
+
+vi.mock("@/components/ui/scroll-area", () => ({
+  ScrollArea: ({ children, ...props }: MockContainerProps): React.JSX.Element => (
+    <div {...props}>{children}</div>
+  ),
+}));
+
+import { OrchestratorPanel } from "./OrchestratorPanel";
+
+beforeAll((): void => {
+  Object.defineProperty(window.HTMLElement.prototype, "scrollIntoView", {
+    configurable: true,
+    value: vi.fn(),
+  });
+});
+
+describe("OrchestratorPanel", (): void => {
+  beforeEach((): void => {
+    vi.clearAllMocks();
+    vi.stubGlobal("fetch", vi.fn());
+
+    mockUseSessionStream.mockReturnValue({
+      messages: [],
+      status: "connecting",
+      error: null,
+    });
+
+    mockUseSessions.mockReturnValue({
+      sessions: [],
+      loading: false,
+      error: null,
+    });
+
+    mockPanelControls.mockImplementation(
+      ({ status }: MockPanelControlsProps): React.JSX.Element => (
+        <div data-testid="panel-controls">status:{status}</div>
+      )
+    );
+
+    mockBargeInInput.mockImplementation(
+      ({ sessionId }: MockBargeInInputProps): React.JSX.Element => (
+        <textarea aria-label="barge-input" data-session-id={sessionId} />
+      )
+    );
+  });
+
+  afterEach((): void => {
+    vi.unstubAllGlobals();
+  });
+
+  it("renders a selectable empty state when no session is provided", (): void => {
+    render(<OrchestratorPanel />);
+
+    expect(screen.getByText("Select an agent to view its stream")).toBeInTheDocument();
+    expect(screen.queryByText("Session: session-1")).not.toBeInTheDocument();
+  });
+
+  it("renders connection indicator and panel controls for an active session", (): void => {
+    mockUseSessionStream.mockReturnValue({
+      messages: [],
+      status: "connected",
+      error: null,
+    });
+
+    mockUseSessions.mockReturnValue({
+      sessions: [{ id: "session-1", status: "paused" }],
+      loading: false,
+      error: null,
+    });
+
+    render(<OrchestratorPanel sessionId="session-1" />);
+
+    expect(screen.getByText("Connected")).toBeInTheDocument();
+    expect(screen.getByText("Session: session-1")).toBeInTheDocument();
+    expect(screen.getByText("Waiting for messages...")).toBeInTheDocument();
+    expect(screen.getByTestId("panel-controls")).toHaveTextContent("status:paused");
+  });
+
+  it("renders stream messages with role and content", (): void => {
+    mockUseSessionStream.mockReturnValue({
+      status: "connected",
+      error: null,
+      messages: [
+        {
+          id: "msg-1",
+          role: "assistant",
+          content: "Mission accepted.",
+          timestamp: "2026-03-07T18:42:00.000Z",
+        },
+      ],
+    });
+
+    render(<OrchestratorPanel sessionId="session-2" />);
+
+    expect(screen.getByText("assistant")).toBeInTheDocument();
+    expect(screen.getByText("Mission accepted.")).toBeInTheDocument();
+    expect(screen.getByText("moments ago")).toBeInTheDocument();
+    expect(screen.getByLabelText("barge-input")).toHaveAttribute("data-session-id", "session-2");
+  });
+
+  it("renders stream error text when the session has no messages", (): void => {
+    mockUseSessionStream.mockReturnValue({
+      messages: [],
+      status: "error",
+      error: "Mission Control stream disconnected.",
+    });
+
+    render(<OrchestratorPanel sessionId="session-3" />);
+
+    expect(screen.getByText("Error")).toBeInTheDocument();
+    expect(screen.getByText("Mission Control stream disconnected.")).toBeInTheDocument();
+  });
+
+  it("respects close button disabled state in panel actions", (): void => {
+    const onClose = vi.fn<() => void>();
+
+    render(<OrchestratorPanel onClose={onClose} closeDisabled />);
+
+    expect(screen.getByRole("button", { name: "Remove panel" })).toBeDisabled();
+  });
+});