citation-evidence/tests/integration/forms-overlay-e2e.dom.test.tsx

/**
 * CE-WP-0003-T08 — end-to-end test of the form-binding slice (PRD
 * scenario steps 5-9 from CE-WP-0002-T09's continuation):
 *
 *   5. Navigate to /forms/demo (hash route).
 *   6. Link the previously-created evidence item to the "summary" field.
 *   7. Click the "summary" field.
 *   8. The field, the evidence card, and the highlight all have
 *      aria-current="true".
 *   9. The SVG visual-guide overlay contains exactly two <path> elements
 *      (one field→card, one card→highlight).
 *
 * The viewer is mocked (same pattern as CE-WP-0002-T09) and
 * `getHighlightClientRects` is stubbed to return a non-null DOMRect so
 * the HighlightRectBridge can register a highlight rect — without that
 * stub there is no real highlight DOM for the bridge to find.
 *
 * Step 10 (scroll → paths update next frame) is exercised by
 * `Overlay.dom.test.tsx`'s invalidate-on-rect-change case; reproducing
 * it through the full app stack would require driving the rAF scheduler
 * deterministically, which is overkill given the dedicated unit test.
 */

// @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;
}

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

function fakeHighlightRect(): DOMRect {
  // happy-dom may not expose a stable DOMRect constructor; use a literal.
  return {
    x: 700, y: 400, width: 200, height: 20,
    top: 400, left: 700, right: 900, bottom: 420,
    toJSON() { return {}; },
  } as DOMRect;
}

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;
    return <div data-testid="mock-pdf-viewer" />;
  };
  return {
    ...original,
    PdfSpikeViewer: MockPdfSpikeViewer,
    // Always return a non-null rect so the HighlightRectBridge has
    // something to register and the Overlay can draw the second leg.
    getHighlightClientRects: vi.fn(() => fakeHighlightRect()),
  };
});

const FIXTURE = manifest.fixtures.find((f) => f.id === "fristsetzung-bezifferung")!;
const SYNTHETIC_CANONICAL = ["Pre.", FIXTURE.known_good_quote, "Post."].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 />);
}

describe("CE-WP-0003-T08 — PRD scenario steps 5-9 end-to-end", () => {
  beforeEach(() => {
    viewerSnapshot.pdfUrl = null;
    viewerSnapshot.scrollToAnnotationId = null;
    viewerSnapshot.onSelectionCaptured = null;
    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(
    "navigates to /forms/demo, links evidence, focuses field, asserts active triple + 2 SVG paths",
    { timeout: 15000 },
    async () => {
      const user = userEvent.setup();
      await loadApp();

      // Steps 1-4 (CE-WP-0002 setup): create an evidence item in Review mode.
      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 }],
        );
      });
      await user.type(
        screen.getByPlaceholderText(/Add a one-line comment/),
        "Overlay E2E evidence",
      );
      await user.click(screen.getByRole("button", { name: /Save evidence/ }));
      await screen.findByText(/Overlay E2E evidence/);

      // Step 5: navigate to /forms/demo via the top-bar.
      await user.click(screen.getByRole("button", { name: "Forms" }));
      expect(window.location.hash).toBe("#/forms/demo");

      // Step 6: stage the evidence in the strip, then click the summary
      // field to create the link.
      const stripCard = await screen.findByRole("button", {
        name: /Overlay E2E evidence/,
      });
      await user.click(stripCard);
      const summaryField = screen.getByLabelText("Summary of the matter");
      await user.click(summaryField);

      // Move focus elsewhere and back to re-fire focus on summary so that
      // ActiveStateProvider triggers focus-target (the previous click that
      // created the link consumed the staged state).
      await user.click(screen.getByLabelText("Disputed amount"));
      await user.click(summaryField);

      // Step 8: aria-current on field row, chip, and (via the active
      // state) the strip card.
      await waitFor(() => {
        const fieldRow = document.querySelector(
          '[data-field-id="summary"][aria-current="true"]',
        );
        expect(fieldRow).not.toBeNull();
      });
      const activeChip = document.querySelector('[data-evidence-id][aria-current="true"]');
      expect(activeChip).not.toBeNull();

      // Step 9: SVG overlay renders 2 paths (field→card + card→highlight).
      // HighlightRectBridge registers via the mocked getHighlightClientRects.
      await waitFor(() => {
        const svg = document.querySelector('[data-testid="visual-guide-overlay"]');
        expect(svg).not.toBeNull();
        expect(svg!.getAttribute("data-path-count")).toBe("2");
        expect(svg!.querySelectorAll("path").length).toBe(2);
      });
    },
  );
});