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

import React from "react";
import { describe, it, expect } from "vitest";
import { renderWithProviders as render } from "../utils/test-utils";
import "@testing-library/jest-dom/vitest";
import TextInput from "../../app/components/controls/TextInput";
import { componentTestSuite } from "../utils/componentTestSuite";

type TextInputProps = React.ComponentProps<typeof TextInput>;

componentTestSuite<TextInputProps>({
  component: TextInput,
  name: "TextInput",
  props: {
    label: "Test text input",
  } as TextInputProps,
  requiredProps: ["label"],
  optionalProps: {
    placeholder: "Enter value",
    inputSize: "medium",
  },
  primaryRole: "textbox",
  testCases: {
    renders: true,
    accessibility: true,
    keyboardNavigation: true,
    disabledState: true,
    errorState: true,
  },
  states: {
    disabledProps: { disabled: true },
    errorProps: { error: true },
  },
});

// Pure presentational; no provider context needed.
describe("TextInput (size tests)", () => {
  it("renders with medium size by default", () => {
    const { container } = render(<TextInput label="Test" inputSize="medium" />);
    const input = container.querySelector("input");
    expect(input).toHaveClass("h-[40px]");
  });

  it("renders with small size", () => {
    const { container } = render(<TextInput label="Test" inputSize="small" />);
    const input = container.querySelector("input");
    expect(input).toHaveClass("h-[32px]");
    expect(input?.className).toContain("text-[16px]");
    expect(input?.className).toContain("md:text-[14px]");
  });

  it("forwards maxLength to the native input", () => {
    const { container } = render(
      <TextInput label="Test" maxLength={200} />,
    );
    const input = container.querySelector("input");
    expect(input).toHaveAttribute("maxLength", "200");
  });

  it("keeps a programmatic label when the visible header is off", () => {
    const { getByRole, container } = render(
      <TextInput label="Community name" formHeader={false} />,
    );
    expect(getByRole("textbox", { name: "Community name" })).toBeInTheDocument();
    expect(container.querySelector("label")).toHaveClass("sr-only");
  });

  it("forwards autocomplete, inputMode, required, and form", () => {
    const { container } = render(
      <TextInput
        label="Email address"
        type="email"
        autoComplete="email"
        inputMode="email"
        required
        form="create-flow-community-save"
      />,
    );
    const input = container.querySelector("input");
    expect(input).toHaveAttribute("autocomplete", "email");
    expect(input).toHaveAttribute("inputmode", "email");
    expect(input).toBeRequired();
    expect(input).toHaveAttribute("form", "create-flow-community-save");
  });
});