AgentHub/client/src/components/lanes/__tests__/DiffEditor.test.tsx

/**
 * @file Tests for the Changes panel's CodeMirror editor: which changed lines
 * count as edited in place (blue) rather than added or removed whole, and the
 * editor's own diff classes on a real mount, and the per-block Undo / Keep bar.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */
import { describe, it, expect, vi } from "vitest";
import { fireEvent, render, waitFor } from "@testing-library/react";
import DiffEditor, { keepsText } from "../DiffEditor";

// jsdom lays nothing out; CodeMirror's measuring asks a Range for its boxes.
const EMPTY = Object.assign([], { item: () => null }) as unknown as DOMRectList;
Range.prototype.getClientRects ??= () => EMPTY;
Range.prototype.getBoundingClientRect ??= () => new DOMRect();

describe("keepsText", () => {
  it("is false for a line whose every non-blank character changed", () => {
    expect(keepsText("  added()", 10, [[12, 19]])).toBe(false);
    expect(keepsText("", 0, [])).toBe(false);
    // Only a `;` survived: not the same line.
    expect(keepsText("export x;", 0, [[0, 8]])).toBe(false);
  });

  it("is true when some text outside the changes survives", () => {
    expect(keepsText("const x = 2;", 0, [[10, 11]])).toBe(true);
  });
});

describe("DiffEditor", () => {
  it("marks a whole new line green and a line edited in place blue", async () => {
    const { container } = render(
      <DiffEditor
        value={"keep\nconst x = 2;\nbrand new"}
        original={"keep\nconst x = 1;"}
        lang="ts"
        label="Edit"
        revertLabel="Revert"
        onChange={vi.fn()}
        onSave={vi.fn()}
      />
    );
    await waitFor(() => expect(container.querySelectorAll(".cm-changedLine")).toHaveLength(2));
    const lines = [...container.querySelectorAll<HTMLElement>(".cm-changedLine")];
    expect(lines.map((l) => l.classList.contains("cm-ah-mod"))).toEqual([true, false]);
    await waitFor(() =>
      expect(container.querySelector(".cm-deletedLine")).toHaveAttribute("data-ah", "mod")
    );
  });

  it("side by side: the original read-only on the left, its edited line blue", async () => {
    const { container } = render(
      <DiffEditor
        layout="split"
        value={"keep\nconst x = 2;"}
        original={"keep\nconst x = 1;"}
        lang="ts"
        label="Edit"
        revertLabel="Revert"
        onChange={vi.fn()}
        onSave={vi.fn()}
      />
    );
    await waitFor(() => expect(container.querySelectorAll(".cm-editor")).toHaveLength(2));
    const [left, right] = [...container.querySelectorAll<HTMLElement>(".cm-content")];
    expect(left).toHaveAttribute("contenteditable", "false");
    expect(right).toHaveAttribute("contenteditable", "true");
    expect(container.querySelector(".cm-merge-a .cm-changedLine.cm-ah-mod")).not.toBeNull();
    expect(container.querySelector(".cm-merge-b .cm-changedLine.cm-ah-mod")).not.toBeNull();
    // The revert column is drawn in CodeMirror's next measure pass, not at mount.
    await waitFor(() =>
      expect(container.querySelector(".cm-merge-revert button")).toHaveAttribute("title", "Revert")
    );
  });

  it("folds unchanged lines away when collapsed, and offers Revert on a block", async () => {
    const same = Array.from({ length: 30 }, (_, i) => `line ${i}`).join("\n");
    const { container } = render(
      <DiffEditor
        collapse
        value={`${same}\nchanged`}
        original={`${same}\noriginal`}
        lang="plain"
        label="Edit"
        revertLabel="Revert"
        onChange={vi.fn()}
        onSave={vi.fn()}
      />
    );
    await waitFor(() => expect(container.querySelector(".cm-collapsedLines")).not.toBeNull());
    const buttons = [...container.querySelectorAll<HTMLButtonElement>(".cm-chunkButtons button")];
    expect(buttons.filter((b) => !b.hidden).map((b) => b.textContent)).toEqual(["Revert"]);
  });

  it("puts an Undo / Keep bar under each block, by line, in place of Revert", async () => {
    const onBlock = vi.fn();
    const props = {
      value: "a\nB\nc\nnew\ne",
      original: "a\nb\nc\nd\ne",
      lang: "plain",
      label: "Edit",
      revertLabel: "Revert",
      onChange: vi.fn(),
      onSave: vi.fn(),
    };
    const { container, rerender } = render(<DiffEditor {...props} onBlock={onBlock} />);
    await waitFor(() =>
      expect(container.querySelectorAll('[data-testid="lane-editor-block-bar"]')).toHaveLength(2)
    );
    expect(container.querySelector('[data-testid="lane-file-editor"]')).toHaveAttribute(
      "data-bars",
      "true"
    );
    const [first, second] = [
      ...container.querySelectorAll<HTMLElement>('[data-testid="lane-editor-block-bar"]'),
    ];
    fireEvent.click(second!.querySelectorAll("button")[1]!);
    expect(onBlock).toHaveBeenLastCalledWith("keep", {
      oldFrom: 4,
      oldCount: 1,
      newFrom: 4,
      newCount: 1,
    });
    // Undo asks twice.
    const firstUndo = first!.querySelector("button")!;
    fireEvent.click(firstUndo);
    expect(onBlock).toHaveBeenCalledTimes(1);
    fireEvent.click(firstUndo);
    expect(onBlock).toHaveBeenLastCalledWith("undo", {
      oldFrom: 2,
      oldCount: 1,
      newFrom: 2,
      newCount: 1,
    });
    // Unsaved text (no onBlock): no bars, Revert back.
    rerender(<DiffEditor {...props} />);
    await waitFor(() =>
      expect(container.querySelector('[data-testid="lane-editor-block-bar"]')).toBeNull()
    );
    expect(container.querySelector('[data-testid="lane-file-editor"]')).toHaveAttribute(
      "data-bars",
      "false"
    );
  });
});