test: Basic test of form structure being build from test schema

editor.planx.uk/src/@planx/components/List/Public/Fields.tsx

@@ -104,6 +104,7 @@ export const RadioFieldInput: React.FC<Props<QuestionField>> = ({
     >
       {data.options.map(({ id, data }) => (
         <BasicRadio
+          key={id}
           id={id}
           title={data.text}
           onChange={() => console.log("change radio")}
@@ -127,10 +128,7 @@ export const SelectFieldInput: React.FC<Props<QuestionField>> = ({
       labelId={`select-label-${id}`}
     >
       {data.options.map((option) => (
-        <MenuItem
-          key={option.id}
-          // value={option.data.text}
-        >
+        <MenuItem key={option.id} value={option.data.text}>
           {option.data.text}
         </MenuItem>
       ))}

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(<ListComponent {...mockProps} />);
 
-  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(<ListComponent {...mockProps} />);
+
+    // 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(<ListComponent {...mockProps} />);
@@ -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");
+});

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,