community-rule/tests/components/ModalTextAreaField.test.tsx

import React from "react";
import { describe, it, expect, vi } from "vitest";
import { screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import "@testing-library/jest-dom/vitest";
import ModalTextAreaField from "../../app/(app)/create/components/ModalTextAreaField";
import { componentTestSuite } from "../utils/componentTestSuite";
import { renderWithProviders } from "../utils/test-utils";

type ModalTextAreaFieldProps = React.ComponentProps<typeof ModalTextAreaField>;

componentTestSuite<ModalTextAreaFieldProps>({
  component: ModalTextAreaField,
  name: "ModalTextAreaField",
  props: {
    label: "Description",
    value: "",
    onChange: () => {},
  } as ModalTextAreaFieldProps,
  requiredProps: ["label"],
  optionalProps: {
    placeholder: "What does this cover?",
  },
  primaryRole: "textbox",
  testCases: {
    renders: true,
    accessibility: true,
    keyboardNavigation: false,
    disabledState: true,
    errorState: false,
  },
  states: {
    disabledProps: { disabled: true },
  },
});

describe("ModalTextAreaField behavior", () => {
  it("renders the label and a textbox wired together", () => {
    renderWithProviders(
      <ModalTextAreaField
        label="Core principle"
        value=""
        onChange={() => {}}
      />,
    );

    expect(screen.getByText("Core principle")).toBeInTheDocument();
    expect(
      screen.getByRole("textbox", { name: /Core principle/i }),
    ).toBeInTheDocument();
  });

  it("calls onChange with the new value string (not the event)", async () => {
    const user = userEvent.setup();
    const onChange = vi.fn();
    renderWithProviders(
      <ModalTextAreaField label="Notes" value="" onChange={onChange} />,
    );

    const textbox = screen.getByRole("textbox", { name: /Notes/i });
    await user.type(textbox, "A");

    expect(onChange).toHaveBeenCalledWith("A");
  });

  it("forwards placeholder and current value", () => {
    renderWithProviders(
      <ModalTextAreaField
        label="Notes"
        value="hello"
        onChange={() => {}}
        placeholder="Type here"
      />,
    );

    const textbox = screen.getByRole("textbox", { name: /Notes/i });
    expect(textbox).toHaveValue("hello");
    expect(textbox).toHaveAttribute("placeholder", "Type here");
  });

  it("disables the textarea when disabled is true", () => {
    renderWithProviders(
      <ModalTextAreaField label="Notes" value="" onChange={() => {}} disabled />,
    );

    expect(screen.getByRole("textbox", { name: /Notes/i })).toBeDisabled();
  });

  it("does not render a section help icon by default", () => {
    renderWithProviders(
      <ModalTextAreaField
        label="Core principle"
        value=""
        onChange={() => {}}
      />,
    );

    expect(screen.queryByAltText("Help")).not.toBeInTheDocument();
  });

  it("renders a section help icon when helpIcon is true", () => {
    renderWithProviders(
      <ModalTextAreaField
        label="Core principle"
        helpIcon
        value=""
        onChange={() => {}}
      />,
    );

    expect(screen.getByAltText("Help")).toBeInTheDocument();
  });

  it("starts empty and Generate draft inserts the provided catalog copy", async () => {
    const user = userEvent.setup();
    const onChange = vi.fn();
    renderWithProviders(
      <ModalTextAreaField
        label="Core principle"
        value=""
        onChange={onChange}
        generateDraftText="Catalog first draft"
        generateDraftLabel="Generate draft"
        generateDraftHint="Get a first draft for this section"
      />,
    );

    expect(screen.getByRole("textbox", { name: /Core principle/i })).toHaveValue(
      "",
    );
    expect(
      screen.getByText("Get a first draft for this section"),
    ).toBeInTheDocument();
    await user.click(screen.getByRole("button", { name: "Generate draft" }));
    expect(onChange).toHaveBeenCalledWith("Catalog first draft");
  });

  it("hides Generate draft when there is no catalog copy", () => {
    renderWithProviders(
      <ModalTextAreaField
        label="Core principle"
        value=""
        onChange={() => {}}
        generateDraftText=""
        generateDraftLabel="Generate draft"
      />,
    );

    expect(
      screen.queryByRole("button", { name: "Generate draft" }),
    ).not.toBeInTheDocument();
  });
});