PaperClipAI/ui/src/components/task-chat/QuestionForm.test.tsx

// @vitest-environment jsdom
import { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import type { PaperclipQuestionResponse, PaperclipQuestionSet } from "@paperclipai/adapter-utils";
import { QuestionForm } from "./QuestionForm";

vi.mock("./TaskChatRichInput", () => ({
  TaskChatRichInput: ({ value, onChange, onSubmit }: { value: string; onChange(value: string): void; onSubmit(): void }) =>
    <textarea aria-label="Answer" value={value} onChange={event => onChange(event.target.value)} onKeyDown={event => { if (event.key === "Enter" && event.metaKey) onSubmit(); }} />,
}));
vi.mock("@/components/MarkdownBody", () => ({ MarkdownBody: ({ children }: { children: string }) => <div>{children}</div> }));

const questionSet: PaperclipQuestionSet = { schema: "paperclip.question_set.v1", questions: [
  { id: "draft", prompt: "Edit the draft", required: true, answerMode: "text", initialText: "  Draft\n漢字\n" },
] };

describe("QuestionForm initial text", () => {
  let container: HTMLDivElement;
  let root: Root;
  const submit = vi.fn();
  beforeEach(() => { localStorage.clear(); submit.mockReset(); container = document.createElement("div"); document.body.append(container); root = createRoot(container); });
  afterEach(async () => { await act(async () => root.unmount()); container.remove(); localStorage.clear(); });
  const input = () => container.querySelector("textarea")!;
  async function render(set = questionSet, initialResponse?: PaperclipQuestionResponse) {
    await act(async () => root.render(<QuestionForm id="edit" questionSet={set} initialResponse={initialResponse} draftKey="question-initial-text" onSubmit={submit} />));
  }
  async function edit(text: string) {
    await act(async () => {
      Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value")!.set!.call(input(), text);
      input().dispatchEvent(new Event("input", { bubbles: true }));
    });
  }
  async function remount(set = questionSet) { await act(async () => root.unmount()); root = createRoot(container); await render(set); }
  it("shows exact editable text without sending until the operator submits", async () => {
    await render();
    expect(input().value).toBe("  Draft\n漢字\n");
    expect(submit).not.toHaveBeenCalled();
    await act(async () => Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Submit answers")!.click());
    expect(submit).toHaveBeenCalledExactlyOnceWith({ schema: "paperclip.question_response.v1", answers: { draft: { text: "  Draft\n漢字\n" } } });
  });
  it("preserves edits through a refreshed request and reload instead of reapplying a default", async () => {
    await render(); await edit("Operator edit\n");
    const refreshed = { ...questionSet, questions: [{ ...questionSet.questions[0]!, initialText: "New provider default" }] };
    await render(refreshed); expect(input().value).toBe("Operator edit\n");
    await remount(refreshed); expect(input().value).toBe("Operator edit\n");
    expect(submit).not.toHaveBeenCalled();
  });
  it("shows required validation without advancing or submitting after enabled Next", async () => {
    await render({ schema: "paperclip.question_set.v1", questions: [
      { id: "audience", prompt: "Who is the audience?", required: true, answerMode: "text" },
      { id: "tone", prompt: "What tone should we use?", required: true, answerMode: "text" },
    ] });
    const next = Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Next")!;
    expect(next.disabled).toBe(false);
    await act(async () => next.click());
    expect(container.textContent).toContain("This question is required.");
    expect(container.textContent).toContain("Who is the audience?");
    expect(container.textContent).not.toContain("What tone should we use?");
    expect(submit).not.toHaveBeenCalled();
  });
  it("retains an explicitly cleared draft and required validation across reload", async () => {
    await render(); await edit(""); await remount();
    expect(input().value).toBe("");
    expect(container.querySelector('[role="alert"]')).toBeNull();
    await act(async () => Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Submit answers")!.click());
    expect(container.textContent).toContain("This question is required.");
    expect(submit).not.toHaveBeenCalled();
  });
  it("isolates pending requests with the same field ids and restores each edited draft when switching back", async () => {
    async function showRequest(id: string, initialText: string) {
      const set = { ...questionSet, questions: [{ ...questionSet.questions[0]!, initialText }] };
      await act(async () => root.render(
        <QuestionForm id={id} questionSet={set} draftKey={`question:${id}`} onSubmit={submit} />,
      ));
    }
    const storedText = (id: string) => JSON.parse(localStorage.getItem(`question:${id}`)!).answers.draft.text;

    await showRequest("request-a", "Provider draft A");
    await edit("Operator edit A");
    await showRequest("request-b", "Provider draft B");
    expect(input().value).toBe("Provider draft B");
    expect(storedText("request-a")).toBe("Operator edit A");
    expect(storedText("request-b")).toBe("Provider draft B");
    await edit("Operator edit B");

    await showRequest("request-a", "Refreshed provider draft A");
    expect(input().value).toBe("Operator edit A");
    await showRequest("request-b", "Refreshed provider draft B");
    expect(input().value).toBe("Operator edit B");
    expect(storedText("request-a")).toBe("Operator edit A");
    expect(storedText("request-b")).toBe("Operator edit B");
    expect(submit).not.toHaveBeenCalled();
    await act(async () => Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Submit answers")!.click());
    expect(submit).toHaveBeenCalledExactlyOnceWith({ schema: "paperclip.question_response.v1", answers: { draft: { text: "Operator edit B" } } });
  });

  it("prefers an existing response and keeps text constraints on defaults", async () => {
    await render(questionSet, { schema: "paperclip.question_response.v1", answers: { draft: { text: "Existing answer" } } });
    expect(input().value).toBe("Existing answer");
    await act(async () => root.unmount()); localStorage.clear(); root = createRoot(container);
    await render({ ...questionSet, questions: [{ ...questionSet.questions[0]!, initialText: "bad", textValidation: { minLength: 5 } }] });
    expect(input().value).toBe("bad");
    expect(container.textContent).not.toContain("Enter at least 5 characters.");
    await act(async () => Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Submit answers")!.click());
    expect(container.textContent).toContain("Enter at least 5 characters.");
    expect(submit).not.toHaveBeenCalled();
  });

  it("only validates a short answer after Next or keyboard submit, and clears it when corrected", async () => {
    await render({ schema: "paperclip.question_set.v1", questions: [
      { id: "audience", prompt: "Who is it for?", required: true, answerMode: "text", textValidation: { minLength: 2 } },
      { id: "outcome", prompt: "What outcome?", required: true, answerMode: "text", textValidation: { minLength: 2 } },
    ] });
    await edit("m");
    expect(container.textContent).not.toContain("Enter at least 2 characters.");
    await act(async () => Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Next")!.click());
    expect(container.textContent).toContain("Enter at least 2 characters.");
    expect(container.textContent).toContain("Who is it for?");
    await edit("millennials");
    expect(container.querySelector('[role="alert"]')).toBeNull();
    await act(async () => Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Next")!.click());
    await edit("x");
    expect(container.querySelector('[role="alert"]')).toBeNull();
    await act(async () => input().dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", metaKey: true, bubbles: true })));
    expect(container.textContent).toContain("Enter at least 2 characters.");
    expect(submit).not.toHaveBeenCalled();
    await edit("10 concepts");
    await act(async () => Array.from(container.querySelectorAll("button")).find(button => button.textContent === "Submit answers")!.click());
    expect(submit).toHaveBeenCalledExactlyOnceWith({ schema: "paperclip.question_response.v1", answers: {
      audience: { text: "millennials" }, outcome: { text: "10 concepts" },
    } });
  });
});