test: Create unit tests for react components in packages/ui/components/TokenHandle (#10407)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Shivam Kalra <shivamkalra98@gmail.com>

packages/ui/components/TokenHandler/token-handler.test.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable playwright/missing-playwright-await */
+import { render, screen, fireEvent } from "@testing-library/react";
+import { vi } from "vitest";
+
+import TokenHandler from "./TokenHandler";
+
+describe("Tests for TokenHandler component", () => {
+  test("Should render the correct number of input elements", () => {
+    const digits = [
+      { value: 1, onChange: vi.fn() },
+      { value: 2, onChange: vi.fn() },
+      { value: 3, onChange: vi.fn() },
+    ];
+
+    render(<TokenHandler digits={digits} digitClassName="digit" />);
+    expect(screen.getAllByRole("textbox")).toHaveLength(digits.length);
+  });
+
+  test("Should handle digit input correctly", () => {
+    const onChangeMock = vi.fn();
+    const digits = [{ value: 1, onChange: onChangeMock }];
+
+    render(<TokenHandler digits={digits} digitClassName="digit" />);
+
+    const inputElement = screen.getByRole("textbox");
+    fireEvent.change(inputElement, { target: { value: "5" } });
+
+    expect(onChangeMock).toHaveBeenCalledTimes(1);
+  });
+});

packages/ui/components/test-setup.ts

@@ -1,6 +1,16 @@
 import matchers from "@testing-library/jest-dom/matchers";
 import { cleanup } from "@testing-library/react";
-import { afterEach, expect } from "vitest";
+import { afterEach, expect, vi } from "vitest";
+
+vi.mock("@calcom/lib/OgImages", async () => {
+  return {};
+});
+
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
 
 expect.extend(matchers);