@ripla/godd-mcp 1.0.4-canary.9 → 1.0.4

package/notes/app/src/components/IssueList.test.tsx

@@ -0,0 +1,545 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, waitFor, fireEvent, act } from "@testing-library/react";
+
+const triggerPeriodicSync = vi.hoisted(() => vi.fn());
+
+vi.mock("@/hooks/usePeriodicSync", () => ({
+  usePeriodicSync: ({ onSync, enabled }: { onSync: () => void; enabled: boolean }) => {
+    triggerPeriodicSync.mockImplementation(() => {
+      if (enabled) onSync();
+    });
+  },
+}));
+
+vi.mock("@/lib/api", () => ({
+  listIssuesApi: vi.fn(),
+  listIssueLabelsApi: vi.fn(),
+  getErrorMessage: vi.fn((e: unknown) => String(e)),
+  isAbortError: vi.fn(() => false),
+}));
+
+import { listIssuesApi, listIssueLabelsApi } from "@/lib/api";
+import IssueList from "./IssueList";
+
+const mockListIssues = vi.mocked(listIssuesApi);
+const mockListLabels = vi.mocked(listIssueLabelsApi);
+
+const MOCK_ISSUES = [
+  {
+    number: 10,
+    title: "Issue 10",
+    state: "open" as const,
+    author: "user1",
+    assignees: [],
+    comments: 0,
+    labels: [],
+    createdAt: "2026-05-19T00:00:00Z",
+    updatedAt: "2026-05-19T00:00:00Z",
+  },
+  {
+    number: 9,
+    title: "Issue 9",
+    state: "open" as const,
+    author: "user1",
+    assignees: [],
+    comments: 0,
+    labels: [],
+    createdAt: "2026-05-18T00:00:00Z",
+    updatedAt: "2026-05-18T00:00:00Z",
+  },
+];
+
+describe("IssueList", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockListLabels.mockResolvedValue({
+      labels: [{ name: "bug", color: "d73a4a" }],
+    });
+  });
+
+  it("Issueリストを取得して表示する", async () => {
+    mockListIssues.mockResolvedValue({ issues: MOCK_ISSUES });
+
+    render(<IssueList onSelect={vi.fn()} selectedIssue={null} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Issue 10")).toBeTruthy();
+      expect(screen.getByText("Issue 9")).toBeTruthy();
+    });
+
+    const issueButton = screen.getByText("Issue 10").closest("button");
+    expect(issueButton?.className).toContain("min-h-11");
+    expect(issueButton?.className).toContain("touch-manipulation");
+  });
+
+  it("reloadTrigger が変わると listIssuesApi を再呼び出しする", async () => {
+    mockListIssues.mockResolvedValue({ issues: MOCK_ISSUES });
+
+    const { rerender } = render(
+      <IssueList onSelect={vi.fn()} selectedIssue={null} reloadTrigger={0} />,
+    );
+
+    await waitFor(() => {
+      expect(mockListIssues).toHaveBeenCalledTimes(1);
+    });
+
+    rerender(
+      <IssueList onSelect={vi.fn()} selectedIssue={null} reloadTrigger={1} />,
+    );
+
+    await waitFor(() => {
+      expect(mockListIssues).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  it("reloadTrigger が同じ値のままなら再呼び出しされない", async () => {
+    mockListIssues.mockResolvedValue({ issues: MOCK_ISSUES });
+
+    const { rerender } = render(
+      <IssueList onSelect={vi.fn()} selectedIssue={null} reloadTrigger={0} />,
+    );
+
+    await waitFor(() => {
+      expect(mockListIssues).toHaveBeenCalledTimes(1);
+    });
+
+    rerender(
+      <IssueList onSelect={vi.fn()} selectedIssue={null} reloadTrigger={0} />,
+    );
+
+    expect(mockListIssues).toHaveBeenCalledTimes(1);
+  });
+
+  it("ラベルフィルタ変更時に labels クエリ付きで listIssuesApi を呼ぶ", async () => {
+    mockListIssues.mockResolvedValue({ issues: MOCK_ISSUES });
+
+    render(<IssueList onSelect={vi.fn()} selectedIssue={null} />);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText("ラベルでフィルタ")).toBeTruthy();
+    });
+
+    fireEvent.change(screen.getByLabelText("ラベルでフィルタ"), {
+      target: { value: "bug" },
+    });
+
+    await waitFor(() => {
+      expect(mockListIssues).toHaveBeenCalledWith(
+        expect.objectContaining({ labels: "bug" }),
+      );
+    });
+  });
+
+  it("担当者 none フィルタ変更時に assignee クエリ付きで listIssuesApi を呼ぶ", async () => {
+    mockListIssues.mockResolvedValue({ issues: MOCK_ISSUES });
+
+    render(<IssueList onSelect={vi.fn()} selectedIssue={null} />);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText("担当者でフィルタ")).toBeTruthy();
+    });
+
+    fireEvent.change(screen.getByLabelText("担当者でフィルタ"), {
+      target: { value: "none" },
+    });
+    fireEvent.blur(screen.getByLabelText("担当者でフィルタ"));
+
+    await waitFor(() => {
+      expect(mockListIssues).toHaveBeenCalledWith(
+        expect.objectContaining({ assignee: "none" }),
+      );
+    });
+  });
+
+  it("optimisticIssue が指定されると API 再取得前でも一覧に表示する", async () => {
+    mockListIssues.mockResolvedValue({ issues: MOCK_ISSUES });
+
+    const optimisticIssue = {
+      number: 11,
+      title: "New Issue",
+      state: "open" as const,
+      author: "user1",
+      assignees: [],
+      comments: 0,
+      labels: [],
+      createdAt: "2026-05-25T00:00:00Z",
+      updatedAt: "2026-05-25T00:00:00Z",
+    };
+
+    render(
+      <IssueList
+        onSelect={vi.fn()}
+        selectedIssue={11}
+        optimisticIssue={optimisticIssue}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("New Issue")).toBeTruthy();
+    });
+  });
+
+  it("optimisticIssue が API 取得結果に含まれたら onOptimisticSettled を呼ぶ", async () => {
+    mockListIssues.mockResolvedValue({ issues: MOCK_ISSUES });
+    const onOptimisticSettled = vi.fn();
+    const optimisticIssue = {
+      number: 10,
+      title: "Optimistic Issue 10",
+      state: "open" as const,
+      author: "user1",
+      assignees: [],
+      comments: 0,
+      labels: [],
+      createdAt: "2026-05-25T00:00:00Z",
+      updatedAt: "2026-05-25T00:00:00Z",
+    };
+
+    render(
+      <IssueList
+        onSelect={vi.fn()}
+        selectedIssue={10}
+        optimisticIssue={optimisticIssue}
+        onOptimisticSettled={onOptimisticSettled}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(onOptimisticSettled).toHaveBeenCalledWith(10);
+    });
+  });
+
+  it("syncEnabled=false のときポーリングで追加 API を呼ばない（REQ-016-AC-03）", async () => {
+    mockListIssues.mockResolvedValueOnce({ issues: MOCK_ISSUES });
+
+    render(<IssueList onSelect={vi.fn()} selectedIssue={null} syncEnabled={false} />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Issue 10")).toBeTruthy();
+    });
+
+    const callCount = mockListIssues.mock.calls.length;
+
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    expect(mockListIssues.mock.calls.length).toBe(callCount);
+  });
+
+  it("背景 poll 中の API 失敗では error を表示せず一覧を維持する", async () => {
+    mockListIssues.mockResolvedValueOnce({ issues: MOCK_ISSUES });
+
+    render(<IssueList onSelect={vi.fn()} selectedIssue={null} syncEnabled />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Issue 10")).toBeTruthy();
+    });
+
+    mockListIssues.mockRejectedValueOnce(new Error("502 Bad Gateway"));
+
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    await waitFor(() => {
+      expect(mockListIssues).toHaveBeenCalledTimes(2);
+    });
+
+    expect(screen.getByText("Issue 10")).toBeTruthy();
+    expect(screen.queryByText("502 Bad Gateway")).toBeNull();
+  });
+
+  it("foreground 取得中に background reload が走っても loading が固着しない", async () => {
+    let resolveForeground: ((value: { issues: typeof MOCK_ISSUES }) => void) | undefined;
+    mockListIssues
+      .mockResolvedValueOnce({ issues: MOCK_ISSUES })
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveForeground = resolve;
+          }),
+      )
+      .mockResolvedValueOnce({ issues: MOCK_ISSUES });
+
+    const { rerender } = render(
+      <IssueList
+        onSelect={vi.fn()}
+        selectedIssue={null}
+        reloadTrigger={0}
+        syncEnabled
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Issue 10")).toBeTruthy();
+    });
+
+    rerender(
+      <IssueList
+        onSelect={vi.fn()}
+        selectedIssue={null}
+        reloadTrigger={1}
+        syncEnabled
+      />,
+    );
+
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    await waitFor(() => {
+      const refreshIcon = document.querySelector(".lucide-refresh-cw");
+      expect(refreshIcon?.classList.contains("animate-spin")).toBe(false);
+    });
+
+    await act(async () => {
+      resolveForeground?.({ issues: MOCK_ISSUES });
+      await Promise.resolve();
+    });
+  });
+
+  it("backgroundSyncTrigger の変化は背景再取得として扱う", async () => {
+    mockListIssues.mockResolvedValue({ issues: MOCK_ISSUES });
+
+    const { rerender } = render(
+      <IssueList
+        onSelect={vi.fn()}
+        selectedIssue={null}
+        backgroundSyncTrigger={0}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(mockListIssues).toHaveBeenCalledTimes(1);
+    });
+
+    mockListIssues.mockRejectedValueOnce(new Error("502 Bad Gateway"));
+
+    rerender(
+      <IssueList
+        onSelect={vi.fn()}
+        selectedIssue={null}
+        backgroundSyncTrigger={1}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(mockListIssues).toHaveBeenCalledTimes(2);
+    });
+
+    expect(screen.getByText("Issue 10")).toBeTruthy();
+    expect(screen.queryByText("502 Bad Gateway")).toBeNull();
+  });
+
+  it("背景再取得成功時に過去の foreground エラーをクリアする", async () => {
+    mockListIssues
+      .mockResolvedValueOnce({ issues: MOCK_ISSUES })
+      .mockRejectedValueOnce(new Error("500 Internal Server Error"))
+      .mockResolvedValueOnce({ issues: MOCK_ISSUES })
+      .mockResolvedValue({ issues: MOCK_ISSUES });
+
+    const { rerender } = render(
+      <IssueList onSelect={vi.fn()} selectedIssue={null} reloadTrigger={0} syncEnabled />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Issue 10")).toBeTruthy();
+    });
+
+    rerender(
+      <IssueList onSelect={vi.fn()} selectedIssue={null} reloadTrigger={1} syncEnabled />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(/500 Internal Server Error/)).toBeTruthy();
+    });
+
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText(/500 Internal Server Error/)).toBeNull();
+      expect(screen.getByText("Issue 10")).toBeTruthy();
+    });
+  });
+
+  it("手動再読み込みは background 同期より優先して API エラーを表示する", async () => {
+    let resolveBackground: ((value: { issues: typeof MOCK_ISSUES }) => void) | undefined;
+    mockListIssues
+      .mockResolvedValueOnce({ issues: MOCK_ISSUES })
+      .mockImplementationOnce(
+        () =>
+          new Promise((resolve) => {
+            resolveBackground = resolve;
+          }),
+      )
+      .mockRejectedValueOnce(new Error("503 Service Unavailable"))
+      .mockResolvedValue({ issues: MOCK_ISSUES });
+
+    render(<IssueList onSelect={vi.fn()} selectedIssue={null} syncEnabled />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Issue 10")).toBeTruthy();
+    });
+
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    fireEvent.click(screen.getByTitle("更新"));
+
+    await waitFor(() => {
+      expect(screen.getByText(/503 Service Unavailable/)).toBeTruthy();
+    });
+
+    await act(async () => {
+      resolveBackground?.({ issues: MOCK_ISSUES });
+      await Promise.resolve();
+    });
+  });
+
+  it("snapshot モードでは一覧が古い間は更新行を即時表示しつつ settle しない（#945）", async () => {
+    mockListIssues.mockResolvedValue({ issues: MOCK_ISSUES });
+    const onOptimisticSettled = vi.fn();
+
+    render(
+      <IssueList
+        onSelect={vi.fn()}
+        selectedIssue={10}
+        optimisticIssue={{
+          number: 10,
+          title: "Issue 10 (更新済み)",
+          state: "open",
+          author: "user1",
+          assignees: [],
+          comments: 0,
+          labels: [{ name: "bug", color: "d73a4a" }],
+          createdAt: "2026-05-19T00:00:00Z",
+          updatedAt: "2026-06-10T00:00:00Z",
+        }}
+        optimisticSettleMode="snapshot"
+        onOptimisticSettled={onOptimisticSettled}
+      />,
+    );
+
+    // 追加の GET /api/issues なしで更新後の行が即時表示される
+    await waitFor(() => {
+      expect(screen.getByText("Issue 10 (更新済み)")).toBeTruthy();
+    });
+    expect(mockListIssues).toHaveBeenCalledTimes(1);
+    // 一覧側（#10 は 2026-05-19 のまま）が追いつくまでは解除しない
+    expect(onOptimisticSettled).not.toHaveBeenCalled();
+  });
+
+  it("snapshot モードで一覧の実体が追いついたら onOptimisticSettled を呼ぶ（#945）", async () => {
+    mockListIssues
+      .mockResolvedValueOnce({ issues: MOCK_ISSUES })
+      // 再取得で #10 が optimistic と同じ内容・updatedAt に追いつく（実体反映）
+      .mockResolvedValueOnce({
+        issues: [
+          { ...MOCK_ISSUES[0], title: "Issue 10 (更新済み)", updatedAt: "2026-06-10T00:00:00Z" },
+          MOCK_ISSUES[1],
+        ],
+      });
+    const onOptimisticSettled = vi.fn();
+
+    const optimisticIssue = {
+      number: 10,
+      title: "Issue 10 (更新済み)",
+      state: "open" as const,
+      author: "user1",
+      assignees: [],
+      comments: 0,
+      labels: [],
+      createdAt: "2026-05-19T00:00:00Z",
+      updatedAt: "2026-06-10T00:00:00Z",
+    };
+
+    const { rerender } = render(
+      <IssueList
+        onSelect={vi.fn()}
+        selectedIssue={10}
+        reloadTrigger={0}
+        optimisticIssue={optimisticIssue}
+        optimisticSettleMode="snapshot"
+        onOptimisticSettled={onOptimisticSettled}
+      />,
+    );
+
+    await waitFor(() => expect(mockListIssues).toHaveBeenCalledTimes(1));
+    expect(onOptimisticSettled).not.toHaveBeenCalled();
+
+    // 一覧が再取得され #10 の updatedAt が optimistic に追いつく
+    rerender(
+      <IssueList
+        onSelect={vi.fn()}
+        selectedIssue={10}
+        reloadTrigger={1}
+        optimisticIssue={optimisticIssue}
+        optimisticSettleMode="snapshot"
+        onOptimisticSettled={onOptimisticSettled}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(onOptimisticSettled).toHaveBeenCalledWith(10);
+    });
+  });
+
+  it("snapshot モードで closed 化した optimistic は open 一覧から即時に除外する（#945）", async () => {
+    mockListIssues.mockResolvedValue({ issues: MOCK_ISSUES });
+
+    render(
+      <IssueList
+        onSelect={vi.fn()}
+        selectedIssue={10}
+        optimisticIssue={{
+          number: 10,
+          title: "Issue 10",
+          state: "closed",
+          author: "user1",
+          assignees: [],
+          comments: 0,
+          labels: [],
+          createdAt: "2026-05-19T00:00:00Z",
+          updatedAt: "2026-06-10T00:00:00Z",
+        }}
+        optimisticSettleMode="snapshot"
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Issue 9")).toBeTruthy();
+    });
+    expect(screen.queryByText("Issue 10")).toBeNull();
+  });
+
+  it("Open フィルタ中は closed の optimistic Issue を表示しない", async () => {
+    mockListIssues.mockResolvedValue({ issues: MOCK_ISSUES });
+
+    render(
+      <IssueList
+        onSelect={vi.fn()}
+        selectedIssue={null}
+        optimisticIssue={{
+          number: 11,
+          title: "Closed optimistic",
+          state: "closed",
+          author: "user1",
+          assignees: [],
+          comments: 0,
+          labels: [],
+          createdAt: "2026-05-25T00:00:00Z",
+          updatedAt: "2026-05-25T00:00:00Z",
+        }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("Issue 10")).toBeTruthy();
+    });
+
+    expect(screen.queryByText("Closed optimistic")).toBeNull();
+  });
+});