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

package/notes/app/src/pages/MainPage.branch-modal.test.tsx

@@ -0,0 +1,226 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { screen, waitFor, fireEvent, within, act } from "@testing-library/react";
+import type { Proposal } from "@/lib/api";
+import {
+  jsonResponse,
+  mockAuthContext,
+  mockAutoSave,
+  mockCollaboration,
+  mockComments,
+  mockEditSession,
+  mockMatchMedia,
+} from "@/test/mocks";
+import { renderWithProviders } from "@/test/render";
+
+const mockApiFetch = vi.hoisted(() => vi.fn());
+const mockFetchProposalsApi = vi.hoisted(() => vi.fn());
+const triggerPeriodicSync = vi.hoisted(() => vi.fn());
+
+vi.mock("@/hooks/usePeriodicSync", () => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports -- mock factory 制約
+  const { useEffect } = require("react") as typeof import("react");
+  return {
+    usePeriodicSync: ({ onSync, enabled }: { onSync: () => void; enabled: boolean }) => {
+      useEffect(() => {
+        triggerPeriodicSync.mockImplementation(() => {
+          if (enabled) onSync();
+        });
+      }, [enabled, onSync]);
+    },
+  };
+});
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/lib/api")>();
+  return {
+    ...actual,
+    apiFetch: (...args: unknown[]) => mockApiFetch(...args),
+    fetchProposalsApi: () => mockFetchProposalsApi(),
+    // getErrorMessage / isAbortError は純粋関数のため実体（...actual）をそのまま使う
+  };
+});
+
+vi.mock("@/contexts/AuthContext", () => ({ useAuth: () => mockAuthContext() }));
+vi.mock("@/hooks/useEditSession", () => ({ useEditSession: () => mockEditSession() }));
+vi.mock("@/hooks/useAutoSave", () => ({ useAutoSave: () => mockAutoSave() }));
+vi.mock("@/hooks/useCollaboration", () => ({
+  useCollaboration: () => mockCollaboration(),
+}));
+vi.mock("@/hooks/useComments", () => ({ useComments: () => mockComments() }));
+
+import MainPage from "./MainPage";
+
+function mockReadyTreeApi() {
+  mockApiFetch.mockImplementation((url: string) => {
+    if (url.startsWith("/tree")) {
+      return Promise.resolve(
+        jsonResponse([
+          {
+            name: "docs",
+            path: "docs",
+            type: "dir",
+            children: [{ name: "readme.md", path: "docs/readme.md", type: "file" }],
+          },
+        ]),
+      );
+    }
+    return Promise.resolve({ ok: false, status: 404, headers: { get: () => null } });
+  });
+}
+
+const INITIAL_PROPOSAL: Proposal = {
+  number: 10,
+  title: "Initial branch PR",
+  branch: "docs/alice/20260601",
+  author: "alice",
+  state: "open",
+  merged: false,
+  createdAt: "2026-06-01T00:00:00Z",
+  updatedAt: "2026-06-01T00:00:00Z",
+  url: "https://github.com/ripla-inc/GoDD/pull/10",
+  draft: false,
+};
+
+const NEW_PROPOSAL: Proposal = {
+  number: 11,
+  title: "New branch PR from GitHub",
+  branch: "docs/bob/20260602",
+  author: "bob",
+  state: "open",
+  merged: false,
+  createdAt: "2026-06-02T00:00:00Z",
+  updatedAt: "2026-06-02T00:00:00Z",
+  url: "https://github.com/ripla-inc/GoDD/pull/11",
+  draft: false,
+};
+
+function renderMainPage() {
+  return renderWithProviders(<MainPage />);
+}
+
+async function openBranchModal() {
+  const sidebar = await waitFor(() => screen.getByTestId("left-sidebar"));
+  fireEvent.click(within(sidebar).getByRole("button", { name: "main" }));
+  await screen.findByRole("heading", { name: "ブランチ一覧" });
+}
+
+describe("MainPage — BranchSelectorModal REQ-016-AC-07", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockMatchMedia(true);
+    HTMLDialogElement.prototype.showModal = vi.fn(function (this: HTMLDialogElement) {
+      this.open = true;
+    });
+    HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+      this.open = false;
+    });
+    mockReadyTreeApi();
+    let proposalCalls = 0;
+    mockFetchProposalsApi.mockImplementation(() => {
+      proposalCalls += 1;
+      if (proposalCalls === 1) {
+        return Promise.resolve([INITIAL_PROPOSAL]);
+      }
+      return Promise.resolve([INITIAL_PROPOSAL, NEW_PROPOSAL]);
+    });
+  });
+
+  it("REQ-016-AC-07: モーダル表示中の background sync で proposals 一覧が更新される", async () => {
+    renderMainPage();
+    await openBranchModal();
+
+    expect(screen.getByText("Initial branch PR")).toBeTruthy();
+    expect(screen.queryByText("New branch PR from GitHub")).toBeNull();
+
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("New branch PR from GitHub")).toBeTruthy();
+    });
+    expect(mockFetchProposalsApi).toHaveBeenCalledTimes(2);
+  });
+
+  it("REQ-016-AC-04 相当: background sync 失敗時は error を表示せず直前の proposals を維持する", async () => {
+    mockFetchProposalsApi.mockReset();
+    mockFetchProposalsApi
+      .mockResolvedValueOnce([INITIAL_PROPOSAL])
+      .mockRejectedValueOnce(new Error("502 Bad Gateway"));
+
+    renderMainPage();
+    await openBranchModal();
+
+    expect(screen.getByText("Initial branch PR")).toBeTruthy();
+
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    await waitFor(() => {
+      expect(mockFetchProposalsApi).toHaveBeenCalledTimes(2);
+    });
+    expect(screen.getByText("Initial branch PR")).toBeTruthy();
+    expect(screen.queryByText(/502 Bad Gateway/)).toBeNull();
+  });
+
+  it("REQ-016-AC-07 競合（#936）: 手動 refresh と background poll の並走で古い proposals が新しい一覧を上書きしない", async () => {
+    let resolveStalePoll: ((v: Proposal[]) => void) | undefined;
+    const stalePoll = new Promise<Proposal[]>((resolve) => {
+      resolveStalePoll = resolve;
+    });
+
+    mockFetchProposalsApi.mockReset();
+    let calls = 0;
+    mockFetchProposalsApi.mockImplementation(() => {
+      calls += 1;
+      if (calls === 1) return Promise.resolve([INITIAL_PROPOSAL]); // mount foreground
+      if (calls === 2) return stalePoll; // background poll（in-flight・古い一覧）
+      return Promise.resolve([INITIAL_PROPOSAL, NEW_PROPOSAL]); // 手動 refresh（新しい一覧）
+    });
+
+    renderMainPage();
+    await openBranchModal();
+    expect(screen.getByText("Initial branch PR")).toBeTruthy();
+
+    // background poll を in-flight にする（beginPollBranches で poll seq が進む）
+    await act(async () => {
+      triggerPeriodicSync();
+      await Promise.resolve();
+    });
+
+    // 手動 refresh（foreground）が新しい一覧を適用（beginLoadBranches が in-flight poll を無効化）
+    const modal = screen.getByRole("dialog");
+    await act(async () => {
+      fireEvent.click(within(modal).getByTitle("一覧を更新"));
+    });
+    await waitFor(() => expect(screen.getByText("New branch PR from GitHub")).toBeTruthy());
+
+    // 後着の古い background poll 応答は破棄され、新しい一覧を上書きしない
+    await act(async () => {
+      resolveStalePoll?.([INITIAL_PROPOSAL]);
+      await Promise.resolve();
+    });
+
+    expect(screen.getByText("New branch PR from GitHub")).toBeTruthy();
+    expect(mockFetchProposalsApi).toHaveBeenCalledTimes(3);
+  });
+
+  it("REQ-016-AC-07: モーダル非表示時は background sync で proposals API を再取得しない", async () => {
+    renderMainPage();
+    await openBranchModal();
+
+    const callsAfterOpen = mockFetchProposalsApi.mock.calls.length;
+
+    const modal = screen.getByRole("dialog");
+    await act(async () => {
+      fireEvent.click(within(modal).getByRole("button", { name: "閉じる" }));
+    });
+
+    await act(async () => {
+      triggerPeriodicSync();
+    });
+
+    expect(mockFetchProposalsApi.mock.calls.length).toBe(callsAfterOpen);
+  });
+});

package/notes/app/src/pages/MainPage.issue-sync.test.tsx

@@ -0,0 +1,145 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { screen, waitFor, fireEvent } from "@testing-library/react";
+import type { IssueDetail, IssueSummary } from "@/lib/api";
+import {
+  jsonResponse,
+  mockAuthContext,
+  mockAutoSave,
+  mockCollaboration,
+  mockComments,
+  mockEditSession,
+  mockMatchMedia,
+} from "@/test/mocks";
+import { renderWithProviders } from "@/test/render";
+
+const mockApiFetch = vi.hoisted(() => vi.fn());
+const mockFetchProposalsApi = vi.hoisted(() => vi.fn());
+const mockListIssuesApi = vi.hoisted(() => vi.fn());
+const mockListIssueLabelsApi = vi.hoisted(() => vi.fn());
+
+// usePeriodicSync は本テストでは不要（外部変更はモック IssueDetailView から手動 dispatch する）
+vi.mock("@/hooks/usePeriodicSync", () => ({
+  usePeriodicSync: () => {},
+}));
+
+vi.mock("@/lib/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/lib/api")>();
+  return {
+    ...actual,
+    apiFetch: (...args: unknown[]) => mockApiFetch(...args),
+    fetchProposalsApi: () => mockFetchProposalsApi(),
+    listIssuesApi: (...args: unknown[]) => mockListIssuesApi(...args),
+    listIssueLabelsApi: (...args: unknown[]) => mockListIssueLabelsApi(...args),
+    // getErrorMessage / isAbortError は純粋関数のため実体（...actual）をそのまま使う
+  };
+});
+
+vi.mock("@/contexts/AuthContext", () => ({ useAuth: () => mockAuthContext() }));
+vi.mock("@/hooks/useEditSession", () => ({ useEditSession: () => mockEditSession() }));
+vi.mock("@/hooks/useAutoSave", () => ({ useAutoSave: () => mockAutoSave() }));
+vi.mock("@/hooks/useCollaboration", () => ({
+  useCollaboration: () => mockCollaboration(),
+}));
+vi.mock("@/hooks/useComments", () => ({ useComments: () => mockComments() }));
+
+// 詳細ビューはテストダブルに差し替え、外部変更検知を手動トリガするボタンを公開する。
+// MainPage の handleIssueExternalChange → optimistic 設定 → clear effect の結線を検証する。
+const issue10v2Detail: IssueDetail = {
+  number: 10,
+  title: "Issue 10 (外部更新)",
+  state: "open",
+  labels: [],
+  author: "user1",
+  assignees: [],
+  comments: 0,
+  createdAt: "2026-05-19T00:00:00Z",
+  updatedAt: "2026-06-10T00:00:00Z",
+  body: "更新後の本文",
+  url: "https://github.com/ripla-inc/GoDD/issues/10",
+};
+
+vi.mock("@/components/IssueDetailView", () => ({
+  default: ({
+    issueNumber,
+    onExternalChange,
+  }: {
+    issueNumber: number | "new";
+    onExternalChange?: (issue: IssueDetail, options?: { background?: boolean }) => void;
+  }) => (
+    <div>
+      <span>detail-{String(issueNumber)}</span>
+      <button
+        type="button"
+        onClick={() => onExternalChange?.(issue10v2Detail, { background: true })}
+      >
+        外部変更を発火
+      </button>
+    </div>
+  ),
+}));
+
+import MainPage from "./MainPage";
+
+const baseSummary = (overrides: Partial<IssueSummary> = {}): IssueSummary => ({
+  number: 0,
+  title: "",
+  state: "open",
+  labels: [],
+  author: "user1",
+  assignees: [],
+  comments: 0,
+  createdAt: "2026-05-19T00:00:00Z",
+  updatedAt: "2026-05-19T00:00:00Z",
+  ...overrides,
+});
+
+function renderMainPage(initialEntry: string) {
+  return renderWithProviders(<MainPage />, { initialEntries: [initialEntry] });
+}
+
+describe("MainPage — Issue 外部変更の即時反映と選択離脱時の破棄（#945 / REQ-016-AC-12）", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockMatchMedia(true);
+    mockFetchProposalsApi.mockResolvedValue([]);
+    mockListIssueLabelsApi.mockResolvedValue({ labels: [] });
+    mockListIssuesApi.mockResolvedValue({
+      issues: [
+        baseSummary({ number: 10, title: "Issue 10" }),
+        baseSummary({ number: 9, title: "Issue 9" }),
+      ],
+    });
+    // /tree は live（配列）で返し apiState=ready → githubSyncEnabled=true
+    mockApiFetch.mockImplementation((url: string) => {
+      if (url.startsWith("/tree")) {
+        return Promise.resolve(jsonResponse([]));
+      }
+      return Promise.resolve({ ok: false, status: 404, headers: { get: () => null } });
+    });
+  });
+
+  it("抑制時の外部変更で一覧行を即時更新し、別 Issue へ移動すると optimistic を破棄する", async () => {
+    renderMainPage("/?issue=10");
+
+    // Issues タブで一覧と詳細（モック）が表示される
+    await waitFor(() => expect(screen.getByText("detail-10")).toBeTruthy());
+    await waitFor(() => expect(screen.getByText("Issue 10")).toBeTruthy());
+
+    const listCallsBefore = mockListIssuesApi.mock.calls.length;
+
+    // 詳細 poll の外部変更検知を発火 → 追加 GET /api/issues なしで一覧行が即時更新される
+    fireEvent.click(screen.getByRole("button", { name: "外部変更を発火" }));
+
+    await waitFor(() => expect(screen.getByText("Issue 10 (外部更新)")).toBeTruthy());
+    expect(mockListIssuesApi.mock.calls.length).toBe(listCallsBefore);
+
+    // 別 Issue (#9) を選択 → snapshot optimistic は破棄され、行は実体（v1）へ戻る
+    fireEvent.click(screen.getByText("Issue 9"));
+
+    await waitFor(() => expect(screen.getByText("detail-9")).toBeTruthy());
+    await waitFor(() => {
+      expect(screen.queryByText("Issue 10 (外部更新)")).toBeNull();
+      expect(screen.getByText("Issue 10")).toBeTruthy();
+    });
+  });
+});