citation-evidence/tests/integration/forms-active-cycling.dom.test.tsx

/**
 * CE-WP-0003-T06 integration — focusing a field auto-activates its first
 * linked evidence, the chip is marked aria-current, and the ScrollBridge
 * fires scrollTo on the viewer with the right annotation.
 *
 * Flow:
 *   1. Review mode: open fixture, inject a selection capture, save the
 *      evidence item (T09 pattern).
 *   2. Switch to Forms mode.
 *   3. Stage the saved evidence in the strip.
 *   4. Click a field → BindingService creates a link.
 *   5. Click the field again → ActiveStateProvider focuses target →
 *      chip list re-derives → auto-activates first chip → ScrollBridge
 *      calls scrollTo → mock viewer sees `scrollToAnnotationId`.
 */

// @vitest-environment happy-dom

import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

import type { Document, DocumentRepresentation } from "@shared/document";
import type { DocumentId, RepresentationId } from "@shared/ids";
import type { Selector } from "@shared/selector";

import type { PdfSelectionCapture } from "@anchor/index";
import manifest from "../../fixtures/pdfs/manifest.json" with { type: "json" };

interface ViewerProps {
  pdfUrl: string;
  storedAnnotations: readonly { id: string; text: string; selectors: readonly Selector[] }[];
  scrollToAnnotationId?: string;
  onSelectionCaptured(capture: PdfSelectionCapture, selectors: Selector[]): void;
}

interface ViewerSnapshot {
  pdfUrl: string | null;
  scrollToAnnotationId: string | null;
  onSelectionCaptured: ViewerProps["onSelectionCaptured"] | null;
  storedAnnotationIds: string[];
}

const viewerSnapshot: ViewerSnapshot = {
  pdfUrl: null,
  scrollToAnnotationId: null,
  onSelectionCaptured: null,
  storedAnnotationIds: [],
};

vi.mock("@anchor/index", async (importOriginal) => {
  const original = await importOriginal<typeof import("@anchor/index")>();
  const MockPdfSpikeViewer = (props: ViewerProps) => {
    viewerSnapshot.pdfUrl = props.pdfUrl;
    viewerSnapshot.scrollToAnnotationId = props.scrollToAnnotationId ?? null;
    viewerSnapshot.onSelectionCaptured = props.onSelectionCaptured;
    viewerSnapshot.storedAnnotationIds = props.storedAnnotations.map((a) => a.id);
    return (
      <div
        data-testid="mock-pdf-viewer"
        data-pdf-url={props.pdfUrl}
        data-scroll-to={props.scrollToAnnotationId ?? ""}
      />
    );
  };
  return { ...original, PdfSpikeViewer: MockPdfSpikeViewer };
});

const FIXTURE = manifest.fixtures.find((f) => f.id === "fristsetzung-bezifferung")!;
const SYNTHETIC_CANONICAL = [
  "Pre quote.",
  FIXTURE.known_good_quote,
  "Post quote.",
].join(" ");

vi.mock("@source/index", async (importOriginal) => {
  const original = await importOriginal<typeof import("@source/index")>();
  return {
    ...original,
    ingestPdf: vi.fn(async (_input: unknown, options?: { filename?: string }) => {
      const documentId = ("doc_test_" + Math.random().toString(36).slice(2, 10)) as DocumentId;
      const representationId = ("rep_test_" + Math.random().toString(36).slice(2, 10)) as RepresentationId;
      const document: Document = {
        id: documentId,
        mediaType: "application/pdf",
        ...(options?.filename ? { title: options.filename } : {}),
        fingerprint: "synthetic-fingerprint-for-test",
        createdAt: "2026-05-25T00:00:00.000Z",
        updatedAt: "2026-05-25T00:00:00.000Z",
      };
      const representation: DocumentRepresentation = {
        id: representationId,
        documentId,
        representationType: "pdf-text",
        contentHash: "synthetic-fingerprint-for-test",
        canonicalText: SYNTHETIC_CANONICAL,
        pageMap: [{ page: 1, width: 595, height: 842 }],
        offsetMap: [
          {
            page: 1,
            globalStart: 0,
            globalEnd: SYNTHETIC_CANONICAL.length,
            pageLength: SYNTHETIC_CANONICAL.length,
          },
        ],
        generatedAt: "2026-05-25T00:00:00.000Z",
      };
      return { document, representation };
    }),
  };
});

function syntheticCaptureFor(text: string, page: number): PdfSelectionCapture {
  return {
    kind: "pdf",
    text,
    page,
    rects: [{ x: 0.1, y: 0.2, width: 0.4, height: 0.04 }],
    boundingRect: { x: 0.1, y: 0.2, width: 0.4, height: 0.04 },
  };
}

async function loadApp() {
  const { App } = await import("@app/App");
  return render(<App />);
}

function resetSnapshot() {
  viewerSnapshot.pdfUrl = null;
  viewerSnapshot.scrollToAnnotationId = null;
  viewerSnapshot.onSelectionCaptured = null;
  viewerSnapshot.storedAnnotationIds = [];
}

describe("FormsApp — active-evidence cycling (CE-WP-0003-T06)", () => {
  beforeEach(() => {
    resetSnapshot();
    globalThis.localStorage?.clear();
    globalThis.fetch = vi.fn(async () =>
      new Response(new Uint8Array([0x25, 0x50, 0x44, 0x46]).buffer, {
        status: 200,
        headers: { "Content-Type": "application/pdf" },
      }),
    );
    if (typeof window !== "undefined") {
      history.replaceState(null, "", window.location.pathname);
    }
  });

  afterEach(() => {
    vi.restoreAllMocks();
    cleanup();
  });

  it("focusing a linked field auto-activates the first evidence and bridges to viewer scroll", { timeout: 15000 }, async () => {
    const user = userEvent.setup();
    await loadApp();

    // --- Review mode: create an evidence item via the captured-selection flow.
    const fixtureBtn = screen.getByRole("button", { name: new RegExp(FIXTURE.id) });
    await user.click(fixtureBtn);
    await waitFor(() => expect(viewerSnapshot.onSelectionCaptured).not.toBeNull());
    await act(async () => {
      viewerSnapshot.onSelectionCaptured!(
        syntheticCaptureFor(FIXTURE.known_good_quote, FIXTURE.known_good_quote_page),
        [{ type: "TextQuoteSelector", exact: FIXTURE.known_good_quote }],
      );
    });
    const textarea = screen.getByPlaceholderText(/Add a one-line comment/);
    await user.type(textarea, "Form-cycling test evidence");
    await user.click(screen.getByRole("button", { name: /Save evidence/ }));
    await screen.findByText(/Form-cycling test evidence/);

    // --- Switch to Forms mode.
    await user.click(screen.getByRole("button", { name: "Forms" }));

    // The evidence should appear in the Forms strip too (it queries by doc).
    const stripCard = await screen.findByRole("button", {
      name: /Form-cycling test evidence/,
    });

    // Stage it.
    await user.click(stripCard);

    // Click the Summary field → link gets created.
    const summaryField = screen.getByLabelText("Summary of the matter");
    await user.click(summaryField);

    // Link chip on Summary now shows "1 evidence"
    await waitFor(
      () => {
        expect(screen.queryByTestId("field-summary-chip")).not.toBeNull();
      },
      { timeout: 4000 },
    );

    // Resetting the previous scrollToAnnotationId so we can detect a *new*
    // scroll triggered by chip auto-activation.
    viewerSnapshot.scrollToAnnotationId = null;

    // Click the Summary field again — this re-focuses the target. The chip
    // computed for it should now contain our evidence; the chips' auto-
    // activation effect fires setActiveEvidence; ScrollBridge translates
    // it to a viewer scroll.
    //
    // Note: clicking the same field doesn't fire onFocus if it's already
    // focused. Move focus elsewhere first, then back.
    await user.click(screen.getByLabelText("Disputed amount"));
    await user.click(summaryField);

    // The chip rendered inside the form pane has aria-current="true".
    await waitFor(() => {
      const chip = document.querySelector(
        '[data-evidence-id][aria-current="true"]',
      );
      expect(chip).not.toBeNull();
    });

    // The viewer was asked to scroll to the underlying annotation.
    await waitFor(() => {
      expect(viewerSnapshot.scrollToAnnotationId).toMatch(/^ann_/);
    });
  });
});