From 54cf49cfd6250ec069411ce7d0fd47c074c89ba0 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Thu, 27 Jul 2023 14:46:55 +0100
Subject: [PATCH] test: Create unit tests for react components in
 packages/ui/components/form/checkbox (#10409)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
---
 .../form/checkbox/Checkbox.test.tsx           | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 packages/ui/components/form/checkbox/Checkbox.test.tsx

diff --git a/packages/ui/components/form/checkbox/Checkbox.test.tsx b/packages/ui/components/form/checkbox/Checkbox.test.tsx
new file mode 100644
index 0000000000..28bc926568
--- /dev/null
+++ b/packages/ui/components/form/checkbox/Checkbox.test.tsx
@@ -0,0 +1,61 @@
+/* eslint-disable playwright/missing-playwright-await */
+import { render, fireEvent } from "@testing-library/react";
+import React from "react";
+import { vi } from "vitest";
+
+import { CheckboxField } from "./Checkbox";
+
+const basicProps = { label: "Test Label", description: "Test Description" };
+
+describe("Tests for CheckboxField component", () => {
+  test("Should render the label and the description correctly", () => {
+    const { getByText } = render(<CheckboxField {...basicProps} />);
+
+    const labelElement = getByText("Test Label");
+    expect(labelElement).toBeInTheDocument();
+
+    const descriptionElement = getByText("Test Description");
+    expect(descriptionElement).toBeInTheDocument();
+  });
+
+  test("Should render the description correctly when the prop descriptionAsLabel is true", () => {
+    const { getByText } = render(<CheckboxField {...basicProps} descriptionAsLabel />);
+
+    const descriptionElement = getByText("Test Label");
+    expect(descriptionElement).toBeInTheDocument();
+  });
+
+  test("Should trigger onChange event correctly", () => {
+    const handleChange = vi.fn();
+    const { getByRole } = render(<CheckboxField {...basicProps} onChange={handleChange} />);
+
+    const checkboxInput = getByRole("checkbox");
+
+    fireEvent.click(checkboxInput);
+
+    expect(handleChange).toHaveBeenCalled();
+  });
+  test("Should disable the checkbox when disabled prop is true", () => {
+    const { getByRole } = render(<CheckboxField {...basicProps} disabled />);
+
+    const checkboxInput = getByRole("checkbox");
+    expect(checkboxInput).toBeDisabled();
+  });
+
+  test("Should change the checked state when clicked", () => {
+    const { getByRole } = render(<CheckboxField {...basicProps} disabled />);
+    const checkboxInput = getByRole("checkbox");
+
+    expect(checkboxInput).not.toBeChecked();
+    expect(checkboxInput).toBeTruthy();
+
+    fireEvent.click(checkboxInput);
+
+    expect(checkboxInput).toBeChecked();
+    expect(checkboxInput).toBeTruthy();
+
+    fireEvent.click(checkboxInput);
+
+    expect(checkboxInput).not.toBeChecked();
+  });
+});