From 52c38e04bf9f5bc857775076bc57c0dafa18e9c4 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Wed, 25 Jan 2023 15:38:42 -0800
Subject: [PATCH] chore: add test to ensure portal

---
 .../dropdown-menu/dropdown-menu.spec.tsx      | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.spec.tsx

diff --git a/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.spec.tsx b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.spec.tsx
new file mode 100644
index 000000000..e636bc798
--- /dev/null
+++ b/libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.spec.tsx
@@ -0,0 +1,34 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from './dropdown-menu';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('DropdownMenu', () => {
+  const text = 'Dropdown menu content';
+
+  // Upgrade from @radix-ui/react-dropdown-menu 0.1.6 to 2.0.2 renders
+  // dropdowns inline (rather than portals). Currently not using a portal
+  // will break the UI due to z-index issues
+  it('renders using a portal', async () => {
+    render(
+      <div className="test-wrapper">
+        <DropdownMenu
+          trigger={<DropdownMenuTrigger>Trigger</DropdownMenuTrigger>}
+        >
+          <DropdownMenuContent>
+            <p>{text}</p>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    );
+
+    userEvent.click(screen.getByText(/trigger/i));
+    const contentElement = await screen.findByText(text);
+    expect(contentElement).toBeInTheDocument();
+    // if content is within .test-wrapper then its not been rendered in a portal
+    expect(contentElement.closest('.test-wrapper')).toBe(null);
+  });
+});