citation-evidence/tests/integration/forms-field-values.dom.test.tsx

/**
 * CE-WP-0008-T01 — capture form field values persist across re-renders.
 */

// @vitest-environment happy-dom

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

import manifest from "../../fixtures/pdfs/manifest.json" with { type: "json" };

vi.mock("@citation-evidence/evidence-anchor", async (importOriginal) => {
  const original = await importOriginal<typeof import("@citation-evidence/evidence-anchor")>();
  const MockPdfSpikeViewer = () => (
    <div data-testid="mock-pdf-viewer" />
  );
  return { ...original, PdfSpikeViewer: MockPdfSpikeViewer };
});

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

import { seedSessionWithDoc } from "./helpers/seed-session";

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

describe("Capture — field value persistence (CE-WP-0008-T01)", () => {
  beforeEach(() => {
    globalThis.localStorage?.clear();
    if (typeof window !== "undefined") {
      history.replaceState(null, "", window.location.pathname);
    }
    seedSessionWithDoc({
      sessionName: "T01-field-values",
      documentTitle: FIXTURE.filename,
      canonicalText: SYNTHETIC_CANONICAL,
      mode: "forms",
    });
  });

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

  it("keeps typed text after focusing another field", { timeout: 15000 }, async () => {
    const user = userEvent.setup();
    await loadApp();

    const summary = screen.getByRole("textbox", { name: /Summary of the matter/ });
    await user.type(summary, "Tenant owes arrears");
    await user.click(screen.getByRole("textbox", { name: /Disputed amount/ }));
    await user.click(summary);

    expect((summary as HTMLTextAreaElement).value).toBe("Tenant owes arrears");
  });

  it("keeps a selected date after blur", { timeout: 15000 }, async () => {
    const user = userEvent.setup();
    await loadApp();

    const deadline = document.querySelector("#field-deadline") as HTMLInputElement;
    await user.clear(deadline);
    await user.type(deadline, "2026-12-15");
    await user.click(screen.getByRole("textbox", { name: /Disputed amount/ }));

    expect(deadline.value).toBe("2026-12-15");
  });
});