diff --git a/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx b/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx index 78ab5dc178..59150f431b 100644 --- a/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx +++ b/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx @@ -104,6 +104,7 @@ export const RadioFieldInput: React.FC> = ({ > {data.options.map(({ id, data }) => ( console.log("change radio")} @@ -127,10 +128,7 @@ export const SelectFieldInput: React.FC> = ({ labelId={`select-label-${id}`} > {data.options.map((option) => ( - + {option.data.text} ))} diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx index d66800b79b..d4c1d036b4 100644 --- a/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx +++ b/editor.planx.uk/src/@planx/components/List/Public/index.test.tsx @@ -13,9 +13,79 @@ const mockProps: Props = { }; describe("Basic UI", () => { - it.todo("renders correctly"); + it("renders correctly", () => { + const { getByText } = setup(); - it.todo("parses provided schema to render expected form"); + expect(getByText(/Mock Title/)).toBeInTheDocument(); + expect(getByText(/Mock description/)).toBeInTheDocument(); + }); + + it("parses provided schema to render expected form", async () => { + const { getByLabelText, getByText, user, getByRole, queryAllByRole } = + setup(); + + // Text inputs are generated from schema... + const textInput = getByLabelText(/What's their name?/) as HTMLInputElement; + expect(textInput).toBeInTheDocument(); + expect(textInput.type).toBe("text"); + + // Props are correctly read + const emailInput = getByLabelText( + /What's their email address?/, + ) as HTMLInputElement; + expect(emailInput).toBeInTheDocument(); + expect(emailInput.type).toBe("email"); + + // Number inputs are generated from schema + const numberInput = getByLabelText(/How old are they?/) as HTMLInputElement; + expect(numberInput).toBeInTheDocument(); + expect(numberInput.type).toBe("number"); + + // Props are correctly read + const units = getByText(/years old/); + expect(units).toBeInTheDocument(); + + // Question inputs generated from schema + // Combobox displayed when number of options > 2 + const selectInput = getByRole("combobox"); + expect(selectInput).toBeInTheDocument(); + + // Open combobox + await user.click(selectInput); + + // All options display + expect(getByRole("option", { name: "Small" })).toBeInTheDocument(); + expect(getByRole("option", { name: "Medium" })).toBeInTheDocument(); + expect(getByRole("option", { name: "Large" })).toBeInTheDocument(); + + // No default option selected + expect( + queryAllByRole("option", { selected: true }) as HTMLOptionElement[], + ).toHaveLength(0); + + // Close combobox + await user.click(selectInput); + + // Radio groups displayed when number of options = 2 + const radioInput = getByLabelText(/How cute are they?/); + expect(radioInput).toBeInTheDocument(); + + // All options display + const radioButton1 = getByLabelText("Very") as HTMLInputElement; + expect(radioButton1).toBeInTheDocument(); + expect(radioButton1.type).toBe("radio"); + + const radioButton2 = getByLabelText("Super") as HTMLInputElement; + expect(radioButton2).toBeInTheDocument(); + expect(radioButton2.type).toBe("radio"); + + // No default option selected + expect(radioButton1).not.toBeChecked(); + expect(radioButton2).not.toBeChecked(); + + expect(getByText(/Save/, { selector: "button" })).toBeInTheDocument(); + expect(getByText(/Cancel/, { selector: "button" })).toBeInTheDocument(); + }); it("should not have any accessibility violations", async () => { const { container } = setup(); @@ -40,3 +110,7 @@ describe("Form validation and error handling", () => { test.todo("Question field - select"); test.todo("Question field - radio"); }); + +describe("Payload generation", () => { + it.todo("generates a valid payload on submission"); +}); diff --git a/editor.planx.uk/src/@planx/components/List/schemas/Zoo.ts b/editor.planx.uk/src/@planx/components/List/schemas/Zoo.ts index 9030655498..655512f182 100644 --- a/editor.planx.uk/src/@planx/components/List/schemas/Zoo.ts +++ b/editor.planx.uk/src/@planx/components/List/schemas/Zoo.ts @@ -13,7 +13,7 @@ export const Zoo: Schema = { { type: "text", data: { - title: "Name your animal", + title: "What's their name?", description: "Please make it cute", fn: "name", type: TextInputType.Short,