From f31ba60cf40de6309ce368e77cd92d24100d7115 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Tue, 25 Jun 2024 16:43:46 +0100
Subject: [PATCH] test: Add checklist and basic test coverage to existing Zoo
 schema

---
 .../src/@planx/components/List/Public/Fields.tsx | 11 +----------
 .../@planx/components/List/Public/index.test.tsx |  8 +++++++-
 .../@planx/components/List/schemas/mocks/Zoo.ts  | 16 ++++++++++++++++
 3 files changed, 24 insertions(+), 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
index c8327772b7..6887ec84a1 100644
--- 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
index aa47784682..dfdd016093 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
@@ -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
index dcd948d5d5..669d349e70 100644
--- 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,6 +100,7 @@ export const mockZooPayload = {
         "email.address": "richard.parker@pi.com",
         name: "Richard Parker",
         size: "Medium",
+        food: ["meat", "leaves", "bamboo"],
       },
       {
         age: 10,
@@ -93,6 +108,7 @@ export const mockZooPayload = {
         "email.address": "richard.parker@pi.com",
         name: "Richard Parker",
         size: "Medium",
+        food: ["meat", "leaves", "bamboo"],
       },
     ],
     "mockFn.one.age": 10,