components/ChatPanel.test.tsx

import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it, vi } from "vitest";
import { DEFAULT_LLM_BASE_URL, DEFAULT_LLM_MODEL } from "@/lib/llm-config";
import { ChatPanel } from "./ChatPanel";
import seedWorkPackages from "../agentic_pm_demo_codex_plans/data/work-packages.seed.json";
import type { WorkPackage } from "@/lib/work-package-types";

const workPackages = seedWorkPackages as WorkPackage[];

function renderChatPanel(draft = "") {
  return renderToStaticMarkup(
    <ChatPanel
      messages={[]}
      draft={draft}
      setDraft={vi.fn()}
      busy={false}
      productTitle="Agentic PM Demo"
      currentActivity="Ready"
      workPackages={workPackages}
      selectedWorkPackageId="wp-srs"
      onSelectWorkPackage={vi.fn()}
      llmConfig={{
        apiKey: "",
        baseUrl: DEFAULT_LLM_BASE_URL,
        model: DEFAULT_LLM_MODEL,
      }}
      setLlmConfig={vi.fn()}
      isMockMode={true}
      connectionStatus="idle"
      connectionMessage="Add API key, base URL, and model to enable live automation."
      canTestConnection={true}
      onTestConnection={vi.fn()}
      onSend={vi.fn()}
    />,
  );
}

describe("ChatPanel", () => {
  it("keeps model settings folded by default in mock mode", () => {
    expect(renderChatPanel()).not.toContain("Paste your API key");
  });

  it("renders package suggestions when the draft ends with @ mention text", () => {
    const html = renderChatPanel("@sr");

    expect(html).toContain("@SRS");
    expect(html).toContain("System Requirements Specification");
  });

  it("renders slash command suggestions when the draft ends with slash text", () => {
    const html = renderChatPanel("/pl");

    expect(html).toContain("/plan");
    expect(html).toContain("Break a package into actionable work");
  });

  it("shows a test connection action when the model settings panel is open", () => {
    const html = renderToStaticMarkup(
      <ChatPanel
        messages={[]}
        draft=""
        setDraft={vi.fn()}
        busy={false}
        productTitle="Agentic PM Demo"
        currentActivity="Ready"
        workPackages={workPackages}
        selectedWorkPackageId="wp-srs"
        onSelectWorkPackage={vi.fn()}
        llmConfig={{
          apiKey: "",
          baseUrl: DEFAULT_LLM_BASE_URL,
          model: DEFAULT_LLM_MODEL,
        }}
        setLlmConfig={vi.fn()}
        isMockMode={true}
        connectionStatus="idle"
        connectionMessage="Add API key, base URL, and model to enable live automation."
        canTestConnection={true}
        onTestConnection={vi.fn()}
        onSend={vi.fn()}
        initialSettingsOpen={true}
      />,
    );

    expect(html).toContain("Test connection");
  });
});