feat: add multi-step download app dropdown with platform-specific options (calcom#27211)

Co-authored-by: peer@cal.com <peer@cal.com>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: pasqualevitiello <pasqualevitiello@gmail.com>

Author: 3 people

apps/web/modules/shell/user-dropdown/DownloadIcons.tsx

@@ -16,6 +16,14 @@ vi.mock("@calcom/lib/hooks/useLocale", () => ({
   }),
 }));
 
+vi.mock("@calcom/lib/hooks/useUserAgentData", () => ({
+  useUserAgentData: () => ({
+    os: "linux",
+    browser: "chrome",
+    isMobile: false,
+  }),
+}));
+
 const mockUseMeQuery = vi.fn();
 vi.mock("@calcom/trpc/react/hooks/useMeQuery", () => ({
   default: () => mockUseMeQuery(),
@@ -39,14 +47,20 @@ vi.mock("@calcom/ui/components/icon", () => ({
   Icon: ({ name }: { name: string }) => <span data-testid={`icon-${name}`}>{name}</span>,
 }));
 
-vi.mock("@calcom/ui/components/dropdown", () => ({
-  Dropdown: ({ children }: { children: React.ReactNode }) => <div data-testid="dropdown">{children}</div>,
-  DropdownItem: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  DropdownMenuItem: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  DropdownMenuPortal: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
-  DropdownMenuSeparator: () => <hr />,
-  DropdownMenuTrigger: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+vi.mock("@coss/ui/components/menu", () => ({
+  Menu: ({ children }: { children: React.ReactNode }) => <div data-testid="menu">{children}</div>,
+  MenuTrigger: ({ children, render }: { children: React.ReactNode; render?: React.ReactElement }) => {
+    if (render) {
+      return React.cloneElement(render, {}, children);
+    }
+    return <div>{children}</div>;
+  },
+  MenuPopup: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  MenuItem: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  MenuSeparator: () => <hr />,
+  MenuSub: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  MenuSubTrigger: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  MenuSubPopup: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }));
 
 vi.mock("@calcom/ui/classNames", () => ({
@@ -232,7 +246,7 @@ describe("UserDropdown", () => {
       const { UserDropdown } = await import("./UserDropdown");
       const { getByTestId } = render(<UserDropdown />);
 
-      expect(getByTestId("dropdown")).toBeInTheDocument();
+      expect(getByTestId("menu")).toBeInTheDocument();
     });
 
     it("should render dropdown when isPending is true (loading state)", async () => {
@@ -244,7 +258,7 @@ describe("UserDropdown", () => {
       const { UserDropdown } = await import("./UserDropdown");
       const { getByTestId } = render(<UserDropdown />);
 
-      expect(getByTestId("dropdown")).toBeInTheDocument();
+      expect(getByTestId("menu")).toBeInTheDocument();
     });
   });
 });