91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
import "@testing-library/jest-dom/vitest";
|
|
import { useLayoutEffect } from "react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { afterEach, describe, expect, it } from "vitest";
|
|
import { SetupQuestionsScreen } from "../../app/(app)/create/screens/select/SetupQuestionsScreen";
|
|
import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
|
|
import type { CreateFlowState } from "../../app/(app)/create/types";
|
|
import { TRAIT_KEYS } from "../../lib/create/deckTypes";
|
|
import messages from "../../messages/en/index";
|
|
import {
|
|
cleanup,
|
|
renderWithProviders as render,
|
|
screen,
|
|
} from "../utils/test-utils";
|
|
|
|
const copy = messages.create.community.setupQuestions;
|
|
|
|
function ScreenWithState({ initial }: { initial: CreateFlowState }) {
|
|
const { replaceState } = useCreateFlow();
|
|
useLayoutEffect(() => {
|
|
replaceState(initial);
|
|
}, [replaceState, initial]);
|
|
return <SetupQuestionsScreen />;
|
|
}
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
describe("Create flow setup-questions page", () => {
|
|
it("renders the six questions off by default with a help line under each", () => {
|
|
render(<SetupQuestionsScreen />);
|
|
|
|
expect(
|
|
screen.getByRole("heading", { name: copy.title }),
|
|
).toBeInTheDocument();
|
|
expect(screen.getByText(copy.description)).toBeInTheDocument();
|
|
|
|
for (const question of copy.questions) {
|
|
const checkbox = screen.getByRole("checkbox", { name: question.label });
|
|
expect(checkbox).toHaveAttribute("aria-checked", "false");
|
|
expect(screen.getByText(question.help)).toBeInTheDocument();
|
|
}
|
|
expect(copy.questions).toHaveLength(6);
|
|
expect(copy.questions.map((question) => question.id)).toEqual([
|
|
...TRAIT_KEYS,
|
|
]);
|
|
});
|
|
|
|
it("ticks a question from the box or the help line", async () => {
|
|
const user = userEvent.setup();
|
|
render(<SetupQuestionsScreen />);
|
|
|
|
await user.click(
|
|
screen.getByRole("checkbox", { name: copy.questions[2].label }),
|
|
);
|
|
expect(
|
|
screen.getByRole("checkbox", { name: copy.questions[2].label }),
|
|
).toHaveAttribute("aria-checked", "true");
|
|
|
|
await user.click(screen.getByText(copy.questions[0].help));
|
|
expect(
|
|
screen.getByRole("checkbox", { name: copy.questions[0].label }),
|
|
).toHaveAttribute("aria-checked", "true");
|
|
});
|
|
|
|
it("restores ticked answers from the draft", () => {
|
|
render(
|
|
<ScreenWithState
|
|
initial={{ setupTraits: { employer: true, sponsor: false } }}
|
|
/>,
|
|
);
|
|
|
|
expect(
|
|
screen.getByRole("checkbox", { name: copy.questions[2].label }),
|
|
).toHaveAttribute("aria-checked", "true");
|
|
expect(
|
|
screen.getByRole("checkbox", { name: copy.questions[3].label }),
|
|
).toHaveAttribute("aria-checked", "false");
|
|
});
|
|
|
|
it("does not ask about police, immigration enforcement, or protest", () => {
|
|
const blob = `${copy.title} ${copy.description} ${copy.questions
|
|
.map((question) => `${question.label} ${question.help}`)
|
|
.join(" ")}`.toLowerCase();
|
|
expect(blob).not.toMatch(/police/);
|
|
expect(blob).not.toMatch(/immigration/);
|
|
expect(blob).not.toMatch(/protest/);
|
|
});
|
|
});
|