From 6cff76cc3b90280deddfc867b83095db0955f188 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Fri, 28 Jul 2023 09:44:52 +0100
Subject: [PATCH] test: Create unit tests for react components in
 packages/ui/components/form/colorpicker (#10426)

## DEMO

Run
```
yarn test colorpicker
```
![image](https://github.com/calcom/cal.com/assets/121884634/31f52d82-615d-4926-bf44-0c1742a66526)
---
 .../form/color-picker/colorpicker.test.tsx    | 116 ++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 packages/ui/components/form/color-picker/colorpicker.test.tsx

diff --git a/packages/ui/components/form/color-picker/colorpicker.test.tsx b/packages/ui/components/form/color-picker/colorpicker.test.tsx
new file mode 100644
index 0000000000..9ea9bef86e
--- /dev/null
+++ b/packages/ui/components/form/color-picker/colorpicker.test.tsx
@@ -0,0 +1,116 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { act } from "react-dom/test-utils";
+import { vi } from "vitest";
+
+import type { ButtonProps } from "../../button";
+import { Button } from "../../button";
+import ColorPicker from "./colorpicker";
+
+vi.mock("@calcom/ui", async () => {
+  return { Button: ({ tooltip, ...rest }: ButtonProps) => <Button {...rest}>{tooltip}</Button> };
+});
+
+describe("Tests for ColorPicker component", () => {
+  test("Should render the color picker with a given default value", () => {
+    const defaultValue = "#FF0000";
+    const onChange = vi.fn();
+    render(<ColorPicker defaultValue={defaultValue} onChange={onChange} />);
+
+    const colorPickerButton = screen.getByRole("button", { name: "pick colors" });
+    expect(colorPickerButton).toHaveStyle(`background-color: ${defaultValue}`);
+  });
+
+  test("Should select a new color using the color picker", async () => {
+    const defaultValue = "#FF0000";
+    const onChange = vi.fn();
+    render(<ColorPicker defaultValue={defaultValue} onChange={onChange} />);
+
+    const colorPickerButton = screen.getByRole("button", { name: "pick colors" });
+    await act(async () => {
+      fireEvent.click(colorPickerButton);
+    });
+    const colorPickerInput = screen.getByRole("textbox");
+    await act(async () => {
+      fireEvent.change(colorPickerInput, { target: { value: "#000000" } });
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(colorPickerButton).toHaveStyle("background-color: #000000");
+  });
+
+  test("Should change the color value using the input field", async () => {
+    const onChange = vi.fn();
+    const defaultValue = "#FF0000";
+    render(<ColorPicker defaultValue={defaultValue} onChange={onChange} />);
+
+    const colorInput = screen.getByRole("textbox");
+    await act(async () => {
+      userEvent.clear(colorInput);
+    });
+    const newColorValue = "#00FF00";
+    await act(async () => {
+      userEvent.type(colorInput, newColorValue);
+    });
+
+    expect(screen.getByRole("button", { name: "pick colors" })).toHaveStyle(
+      `background-color: ${newColorValue}`
+    );
+  });
+
+  test("Should not change the color value when an invalid HEX value is entered", async () => {
+    const defaultValue = "#FF0000";
+    const onChange = vi.fn();
+
+    render(<ColorPicker defaultValue={defaultValue} onChange={onChange} />);
+
+    const colorPickerButton = screen.getByRole("button", { name: "pick colors" });
+    await act(async () => {
+      fireEvent.click(colorPickerButton);
+    });
+    const colorPickerInput = screen.getByRole("textbox");
+    await act(async () => {
+      fireEvent.change(colorPickerInput, { target: { value: "#FF0000240" } });
+    });
+    expect(colorPickerButton).toHaveStyle(`background-color: ${defaultValue}`);
+  });
+
+  test("Should reset the color to default when clicking on the reset button", async () => {
+    const defaultValue = "#FF0000";
+    const resetDefaultValue = "#00FF00";
+    const onChange = vi.fn();
+
+    render(
+      <ColorPicker defaultValue={defaultValue} resetDefaultValue={resetDefaultValue} onChange={onChange} />
+    );
+
+    const colorPickerButton = screen.getByRole("button", { name: "pick colors" });
+    await act(async () => {
+      fireEvent.click(colorPickerButton);
+    });
+    const colorPickerInput = screen.getByRole("textbox");
+    await act(async () => {
+      fireEvent.change(colorPickerInput, { target: { value: "#000000" } });
+    });
+
+    const resetButton = screen.getByRole("button", { name: "Reset to default" });
+    await act(async () => {
+      fireEvent.click(resetButton);
+    });
+
+    expect(colorPickerButton).toHaveStyle(`background-color: ${resetDefaultValue}`);
+
+    expect(onChange).toHaveBeenCalledWith(resetDefaultValue);
+  });
+
+  test("Should not show the reset button when resetDefaultValue prop is not provided", async () => {
+    const defaultValue = "#FF0000";
+    const onChange = vi.fn();
+
+    render(<ColorPicker defaultValue={defaultValue} onChange={onChange} />);
+
+    const resetButton = screen.queryByRole("button", { name: "Reset to default" });
+    expect(resetButton).not.toBeInTheDocument();
+  });
+});