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

package/notes/app/src/components/FileInfoPanel.branch-tab.test.tsx

@@ -0,0 +1,250 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import type { FileContent } from "@/types";
+
+const triggerPeriodicSync = vi.hoisted(() => vi.fn());
+
+vi.mock("@/hooks/usePeriodicSync", () => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports -- mock factory 制約
+  const { useEffect, useRef } = require("react") as typeof import("react");
+  return {
+    // 実フック（usePeriodicSync.ts）の即時 sync 挙動を忠実に再現する:
+    // onSync は ref 捕捉し、effect 依存は実フックと同じ [enabled, intervalMs, skipInitialSync]。
+    // enabled 時の effect setup（初回マウント / enabled false→true 遷移）で onSync を発火し、
+    // 初回マウントは skipInitialSync で抑制する。これにより「mount 直後の foreground load 中に
+    // 即時 background poll が走る」競合（#934）を再現する。
+    usePeriodicSync: ({
+      onSync,
+      enabled,
+      intervalMs,
+      skipInitialSync,
+    }: {
+      onSync: () => void;
+      enabled: boolean;
+      intervalMs: number;
+      skipInitialSync?: boolean;
+    }) => {
+      const onSyncRef = useRef(onSync);
+      const isInitialMountRef = useRef(true);
+      useEffect(() => {
+        onSyncRef.current = onSync;
+      }, [onSync]);
+      useEffect(() => {
+        triggerPeriodicSync.mockImplementation(() => {
+          if (enabled) onSyncRef.current();
+        });
+        const isInitialMount = isInitialMountRef.current;
+        isInitialMountRef.current = false;
+        if (!enabled || intervalMs <= 0) return;
+        if (skipInitialSync && isInitialMount) return;
+        onSyncRef.current();
+      }, [enabled, intervalMs, skipInitialSync]);
+    },
+  };
+});
+
+vi.mock("@/lib/api", () => ({
+  fetchHistoryApi: vi.fn().mockResolvedValue([]),
+  fetchBranchStatusApi: vi.fn(),
+  fetchSessionsApi: vi.fn(),
+  getErrorMessage: vi.fn((e: unknown, fallback?: string) => {
+    if (e instanceof Error) return e.message;
+    return fallback ?? String(e);
+  }),
+  isAbortError: vi.fn(() => false),
+}));
+
+import { fetchBranchStatusApi, fetchSessionsApi, isAbortError } from "@/lib/api";
+import FileInfoPanel from "./FileInfoPanel";
+
+const mockFetchBranchStatus = vi.mocked(fetchBranchStatusApi);
+const mockFetchSessions = vi.mocked(fetchSessionsApi);
+const mockIsAbortError = vi.mocked(isAbortError);
+
+const mockFile: FileContent = {
+  path: "docs/readme.md",
+  content: "# Hello",
+  encoding: "utf-8",
+  size: 7,
+};
+
+const MOCK_BRANCH_STATUS = {
+  branch: "main",
+  ahead: 0,
+  behind: 0,
+  prStatus: null,
+};
+
+const panelProps = (syncEnabled: boolean) => ({
+  fileContent: mockFile,
+  collabUsers: [],
+  onClose: vi.fn(),
+  syncEnabled,
+});
+
+function openBranchTab() {
+  fireEvent.click(screen.getByText("ブランチ"));
+}
+
+describe("FileInfoPanel — BranchTab", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockFetchSessions.mockResolvedValue([]);
+    mockFetchBranchStatus.mockResolvedValue(MOCK_BRANCH_STATUS);
+    mockIsAbortError.mockImplementation(
+      (error: unknown) => error instanceof Error && error.name === "AbortError",
+    );
+  });
+
+  it("mount 直後 foreground 取得中に即時 background sync が失敗しても foreground SUCCESS が破棄されない（#934）", async () => {
+    let resolveForeground: ((value: typeof MOCK_BRANCH_STATUS) => void) | undefined;
+    let branchCalls = 0;
+    mockFetchBranchStatus.mockImplementation(() => {
+      branchCalls += 1;
+      // call1 = foreground 初回 load（保留）, call2 = 即時 background poll（失敗）
+      if (branchCalls === 1) {
+        return new Promise((resolve) => {
+          resolveForeground = resolve;
+        });
+      }
+      return Promise.reject(new Error("502 Bad Gateway"));
+    });
+
+    const { rerender } = render(<FileInfoPanel {...panelProps(false)} />);
+    openBranchTab();
+
+    expect(screen.getByText("読み込み中…")).toBeTruthy();
+
+    // enabled false→true 遷移で即時 background poll が発火し、foreground と競合する
+    await act(async () => {
+      rerender(<FileInfoPanel {...panelProps(true)} />);
+      await Promise.resolve();
+    });
+
+    // 競合が実際に再現されたこと（foreground load + 即時 background poll）を固定する
+    await waitFor(() => {
+      expect(mockFetchBranchStatus).toHaveBeenCalledTimes(2);
+    });
+    // background poll 失敗は loading を解除しない（loading は foreground load のみが管理）
+    expect(screen.getByText("読み込み中…")).toBeTruthy();
+
+    await act(async () => {
+      resolveForeground?.(MOCK_BRANCH_STATUS);
+      await Promise.resolve();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("現在のブランチ")).toBeTruthy();
+    });
+    expect(screen.queryByText("データなし")).toBeNull();
+    expect(screen.queryByText(/502 Bad Gateway/)).toBeNull();
+  });
+
+  it("より新しい background poll が先に成功したら、後着の古い foreground load では上書きしない（#949 / REQ-016-AC-13）", async () => {
+    const POLL_STATUS = { ...MOCK_BRANCH_STATUS, branch: "poll-newer" };
+    const STALE_FOREGROUND_STATUS = { ...MOCK_BRANCH_STATUS, branch: "stale-foreground" };
+    let resolveForeground: ((value: typeof MOCK_BRANCH_STATUS) => void) | undefined;
+    let branchCalls = 0;
+    mockFetchBranchStatus.mockImplementation(() => {
+      branchCalls += 1;
+      // call1 = foreground 初回 load（後着・保留・古い）, call2 = より新しい background poll（先着・成功）
+      if (branchCalls === 1) {
+        return new Promise((resolve) => {
+          resolveForeground = resolve;
+        });
+      }
+      return Promise.resolve(POLL_STATUS);
+    });
+
+    const { rerender } = render(<FileInfoPanel {...panelProps(false)} />);
+    openBranchTab();
+
+    // 後から始まった background poll を先に成功させる（より新しいデータ）
+    await act(async () => {
+      rerender(<FileInfoPanel {...panelProps(true)} />);
+      await Promise.resolve();
+    });
+
+    // foreground load + 即時 background poll が実際に走ったことを固定する
+    await waitFor(() => {
+      expect(mockFetchBranchStatus).toHaveBeenCalledTimes(2);
+    });
+    // 後着の古い foreground SUCCESS が解決しても、より新しい poll の結果を上書きしない（freshness 後勝ち）
+    await act(async () => {
+      resolveForeground?.(STALE_FOREGROUND_STATUS);
+      await Promise.resolve();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("poll-newer")).toBeTruthy();
+    });
+    expect(screen.queryByText("stale-foreground")).toBeNull();
+    expect(screen.queryByText("データなし")).toBeNull();
+  });
+
+  it("background の AbortError でも foreground SUCCESS が破棄されない", async () => {
+    const abortError = new DOMException("The operation was aborted", "AbortError");
+    let resolveForeground: ((value: typeof MOCK_BRANCH_STATUS) => void) | undefined;
+    let branchCalls = 0;
+    mockFetchBranchStatus.mockImplementation(() => {
+      branchCalls += 1;
+      if (branchCalls === 1) {
+        return new Promise((resolve) => {
+          resolveForeground = resolve;
+        });
+      }
+      return Promise.reject(abortError);
+    });
+
+    const { rerender } = render(<FileInfoPanel {...panelProps(false)} />);
+    openBranchTab();
+
+    expect(screen.getByText("読み込み中…")).toBeTruthy();
+
+    await act(async () => {
+      rerender(<FileInfoPanel {...panelProps(true)} />);
+      await Promise.resolve();
+    });
+
+    // foreground load + 即時 background poll（AbortError）が実際に走ったことを固定する
+    await waitFor(() => {
+      expect(mockFetchBranchStatus).toHaveBeenCalledTimes(2);
+    });
+
+    await act(async () => {
+      resolveForeground?.(MOCK_BRANCH_STATUS);
+      await Promise.resolve();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("現在のブランチ")).toBeTruthy();
+    });
+    expect(screen.queryByText("データなし")).toBeNull();
+  });
+
+  it("背景 sync 失敗時は error を表示せず直前状態を維持する（REQ-016-AC-06）", async () => {
+    const { rerender } = render(<FileInfoPanel {...panelProps(false)} />);
+    openBranchTab();
+
+    await waitFor(() => {
+      expect(screen.getByText("現在のブランチ")).toBeTruthy();
+    });
+
+    mockFetchBranchStatus.mockRejectedValue(new Error("502 Bad Gateway"));
+
+    // enabled 有効化で即時 poll（失敗）、さらに interval 相当の poll（失敗）を発火
+    await act(async () => {
+      rerender(<FileInfoPanel {...panelProps(true)} />);
+      await Promise.resolve();
+    });
+    await act(async () => {
+      triggerPeriodicSync();
+      await Promise.resolve();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("現在のブランチ")).toBeTruthy();
+    });
+    expect(screen.queryByText(/502 Bad Gateway/)).toBeNull();
+  });
+});

package/notes/app/src/components/FileInfoPanel.history-tab.test.tsx

@@ -0,0 +1,146 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor, act } from "@testing-library/react";
+import type { FileContent } from "@/types";
+import type { CommitEntry } from "@/lib/api";
+
+vi.mock("@/lib/api", () => ({
+  fetchHistoryApi: vi.fn(),
+  fetchBranchStatusApi: vi.fn().mockResolvedValue(null),
+  fetchSessionsApi: vi.fn().mockResolvedValue([]),
+  getErrorMessage: vi.fn((e: unknown, fallback?: string) => {
+    if (e instanceof Error) return e.message;
+    return fallback ?? String(e);
+  }),
+  isAbortError: vi.fn(
+    (error: unknown) => error instanceof Error && error.name === "AbortError",
+  ),
+}));
+
+import { fetchHistoryApi } from "@/lib/api";
+import FileInfoPanel from "./FileInfoPanel";
+
+const mockFetchHistory = vi.mocked(fetchHistoryApi);
+
+const fileA: FileContent = {
+  path: "docs/a.md",
+  content: "# A",
+  encoding: "utf-8",
+  size: 3,
+};
+
+const fileB: FileContent = {
+  path: "docs/b.md",
+  content: "# B",
+  encoding: "utf-8",
+  size: 3,
+};
+
+const historyA: CommitEntry[] = [
+  { sha: "aaaaaaa1234567", message: "commit-A", author: "alice", date: "2026-06-01T00:00:00Z" },
+];
+const historyB: CommitEntry[] = [
+  { sha: "bbbbbbb1234567", message: "commit-B", author: "bob", date: "2026-06-02T00:00:00Z" },
+];
+
+const panelProps = (fileContent: FileContent) => ({
+  fileContent,
+  collabUsers: [],
+  onClose: vi.fn(),
+});
+
+function openHistoryTab() {
+  fireEvent.click(screen.getByText("履歴"));
+}
+
+describe("FileInfoPanel — HistoryTab in-flight 競合防止", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("ファイル切替後に後着した旧ファイルの応答で上書きされない", async () => {
+    let resolveA: ((value: CommitEntry[]) => void) | undefined;
+    mockFetchHistory.mockImplementation((path: string) => {
+      if (path === fileA.path) {
+        return new Promise<CommitEntry[]>((resolve) => {
+          resolveA = resolve;
+        });
+      }
+      return Promise.resolve(historyB);
+    });
+
+    const { rerender } = render(<FileInfoPanel {...panelProps(fileA)} />);
+    openHistoryTab();
+
+    // A 向け取得は pending（読み込み中）
+    expect(screen.getByText("読み込み中…")).toBeTruthy();
+
+    // ファイル B へ切替 → B の履歴が表示される
+    rerender(<FileInfoPanel {...panelProps(fileB)} />);
+    await waitFor(() => {
+      expect(screen.getByText("commit-B")).toBeTruthy();
+    });
+
+    // A 向けの in-flight 応答が後着しても無視される
+    await act(async () => {
+      resolveA?.(historyA);
+      await Promise.resolve();
+    });
+
+    expect(screen.getByText("commit-B")).toBeTruthy();
+    expect(screen.queryByText("commit-A")).toBeNull();
+  });
+
+  // unmount 後の後着応答（解決・棄却の両系）でクリーンに teardown されることを確認する。
+  // React 18+ は unmount 後の dispatch を黙って no-op にするため、mountedRef ガードの
+  // 有無は console 出力には現れない。本テストは「teardown 時にエラー/未処理 rejection が
+  // 表面化しない」ことの smoke test として機能する。
+  it.each(["解決", "棄却"] as const)(
+    "in-flight 中に unmount → 後着応答が%sしてもエラーが表面化しない",
+    async (mode) => {
+      let resolveA: ((value: CommitEntry[]) => void) | undefined;
+      let rejectA: ((reason: unknown) => void) | undefined;
+      mockFetchHistory.mockImplementation(
+        () =>
+          new Promise<CommitEntry[]>((resolve, reject) => {
+            resolveA = resolve;
+            rejectA = reject;
+          }),
+      );
+      const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+      const { unmount } = render(<FileInfoPanel {...panelProps(fileA)} />);
+      openHistoryTab();
+      expect(screen.getByText("読み込み中…")).toBeTruthy();
+
+      unmount();
+
+      await act(async () => {
+        if (mode === "解決") resolveA?.(historyA);
+        else rejectA?.(new Error("late failure"));
+        await Promise.resolve();
+      });
+
+      expect(errorSpy).not.toHaveBeenCalled();
+      errorSpy.mockRestore();
+    },
+  );
+
+  it("再試行ボタンで履歴を再取得する", async () => {
+    mockFetchHistory
+      .mockRejectedValueOnce(new Error("履歴の取得に失敗しました"))
+      .mockResolvedValueOnce(historyA);
+
+    render(<FileInfoPanel {...panelProps(fileA)} />);
+    openHistoryTab();
+
+    await waitFor(() => {
+      expect(screen.getByText("履歴の取得に失敗しました")).toBeTruthy();
+    });
+
+    fireEvent.click(screen.getByText("再試行"));
+
+    await waitFor(() => {
+      expect(screen.getByText("commit-A")).toBeTruthy();
+    });
+  });
+});

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

@@ -0,0 +1,101 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import FileInfoPanel from "./FileInfoPanel";
+import type { FileContent } from "@/types";
+
+const mockFile: FileContent = {
+  path: "docs/readme.md",
+  content: "# Hello",
+  encoding: "utf-8",
+  size: 7,
+};
+
+describe("FileInfoPanel", () => {
+  it("panelResize.width を aside の inline width に適用する", () => {
+    const { container } = render(
+      <FileInfoPanel
+        fileContent={mockFile}
+        collabUsers={[]}
+        onClose={vi.fn()}
+        panelResize={{
+          width: 400,
+          minWidth: 240,
+          maxWidth: 560,
+          onPointerDown: vi.fn(),
+          onWidthChange: vi.fn(),
+        }}
+      />,
+    );
+
+    const aside = container.querySelector("aside");
+    expect(aside?.getAttribute("style")).toContain("width: 400px");
+  });
+
+  it("panelResize 指定時にリサイズハンドルを表示する", () => {
+    render(
+      <FileInfoPanel
+        fileContent={mockFile}
+        collabUsers={[]}
+        onClose={vi.fn()}
+        panelResize={{
+          width: 360,
+          minWidth: 240,
+          maxWidth: 560,
+          onPointerDown: vi.fn(),
+          onWidthChange: vi.fn(),
+        }}
+      />,
+    );
+
+    expect(
+      screen.getByRole("slider", { name: "ファイル情報パネルの幅を変更" }),
+    ).toBeTruthy();
+  });
+
+  it("showResizeHandle: false のとき幅は適用するがハンドルは非表示", () => {
+    const { container } = render(
+      <FileInfoPanel
+        fileContent={mockFile}
+        collabUsers={[]}
+        onClose={vi.fn()}
+        panelResize={{
+          width: 380,
+          minWidth: 240,
+          maxWidth: 560,
+          onPointerDown: vi.fn(),
+          onWidthChange: vi.fn(),
+          showResizeHandle: false,
+        }}
+      />,
+    );
+
+    expect(container.querySelector("aside")?.getAttribute("style")).toContain("width: 380px");
+    expect(screen.queryByRole("slider")).toBeNull();
+  });
+
+  it("panelResize 未指定時はリサイズハンドルを表示しない", () => {
+    render(
+      <FileInfoPanel
+        fileContent={mockFile}
+        collabUsers={[]}
+        onClose={vi.fn()}
+      />,
+    );
+
+    expect(screen.queryByRole("slider")).toBeNull();
+  });
+
+  it("md+ 用に aside を relative 配置する", () => {
+    const { container } = render(
+      <FileInfoPanel
+        fileContent={mockFile}
+        collabUsers={[]}
+        onClose={vi.fn()}
+      />,
+    );
+
+    const aside = container.querySelector("aside");
+    expect(aside?.className).toContain("md:relative");
+    expect(aside?.className).not.toContain("md:static");
+  });
+});