test: Create unit tests for react components in packages/ui/components/form/input (#10506)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>

packages/ui/components/form/inputs/Input.tsx

@@ -425,7 +425,7 @@ export const FilterSearchField = forwardRef<HTMLInputElement, InputFieldProps>(f
       dir="ltr"
       className="focus-within:ring-brand-default group relative mx-3 mb-1 mt-2.5 flex items-center rounded-md focus-within:outline-none focus-within:ring-2">
       <div className="addon-wrapper border-default [input:hover_+_&]:border-emphasis [input:hover_+_&]:border-l-default [&:has(+_input:hover)]:border-emphasis [&:has(+_input:hover)]:border-r-default flex h-7 items-center justify-center rounded-l-md border border-r-0">
-        <Search className="ms-3 h-4 w-4" />
+        <Search className="ms-3 h-4 w-4" data-testid="search-icon" />
       </div>
       <Input
         ref={ref}

packages/ui/components/form/inputs/input.test.tsx

@@ -0,0 +1,188 @@
+/* eslint-disable playwright/missing-playwright-await */
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { render, fireEvent } from "@testing-library/react";
+import { vi } from "vitest";
+
+import type { UnstyledSelect } from "../../../form/Select";
+import {
+  EmailField,
+  TextAreaField,
+  InputField,
+  PasswordField,
+  NumberInput,
+  FilterSearchField,
+  InputFieldWithSelect,
+} from "./Input";
+
+const onChangeMock = vi.fn();
+
+describe("Tests for InputField Component", () => {
+  test("Should render correctly with label and placeholder", () => {
+    const { getByLabelText, getByPlaceholderText } = render(
+      <InputField name="testInput" label="Test Label" placeholder="Test Placeholder" />
+    );
+
+    expect(getByLabelText("Test Label")).toBeInTheDocument();
+    expect(getByPlaceholderText("Test Placeholder")).toBeInTheDocument();
+  });
+
+  test("Should handle input correctly", () => {
+    const { getByRole } = render(<InputField name="testInput" onChange={onChangeMock} />);
+    const inputElement = getByRole("textbox") as HTMLInputElement;
+
+    fireEvent.change(inputElement, { target: { value: "Hello" } });
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+    expect(inputElement.value).toBe("Hello");
+  });
+
+  it("should render with addOnLeading prop", () => {
+    const { getByText } = render(<InputField addOnLeading={<span>Leading</span>} />);
+
+    const addOnLeadingElement = getByText("Leading");
+    expect(addOnLeadingElement).toBeInTheDocument();
+  });
+
+  it("should render with addOnSuffix prop", () => {
+    const { getByText } = render(<InputField addOnSuffix={<span>Suffix</span>} />);
+
+    const addOnSuffixElement = getByText("Suffix");
+    expect(addOnSuffixElement).toBeInTheDocument();
+  });
+
+  it("should display both addOnLeading and addOnSuffix", () => {
+    const { getByText } = render(
+      <InputField addOnLeading={<span>Leading</span>} addOnSuffix={<span>Suffix</span>} />
+    );
+
+    const addOnLeadingElement = getByText("Leading");
+    const addOnSuffixElement = getByText("Suffix");
+
+    expect(addOnLeadingElement).toBeInTheDocument();
+    expect(addOnSuffixElement).toBeInTheDocument();
+  });
+
+  it("Should display error message when error prop is provided", () => {
+    const errorMessage = "This field is required";
+    const { getByRole } = render(<InputField error={errorMessage} />);
+
+    const errorElement = getByRole("textbox");
+    expect(errorElement).toHaveAttribute("error", errorMessage);
+  });
+});
+
+describe("Tests for PasswordField Component", () => {
+  test("Should toggle password visibility correctly", () => {
+    const { getByLabelText, getByText } = render(
+      <TooltipProvider>
+        <PasswordField name="password" />
+      </TooltipProvider>
+    );
+    const passwordInput = getByLabelText("password") as HTMLInputElement;
+    const toggleButton = getByText("show_password");
+
+    expect(passwordInput.type).toBe("password");
+
+    fireEvent.click(toggleButton);
+    expect(passwordInput.type).toBe("text");
+
+    fireEvent.click(toggleButton);
+    expect(passwordInput.type).toBe("password");
+  });
+});
+
+describe("Tests for EmailField Component", () => {
+  test("Should render correctly with email-related attributes", () => {
+    const { getByRole } = render(<EmailField name="email" />);
+    const emailInput = getByRole("textbox");
+    expect(emailInput).toHaveAttribute("type", "email");
+    expect(emailInput).toHaveAttribute("autoCapitalize", "none");
+    expect(emailInput).toHaveAttribute("autoComplete", "email");
+    expect(emailInput).toHaveAttribute("autoCorrect", "off");
+    expect(emailInput).toHaveAttribute("inputMode", "email");
+  });
+});
+
+describe("Tests for TextAreaField Component", () => {
+  test("Should render correctly with label and placeholder", () => {
+    const { getByText, getByPlaceholderText, getByRole } = render(
+      <TextAreaField name="testTextArea" label="Test Label" placeholder="Test Placeholder" />
+    );
+
+    expect(getByText("Test Label")).toBeInTheDocument();
+    expect(getByPlaceholderText("Test Placeholder")).toBeInTheDocument();
+    expect(getByRole("textbox")).toBeInTheDocument();
+  });
+
+  test("Should handle input correctly", () => {
+    const { getByRole } = render(<TextAreaField name="testTextArea" onChange={onChangeMock} />);
+    const textareaElement = getByRole("textbox") as HTMLInputElement;
+
+    fireEvent.change(textareaElement, { target: { value: "Hello" } });
+    expect(onChangeMock).toHaveBeenCalled();
+    expect(textareaElement.value).toBe("Hello");
+  });
+});
+
+describe("Tests for InputFieldWithSelect Component", () => {
+  test("Should render correctly with InputField and UnstyledSelect", () => {
+    const onChangeMock = vi.fn();
+
+    const selectProps = {
+      value: null,
+      onChange: onChangeMock,
+      name: "testSelect",
+      options: [
+        { value: "Option 1", label: "Option 1" },
+        { value: "Option 2", label: "Option 2" },
+        { value: "Option 3", label: "Option 3" },
+      ],
+    } as unknown as typeof UnstyledSelect;
+
+    const { getByText } = render(<InputFieldWithSelect selectProps={selectProps} label="testSelect" />);
+
+    const inputElement = getByText("Select...");
+    fireEvent.mouseDown(inputElement);
+
+    const optionElement = getByText("Option 1");
+    expect(optionElement).toBeInTheDocument();
+  });
+});
+
+describe("Tests for NumberInput Component", () => {
+  test("Should render correctly with input type number", () => {
+    const { getByRole } = render(<NumberInput name="numberInput" />);
+    const numberInput = getByRole("spinbutton");
+
+    expect(numberInput).toBeInTheDocument();
+    expect(numberInput).toHaveAttribute("type", "number");
+  });
+
+  test("Should handle input correctly", () => {
+    const { getByRole } = render(<NumberInput name="numberInput" onChange={onChangeMock} />);
+    const numberInput = getByRole("spinbutton") as HTMLInputElement;
+
+    fireEvent.change(numberInput, { target: { value: "42" } });
+    expect(onChangeMock).toHaveBeenCalled();
+    expect(numberInput.value).toBe("42");
+  });
+});
+
+describe("Tests for FilterSearchField Component", () => {
+  test("Should render correctly with Search icon and input", () => {
+    const { getByRole, getByTestId } = render(<FilterSearchField name="searchField" />);
+    const searchInput = getByRole("textbox");
+    const searchIcon = getByTestId("search-icon");
+
+    expect(searchInput).toBeInTheDocument();
+    expect(searchIcon).toBeInTheDocument();
+  });
+
+  test("Should handle input correctly", () => {
+    const { getByRole } = render(<FilterSearchField name="searchField" onChange={onChangeMock} />);
+    const searchInput = getByRole("textbox") as HTMLInputElement;
+
+    fireEvent.change(searchInput, { target: { value: "Test search" } });
+    expect(onChangeMock).toHaveBeenCalled();
+    expect(searchInput.value).toBe("Test search");
+  });
+});