From cc5f5d73b2a56dd42ddde99cb6245f1aaaef70d4 Mon Sep 17 00:00:00 2001
From: toothlessdev <toothless042@gmail.com>
Date: Thu, 21 Nov 2024 18:40:53 +0900
Subject: [PATCH] test: add test code for <CheckBoxWithLabelForm/>

---
 .../__test__/CheckBoxWithLabelForm.test.tsx   | 52 +++++++++++++++++++
 .../forms/__test__/form-element.test.tsx      | 14 +++++
 2 files changed, 66 insertions(+)
 create mode 100644 src/components/forms/__test__/CheckBoxWithLabelForm.test.tsx

diff --git a/src/components/forms/__test__/CheckBoxWithLabelForm.test.tsx b/src/components/forms/__test__/CheckBoxWithLabelForm.test.tsx
new file mode 100644
index 0000000..d68e2b2
--- /dev/null
+++ b/src/components/forms/__test__/CheckBoxWithLabelForm.test.tsx
@@ -0,0 +1,52 @@
+import { CheckBoxWithLabelForm } from "../CheckBoxWithLabelForm";
+import { screen, render, fireEvent } from "@testing-library/react";
+
+describe("<CheckBoxWithLabelForm/>", () => {
+    const formState = {
+        "test-question-text": [],
+    };
+    const setFormState = jest.fn();
+
+    beforeEach(() => {
+        render(
+            <CheckBoxWithLabelForm
+                questionText={"test-question-text"}
+                options={["options1", "options2", "options3"]}
+                formState={formState}
+                setFormState={setFormState}
+            />,
+        );
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test("should render Container properly", () => {
+        expect(screen.getByTestId("checkbox-with-label-form")).toBeInTheDocument();
+    });
+
+    test("should render each options properly", () => {
+        expect(screen.getByText("options1")).toBeInTheDocument();
+        expect(screen.getByText("options2")).toBeInTheDocument();
+        expect(screen.getByText("options3")).toBeInTheDocument();
+    });
+
+    test("should call setFormState once when checkbox is clicked", async () => {
+        const checkbox = await screen.findByTestId("checkbox_options1");
+        expect(checkbox.getAttribute("data-state")).toBe("unchecked");
+
+        fireEvent.click(checkbox);
+        expect(setFormState).toHaveBeenCalledTimes(1);
+    });
+
+    test("should call setFormState twice when checkbox is clicked twice", async () => {
+        const checkbox = await screen.findByTestId("checkbox_options1");
+
+        fireEvent.click(checkbox);
+        expect(setFormState).toHaveBeenCalledTimes(1);
+
+        fireEvent.click(checkbox);
+        expect(setFormState).toHaveBeenCalledTimes(2);
+    });
+});
diff --git a/src/components/forms/__test__/form-element.test.tsx b/src/components/forms/__test__/form-element.test.tsx
index 3fe72cc..dd703a2 100644
--- a/src/components/forms/__test__/form-element.test.tsx
+++ b/src/components/forms/__test__/form-element.test.tsx
@@ -20,6 +20,10 @@ describe("FormElements", () => {
             );
         });
 
+        afterEach(() => {
+            jest.clearAllMocks();
+        });
+
         test("should render Container properly", () => {
             expect(screen.getByTestId("checkbox-with-label-form")).toBeInTheDocument();
         });
@@ -34,6 +38,16 @@ describe("FormElements", () => {
             const checkbox = await screen.findByTestId("checkbox_options1");
             expect(checkbox.getAttribute("data-state")).toBe("unchecked");
 
+            fireEvent.click(checkbox);
+            expect(setFormState).toHaveBeenCalledTimes(1);
+        });
+
+        test("should call setFormState twice when checkbox is clicked twice", async () => {
+            const checkbox = await screen.findByTestId("checkbox_options1");
+
+            fireEvent.click(checkbox);
+            expect(setFormState).toHaveBeenCalledTimes(1);
+
             fireEvent.click(checkbox);
             expect(setFormState).toHaveBeenCalledTimes(2);
         });