fix(menu): DropdownMenu and Menu portal by default

Closes #1264 BREAKING CHANGE: The `DropdownMenu` and `Menu` components portal by default. This should really only affect snapshot tests
mlaursen · Nov 24, 2021 · 98a6a9f · 98a6a9f
1 parent 9632d82
commit 98a6a9f
Show file tree

Hide file tree

Showing 6 changed files with 161 additions and 149 deletions.
diff --git a/packages/menu/src/DropdownMenu.tsx b/packages/menu/src/DropdownMenu.tsx
@@ -99,7 +99,7 @@ export const DropdownMenu = forwardRef<HTMLButtonElement, DropdownMenuProps>(
       itemRenderer = defaultMenuItemRenderer,
       horizontal,
       onVisibilityChange,
-      portal,
+      portal = true,
       portalInto,
       portalIntoId,
       positionOptions,

diff --git a/packages/menu/src/Menu.tsx b/packages/menu/src/Menu.tsx
@@ -158,7 +158,7 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
     visible,
     onRequestClose,
     children,
-    portal,
+    portal = true,
     portalInto,
     portalIntoId,
     temporary = true,

diff --git a/packages/menu/src/__tests__/DropdownMenu.tsx b/packages/menu/src/__tests__/DropdownMenu.tsx
@@ -2,7 +2,7 @@
 import { CSSProperties } from "react";
 import { fireEvent, render } from "@testing-library/react";
 
-import { DropdownMenu } from "../DropdownMenu";
+import { DropdownMenu, DropdownMenuProps } from "../DropdownMenu";
 import { MenuItem } from "../MenuItem";
 
 const getById = (id: string) => {
@@ -14,25 +14,23 @@ const getById = (id: string) => {
   return el;
 };
 
-const PROPS = {
+const PROPS: Omit<DropdownMenuProps, "items"> = {
   id: "dropdown",
   children: "Dropdown",
 };
 
 describe("DropdownMenu", () => {
   it("should render correctly with a list of strings, numbers, ListItemProps, ReactElement, or a mixture of all", () => {
     const items1 = ["Item 1", "Item 2", "Item 3"];
-    const { container, rerender } = render(
-      <DropdownMenu {...PROPS} items={items1} />
-    );
-    expect(container).toMatchSnapshot();
+    const { rerender } = render(<DropdownMenu {...PROPS} items={items1} />);
+    expect(document.body).toMatchSnapshot();
 
     fireEvent.click(getById("dropdown"));
-    expect(container).toMatchSnapshot();
+    expect(document.body).toMatchSnapshot();
 
     const items2 = [0, 1, 2, 3, 4];
     rerender(<DropdownMenu {...PROPS} items={items2} />);
-    expect(container).toMatchSnapshot();
+    expect(document.body).toMatchSnapshot();
 
     const items3 = [
       {
@@ -42,7 +40,7 @@ describe("DropdownMenu", () => {
       { rightAddon: <i>icon</i>, children: "Item 3" },
     ];
     rerender(<DropdownMenu {...PROPS} items={items3} />);
-    expect(container).toMatchSnapshot();
+    expect(document.body).toMatchSnapshot();
 
     // Note: no key required
     const items4 = [
@@ -54,7 +52,7 @@ describe("DropdownMenu", () => {
       4,
     ];
     rerender(<DropdownMenu {...PROPS} items={items4} />);
-    expect(container).toMatchSnapshot();
+    expect(document.body).toMatchSnapshot();
   });
 
   it("should pass the menuStyle and menuClassName props to the menu correctly", () => {

diff --git a/packages/menu/src/__tests__/Menu.tsx b/packages/menu/src/__tests__/Menu.tsx
@@ -6,9 +6,9 @@ import {
 } from "@testing-library/react";
 
 import { DropdownMenuItem } from "../DropdownMenuItem";
-import { Menu } from "../Menu";
+import { Menu, MenuProps } from "../Menu";
 
-const PROPS = {
+const PROPS: MenuProps = {
   id: "menu",
   controlId: "menu-container",
   visible: false,
@@ -51,16 +51,16 @@ const render = (children: ReactElement): RenderResult =>
 
 describe("Menu", () => {
   it("should render correctly", () => {
-    const { container, rerender } = render(<Menu {...PROPS} />);
-    expect(container).toMatchSnapshot();
+    const { rerender } = render(<Menu {...PROPS} />);
+    expect(document.body).toMatchSnapshot();
 
     rerender(<Menu {...PROPS} visible />);
-    expect(container).toMatchSnapshot();
+    expect(document.body).toMatchSnapshot();
   });
 
   it("should trigger the onRequestClose when an element outside of the menu has been clicked but is not the control element", () => {
     const onRequestClose = jest.fn();
-    const props = {
+    const props: MenuProps = {
       ...PROPS,
       visible: true,
       onRequestClose,
@@ -85,7 +85,7 @@ describe("Menu", () => {
 
   it("should not trigger the onRequestClose prop when a nested dropdown menu is clicked", () => {
     const onRequestClose = jest.fn();
-    const props = {
+    const props: MenuProps = {
       ...PROPS,
       visible: true,
       onRequestClose,