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

package/notes/app/src/pages/MainPage.sidebar.test.tsx

@@ -0,0 +1,361 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { screen, waitFor, fireEvent, within } from "@testing-library/react";
+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 mockGetWindowSelectionAnchor = vi.hoisted(() => vi.fn());
+
+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() }));
+
+vi.mock("@/lib/commentAnchor", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/lib/commentAnchor")>();
+  return {
+    ...actual,
+    getWindowSelectionAnchor: (...args: unknown[]) => mockGetWindowSelectionAnchor(...args),
+  };
+});
+
+import MainPage from "./MainPage";
+
+const sampleFileContent = {
+  path: "docs/readme.md",
+  content: "# Hello",
+};
+
+function mockTreeAndFileApi() {
+  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" }],
+          },
+        ]),
+      );
+    }
+    if (url.startsWith("/files/docs/readme.md")) {
+      return Promise.resolve(jsonResponse(sampleFileContent));
+    }
+    return Promise.resolve({ ok: false, status: 404, headers: { get: () => null } });
+  });
+}
+
+function renderMainPage(initialEntry = "/") {
+  return renderWithProviders(<MainPage />, { initialEntries: [initialEntry] });
+}
+
+function mockTextSelection() {
+  const mockRange = {
+    getBoundingClientRect: () => ({
+      top: 100,
+      left: 50,
+      width: 80,
+      height: 20,
+      right: 130,
+      bottom: 120,
+      x: 50,
+      y: 100,
+      toJSON: () => ({}),
+    }),
+  };
+  mockGetWindowSelectionAnchor.mockReturnValue({
+    anchor_text: "selected snippet",
+    position_from: 2,
+    position_to: 7,
+  });
+  Object.defineProperty(window, "getSelection", {
+    writable: true,
+    configurable: true,
+    value: vi.fn(() => ({
+      isCollapsed: false,
+      rangeCount: 1,
+      getRangeAt: () => mockRange,
+    })),
+  });
+}
+
+describe("MainPage — left sidebar layout", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockMatchMedia(true);
+    mockFetchProposalsApi.mockResolvedValue([]);
+    mockApiFetch.mockImplementation((url: string) => {
+      if (url.startsWith("/tree")) {
+        return Promise.resolve(jsonResponse([]));
+      }
+      return Promise.resolve({ ok: false, status: 404, headers: { get: () => null } });
+    });
+  });
+
+  it("md+ 用に左サイドバー aside を relative 配置する", async () => {
+    renderMainPage();
+
+    const aside = await waitFor(() => screen.getByTestId("left-sidebar"));
+    expect(aside.className).toContain("md:relative");
+    expect(aside.className).not.toContain("md:static");
+  });
+
+  it("REQ-UI-AC-01: md+ に左サイドバーリサイズスライダーが存在する", async () => {
+    renderMainPage();
+
+    await waitFor(() => screen.getByTestId("left-sidebar"));
+    expect(
+      screen.getByRole("slider", { name: "左サイドバーの幅を変更" }),
+    ).toBeTruthy();
+  });
+});
+
+describe("MainPage — right panel mutual exclusivity", () => {
+  const originalGetSelection = window.getSelection;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockMatchMedia(true);
+    mockFetchProposalsApi.mockResolvedValue([]);
+    mockTreeAndFileApi();
+  });
+
+  afterEach(() => {
+    Object.defineProperty(window, "getSelection", {
+      writable: true,
+      configurable: true,
+      value: originalGetSelection,
+    });
+  });
+
+  it("コメントパネル表示中にファイル情報パネルを開くとコメントパネルが閉じる", async () => {
+    renderMainPage("/?file=docs/readme.md");
+
+    const commentToggle = await waitFor(() =>
+      screen.getByTitle("コメントパネルを表示/非表示"),
+    );
+    fireEvent.click(commentToggle);
+
+    expect(await screen.findByRole("heading", { name: /^コメント/ })).toBeTruthy();
+
+    const fileInfoToggle = screen.getByTitle("ファイル情報パネルを表示/非表示");
+    fireEvent.click(fileInfoToggle);
+
+    expect(await screen.findByRole("heading", { name: "ファイル情報" })).toBeTruthy();
+    expect(screen.queryByRole("heading", { name: /^コメント/ })).toBeNull();
+  });
+
+  it("ファイル情報パネル表示中にコメントパネルを開くとファイル情報パネルが閉じる", async () => {
+    renderMainPage("/?file=docs/readme.md");
+
+    const fileInfoToggle = await waitFor(() =>
+      screen.getByTitle("ファイル情報パネルを表示/非表示"),
+    );
+    fireEvent.click(fileInfoToggle);
+
+    expect(await screen.findByRole("heading", { name: "ファイル情報" })).toBeTruthy();
+
+    const commentToggle = screen.getByTitle("コメントパネルを表示/非表示");
+    fireEvent.click(commentToggle);
+
+    expect(await screen.findByRole("heading", { name: /^コメント/ })).toBeTruthy();
+    expect(screen.queryByRole("heading", { name: "ファイル情報" })).toBeNull();
+  });
+
+  it("閲覧モードのテキスト選択からコメント追加するとファイル情報パネルが閉じる", async () => {
+    renderMainPage("/?file=docs/readme.md");
+    mockTextSelection();
+
+    const fileInfoToggle = await waitFor(() =>
+      screen.getByTitle("ファイル情報パネルを表示/非表示"),
+    );
+    fireEvent.click(fileInfoToggle);
+    expect(await screen.findByRole("heading", { name: "ファイル情報" })).toBeTruthy();
+
+    const content = await screen.findByText(/Hello/);
+    fireEvent.mouseUp(content);
+
+    expect(mockGetWindowSelectionAnchor).toHaveBeenCalled();
+
+    const addCommentBtn = await screen.findByRole("button", { name: "コメント" });
+    fireEvent.click(addCommentBtn);
+
+    expect(await screen.findByRole("heading", { name: /^コメント/ })).toBeTruthy();
+    expect(screen.queryByRole("heading", { name: "ファイル情報" })).toBeNull();
+    expect(screen.getByText("selected snippet")).toBeTruthy();
+  });
+});
+
+describe("MainPage — showOriginal slider deduplication", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockMatchMedia(true);
+    mockFetchProposalsApi.mockResolvedValue([]);
+    mockTreeAndFileApi();
+  });
+
+  async function enterEditModeWithOriginal(
+    secondaryPanel: "comment" | "fileInfo",
+  ) {
+    renderMainPage("/?file=docs/readme.md");
+
+    const editBtn = await waitFor(() => screen.getByRole("button", { name: "編集" }));
+    fireEvent.click(editBtn);
+
+    const showOriginalBtn = await waitFor(() =>
+      screen.getByRole("button", { name: /base: main/ }),
+    );
+    fireEvent.click(showOriginalBtn);
+    expect(await screen.findByRole("heading", { name: /main のソース/ })).toBeTruthy();
+
+    if (secondaryPanel === "comment") {
+      fireEvent.click(screen.getByTitle("コメントパネルを表示/非表示"));
+      expect(await screen.findByRole("heading", { name: /^コメント/ })).toBeTruthy();
+    } else {
+      fireEvent.click(screen.getByTitle("ファイル情報パネルを表示/非表示"));
+      expect(await screen.findByRole("heading", { name: "ファイル情報" })).toBeTruthy();
+    }
+  }
+
+  it("showOriginal + コメント同時表示時は右パネルの slider は参照パネルのみ", async () => {
+    await enterEditModeWithOriginal("comment");
+
+    expect(
+      screen.getByRole("slider", { name: "参照パネルの幅を変更" }),
+    ).toBeTruthy();
+    expect(screen.queryByRole("slider", { name: "コメントパネルの幅を変更" })).toBeNull();
+  });
+
+  it("showOriginal + ファイル情報同時表示時は右パネルの slider は参照パネルのみ", async () => {
+    await enterEditModeWithOriginal("fileInfo");
+
+    expect(
+      screen.getByRole("slider", { name: "参照パネルの幅を変更" }),
+    ).toBeTruthy();
+    expect(screen.queryByRole("slider", { name: "ファイル情報パネルの幅を変更" })).toBeNull();
+  });
+
+  async function closeOriginalPanel() {
+    const originalHeading = screen.getByRole("heading", { name: /main のソース/ });
+    const originalAside = originalHeading.closest("aside");
+    expect(originalAside).toBeTruthy();
+    fireEvent.click(
+      within(originalAside as HTMLElement).getByRole("button", { name: "閉じる" }),
+    );
+    await waitFor(() => {
+      expect(screen.queryByRole("heading", { name: /main のソース/ })).toBeNull();
+    });
+  }
+
+  it("showOriginal を閉じるとコメントパネル側の slider が復帰する", async () => {
+    await enterEditModeWithOriginal("comment");
+    await closeOriginalPanel();
+
+    expect(
+      screen.getByRole("slider", { name: "コメントパネルの幅を変更" }),
+    ).toBeTruthy();
+    expect(screen.queryByRole("slider", { name: "参照パネルの幅を変更" })).toBeNull();
+  });
+
+  it("showOriginal を閉じるとファイル情報パネル側の slider が復帰する", async () => {
+    await enterEditModeWithOriginal("fileInfo");
+    await closeOriginalPanel();
+
+    expect(
+      screen.getByRole("slider", { name: "ファイル情報パネルの幅を変更" }),
+    ).toBeTruthy();
+    expect(screen.queryByRole("slider", { name: "参照パネルの幅を変更" })).toBeNull();
+  });
+});
+
+describe("MainPage — showOriginal branch switch reset", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    HTMLDialogElement.prototype.showModal = vi.fn(function (this: HTMLDialogElement) {
+      this.open = true;
+    });
+    HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+      this.open = false;
+    });
+    mockMatchMedia(true);
+    mockFetchProposalsApi.mockResolvedValue([
+      {
+        number: 42,
+        title: "Test branch PR",
+        branch: "feat/test-branch",
+        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/42",
+        draft: false,
+      },
+    ]);
+    mockTreeAndFileApi();
+  });
+
+  async function openOriginalInEditMode() {
+    renderMainPage("/?file=docs/readme.md");
+    fireEvent.click(await waitFor(() => screen.getByRole("button", { name: "編集" })));
+    fireEvent.click(await waitFor(() => screen.getByRole("button", { name: /base: main/ })));
+    expect(await screen.findByRole("heading", { name: /main のソース/ })).toBeTruthy();
+  }
+
+  async function switchToTestBranch() {
+    const sidebar = screen.getByTestId("left-sidebar");
+    fireEvent.click(within(sidebar).getByRole("button", { name: "main" }));
+    fireEvent.click(await screen.findByRole("button", { name: /Test branch PR/ }));
+  }
+
+  it("ブランチ切替直後に原文パネルが閉じる", async () => {
+    await openOriginalInEditMode();
+    await switchToTestBranch();
+
+    await waitFor(() => {
+      expect(screen.queryByRole("heading", { name: /main のソース/ })).toBeNull();
+    });
+    expect(screen.queryByRole("button", { name: /base: main/ })).toBeNull();
+    expect(screen.getByText("ファイルまたは Issue を選択してください")).toBeTruthy();
+  });
+
+  it("ブランチ切替後に原文パネルが自動復帰しない", async () => {
+    await openOriginalInEditMode();
+    await switchToTestBranch();
+
+    await waitFor(() => {
+      expect(screen.getByText("ファイルまたは Issue を選択してください")).toBeTruthy();
+    });
+
+    fireEvent.click(await waitFor(() => screen.getByText("docs")));
+    fireEvent.click(await screen.findByText("readme.md"));
+    await waitFor(() => expect(screen.getByText(/Hello/)).toBeTruthy());
+
+    fireEvent.click(screen.getByRole("button", { name: "編集" }));
+    expect(screen.queryByRole("heading", { name: /main のソース/ })).toBeNull();
+  });
+});