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

import { describe, it, expect } from "vitest";
import { renderWithProviders as render, screen } from "../utils/test-utils";
import "@testing-library/jest-dom/vitest";
import { CreateFlowTextFieldScreen } from "../../app/(app)/create/screens/text/CreateFlowTextFieldScreen";
import { CREATE_FLOW_COMMUNITY_SAVE_FORM_ID } from "../../app/(app)/create/utils/createFlowPaths";

describe("CreateFlowTextFieldScreen (community name)", () => {
  it("renders main heading", () => {
    render(
      <CreateFlowTextFieldScreen
        messageNamespace="create.community.communityName"
        stateField="title"
        maxLength={48}
        required
      />,
    );
    expect(
      screen.getByRole("heading", {
        name: "What is your community called?",
      }),
    ).toBeInTheDocument();
  });

  it("renders description and a labelled text field", () => {
    render(
      <CreateFlowTextFieldScreen
        messageNamespace="create.community.communityName"
        stateField="title"
        maxLength={48}
        required
      />,
    );
    expect(
      screen.getByText("This will be the name of your community."),
    ).toBeInTheDocument();
    const input = screen.getByRole("textbox", { name: "Community name" });
    expect(input).toBeInTheDocument();
    expect(input).toHaveAttribute("placeholder", "Enter community name");
    expect(input).toBeRequired();
  });
});

describe("CreateFlowTextFieldScreen (community description)", () => {
  it("uses a textarea and treats the field as optional", () => {
    render(
      <CreateFlowTextFieldScreen
        messageNamespace="create.community.communityContext"
        stateField="communityContext"
        maxLength={200}
        multiline
      />,
    );
    expect(
      screen.getByText(/Optional\. Write a short paragraph/i),
    ).toBeInTheDocument();
    const field = screen.getByRole("textbox", {
      name: "Community description",
    });
    expect(field.tagName).toBe("TEXTAREA");
    expect(field).not.toBeRequired();
  });
});

describe("CreateFlowTextFieldScreen (save progress email)", () => {
  it("uses a labelled email field with native email attributes", () => {
    render(
      <CreateFlowTextFieldScreen
        messageNamespace="create.community.communitySave"
        stateField="communitySaveEmail"
        maxLength={254}
        inputType="email"
        showCharacterCount={false}
      />,
    );
    const input = screen.getByRole("textbox", { name: "Email address" });
    expect(input).toHaveAttribute("type", "email");
    expect(input).toHaveAttribute("autocomplete", "email");
    expect(input).toHaveAttribute("inputmode", "email");
    expect(input).toHaveAttribute("name", "email");
    expect(input).toHaveAttribute("form", CREATE_FLOW_COMMUNITY_SAVE_FORM_ID);
    expect(input).toBeRequired();
  });
});