calendar/packages/features/ee/teams/components/createButton/create-button-with-teams-list.test.tsx

/* 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 mockRouter = {
  push: vi.fn((path: string) => {
    return;
  }),
};

vi.mock("next/navigation", async (importOriginal) => {
  const actual = await importOriginal<typeof import("next/navigation")>();
  return {
    ...actual,
    useRouter: vi.fn(() => mockRouter),
  };
});

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 () => {
      // INFO: This needs to be here before the other calls to runtimeMock. For some reason,
      // when we moved this file from @calcom/ui, the imports started breaking, resulting in
      // errors of "Cannot set property 'trpc' of [object Module] which has only a getter"
      // TODO: Update this pattern to be more consistent. Using this direct mocking in the
      // functions below breaks some tests.
      vi.mock("@calcom/trpc/react", () => ({
        trpc: {
          viewer: {
            teamsAndUserProfilesQuery: {
              useQuery() {
                return {
                  data: [
                    {
                      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();
      });
    });
  });
});