95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
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("Use the name your members know. You can change this later."),
|
|
).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"
|
|
locationField="communityLocation"
|
|
maxLength={200}
|
|
multiline
|
|
/>,
|
|
);
|
|
expect(
|
|
screen.getByText(
|
|
"For example, we cook and share free meals with neighbors every Sunday.",
|
|
),
|
|
).toBeInTheDocument();
|
|
const field = screen.getByRole("textbox", {
|
|
name: "Community description",
|
|
});
|
|
expect(field.tagName).toBe("TEXTAREA");
|
|
expect(field).not.toBeRequired();
|
|
const location = screen.getByRole("textbox", {
|
|
name: "Where is your community based?",
|
|
});
|
|
expect(location).toHaveAttribute("placeholder", "City or region");
|
|
expect(location).not.toBeRequired();
|
|
expect(
|
|
screen.getByText("Optional. A city or region is enough."),
|
|
).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
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();
|
|
});
|
|
});
|