@dyyz1993/create-agent 1.9.0

package/templates/agent/src/mainview/__tests__/components/ChatPanel.test.tsx

@@ -0,0 +1,114 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+vi.mock("@tanstack/react-virtual", () => ({
+  useVirtualizer: (options: { count: number }) => ({
+    getVirtualItems: () =>
+      Array.from({ length: options.count }).map((_, i) => ({
+        index: i,
+        key: i,
+        start: i * 80,
+        size: 80,
+      })),
+    getTotalSize: () => options.count * 80,
+    scrollToIndex: vi.fn(),
+  }),
+}));
+
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ChatPanel } from "../../components/chat/ChatPanel";
+import { useChatStore } from "../../stores/use-chat-store";
+import { act } from "@testing-library/react";
+
+vi.mock("../../lib/i18n", () => ({
+  default: {
+    isInitialized: true,
+    language: "en",
+    changeLanguage: vi.fn(),
+    t: (key: string) => key,
+    getResource: vi.fn(),
+  },
+  supportedLocales: ["en", "zh"],
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: "en", changeLanguage: vi.fn() },
+  }),
+  initReactI18next: { type: "3rdParty", init: vi.fn() },
+}));
+
+vi.mock("../../lib/api-client", () => ({
+  apiClient: {
+    call: vi.fn().mockResolvedValue({ ok: true }),
+  },
+}));
+
+vi.mock("../../stores/use-log-store", () => ({
+  useLogStore: {
+    getState: () => ({ addLog: vi.fn() }),
+  },
+}));
+
+describe("ChatPanel", () => {
+  beforeEach(() => {
+    act(() => {
+      useChatStore.setState({ messages: [], inputText: "" });
+    });
+  });
+
+  it("renders empty state", () => {
+    render(<ChatPanel />);
+    expect(screen.getByText("chat.empty")).toBeInTheDocument();
+  });
+
+  it("renders messages header", () => {
+    render(<ChatPanel />);
+    expect(screen.getByText("chat.title")).toBeInTheDocument();
+  });
+
+  it("shows message count badge", () => {
+    act(() => {
+      useChatStore.setState({
+        messages: [
+          { id: "1", role: "user", content: "hi", timestamp: 1000 },
+        ],
+      });
+    });
+    render(<ChatPanel />);
+    expect(screen.getByText("1")).toBeInTheDocument();
+  });
+
+  it("renders message list", () => {
+    act(() => {
+      useChatStore.setState({
+        messages: [
+          { id: "1", role: "user", content: "Hello", timestamp: 1000 },
+          { id: "2", role: "assistant", content: "World", timestamp: 2000 },
+        ],
+      });
+    });
+    render(<ChatPanel />);
+    expect(screen.getByText("Hello")).toBeInTheDocument();
+    expect(screen.getByText("World")).toBeInTheDocument();
+  });
+
+  it("has input field", () => {
+    render(<ChatPanel />);
+    expect(screen.getByPlaceholderText("chat.placeholder")).toBeInTheDocument();
+  });
+
+  it("has send button", () => {
+    render(<ChatPanel />);
+    expect(screen.getByRole("button", { name: /send/i })).toBeInTheDocument();
+  });
+
+  it("typing updates input", async () => {
+    const user = userEvent.setup();
+    render(<ChatPanel />);
+    const input = screen.getByPlaceholderText("chat.placeholder");
+    await user.type(input, "hello");
+    expect(input).toHaveValue("hello");
+  });
+});

package/templates/agent/src/mainview/__tests__/components/ExplorerSidebar.test.tsx

@@ -0,0 +1,141 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+    i18n: { language: "en", changeLanguage: vi.fn() },
+  }),
+  initReactI18next: { type: "3rdParty", init: vi.fn() },
+}));
+
+vi.mock("../../stores/use-explorer-store", () => {
+  const toggleNode = vi.fn();
+  const openFile = vi.fn();
+  const setCurrentPath = vi.fn();
+  const listRootDir = vi.fn();
+  const startEditing = vi.fn();
+  const cancelEditing = vi.fn();
+  const createFile = vi.fn();
+  const createDir = vi.fn();
+  const renameNode = vi.fn();
+  const deleteNode = vi.fn();
+  const importFiles = vi.fn();
+
+  const state = {
+    treeNodes: [
+      {
+        name: "src",
+        path: "/project/src",
+        type: "directory" as const,
+        children: [],
+        expanded: false,
+        loaded: false,
+      },
+      {
+        name: "package.json",
+        path: "/project/package.json",
+        type: "file" as const,
+      },
+    ],
+    currentPath: "/project",
+    selectedPath: null,
+    editingNode: null,
+    toggleNode,
+    loadDirectory: vi.fn(),
+    openFile,
+    setCurrentPath,
+    listRootDir,
+    startEditing,
+    cancelEditing,
+    createFile,
+    createDir,
+    renameNode,
+    deleteNode,
+    importFiles,
+  };
+
+  return {
+    useExplorerStore: (selector: (s: typeof state) => unknown) => selector(state),
+  };
+});
+
+vi.mock("../../stores/use-sidebar-store", () => ({
+  useSidebarStore: () => ({ isPinned: true, setPinned: vi.fn(), breakpoint: "desktop" }),
+}));
+
+vi.mock("../../utils/drop-handler", () => ({
+  readDropItems: vi.fn().mockResolvedValue([]),
+}));
+
+vi.mock("../../utils/file-icon", () => ({
+  getFileIcon: () => <span data-testid="file-icon" />,
+}));
+
+describe("ExplorerSidebar (no props drilling)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders with zero data/action props — only store", async () => {
+    const { ExplorerSidebar } = await import(
+      "../../components/explorer/ExplorerSidebar"
+    );
+    render(<ExplorerSidebar />);
+
+    expect(screen.getByText("src")).toBeInTheDocument();
+    expect(screen.getByText("package.json")).toBeInTheDocument();
+  });
+
+  it("calls toggleNode from store on directory click", async () => {
+    const { useExplorerStore } = await import(
+      "../../stores/use-explorer-store"
+    );
+    const { ExplorerSidebar } = await import(
+      "../../components/explorer/ExplorerSidebar"
+    );
+    render(<ExplorerSidebar />);
+
+    const srcNode = screen.getByText("src");
+    fireEvent.click(srcNode);
+
+    const store = useExplorerStore((s: any) => s);
+    expect(store.toggleNode).toHaveBeenCalledWith("/project/src");
+  });
+
+  it("renders with hideOuterShell to remove outer wrapper", async () => {
+    const { ExplorerSidebar } = await import(
+      "../../components/explorer/ExplorerSidebar"
+    );
+    const { container } = render(<ExplorerSidebar hideOuterShell />);
+
+    const outer = container.querySelector(".sidebar-outer");
+    expect(outer).toBeNull();
+  });
+
+  it("renders path input with currentPath from store", async () => {
+    const { ExplorerSidebar } = await import(
+      "../../components/explorer/ExplorerSidebar"
+    );
+    render(<ExplorerSidebar />);
+
+    const input = screen.getByPlaceholderText("explorer.pathPlaceholder") as HTMLInputElement;
+    expect(input.value).toBe("/project");
+  });
+
+  it("calls listRootDir from store on refresh button click", async () => {
+    const { useExplorerStore } = await import(
+      "../../stores/use-explorer-store"
+    );
+    const { ExplorerSidebar } = await import(
+      "../../components/explorer/ExplorerSidebar"
+    );
+    render(<ExplorerSidebar />);
+
+    const refreshBtn = screen.getByTitle("explorer.listDirectory");
+    fireEvent.click(refreshBtn);
+
+    const store = useExplorerStore((s: any) => s);
+    expect(store.listRootDir).toHaveBeenCalled();
+  });
+});

package/templates/agent/src/mainview/__tests__/components/MessageBubble.test.tsx

@@ -0,0 +1,72 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MessageBubble } from "../../components/chat/MessageBubble";
+import type { ChatMessage } from "../../types";
+
+function createMessage(overrides: Partial<ChatMessage> = {}): ChatMessage {
+  return {
+    id: "msg-1",
+    role: "user",
+    content: "Hello world",
+    timestamp: Date.now(),
+    ...overrides,
+  };
+}
+
+describe("MessageBubble", () => {
+  it("renders user message with content", () => {
+    render(<MessageBubble message={createMessage()} />);
+    expect(screen.getByText("Hello world")).toBeInTheDocument();
+  });
+
+  it("renders assistant message", () => {
+    render(
+      <MessageBubble message={createMessage({ role: "assistant", content: "Hi there" })} />
+    );
+    expect(screen.getByText("Hi there")).toBeInTheDocument();
+  });
+
+  it("shows bot icon for assistant", () => {
+    const { container } = render(
+      <MessageBubble message={createMessage({ role: "assistant" })} />
+    );
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  it("renders markdown for assistant", () => {
+    render(
+      <MessageBubble
+        message={createMessage({
+          role: "assistant",
+          content: "**bold text** and `code`",
+        })}
+      />
+    );
+    expect(screen.getByText("bold text")).toBeInTheDocument();
+  });
+
+  it("shows timestamp when present", () => {
+    const ts = new Date(2024, 0, 1, 10, 30).getTime();
+    const { container } = render(
+      <MessageBubble message={createMessage({ timestamp: ts })} />
+    );
+    const timeEl = container.querySelector('[class*="text-\\[10px\\]"]');
+    if (timeEl) {
+      expect(timeEl.textContent).toContain("10:30");
+    }
+  });
+
+  it("applies different styles for user vs assistant", () => {
+    const { container: userContainer } = render(
+      <MessageBubble message={createMessage({ role: "user" })} />
+    );
+    const { container: assistantContainer } = render(
+      <MessageBubble message={createMessage({ role: "assistant" })} />
+    );
+    const userBubble = userContainer.querySelector('[class*="bg-\\[var\\(--color-accent\\)\\]"]');
+    const assistantBubble = assistantContainer.querySelector('[class*="bg-\\[var\\(--color-bg-tertiary\\)\\]"]');
+    expect(userBubble).toBeInTheDocument();
+    expect(assistantBubble).toBeInTheDocument();
+  });
+});

package/templates/agent/src/mainview/__tests__/hooks/use-input-history.test.ts

@@ -0,0 +1,125 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useInputHistory } from "../../hooks/use-input-history";
+
+describe("useInputHistory", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it("saveToHistory stores entry", () => {
+    const { result } = renderHook(() => useInputHistory("test-session"));
+    act(() => {
+      result.current.saveToHistory("hello");
+    });
+    expect(result.current.hasPrev).toBe(true);
+  });
+
+  it("saveToHistory ignores empty", () => {
+    const { result } = renderHook(() => useInputHistory("test-session"));
+    act(() => {
+      result.current.saveToHistory("  ");
+    });
+    expect(result.current.hasPrev).toBe(false);
+  });
+
+  it("navigatePrev returns items", () => {
+    const { result } = renderHook(() => useInputHistory("test-session"));
+    act(() => {
+      result.current.saveToHistory("first");
+      result.current.saveToHistory("second");
+    });
+    let value: string | null = null;
+    act(() => {
+      value = result.current.navigatePrev();
+    });
+    expect(value).toBe("second");
+
+    act(() => {
+      value = result.current.navigatePrev();
+    });
+    expect(value).toBe("first");
+  });
+
+  it("navigateNext returns empty string at end", () => {
+    const { result } = renderHook(() => useInputHistory("test-session"));
+    act(() => {
+      result.current.saveToHistory("hello");
+    });
+    act(() => {
+      result.current.navigatePrev();
+    });
+    let value: string | null = null;
+    act(() => {
+      value = result.current.navigateNext();
+    });
+    expect(value).toBe("");
+  });
+
+  it("clearHistory removes all", () => {
+    const { result } = renderHook(() => useInputHistory("test-session"));
+    act(() => {
+      result.current.saveToHistory("a");
+      result.current.saveToHistory("b");
+    });
+    act(() => {
+      result.current.clearHistory();
+    });
+    expect(result.current.hasPrev).toBe(false);
+  });
+
+  it("deduplicates entries", () => {
+    const { result } = renderHook(() => useInputHistory("test-session"));
+    act(() => {
+      result.current.saveToHistory("hello");
+      result.current.saveToHistory("hello");
+    });
+    let count = 0;
+    while (result.current.hasPrev) {
+      act(() => {
+        result.current.navigatePrev();
+      });
+      count++;
+      if (count > 20) break;
+    }
+    expect(count).toBe(1);
+  });
+
+  it("respects max 10 items", () => {
+    const { result } = renderHook(() => useInputHistory("test-session"));
+    act(() => {
+      for (let i = 0; i < 15; i++) {
+        result.current.saveToHistory(`item-${i}`);
+      }
+    });
+    let count = 0;
+    while (result.current.hasPrev) {
+      act(() => {
+        result.current.navigatePrev();
+      });
+      count++;
+      if (count > 20) break;
+    }
+    expect(count).toBe(10);
+  });
+
+  it("resetIndex goes back to -1", () => {
+    const { result } = renderHook(() => useInputHistory("test-session"));
+    act(() => {
+      result.current.saveToHistory("first");
+      result.current.saveToHistory("second");
+      result.current.saveToHistory("third");
+    });
+    act(() => {
+      result.current.navigatePrev();
+    });
+    act(() => {
+      result.current.navigatePrev();
+    });
+    expect(result.current.hasNext).toBe(true);
+    act(() => {
+      result.current.resetIndex();
+    });
+    expect(result.current.hasNext).toBe(false);
+  });
+});

package/templates/agent/src/mainview/__tests__/hooks/use-rpc-init.test.ts

@@ -0,0 +1,217 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+
+const mockInitializeConnection = vi.fn();
+const mockAddLog = vi.fn();
+const mockListRootDir = vi.fn();
+const mockSubscribe = vi.fn();
+const mockUnsubscribe = vi.fn();
+const mockCall = vi.fn();
+
+const mockChatAddMessage = vi.fn();
+const mockChatSetMessages = vi.fn();
+
+let mockConnectionState: Record<string, any>;
+let mockLogState: Record<string, any>;
+
+function resetMockConnectionState(overrides?: Partial<Record<string, any>>) {
+  mockConnectionState = {
+    ready: false,
+    initializeConnection: mockInitializeConnection,
+    ...overrides,
+  };
+}
+
+function resetMockLogState(overrides?: Partial<Record<string, any>>) {
+  mockLogState = {
+    addLog: mockAddLog,
+    ...overrides,
+  };
+}
+
+vi.mock("../../stores/use-connection-store", () => {
+  return {
+    useConnectionStore: Object.assign(
+      (selector: (s: any) => any) => selector(mockConnectionState),
+      {
+        getState: () => mockConnectionState,
+        setState: (partial: any) => {
+          const next = typeof partial === "function" ? partial(mockConnectionState) : partial;
+          mockConnectionState = { ...mockConnectionState, ...next };
+        },
+      }
+    ),
+  };
+});
+
+vi.mock("../../stores/use-log-store", () => {
+  return {
+    useLogStore: Object.assign(
+      (selector: (s: any) => any) => selector(mockLogState),
+      {
+        getState: () => mockLogState,
+        setState: (partial: any) => {
+          const next = typeof partial === "function" ? partial(mockLogState) : partial;
+          mockLogState = { ...mockLogState, ...next };
+        },
+      }
+    ),
+  };
+});
+
+vi.mock("../../stores/use-explorer-store", () => ({
+  useExplorerStore: Object.assign(
+    (selector: (s: any) => any) =>
+      selector({ listRootDir: mockListRootDir }),
+    { getState: () => ({ listRootDir: mockListRootDir }) }
+  ),
+}));
+
+vi.mock("../../stores/use-chat-store", () => ({
+  useChatStore: Object.assign(
+    (selector: (s: any) => any) =>
+      selector({ addMessage: mockChatAddMessage, setMessages: mockChatSetMessages }),
+    {
+      getState: () => ({
+        addMessage: mockChatAddMessage,
+        setMessages: mockChatSetMessages,
+      }),
+    }
+  ),
+}));
+
+vi.mock("../../lib/api-client", () => ({
+  apiClient: {
+    subscribe: mockSubscribe,
+    unsubscribe: mockUnsubscribe,
+    call: mockCall,
+  },
+}));
+
+describe("useRpcInit", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockSubscribe.mockResolvedValue("sub-1");
+    mockCall.mockResolvedValue({ messages: [] });
+    resetMockLogState();
+  });
+
+  it("should call initializeConnection on mount", async () => {
+    resetMockConnectionState({ ready: false });
+    const { useRpcInit } = await import("../../hooks/use-rpc-init");
+    renderHook(() => useRpcInit());
+    expect(mockInitializeConnection).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not subscribe when not ready", async () => {
+    resetMockConnectionState({ ready: false });
+    const { useRpcInit } = await import("../../hooks/use-rpc-init");
+    renderHook(() => useRpcInit());
+    expect(mockSubscribe).not.toHaveBeenCalled();
+    expect(mockListRootDir).not.toHaveBeenCalled();
+    expect(mockCall).not.toHaveBeenCalled();
+  });
+
+  it("should subscribe, load history and init explorer when ready", async () => {
+    resetMockConnectionState({ ready: true });
+    const { useRpcInit } = await import("../../hooks/use-rpc-init");
+    renderHook(() => useRpcInit());
+
+    await waitFor(() => {
+      expect(mockListRootDir).toHaveBeenCalledTimes(1);
+    });
+
+    await waitFor(() => {
+      expect(mockSubscribe).toHaveBeenCalledWith(
+        "chat.message",
+        expect.any(Function),
+        {}
+      );
+    });
+
+    await waitFor(() => {
+      expect(mockCall).toHaveBeenCalledWith("chat.list", { limit: 100 });
+    });
+  });
+
+  it("should load history messages into chat store", async () => {
+    const messages = [
+      { id: "1", role: "user" as const, content: "hello", timestamp: 1000 },
+      { id: "2", role: "assistant" as const, content: "world", timestamp: 2000 },
+    ];
+    mockCall.mockResolvedValue({ messages });
+
+    resetMockConnectionState({ ready: true });
+    const { useRpcInit } = await import("../../hooks/use-rpc-init");
+    renderHook(() => useRpcInit());
+
+    await waitFor(() => {
+      expect(mockChatSetMessages).toHaveBeenCalledWith(
+        messages.map((m) => ({
+          id: m.id,
+          role: m.role,
+          content: m.content,
+          timestamp: m.timestamp,
+        }))
+      );
+    });
+
+    expect(mockAddLog).toHaveBeenCalledWith("Loaded 2 history messages");
+  });
+
+  it("should unsubscribe on cleanup when ready", async () => {
+    resetMockConnectionState({ ready: true });
+    const { useRpcInit } = await import("../../hooks/use-rpc-init");
+    const { unmount } = renderHook(() => useRpcInit());
+
+    await waitFor(() => {
+      expect(mockSubscribe).toHaveBeenCalled();
+    });
+
+    unmount();
+    expect(mockUnsubscribe).toHaveBeenCalledWith("sub-1");
+  });
+
+  it("should handle history load failure gracefully", async () => {
+    mockCall.mockRejectedValue(new Error("Network error"));
+    resetMockConnectionState({ ready: true });
+    const { useRpcInit } = await import("../../hooks/use-rpc-init");
+    renderHook(() => useRpcInit());
+
+    await waitFor(() => {
+      expect(mockAddLog).toHaveBeenCalledWith(
+        expect.stringContaining("Failed to load history")
+      );
+    });
+  });
+
+  it("should forward chat.message payloads to chat store", async () => {
+    let subscriptionHandler: ((payload: any) => void) | undefined;
+    mockSubscribe.mockImplementation(async (_event: string, handler: (p: any) => void) => {
+      subscriptionHandler = handler;
+      return "sub-1";
+    });
+
+    resetMockConnectionState({ ready: true });
+    const { useRpcInit } = await import("../../hooks/use-rpc-init");
+    renderHook(() => useRpcInit());
+
+    await waitFor(() => {
+      expect(mockSubscribe).toHaveBeenCalled();
+    });
+
+    subscriptionHandler!({
+      id: "msg-1",
+      role: "user",
+      content: "test message",
+      timestamp: 12345,
+    });
+
+    expect(mockChatAddMessage).toHaveBeenCalledWith({
+      id: "msg-1",
+      role: "user",
+      content: "test message",
+      timestamp: 12345,
+    });
+  });
+});