test: Create unit tests for react components in packages/ui/components/createButton (#10644)

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

packages/ui/components/createButton/create-button-with-teams-list.test.tsx

@@ -0,0 +1,122 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { render, screen, fireEvent } from "@testing-library/react";
+import { vi } from "vitest";
+
+import type { CreateBtnProps } from "./CreateButton";
+import { CreateButtonWithTeamsList } from "./CreateButtonWithTeamsList";
+
+const runtimeMock = async (data: Array<any>) => {
+  const updatedTrpc = {
+    viewer: {
+      teamsAndUserProfilesQuery: {
+        useQuery() {
+          return {
+            data: data,
+          };
+        },
+      },
+    },
+  };
+  const mockedLib = (await import("@calcom/trpc/react")) as any;
+  mockedLib.trpc = updatedTrpc;
+};
+const renderCreateButton = (
+  props: Omit<CreateBtnProps, "options"> & { onlyShowWithTeams?: boolean; onlyShowWithNoTeams?: boolean }
+) => {
+  return render(<CreateButtonWithTeamsList {...props} />);
+};
+
+describe("Create Button Tests", () => {
+  describe("Create Button Tests With Valid Team", () => {
+    beforeAll(async () => {
+      await runtimeMock([
+        {
+          teamId: 1,
+          name: "test",
+          slug: "create-button-test",
+          image: "image",
+        },
+      ]);
+    });
+    test("Should render the create-button-dropdown button", () => {
+      const createFunction = vi.fn();
+      renderCreateButton({ createFunction });
+
+      const createButton = screen.getByTestId("create-button-dropdown");
+      expect(createButton).toBeInTheDocument();
+    });
+  });
+
+  describe("Create Button Tests With One Null Team", () => {
+    beforeAll(async () => {
+      await runtimeMock([
+        {
+          teamId: null,
+          name: "test",
+          slug: "create-button-test",
+          image: "image",
+          readOnly: false,
+        },
+      ]);
+    });
+
+    test("Should render only the create-button button", () => {
+      const createFunction = vi.fn();
+      renderCreateButton({ createFunction });
+
+      const createButton = screen.getByTestId("create-button");
+      expect(screen.queryByTestId("create-button-dropdown")).not.toBeInTheDocument();
+      expect(createButton).toBeInTheDocument();
+
+      fireEvent.click(createButton);
+      expect(createFunction).toBeCalled();
+    });
+
+    test("Should render nothing when teamsAndUserProfiles is less than 2 and onlyShowWithTeams is true", () => {
+      renderCreateButton({ onlyShowWithTeams: true });
+
+      expect(screen.queryByTestId("create-button")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("create-button-dropdown")).not.toBeInTheDocument();
+    });
+
+    describe("Create Button Tests With Multiple Null Teams", () => {
+      beforeAll(async () => {
+        await runtimeMock([
+          {
+            teamId: null,
+            name: "test",
+            slug: "create-button-test",
+            image: "image",
+            readOnly: false,
+          },
+          {
+            teamId: null,
+            name: "test2",
+            slug: "create-button-test2",
+            image: "image2",
+            readOnly: false,
+          },
+        ]);
+      });
+
+      test("Should render only the create-button button", () => {
+        const createFunction = vi.fn();
+        renderCreateButton({ createFunction });
+
+        const createButton = screen.getByTestId("create-button");
+        expect(screen.queryByTestId("create-button-dropdown")).not.toBeInTheDocument();
+        expect(createButton).toBeInTheDocument();
+
+        fireEvent.click(createButton);
+        expect(createFunction).toBeCalled();
+      });
+
+      test("Should render nothing when teamsAndUserProfiles is greater than 1 and onlyShowWithNoTeams is true", () => {
+        renderCreateButton({ onlyShowWithNoTeams: true });
+
+        expect(screen.queryByTestId("create-button")).not.toBeInTheDocument();
+        expect(screen.queryByTestId("create-button-dropdown")).not.toBeInTheDocument();
+      });
+    });
+  });
+});

packages/ui/components/test-setup.ts

@@ -2,6 +2,44 @@ import matchers from "@testing-library/jest-dom/matchers";
 import { cleanup } from "@testing-library/react";
 import { afterEach, expect, vi } from "vitest";
 
+vi.mock("next-auth/react", () => ({
+  useSession() {
+    return {};
+  },
+}));
+
+vi.mock("@calcom/features/ee/organizations/hooks", () => ({
+  useOrgBrandingValues() {
+    return {};
+  },
+}));
+
+vi.mock("@calcom/features/ee/organizations/context/provider", () => ({
+  useOrgBranding() {
+    return {};
+  },
+}));
+
+vi.mock("@calcom/trpc/react", () => ({
+  trpc: {},
+}));
+
+vi.mock("next/navigation", async () => ({
+  ...((await vi.importActual("next/navigation")) as object),
+  useRouter() {
+    return {
+      route: "/",
+      pathname: "",
+      query: {},
+      asPath: "",
+      push: vi.fn(),
+    };
+  },
+  useSearchParams() {
+    return new URLSearchParams();
+  },
+}));
+
 vi.mock("@calcom/lib/OgImages", async () => {
   return {};
 });