Files
community-rule/tests/components/SelectPage.test.tsx
T

66 lines
2.0 KiB
TypeScript

import { describe, it, expect } from "vitest";
import userEvent from "@testing-library/user-event";
import { renderWithProviders as render, screen } from "../utils/test-utils";
import "@testing-library/jest-dom/vitest";
import { CommunitySizeSelectScreen } from "../../app/(app)/create/screens/select/CommunitySizeSelectScreen";
const BANDS = [
"One member",
"2 to 5",
"6 to 12",
"13 to 100",
"More than 100",
] as const;
describe("CommunitySizeSelectScreen", () => {
it("renders HeaderLockup title", () => {
render(<CommunitySizeSelectScreen />);
expect(
screen.getByRole("heading", {
name: "How many people will be in your community in the near term?",
}),
).toBeInTheDocument();
});
it("asks groups to count people who have a say", () => {
render(<CommunitySizeSelectScreen />);
expect(
screen.getByText(
"Count the people who have a say in your big decisions. If others take part without a vote, you can say so later in setup.",
),
).toBeInTheDocument();
});
it("renders the five size bands", () => {
render(<CommunitySizeSelectScreen />);
for (const label of BANDS) {
expect(
screen.getByRole("button", { name: `Select ${label}` }),
).toBeInTheDocument();
}
});
it("keeps a single band selected", async () => {
const user = userEvent.setup();
render(<CommunitySizeSelectScreen />);
await user.click(screen.getByRole("button", { name: "Select 13 to 100" }));
expect(
screen.getByRole("button", { name: "Deselect 13 to 100" }),
).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "Select More than 100" }),
).toBeInTheDocument();
await user.click(
screen.getByRole("button", { name: "Select More than 100" }),
);
expect(
screen.getByRole("button", { name: "Deselect More than 100" }),
).toBeInTheDocument();
expect(
screen.getByRole("button", { name: "Select 13 to 100" }),
).toBeInTheDocument();
});
});