From 678e06eb629624c8964b2caef89f507ebccb1697 Mon Sep 17 00:00:00 2001
From: Satish Gandham <satish.iitg@gmail.com>
Date: Mon, 9 Dec 2024 12:03:31 +0530
Subject: [PATCH] wip

---
 .../DropdownMenu/DropdownMenu.test.ts         | 10 ------
 .../DropdownMenu/DropdownMenu.test.tsx        | 36 +++++++++++++++++++
 .../components/DropdownButton.test.tsx        | 12 -------
 .../components/DropdownButton.tsx             |  2 +-
 .../components/DropdownContent.test.tsx       | 31 ++++++++++++++++
 .../components/DropdownContent.tsx            |  4 ++-
 6 files changed, 71 insertions(+), 24 deletions(-)
 delete mode 100644 packages/ui-v2/src/components/DropdownMenu/DropdownMenu.test.ts
 create mode 100644 packages/ui-v2/src/components/DropdownMenu/DropdownMenu.test.tsx
 delete mode 100644 packages/ui-v2/src/components/DropdownMenu/components/DropdownButton.test.tsx
 create mode 100644 packages/ui-v2/src/components/DropdownMenu/components/DropdownContent.test.tsx

diff --git a/packages/ui-v2/src/components/DropdownMenu/DropdownMenu.test.ts b/packages/ui-v2/src/components/DropdownMenu/DropdownMenu.test.ts
deleted file mode 100644
index 80a65b4b8e..0000000000
--- a/packages/ui-v2/src/components/DropdownMenu/DropdownMenu.test.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { it, expect, describe } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { DropdownButton } from "./components/DropdownButton";
-
-// describe("DropdownMenu", () => {
-//   it("should render the dropdown button", () => {
-//     render(<DropdownButton>Click me</DropdownButton>);
-//     expect(screen.getByText("Click me")).toBeInTheDocument();
-//   });
-// });
diff --git a/packages/ui-v2/src/components/DropdownMenu/DropdownMenu.test.tsx b/packages/ui-v2/src/components/DropdownMenu/DropdownMenu.test.tsx
new file mode 100644
index 0000000000..eff1046559
--- /dev/null
+++ b/packages/ui-v2/src/components/DropdownMenu/DropdownMenu.test.tsx
@@ -0,0 +1,36 @@
+import { it, expect, describe } from "vitest";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import React from "react";
+import { DropdownButton } from "./components/DropdownButton";
+import { DropdownMenu } from "./DropdownMenu";
+import { DropdownContent } from "./components/DropdownContent";
+
+describe("DropdownMenu", () => {
+  it("should render the dropdown menu", () => {
+    render(
+      <DropdownMenu>
+        <DropdownButton>Click me</DropdownButton>
+      </DropdownMenu>
+    );
+    expect(screen.getByText("Click me")).toHaveTextContent("Click me");
+  });
+
+  it("should render the dropdown arrow", () => {
+    render(
+      <DropdownMenu>
+        <DropdownButton showIcon>Click me</DropdownButton>
+      </DropdownMenu>
+    );
+    expect(screen.getByTestId("dropdown-arrow")).toBeInTheDocument();
+  });
+
+  it("Should not render the dropdown arrow if showIcon is false", () => {
+    render(
+      <DropdownMenu>
+        <DropdownButton>Click me</DropdownButton>
+      </DropdownMenu>
+    );
+    expect(screen.queryByTestId("dropdown-arrow")).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/ui-v2/src/components/DropdownMenu/components/DropdownButton.test.tsx b/packages/ui-v2/src/components/DropdownMenu/components/DropdownButton.test.tsx
deleted file mode 100644
index 6c3d8b79bb..0000000000
--- a/packages/ui-v2/src/components/DropdownMenu/components/DropdownButton.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { it, expect, describe } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { DropdownButton } from "./DropdownButton";
-import "@testing-library/jest-dom";
-import React from "react";
-
-describe("DropdownMenu", () => {
-  it("should render the dropdown button", () => {
-    render(<DropdownButton>Click me</DropdownButton>);
-    expect(screen.getByText("Click me")).toHaveTextContent("Click me");
-  });
-});
diff --git a/packages/ui-v2/src/components/DropdownMenu/components/DropdownButton.tsx b/packages/ui-v2/src/components/DropdownMenu/components/DropdownButton.tsx
index e77b76de98..b15fb801d9 100644
--- a/packages/ui-v2/src/components/DropdownMenu/components/DropdownButton.tsx
+++ b/packages/ui-v2/src/components/DropdownMenu/components/DropdownButton.tsx
@@ -24,7 +24,7 @@ export const DropdownButton = ({
     >
       <button>
         {children}
-        {showIcon && <ChevronDownIcon />}
+        {showIcon && <ChevronDownIcon data-testid="dropdown-arrow" />}
       </button>
     </RadixDropdownMenu.Trigger>
   );
diff --git a/packages/ui-v2/src/components/DropdownMenu/components/DropdownContent.test.tsx b/packages/ui-v2/src/components/DropdownMenu/components/DropdownContent.test.tsx
new file mode 100644
index 0000000000..2baf6e3f45
--- /dev/null
+++ b/packages/ui-v2/src/components/DropdownMenu/components/DropdownContent.test.tsx
@@ -0,0 +1,31 @@
+import { it, expect, describe } from "vitest";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import React from "react";
+import { DropdownMenu } from "../DropdownMenu";
+import { DropdownContent } from "./DropdownContent";
+import { DropdownButton } from "./DropdownButton";
+
+let portalRoot = document.getElementById("portal");
+if (!portalRoot) {
+  portalRoot = document.createElement("div");
+  portalRoot.setAttribute("id", "portal");
+  document.body.appendChild(portalRoot);
+}
+
+describe("DropdownContent", () => {
+  it("should render the dropdown content", () => {
+    render(
+      <DropdownMenu open>
+        <DropdownButton>Click me</DropdownButton>
+        <DropdownContent
+          container={document.getElementById("portal") || undefined}
+        >
+          Content.........
+        </DropdownContent>
+      </DropdownMenu>
+    );
+    console.log(screen.debug());
+    // expect(screen.getByText("Content")).toHaveTextContent("Content");
+  });
+});
diff --git a/packages/ui-v2/src/components/DropdownMenu/components/DropdownContent.tsx b/packages/ui-v2/src/components/DropdownMenu/components/DropdownContent.tsx
index 5e8d989d55..dfc1337dfa 100644
--- a/packages/ui-v2/src/components/DropdownMenu/components/DropdownContent.tsx
+++ b/packages/ui-v2/src/components/DropdownMenu/components/DropdownContent.tsx
@@ -5,8 +5,10 @@ import { DropdownItem } from "./DropdownItem";
 
 export const DropdownContent = ({
   children,
+  container,
 }: {
   children?: React.ReactNode;
+  container?: HTMLElement;
 }) => {
   const { items, renderItem, onSelect } = useContext(DropdownMenuContext);
 
@@ -26,7 +28,7 @@ export const DropdownContent = ({
   }, [open]);
 
   return (
-    <RadixDropdownMenu.Portal>
+    <RadixDropdownMenu.Portal container={container}>
       <RadixDropdownMenu.Content className="p-3 rounded-md bg-white border border-border-neutral">
         {children}
         {items &&