test(ui): add test for checkbox input component (#1370)

* test: add test for checlbox input component

* fix: radio input warning

* refactor: update radio input test

apps/demo/src/Views/Form/components/FormInput/FormInput.tsx

@@ -68,6 +68,7 @@ export const FormInputDemo = () => {
           valid: false,
           invalid: false,
           typeahead: "string",
+          radioInput: "value 1",
         }}
         validationTriggerKey={i18n.language}
       >

packages/ui/src/FormWidgets/CheckboxInput/__test__/CheckboxInput.test.tsx

@@ -0,0 +1,119 @@
+import { render, fireEvent, screen } from "@testing-library/react";
+import React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { CheckboxInput } from "../index";
+
+describe("CheckboxInput", () => {
+  const options = [
+    { value: "option1", label: "Option 1" },
+    { value: "option2", label: "Option 2" },
+  ];
+
+  const onChangeMock = vi.fn();
+
+  const renderCheckboxInput = (properties = {}) => {
+    return render(
+      <CheckboxInput
+        name="test-checkbox"
+        options={options}
+        onChange={onChangeMock}
+        {...properties}
+      />,
+    );
+  };
+
+  afterEach(() => {
+    onChangeMock.mockClear();
+  });
+
+  it("renders a single checkbox when no options are provided", () => {
+    renderCheckboxInput({ options: [] });
+
+    const checkbox = screen.getByRole("checkbox");
+
+    expect(checkbox).toBeInTheDocument();
+  });
+
+  it("renders multiple checkboxes when options are provided", () => {
+    renderCheckboxInput();
+
+    const checkboxes = screen.getAllByRole("checkbox");
+
+    expect(checkboxes).toHaveLength(options.length);
+  });
+
+  it("toggles the single checkbox and calls onChange with the correct value", () => {
+    renderCheckboxInput({ options: [] });
+
+    const checkbox = screen.getByRole("checkbox");
+
+    fireEvent.click(checkbox);
+
+    expect(onChangeMock).toHaveBeenCalledWith(true);
+  });
+
+  it("toggles multiple checkboxes and calls onChange with the selected values", () => {
+    renderCheckboxInput();
+
+    const [checkbox1, checkbox2] = screen.getAllByRole("checkbox");
+
+    // Select the first option
+    fireEvent.click(checkbox1);
+    expect(onChangeMock).toHaveBeenCalledWith(["option1"]);
+
+    // Select the second option
+    fireEvent.click(checkbox2);
+    expect(onChangeMock).toHaveBeenCalledWith(["option1", "option2"]);
+
+    // Deselect the first option
+    fireEvent.click(checkbox1);
+    expect(onChangeMock).toHaveBeenCalledWith(["option2"]);
+  });
+
+  it("disables checkboxes when the disabled prop is true", () => {
+    renderCheckboxInput({ disabled: true });
+
+    const checkboxes = screen.getAllByRole("checkbox");
+
+    checkboxes.forEach((checkbox) => {
+      expect(checkbox).toBeDisabled();
+    });
+  });
+
+  it("renders helper text and error message when provided", () => {
+    renderCheckboxInput({
+      helperText: "Helper text",
+      errorMessage: "Error message",
+    });
+
+    expect(screen.getByText("Helper text")).toBeInTheDocument();
+    expect(screen.getByText("Error message")).toBeInTheDocument();
+  });
+
+  it("renders custom labels for options when renderOptionsLabel is provided", () => {
+    const renderOptionsLabel = (option: { value: string; label: string }) => (
+      <span>Custom {option.label}</span>
+    );
+
+    renderCheckboxInput({ renderOptionsLabel });
+
+    expect(screen.getByText("Custom Option 1")).toBeInTheDocument();
+    expect(screen.getByText("Custom Option 2")).toBeInTheDocument();
+  });
+
+  it("initializes with default selected values", () => {
+    renderCheckboxInput({ value: ["option1"] });
+
+    const [checkbox1, checkbox2] = screen.getAllByRole("checkbox");
+    expect(checkbox1).toBeChecked();
+    expect(checkbox2).not.toBeChecked();
+  });
+
+  it("initializes with default checked state for single checkbox", () => {
+    renderCheckboxInput({ options: [], checked: true });
+
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toBeChecked();
+  });
+});

packages/ui/src/FormWidgets/RadioInput/__test__/RadioInput.snapshot.test.tsx

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { describe, expect, test } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
 
 import { RadioInput } from "..";
 
@@ -10,52 +10,54 @@ const options = [
 ];
 
 describe("RadioInput", () => {
+  const onChangeMock = vi.fn();
+
+  const renderRadioInput = (properties = {}) => {
+    return render(
+      <RadioInput options={options} onChange={onChangeMock} {...properties} />
+    );
+  };
+
+  afterEach(() => {
+    onChangeMock.mockClear();
+  });
+
   test("should match snapshot with options", () => {
-    const { container } = render(<RadioInput options={options} />);
+    const { container } = renderRadioInput();
+
     expect(container).toMatchSnapshot();
   });
 
   test("should match snapshot with disabled set to true", () => {
-    const { container } = render(
-      <RadioInput options={options} disabled={true} />,
-    );
+    const { container } = renderRadioInput({ disabled: true });
 
     expect(container).toMatchSnapshot();
   });
 
   test("should match snapshot with custom className", () => {
-    const { container } = render(
-      <RadioInput options={options} className="custom-class" />,
-    );
+    const { container } = renderRadioInput({ className: "custom-class" });
 
     expect(container).toMatchSnapshot();
   });
 
   test("should match snapshot with a custom label", () => {
-    const { container } = render(
-      <RadioInput options={options} label="Custom label" />,
-    );
+    const { container } = renderRadioInput({ label: "Custom label" });
 
     expect(container).toMatchSnapshot();
   });
 
   test("should match snapshot with a custom name", () => {
-    const { container } = render(
-      <RadioInput options={options} name="radioInput" />,
-    );
+    const { container } = renderRadioInput({ name: "radioInput" });
 
     expect(container).toMatchSnapshot();
   });
 
   test("should match snapshot with all props set", () => {
-    const { container } = render(
-      <RadioInput
-        className="radio-input"
-        name="radioInput"
-        label="Custom Label"
-        options={options}
-      />,
-    );
+    const { container } = renderRadioInput({
+      className: "radio-input",
+      name: "radioInput",
+      label: "Custom Label",
+    });
 
     expect(container).toMatchSnapshot();
   });