@jcjeon/integration-cli 0.2.0

package/apps/web/src/features/tasks/ui/__tests__/AgentRoleSelect.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { AgentRoleBadge, AgentRow } from "../AgentRoleSelect";
+import type { AgentDraft } from "../../hooks/useTaskCreate";
+
+function draft(overrides: Partial<AgentDraft> = {}): AgentDraft {
+  return { id: "d1", agentType: "claude", role: "frontend", customRole: "", ...overrides };
+}
+
+describe("AgentRow — role buttons", () => {
+  it("renders all 5 role buttons", () => {
+    render(<AgentRow agent={draft()} onChange={vi.fn()} onRemove={vi.fn()} />);
+    ["Frontend", "Backend", "Doc", "Operation", "Other"].forEach((label) => {
+      expect(screen.getByRole("button", { name: label })).toBeInTheDocument();
+    });
+  });
+
+  it("calls onChange with new role when button clicked", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<AgentRow agent={draft({ role: "frontend" })} onChange={onChange} onRemove={vi.fn()} />);
+
+    await user.click(screen.getByRole("button", { name: "Backend" }));
+
+    expect(onChange).toHaveBeenCalledWith({ role: "backend" });
+  });
+
+  it("calls onRemove when delete button clicked", async () => {
+    const user = userEvent.setup();
+    const onRemove = vi.fn();
+    render(<AgentRow agent={draft()} onChange={vi.fn()} onRemove={onRemove} />);
+
+    await user.click(screen.getByRole("button", { name: "에이전트 삭제" }));
+
+    expect(onRemove).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("AgentRow — role=other", () => {
+  it("shows custom role input when role is other", () => {
+    render(<AgentRow agent={draft({ role: "other" })} onChange={vi.fn()} onRemove={vi.fn()} />);
+    expect(screen.getByPlaceholderText("역할을 직접 입력하세요")).toBeInTheDocument();
+  });
+
+  it("hides custom input for non-other roles", () => {
+    render(<AgentRow agent={draft({ role: "frontend" })} onChange={vi.fn()} onRemove={vi.fn()} />);
+    expect(screen.queryByPlaceholderText("역할을 직접 입력하세요")).not.toBeInTheDocument();
+  });
+
+  it("calls onChange with customRole on every keystroke", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<AgentRow agent={draft({ role: "other" })} onChange={onChange} onRemove={vi.fn()} />);
+
+    // Since this is a controlled input, each keystroke calls onChange once.
+    await user.type(screen.getByPlaceholderText("역할을 직접 입력하세요"), "D");
+
+    expect(onChange).toHaveBeenCalledWith({ customRole: "D" });
+  });
+});
+
+describe("AgentRow — frontend description hint", () => {
+  it("shows description hint for frontend", () => {
+    render(<AgentRow agent={draft({ role: "frontend" })} onChange={vi.fn()} onRemove={vi.fn()} />);
+    expect(screen.getByText(/UI 구현/)).toBeInTheDocument();
+  });
+
+  it("does not show hint for backend", () => {
+    render(<AgentRow agent={draft({ role: "backend" })} onChange={vi.fn()} onRemove={vi.fn()} />);
+    expect(screen.queryByText(/UI 구현/)).not.toBeInTheDocument();
+  });
+});
+
+describe("AgentRoleBadge", () => {
+  it("renders role label", () => {
+    render(<AgentRoleBadge role="frontend" />);
+    expect(screen.getByText("Frontend")).toBeInTheDocument();
+  });
+
+  it("renders customRole for other when provided", () => {
+    render(<AgentRoleBadge role="other" customRole="DevOps" />);
+    expect(screen.getByText("DevOps")).toBeInTheDocument();
+  });
+
+  it('renders "Other" when customRole is null', () => {
+    render(<AgentRoleBadge role="other" customRole={null} />);
+    expect(screen.getByText("Other")).toBeInTheDocument();
+  });
+});

package/apps/web/src/features/tasks/ui/__tests__/ChangelogPanel.test.tsx

@@ -0,0 +1,94 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import * as changelogApi from "../../api/changelog.api";
+import type { TaskAgent } from "../../api/tasks.api";
+import { useTaskChangelog } from "../../hooks/useTaskChangelog";
+import { ChangelogPanel } from "../ChangelogPanel";
+
+vi.mock("../../hooks/useTaskChangelog", () => ({
+  useTaskChangelog: vi.fn(),
+}));
+
+vi.mock("../../api/changelog.api", async () => {
+  const actual = await vi.importActual<typeof import("../../api/changelog.api")>("../../api/changelog.api");
+  return {
+    ...actual,
+    mergeAgentAll: vi.fn(),
+    mergeAgentFile: vi.fn(),
+  };
+});
+
+const mockUseTaskChangelog = vi.mocked(useTaskChangelog);
+const mockMergeAll = vi.mocked(changelogApi.mergeAgentAll);
+const mockMergeFile = vi.mocked(changelogApi.mergeAgentFile);
+
+const agents: TaskAgent[] = [
+  { id: 1, agentType: "claude", role: "frontend", customRole: null, status: "completed" },
+];
+
+const changelogs = [
+  {
+    agentId: 1,
+    files: [
+      {
+        id: 1,
+        filePath: "src/App.tsx",
+        changeType: "modified" as const,
+        additions: 2,
+        deletions: 1,
+        patch: "diff --git\n@@ -1 +1 @@\n-old\n+new",
+      },
+    ],
+  },
+];
+
+describe("ChangelogPanel", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders loading, error, and empty states", () => {
+    mockUseTaskChangelog.mockReturnValueOnce({ changelogs: [], loading: true, error: null });
+    const { container, rerender } = render(<ChangelogPanel taskId="task-1" agents={agents} />);
+    expect(container.querySelectorAll(".animate-pulse")).toHaveLength(3);
+
+    mockUseTaskChangelog.mockReturnValueOnce({ changelogs: [], loading: false, error: "diff failed" });
+    rerender(<ChangelogPanel taskId="task-1" agents={agents} />);
+    expect(screen.getByText("diff failed")).toBeInTheDocument();
+
+    mockUseTaskChangelog.mockReturnValueOnce({ changelogs: [], loading: false, error: null });
+    rerender(<ChangelogPanel taskId="task-1" agents={agents} />);
+    expect(screen.getByText(/변경사항이 없거나/)).toBeInTheDocument();
+  });
+
+  it("renders files, toggles patch, and merges all/file", async () => {
+    mockUseTaskChangelog.mockReturnValue({ changelogs, loading: false, error: null });
+    mockMergeAll.mockResolvedValue({ success: true, message: "ok" });
+    mockMergeFile.mockResolvedValue({ success: false, message: "conflict" });
+    const user = userEvent.setup();
+
+    render(<ChangelogPanel taskId="task-1" agents={agents} />);
+
+    expect(screen.getByText("Claude · frontend")).toBeInTheDocument();
+    expect(screen.getByText("src/")).toBeInTheDocument();
+    expect(screen.getByText("App.tsx")).toBeInTheDocument();
+    expect(screen.getAllByText("+2")).toHaveLength(2);
+    expect(screen.getAllByText("-1")).toHaveLength(2);
+
+    await user.click(screen.getByRole("button", { name: /수정.*App\.tsx/s }));
+    expect(screen.getByText("+new")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "src/App.tsx 변경 코드 복사" }));
+    expect(screen.getByText("복사됨")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "전체 병합" }));
+    await waitFor(() => expect(mockMergeAll).toHaveBeenCalledWith("task-1", 1));
+    expect(screen.getByText((text) => text.includes("병합 완료"))).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "병합" }));
+    await waitFor(() => expect(mockMergeFile).toHaveBeenCalledWith("task-1", 1, "src/App.tsx"));
+    expect(screen.getByText((text) => text.includes("conflict"))).toBeInTheDocument();
+  });
+});

package/apps/web/src/features/tasks/ui/__tests__/RunHistoryPanel.test.tsx

@@ -0,0 +1,71 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import type { TaskAgent, TaskRun } from "../../api/tasks.api";
+import { useTaskRuns } from "../../hooks/useTaskRuns";
+import { RunHistoryPanel } from "../RunHistoryPanel";
+
+vi.mock("../../hooks/useTaskRuns", () => ({
+  useTaskRuns: vi.fn(),
+}));
+
+const mockUseTaskRuns = vi.mocked(useTaskRuns);
+
+const agents: TaskAgent[] = [
+  { id: 1, agentType: "claude", role: "frontend", customRole: null, status: "completed" },
+];
+
+const runs: TaskRun[] = [
+  {
+    id: 1,
+    version: 2,
+    supplementNote: "보완 요청",
+    status: "completed",
+    startedAt: "2024-01-01T00:00:00.000Z",
+    completedAt: "2024-01-01T00:00:03.000Z",
+    agentRuns: [
+      { id: 10, agentId: 1, status: "completed", worktreePath: null, startCommitHash: null, durationMs: 1500, costUsd: 0.01 },
+    ],
+  },
+  {
+    id: 2,
+    version: 1,
+    supplementNote: null,
+    status: "error",
+    startedAt: "2024-01-01T00:00:00.000Z",
+    completedAt: null,
+    agentRuns: [],
+  },
+];
+
+describe("RunHistoryPanel", () => {
+  it("renders loading skeleton", () => {
+    mockUseTaskRuns.mockReturnValue({ runs: [], loading: true, error: null });
+    const { container } = render(<RunHistoryPanel taskId="task-1" agents={agents} />);
+    expect(container.querySelectorAll(".animate-pulse")).toHaveLength(2);
+  });
+
+  it("renders error state", () => {
+    mockUseTaskRuns.mockReturnValue({ runs: [], loading: false, error: "failed" });
+    render(<RunHistoryPanel taskId="task-1" agents={agents} />);
+    expect(screen.getByText("failed")).toBeInTheDocument();
+  });
+
+  it("renders empty state", () => {
+    mockUseTaskRuns.mockReturnValue({ runs: [], loading: false, error: null });
+    render(<RunHistoryPanel taskId="task-1" agents={agents} />);
+    expect(screen.getByText("실행 기록이 없습니다")).toBeInTheDocument();
+  });
+
+  it("renders run history, latest badge, supplement note, duration, and cost", () => {
+    mockUseTaskRuns.mockReturnValue({ runs, loading: false, error: null });
+    render(<RunHistoryPanel taskId="task-1" agents={agents} />);
+
+    expect(screen.getByText("v2")).toBeInTheDocument();
+    expect(screen.getByText("최신")).toBeInTheDocument();
+    expect(screen.getByText("보완 요청")).toBeInTheDocument();
+    expect(screen.getByText("3s")).toBeInTheDocument();
+    expect(screen.getByText("$0.0100")).toBeInTheDocument();
+    expect(screen.getByText("Frontend")).toBeInTheDocument();
+  });
+});

package/apps/web/src/features/tasks/ui/__tests__/TaskCreateModal.test.tsx

@@ -0,0 +1,153 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { Task } from "../../api/tasks.api";
+import * as tasksApi from "../../api/tasks.api";
+import { TaskCreateModal } from "../TaskCreateModal";
+
+vi.mock("../../api/tasks.api", () => ({
+  createTask: vi.fn(),
+}));
+
+const mockCreateTask = vi.mocked(tasksApi.createTask);
+
+const stubTask: Task = {
+  id: "t1",
+  title: "Test",
+  status: "pending",
+  workingDir: null,
+  requirements: [],
+  agents: [],
+  createdAt: "2024-01-01",
+  updatedAt: "2024-01-01",
+};
+
+afterEach(() => { vi.clearAllMocks(); });
+
+describe("TaskCreateModal — open/close", () => {
+  it("renders modal when open=true", () => {
+    render(<TaskCreateModal open={true} onClose={vi.fn()} />);
+    expect(screen.getByText("새 작업 추가")).toBeInTheDocument();
+  });
+
+  it("does not render when open=false", () => {
+    render(<TaskCreateModal open={false} onClose={vi.fn()} />);
+    expect(screen.queryByText("새 작업 추가")).not.toBeInTheDocument();
+  });
+
+  it("calls onClose when 취소 button is clicked", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    render(<TaskCreateModal open={true} onClose={onClose} />);
+    await user.click(screen.getByRole("button", { name: "취소" }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("TaskCreateModal — form fields", () => {
+  it("renders goal textarea", () => {
+    render(<TaskCreateModal open={true} onClose={vi.fn()} />);
+    expect(screen.getByPlaceholderText(/예: 로그인 페이지/)).toBeInTheDocument();
+  });
+
+  it("renders workingDir input", () => {
+    render(<TaskCreateModal open={true} onClose={vi.fn()} />);
+    expect(screen.getByPlaceholderText("/path/to/project")).toBeInTheDocument();
+  });
+
+  it("submit button is disabled when title is empty", () => {
+    render(<TaskCreateModal open={true} onClose={vi.fn()} />);
+    expect(screen.getByRole("button", { name: "작업 생성" })).toBeDisabled();
+  });
+
+  it("submit button becomes enabled after title is entered", async () => {
+    const user = userEvent.setup();
+    render(<TaskCreateModal open={true} onClose={vi.fn()} />);
+    await user.type(screen.getByPlaceholderText(/예: 로그인 페이지/), "My Task");
+    expect(screen.getByRole("button", { name: "작업 생성" })).toBeEnabled();
+  });
+});
+
+describe("TaskCreateModal — requirements", () => {
+  it("adds requirement row when '항목 추가' is clicked", async () => {
+    const user = userEvent.setup();
+    render(<TaskCreateModal open={true} onClose={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /항목 추가/ }));
+    expect(screen.getAllByPlaceholderText("요구사항 입력")).toHaveLength(1);
+  });
+
+  it("removes requirement row when X button clicked", async () => {
+    const user = userEvent.setup();
+    render(<TaskCreateModal open={true} onClose={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /항목 추가/ }));
+    const removeBtn = screen.getAllByRole("button").find(
+      (b) => !["항목 추가", "에이전트 추가", "취소", "작업 생성", "닫기"].includes(b.textContent?.trim() ?? ""),
+    );
+    if (removeBtn) await user.click(removeBtn);
+    expect(screen.queryByPlaceholderText("요구사항 입력")).not.toBeInTheDocument();
+  });
+});
+
+describe("TaskCreateModal — agents", () => {
+  it("adds agent row when '에이전트 추가' is clicked", async () => {
+    const user = userEvent.setup();
+    render(<TaskCreateModal open={true} onClose={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /에이전트 추가/ }));
+    await user.click(screen.getByRole("button", { name: /Claude Code/ }));
+
+    expect(screen.getByText("Claude Code")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Frontend" })).toBeInTheDocument();
+  });
+
+  it("shows frontend as default role for new agent", async () => {
+    const user = userEvent.setup();
+    render(<TaskCreateModal open={true} onClose={vi.fn()} />);
+    await user.click(screen.getByRole("button", { name: /에이전트 추가/ }));
+    await user.click(screen.getByRole("button", { name: /Claude Code/ }));
+
+    expect(screen.getByText(/UI 구현/)).toBeInTheDocument();
+  });
+});
+
+describe("TaskCreateModal — submit", () => {
+  it("calls createTask with correct payload", async () => {
+    mockCreateTask.mockResolvedValueOnce(stubTask);
+    const user = userEvent.setup();
+    render(<TaskCreateModal open={true} onClose={vi.fn()} />);
+
+    await user.type(screen.getByPlaceholderText(/예: 로그인 페이지/), "My Task");
+    await user.click(screen.getByRole("button", { name: "작업 생성" }));
+
+    await waitFor(() => {
+      expect(mockCreateTask).toHaveBeenCalledWith(
+        expect.objectContaining({ title: "My Task" }),
+      );
+    });
+  });
+
+  it("calls onCreated callback after successful creation", async () => {
+    mockCreateTask.mockResolvedValueOnce(stubTask);
+    const user = userEvent.setup();
+    const onCreated = vi.fn();
+    render(<TaskCreateModal open={true} onClose={vi.fn()} onCreated={onCreated} />);
+
+    await user.type(screen.getByPlaceholderText(/예: 로그인 페이지/), "My Task");
+    await user.click(screen.getByRole("button", { name: "작업 생성" }));
+
+    await waitFor(() => { expect(onCreated).toHaveBeenCalledWith(stubTask); });
+  });
+
+  it("shows error message when createTask fails", async () => {
+    mockCreateTask.mockRejectedValueOnce(new Error("Server error"));
+    const user = userEvent.setup();
+    render(<TaskCreateModal open={true} onClose={vi.fn()} />);
+
+    await user.type(screen.getByPlaceholderText(/예: 로그인 페이지/), "My Task");
+    await user.click(screen.getByRole("button", { name: "작업 생성" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("Server error")).toBeInTheDocument();
+    });
+  });
+});

package/apps/web/src/features/tasks/ui/__tests__/TaskEditModal.test.tsx

@@ -0,0 +1,75 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { Task } from "../../api/tasks.api";
+import * as tasksApi from "../../api/tasks.api";
+import { TaskEditModal } from "../TaskEditModal";
+
+vi.mock("../../api/tasks.api", () => ({
+  updateTask: vi.fn(),
+}));
+
+const mockUpdateTask = vi.mocked(tasksApi.updateTask);
+
+const task: Task = {
+  id: "task-1",
+  title: "Original title",
+  status: "pending",
+  workingDir: "/repo",
+  requirements: [{ id: 1, content: "First req", status: "pending", orderIndex: 0 }],
+  agents: [{ id: 1, agentType: "claude", role: "frontend", customRole: null, status: "pending" }],
+  createdAt: "2024-01-01",
+  updatedAt: "2024-01-01",
+};
+
+afterEach(() => { vi.clearAllMocks(); });
+
+describe("TaskEditModal", () => {
+  it("renders existing task fields and closes on cancel", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    render(<TaskEditModal task={task} onClose={onClose} onSaved={vi.fn()} />);
+
+    expect(screen.getByText("작업 수정")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("Original title")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("/repo")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("First req")).toBeInTheDocument();
+    expect(screen.getByText("Claude Code")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "취소" }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("adds requirement and agent, then saves", async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    const onSaved = vi.fn();
+    const updated = { ...task, title: "Changed" };
+    mockUpdateTask.mockResolvedValueOnce(updated);
+    render(<TaskEditModal task={{ ...task, requirements: [], agents: [] }} onClose={onClose} onSaved={onSaved} />);
+
+    const title = screen.getByPlaceholderText(/예: 로그인 페이지/);
+    await user.clear(title);
+    await user.type(title, "Changed");
+    await user.click(screen.getByRole("button", { name: /항목 추가/ }));
+    await user.type(screen.getByPlaceholderText("요구사항 입력"), "Req");
+    await user.click(screen.getByRole("button", { name: /에이전트 추가/ }));
+    await user.click(screen.getByRole("button", { name: /Codex CLI/ }));
+    await user.click(screen.getByRole("button", { name: "저장" }));
+
+    await waitFor(() => expect(mockUpdateTask).toHaveBeenCalled());
+    expect(onSaved).toHaveBeenCalledWith(updated);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows API error", async () => {
+    const user = userEvent.setup();
+    mockUpdateTask.mockRejectedValueOnce(new Error("save failed"));
+    render(<TaskEditModal task={task} onClose={vi.fn()} onSaved={vi.fn()} />);
+
+    await user.click(screen.getByRole("button", { name: "저장" }));
+
+    expect(await screen.findByText("save failed")).toBeInTheDocument();
+  });
+});