test: Add checklist and basic test coverage to existing Zoo schema

theopensystemslab · Jun 25, 2024 · f31ba60 · f31ba60
1 parent cb4de6f
commit f31ba60
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 11 deletions.
diff --git a/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx b/editor.planx.uk/src/@planx/components/List/Public/Fields.tsx
@@ -217,31 +217,22 @@ export const ChecklistFieldInput: React.FC<Props<ChecklistField>> = (props) => {
   const changeCheckbox =
     (id: string) =>
     async (
-      event: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined,
+      _checked: React.MouseEvent<HTMLButtonElement, MouseEvent> | undefined,
     ) => {
-      // console.log("Clicked id: ", id)
-
-      // console.log("Before: ", formik.values.userData[activeIndex][fn])
       let newCheckedIds;
 
       if (formik.values.userData[activeIndex][fn].includes(id)) {
-        // console.log("Already in list")
         newCheckedIds = (
           formik.values.userData[activeIndex][fn] as string[]
         ).filter((x) => x !== id);
-        // console.log("After: ", newCheckedIds)
       } else {
-        // console.log("New")
         newCheckedIds = [...formik.values.userData[activeIndex][fn], id];
-        // console.log("After: ", newCheckedIds)
       }
 
       await formik.setFieldValue(
         `userData[${activeIndex}]['${fn}']`,
         newCheckedIds,
       );
-
-      // console.log(formik.values.userData[activeIndex][fn])
     };
 
   return (

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
@@ -381,7 +381,8 @@ describe("Form validation and error handling", () => {
   test.todo("form validation is triggered when saving an item");
   test.todo("text fields use existing validation schemas");
   test.todo("number fields use existing validation schemas");
-  test.todo("question fields use validation schema");
+  test.todo("question fields use a validation schema");
+  test.todo("checklist fields use a validation schema");
   test.todo("unique constraints are enforced on question where this is set");
   test.todo("optional fields can be empty when saving an item");
   test.todo("an error displays if the minimum number of items is not met");
@@ -501,6 +502,11 @@ const fillInResponse = async (user: UserEvent) => {
   const cuteRadio = screen.getAllByRole("radio")[0];
   await user.click(cuteRadio);
 
+  const eatCheckboxes = screen.getAllByRole("checkbox");
+  await user.click(eatCheckboxes[0]);
+  await user.click(eatCheckboxes[1]);
+  await user.click(eatCheckboxes[2]);
+
   const saveButton = screen.getByRole("button", {
     name: /Save/,
   });

diff --git a/editor.planx.uk/src/@planx/components/List/schemas/mocks/Zoo.ts b/editor.planx.uk/src/@planx/components/List/schemas/mocks/Zoo.ts
@@ -64,6 +64,20 @@ export const Zoo: Schema = {
         ],
       },
     },
+    // Checklist
+    {
+      type: "checklist",
+      data: {
+        title: "What do they eat?",
+        fn: "food",
+        options: [
+          { id: "meat", data: { text: "Meat" } },
+          { id: "leaves", data: { text: "Leaves" } },
+          { id: "bamboo", data: { text: "Bamboo" } },
+          { id: "fruit", data: { text: "fruit" } },
+        ],
+      },
+    },
   ],
   min: 1,
   max: 10,
@@ -86,13 +100,15 @@ export const mockZooPayload = {
         "email.address": "[email protected]",
         name: "Richard Parker",
         size: "Medium",
+        food: ["meat", "leaves", "bamboo"],
       },
       {
         age: 10,
         "cuteness.amount": "Very",
         "email.address": "[email protected]",
         name: "Richard Parker",
         size: "Medium",
+        food: ["meat", "leaves", "bamboo"],
       },
     ],
     "mockFn.one.age": 10,