@instructure/ui-menu 8.53.3-snapshot-10 → 8.53.3-snapshot-13

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.53.3-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-10) (2024-02-28)
+## [8.53.3-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-13) (2024-02-29)
 
 **Note:** Version bump only for package @instructure/ui-menu
 

package/es/Menu/MenuItem/__new-tests__/MenuItem.test.js

@@ -0,0 +1,134 @@
+var _MenuItem, _MenuItem2, _ExtendedMenuItem, _MenuItem3, _MenuItem4, _MenuItem5, _MenuItem6, _MenuItem7, _MenuItem8, _MenuItem9;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MenuItem } from '../index';
+const ExtendedMenuItem = ({
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(MenuItem, props);
+};
+describe('<MenuItem />', () => {
+  it('should render', () => {
+    render(_MenuItem || (_MenuItem = /*#__PURE__*/React.createElement(MenuItem, null, "Menu Item Text")));
+    const menuItem = screen.getByText('Menu Item Text');
+    expect(menuItem).toBeInTheDocument();
+  });
+  it('should render as a link when an href is provided', () => {
+    render(_MenuItem2 || (_MenuItem2 = /*#__PURE__*/React.createElement(MenuItem, {
+      href: "example.html"
+    }, "Menu Item Text")));
+    const menuItem = screen.getByRole('menuitem');
+    expect(menuItem).toBeInTheDocument();
+    expect(menuItem).toHaveAttribute('href', 'example.html');
+  });
+  it('should render as a link when a to is provided', () => {
+    render(_ExtendedMenuItem || (_ExtendedMenuItem = /*#__PURE__*/React.createElement(ExtendedMenuItem, {
+      to: "/example"
+    }, "Hello")));
+    const menuItem = screen.getByRole('menuitem');
+    expect(menuItem).toHaveAttribute('to', '/example');
+  });
+  it('should call onSelect after click', () => {
+    const onSelect = jest.fn();
+    render( /*#__PURE__*/React.createElement(MenuItem, {
+      onSelect: onSelect,
+      value: "foo"
+    }, "Hello"));
+    const menuItem = screen.getByRole('menuitem');
+    fireEvent.click(menuItem);
+    expect(onSelect).toHaveBeenCalledWith(expect.any(Object), 'foo', true, expect.any(Object));
+  });
+  it('should call onClick after click', () => {
+    const onClick = jest.fn();
+    render( /*#__PURE__*/React.createElement(MenuItem, {
+      onClick: onClick,
+      value: "foo"
+    }, "Hello"));
+    const menuItem = screen.getByRole('menuitem');
+    fireEvent.click(menuItem);
+    expect(onClick).toHaveBeenCalled();
+  });
+  it('should set the tabIndex attribute', () => {
+    render(_MenuItem3 || (_MenuItem3 = /*#__PURE__*/React.createElement(MenuItem, null, "Hello")));
+    const menuItem = screen.getByRole('menuitem');
+    expect(menuItem).toHaveAttribute('tabIndex', '-1');
+  });
+  it('should set the aria-controls attribute', () => {
+    render(_MenuItem4 || (_MenuItem4 = /*#__PURE__*/React.createElement(MenuItem, {
+      controls: "testId"
+    }, "Hello")));
+    const menuItem = screen.getByRole('menuitem');
+    expect(menuItem).toHaveAttribute('aria-controls', 'testId');
+  });
+  it('should set the aria-disabled attribute', () => {
+    render(_MenuItem5 || (_MenuItem5 = /*#__PURE__*/React.createElement(MenuItem, {
+      disabled: true
+    }, "Hello")));
+    const menuItem = screen.getByRole('menuitem');
+    expect(menuItem).toHaveAttribute('aria-disabled', 'true');
+  });
+  it('should set the aria-checked attribute when defaultSelected prop is true', () => {
+    render(_MenuItem6 || (_MenuItem6 = /*#__PURE__*/React.createElement(MenuItem, {
+      type: "checkbox",
+      defaultSelected: true
+    }, "Hello")));
+    const menuItem = screen.getByRole('menuitemcheckbox');
+    expect(menuItem).toHaveAttribute('aria-checked', 'true');
+  });
+  it('should set the aria-checked attribute when selected prop is true', () => {
+    render( /*#__PURE__*/React.createElement(MenuItem, {
+      type: "checkbox",
+      selected: true,
+      onSelect: jest.fn()
+    }, "Hello"));
+    const menuItem = screen.getByRole('menuitemcheckbox');
+    expect(menuItem).toHaveAttribute('aria-checked', 'true');
+  });
+  it('should default to the "menuitem" role', () => {
+    const _render = render(_MenuItem7 || (_MenuItem7 = /*#__PURE__*/React.createElement(MenuItem, null, "Menu Item Text"))),
+      container = _render.container;
+    const menuItem = container.querySelector("span[class$='-menuItem']");
+    expect(menuItem).toHaveAttribute('role', 'menuitem');
+  });
+  it('should set the role to "menuitemcheckbox" when the type is "checkbox"', () => {
+    const _render2 = render(_MenuItem8 || (_MenuItem8 = /*#__PURE__*/React.createElement(MenuItem, {
+        type: "checkbox"
+      }, "Hello"))),
+      container = _render2.container;
+    const menuItem = container.querySelector("span[class$='-menuItem']");
+    expect(menuItem).toHaveAttribute('role', 'menuitemcheckbox');
+  });
+  it('should set the role to "menuitemradio" when the type is "radio"', () => {
+    const _render3 = render(_MenuItem9 || (_MenuItem9 = /*#__PURE__*/React.createElement(MenuItem, {
+        type: "radio"
+      }, "Hello"))),
+      container = _render3.container;
+    const menuItem = container.querySelector("span[class$='-menuItem']");
+    expect(menuItem).toHaveAttribute('role', 'menuitemradio');
+  });
+});

package/es/Menu/MenuItemGroup/__new-tests__/MenuItemGroup.test.js

@@ -0,0 +1,166 @@
+var _MenuItemGroup, _MenuItemGroup2, _MenuItemGroup3, _MenuItemGroup4, _MenuItemGroup5, _MenuItemGroup6, _MenuItem, _MenuItem2, _MenuItemSeparator, _MenuItem3, _MenuItem4, _MenuItemSeparator2, _MenuItem5, _MenuItem6, _MenuItem7, _MenuItem8, _MenuItemSeparator3, _MenuItem9, _MenuItem10, _MenuItemSeparator4;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MenuItem } from '../../MenuItem';
+import { MenuItemSeparator } from '../../MenuItemSeparator';
+import { MenuItemGroup } from '../index';
+describe('<MenuItemGroup />', () => {
+  it('should render', () => {
+    const _render = render(_MenuItemGroup || (_MenuItemGroup = /*#__PURE__*/React.createElement(MenuItemGroup, {
+        label: "Menu Label"
+      }, /*#__PURE__*/React.createElement(MenuItem, null, "Item Text 1"), /*#__PURE__*/React.createElement(MenuItem, null, "Item Text 2"), /*#__PURE__*/React.createElement(MenuItemSeparator, null)))),
+      container = _render.container;
+    const group = container.querySelector("[id*='MenuItemGroup_']");
+    const groupMenu = screen.getByRole('menu');
+    expect(group).toBeInTheDocument();
+    expect(group).toHaveTextContent('Menu Label');
+    expect(groupMenu).toBeInTheDocument();
+    expect(groupMenu).toHaveTextContent('Item Text 1');
+    expect(groupMenu).toHaveTextContent('Item Text 2');
+  });
+  it('should set the role to "menu"', () => {
+    const _render2 = render(_MenuItemGroup2 || (_MenuItemGroup2 = /*#__PURE__*/React.createElement(MenuItemGroup, {
+        label: "Select one"
+      }, /*#__PURE__*/React.createElement(MenuItem, null, "Foo"), /*#__PURE__*/React.createElement(MenuItem, null, "Bar"), /*#__PURE__*/React.createElement(MenuItemSeparator, null)))),
+      container = _render2.container;
+    const menuItemGroup = container.querySelector("[class*='menuItemGroup__items']");
+    expect(menuItemGroup).toHaveAttribute('role', 'menu');
+  });
+  it('should set the list item role to "none"', () => {
+    render(_MenuItemGroup3 || (_MenuItemGroup3 = /*#__PURE__*/React.createElement(MenuItemGroup, {
+      label: "Select one"
+    }, /*#__PURE__*/React.createElement(MenuItem, null, "Food"), /*#__PURE__*/React.createElement(MenuItem, null, "Bar"))));
+    const menu = screen.getByRole('menu');
+    const menuListItem = menu.firstChild;
+    expect(menuListItem.tagName).toBe('LI');
+    expect(menuListItem).toHaveAttribute('role', 'none');
+  });
+  it('should default to children with type "radio"', () => {
+    render(_MenuItemGroup4 || (_MenuItemGroup4 = /*#__PURE__*/React.createElement(MenuItemGroup, {
+      label: "Select one"
+    }, /*#__PURE__*/React.createElement(MenuItem, null, "Foo"), /*#__PURE__*/React.createElement(MenuItem, null, "Bar"), /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
+    const menuItems = screen.getAllByRole('menuitemradio');
+    expect(menuItems).toHaveLength(2);
+  });
+  it('should render children with type "checkbox" if allowMultiple is true', () => {
+    render(_MenuItemGroup5 || (_MenuItemGroup5 = /*#__PURE__*/React.createElement(MenuItemGroup, {
+      label: "Select a few",
+      allowMultiple: true
+    }, /*#__PURE__*/React.createElement(MenuItem, null, "Foo"), /*#__PURE__*/React.createElement(MenuItem, null, "Bar"), /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
+    const menuItems = screen.getAllByRole('menuitemcheckbox');
+    expect(menuItems).toHaveLength(2);
+  });
+  it('should set aria-disabled', () => {
+    render(_MenuItemGroup6 || (_MenuItemGroup6 = /*#__PURE__*/React.createElement(MenuItemGroup, {
+      label: "Select one",
+      disabled: true
+    }, /*#__PURE__*/React.createElement(MenuItem, null, "Foo"), /*#__PURE__*/React.createElement(MenuItem, null, "Bar"), /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
+    const menu = screen.getByRole('menu');
+    const menuItems = screen.getAllByRole('menuitemradio');
+    expect(menu).toHaveAttribute('aria-disabled', 'true');
+    expect(menuItems).toHaveLength(2);
+    expect(menuItems[0]).toHaveAttribute('aria-disabled', 'true');
+    expect(menuItems[1]).toHaveAttribute('aria-disabled', 'true');
+  });
+  it('should set selected from defaultSelected prop', () => {
+    render( /*#__PURE__*/React.createElement(MenuItemGroup, {
+      label: "Select one",
+      defaultSelected: [1]
+    }, _MenuItem || (_MenuItem = /*#__PURE__*/React.createElement(MenuItem, null, "Foo")), _MenuItem2 || (_MenuItem2 = /*#__PURE__*/React.createElement(MenuItem, null, "Bar")), _MenuItemSeparator || (_MenuItemSeparator = /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
+    const menuItems = screen.getAllByRole('menuitemradio');
+    expect(menuItems).toHaveLength(2);
+    expect(menuItems[0]).toHaveAttribute('aria-checked', 'false');
+    expect(menuItems[1]).toHaveAttribute('aria-checked', 'true');
+  });
+  it('should set selected from selected prop', () => {
+    render( /*#__PURE__*/React.createElement(MenuItemGroup, {
+      label: "Select one",
+      onSelect: jest.fn(),
+      selected: [1]
+    }, _MenuItem3 || (_MenuItem3 = /*#__PURE__*/React.createElement(MenuItem, null, "Foo")), _MenuItem4 || (_MenuItem4 = /*#__PURE__*/React.createElement(MenuItem, null, "Bar")), _MenuItemSeparator2 || (_MenuItemSeparator2 = /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
+    const menuItems = screen.getAllByRole('menuitemradio');
+    expect(menuItems).toHaveLength(2);
+    expect(menuItems[0]).toHaveAttribute('aria-checked', 'false');
+    expect(menuItems[1]).toHaveAttribute('aria-checked', 'true');
+  });
+  it('should set selected from children', () => {
+    render( /*#__PURE__*/React.createElement(MenuItemGroup, {
+      label: "Select a few",
+      allowMultiple: true
+    }, _MenuItem5 || (_MenuItem5 = /*#__PURE__*/React.createElement(MenuItem, {
+      key: "foo",
+      defaultSelected: true
+    }, "Foo")), /*#__PURE__*/React.createElement(MenuItem, {
+      key: "bar",
+      selected: true,
+      onSelect: jest.fn()
+    }, "Bar")));
+    const menuItems = screen.getAllByRole('menuitemcheckbox');
+    expect(menuItems).toHaveLength(2);
+    expect(menuItems[0]).toHaveAttribute('aria-checked', 'true');
+    expect(menuItems[1]).toHaveAttribute('aria-checked', 'true');
+  });
+  it('should honor the allowMultiple prop (defaults to false)', () => {
+    render( /*#__PURE__*/React.createElement(MenuItemGroup, {
+      label: "Select one"
+    }, _MenuItem6 || (_MenuItem6 = /*#__PURE__*/React.createElement(MenuItem, {
+      defaultSelected: true
+    }, "Foo")), /*#__PURE__*/React.createElement(MenuItem, {
+      selected: true,
+      onSelect: jest.fn()
+    }, "Bar")));
+    const menuItems = screen.getAllByRole('menuitemradio');
+    expect(menuItems).toHaveLength(2);
+    expect(menuItems[0]).toHaveAttribute('aria-checked', 'true');
+    expect(menuItems[1]).toHaveAttribute('aria-checked', 'false');
+  });
+  it('calls onSelect when items are selected', () => {
+    const onSelect = jest.fn();
+    render( /*#__PURE__*/React.createElement(MenuItemGroup, {
+      label: "Select one",
+      onSelect: onSelect,
+      selected: [1]
+    }, _MenuItem7 || (_MenuItem7 = /*#__PURE__*/React.createElement(MenuItem, null, "Item 1")), _MenuItem8 || (_MenuItem8 = /*#__PURE__*/React.createElement(MenuItem, null, "Item 2")), _MenuItemSeparator3 || (_MenuItemSeparator3 = /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
+    const menuItem = screen.getByText('Item 1');
+    fireEvent.click(menuItem);
+    expect(onSelect).toHaveBeenCalled();
+    expect(onSelect.mock.calls[0][1]).toEqual([0]);
+    expect(onSelect.mock.calls[0][2]).toEqual(true);
+  });
+  it('does not call onSelect when disabled', () => {
+    const onSelect = jest.fn();
+    render( /*#__PURE__*/React.createElement(MenuItemGroup, {
+      label: "Select one",
+      onSelect: onSelect,
+      disabled: true
+    }, _MenuItem9 || (_MenuItem9 = /*#__PURE__*/React.createElement(MenuItem, null, "Item 1")), _MenuItem10 || (_MenuItem10 = /*#__PURE__*/React.createElement(MenuItem, null, "Item 2")), _MenuItemSeparator4 || (_MenuItemSeparator4 = /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
+    const menuItem = screen.getByText('Item 1');
+    fireEvent.click(menuItem);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+});

package/es/Menu/__new-tests__/Menu.test.js

@@ -0,0 +1,288 @@
+var _Menu, _Menu2, _Menu3, _Menu4, _MenuItem, _MenuItem2, _MenuItem3, _Menu5, _button, _MenuItem4, _Menu6, _button2, _MenuItem5, _MenuItem6, _button3, _MenuItem7, _MenuItem8, _Menu7, _Menu8, _button4, _MenuItem9, _MenuItem10, _button5, _MenuItem11, _MenuItem12, _button6, _MenuItem13, _MenuItem14, _Menu9, _button7, _MenuItem15, _MenuItem16;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { Menu, MenuItem, MenuItemSeparator } from '../index';
+describe('<Menu />', () => {
+  describe('without a trigger', () => {
+    it('should render', () => {
+      render(_Menu || (_Menu = /*#__PURE__*/React.createElement(Menu, {
+        label: "Menu-label-text"
+      }, /*#__PURE__*/React.createElement(MenuItem, null, "Menu Item Text"))));
+      const menu = screen.getByRole('menu');
+      expect(menu).toBeInTheDocument();
+      expect(menu).toHaveTextContent('Menu Item Text');
+      expect(menu).toHaveAttribute('aria-label', 'Menu-label-text');
+    });
+    it('should meet a11y standards', async () => {
+      const _render = render(_Menu2 || (_Menu2 = /*#__PURE__*/React.createElement(Menu, {
+          label: "Menu-label-text"
+        }, /*#__PURE__*/React.createElement(MenuItem, null, "Menu Item Text")))),
+        container = _render.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('should meet standards when menu is closed', async () => {
+      const _render2 = render(_Menu3 || (_Menu3 = /*#__PURE__*/React.createElement(Menu, {
+          trigger: /*#__PURE__*/React.createElement("button", null, "More")
+        }, /*#__PURE__*/React.createElement(MenuItem, null, "Learning Mastery"), /*#__PURE__*/React.createElement(MenuItem, {
+          disabled: true
+        }, "Gradebook")))),
+        container = _render2.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('should meet standards when menu is open', async () => {
+      const _render3 = render(_Menu4 || (_Menu4 = /*#__PURE__*/React.createElement(Menu, {
+          trigger: /*#__PURE__*/React.createElement("button", null, "More"),
+          defaultShow: true
+        }, /*#__PURE__*/React.createElement(MenuItem, null, "Learning Mastery"), /*#__PURE__*/React.createElement(MenuItem, {
+          disabled: true
+        }, "Gradebook")))),
+        container = _render3.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('should call onSelect when menu item is selected', async () => {
+      const onSelect = jest.fn();
+      const _render4 = render( /*#__PURE__*/React.createElement(Menu, {
+          label: "Settings",
+          onSelect: onSelect
+        }, _MenuItem || (_MenuItem = /*#__PURE__*/React.createElement(MenuItem, {
+          value: "Test"
+        }, "Test Item")))),
+        getByText = _render4.getByText;
+      const item = getByText('Test Item');
+      await userEvent.click(item);
+      expect(onSelect).toHaveBeenCalled();
+      expect(onSelect.mock.calls[0][1]).toEqual('Test');
+    });
+    it('should not call onSelect when disabled', () => {
+      const onSelect = jest.fn();
+      const _render5 = render( /*#__PURE__*/React.createElement(Menu, {
+          label: "Settings",
+          onSelect: onSelect,
+          disabled: true
+        }, _MenuItem2 || (_MenuItem2 = /*#__PURE__*/React.createElement(MenuItem, {
+          value: "Account"
+        }, "Account")))),
+        getByText = _render5.getByText;
+      const item = getByText('Account');
+      userEvent.click(item);
+      expect(onSelect).not.toHaveBeenCalled();
+    });
+    it('should provide a menu ref', () => {
+      const menuRef = jest.fn();
+      render( /*#__PURE__*/React.createElement(Menu, {
+        label: "Settings",
+        menuRef: menuRef
+      }, _MenuItem3 || (_MenuItem3 = /*#__PURE__*/React.createElement(MenuItem, {
+        value: "Account"
+      }, "Account"))));
+      const menu = screen.getByRole('menu');
+      expect(menuRef).toHaveBeenLastCalledWith(menu);
+    });
+    it('should set aria attributes properly', () => {
+      render(_Menu5 || (_Menu5 = /*#__PURE__*/React.createElement(Menu, {
+        disabled: true,
+        label: "Settings"
+      }, /*#__PURE__*/React.createElement(MenuItem, {
+        value: "Account"
+      }, "Account"))));
+      const menu = screen.getByRole('menu');
+      expect(menu).toHaveAttribute('aria-disabled', 'true');
+      expect(menu).toHaveAttribute('aria-label', 'Settings');
+    });
+  });
+  describe('with a trigger', () => {
+    it('should render into a mountNode', () => {
+      const mountNode = document.createElement('div');
+      document.body.appendChild(mountNode);
+      render( /*#__PURE__*/React.createElement(Menu, {
+        defaultShow: true,
+        mountNode: mountNode,
+        label: "Settings",
+        trigger: _button || (_button = /*#__PURE__*/React.createElement("button", null, "Settings"))
+      }, _MenuItem4 || (_MenuItem4 = /*#__PURE__*/React.createElement(MenuItem, null, "Account"))));
+      expect(mountNode).toHaveTextContent('Account');
+      document.body.removeChild(mountNode);
+    });
+    it('should set aria attributes properly', () => {
+      render(_Menu6 || (_Menu6 = /*#__PURE__*/React.createElement(Menu, {
+        trigger: /*#__PURE__*/React.createElement("button", null, "Settings"),
+        defaultShow: true
+      }, /*#__PURE__*/React.createElement(MenuItem, null, "Learning Mastery"), /*#__PURE__*/React.createElement(MenuItem, {
+        disabled: true
+      }, "Gradebook"), /*#__PURE__*/React.createElement(MenuItem, {
+        type: "radio",
+        defaultChecked: true
+      }, "Default (Grid view)"), /*#__PURE__*/React.createElement(MenuItem, {
+        type: "radio"
+      }, "Individual (List view)"), /*#__PURE__*/React.createElement(MenuItem, {
+        type: "checkbox",
+        defaultChecked: true
+      }, "Include Anchor Standards"), /*#__PURE__*/React.createElement(MenuItemSeparator, null), /*#__PURE__*/React.createElement(MenuItem, null, "Open grading history..."))));
+      const menu = screen.getByRole('menu');
+      const trigger = screen.getByRole('button', {
+        name: 'Settings'
+      });
+      expect(menu).toBeInTheDocument();
+      expect(menu).toHaveAttribute('aria-labelledby', trigger.getAttribute('id'));
+    });
+    it('should call onFocus on focus', () => {
+      const onFocus = jest.fn();
+      const _render6 = render( /*#__PURE__*/React.createElement(Menu, {
+          trigger: _button2 || (_button2 = /*#__PURE__*/React.createElement("button", null, "More")),
+          onFocus: onFocus
+        }, _MenuItem5 || (_MenuItem5 = /*#__PURE__*/React.createElement(MenuItem, null, "Learning Mastery")), _MenuItem6 || (_MenuItem6 = /*#__PURE__*/React.createElement(MenuItem, {
+          disabled: true
+        }, "Gradebook")))),
+        getByRole = _render6.getByRole;
+      const triggerButton = getByRole('button', {
+        name: 'More'
+      });
+      fireEvent.focus(triggerButton);
+      expect(onFocus).toHaveBeenCalled();
+    });
+    it('should render when show and onToggle props are set', () => {
+      const _render7 = render( /*#__PURE__*/React.createElement(Menu, {
+          trigger: _button3 || (_button3 = /*#__PURE__*/React.createElement("button", null, "More")),
+          show: true,
+          onToggle: () => {}
+        }, _MenuItem7 || (_MenuItem7 = /*#__PURE__*/React.createElement(MenuItem, null, "Test1")), _MenuItem8 || (_MenuItem8 = /*#__PURE__*/React.createElement(MenuItem, {
+          disabled: true
+        }, "Test2")))),
+        getByRole = _render7.getByRole,
+        getAllByRole = _render7.getAllByRole,
+        queryByText = _render7.queryByText;
+      const menuItems = getAllByRole('menuitem');
+      const triggerButton = getByRole('button', {
+        name: 'More'
+      });
+      const menuItem1 = queryByText('Test1');
+      const menuItem2 = queryByText('Test2');
+      expect(triggerButton).toBeInTheDocument();
+      expect(menuItems).toHaveLength(2);
+      expect(menuItem1).toBeInTheDocument();
+      expect(menuItem2).toBeInTheDocument();
+    });
+    it('should not show by default', () => {
+      const _render8 = render(_Menu7 || (_Menu7 = /*#__PURE__*/React.createElement(Menu, {
+          trigger: /*#__PURE__*/React.createElement("button", null, "More")
+        }, /*#__PURE__*/React.createElement(MenuItem, null, "Test1"), /*#__PURE__*/React.createElement(MenuItem, {
+          disabled: true
+        }, "Test2")))),
+        queryByText = _render8.queryByText,
+        getByRole = _render8.getByRole;
+      const triggerButton = getByRole('button', {
+        name: 'More'
+      });
+      const menuItem1 = queryByText('Test1');
+      const menuItem2 = queryByText('Test2');
+      expect(triggerButton).toBeInTheDocument();
+      expect(menuItem1).not.toBeInTheDocument();
+      expect(menuItem2).not.toBeInTheDocument();
+    });
+    it('should accept a default show', () => {
+      const _render9 = render(_Menu8 || (_Menu8 = /*#__PURE__*/React.createElement(Menu, {
+          trigger: /*#__PURE__*/React.createElement("button", null, "More"),
+          defaultShow: true
+        }, /*#__PURE__*/React.createElement(MenuItem, null, "Test1"), /*#__PURE__*/React.createElement(MenuItem, {
+          disabled: true
+        }, "Test2")))),
+        queryByText = _render9.queryByText,
+        getByRole = _render9.getByRole;
+      const triggerButton = getByRole('button', {
+        name: 'More'
+      });
+      const menuItem1 = queryByText('Test1');
+      const menuItem2 = queryByText('Test2');
+      expect(triggerButton).toBeInTheDocument();
+      expect(menuItem1).toBeInTheDocument();
+      expect(menuItem2).toBeInTheDocument();
+    });
+    it('should provide a menu ref', () => {
+      const menuRef = jest.fn();
+      render( /*#__PURE__*/React.createElement(Menu, {
+        trigger: _button4 || (_button4 = /*#__PURE__*/React.createElement("button", null, "More")),
+        defaultShow: true,
+        menuRef: menuRef
+      }, _MenuItem9 || (_MenuItem9 = /*#__PURE__*/React.createElement(MenuItem, null, "Learning Mastery")), _MenuItem10 || (_MenuItem10 = /*#__PURE__*/React.createElement(MenuItem, {
+        disabled: true
+      }, "Gradebook"))));
+      const menu = screen.getByRole('menu');
+      expect(menuRef).toHaveBeenCalledWith(menu);
+    });
+    it('should provide a popoverRef ref', () => {
+      const popoverRef = jest.fn();
+      render( /*#__PURE__*/React.createElement(Menu, {
+        trigger: _button5 || (_button5 = /*#__PURE__*/React.createElement("button", null, "More")),
+        defaultShow: true,
+        popoverRef: popoverRef
+      }, _MenuItem11 || (_MenuItem11 = /*#__PURE__*/React.createElement(MenuItem, null, "Learning Mastery")), _MenuItem12 || (_MenuItem12 = /*#__PURE__*/React.createElement(MenuItem, {
+        disabled: true
+      }, "Gradebook"))));
+      expect(popoverRef).toHaveBeenCalled();
+    });
+    it('should call onToggle on click', () => {
+      const onToggle = jest.fn();
+      render( /*#__PURE__*/React.createElement(Menu, {
+        trigger: _button6 || (_button6 = /*#__PURE__*/React.createElement("button", null, "More")),
+        onToggle: onToggle
+      }, _MenuItem13 || (_MenuItem13 = /*#__PURE__*/React.createElement(MenuItem, null, "Learning Mastery")), _MenuItem14 || (_MenuItem14 = /*#__PURE__*/React.createElement(MenuItem, {
+        disabled: true
+      }, "Gradebook"))));
+      const trigger = screen.getByRole('button');
+      fireEvent.click(trigger);
+      expect(onToggle).toHaveBeenCalled();
+    });
+    it('should have an aria-haspopup attribute', () => {
+      render(_Menu9 || (_Menu9 = /*#__PURE__*/React.createElement(Menu, {
+        trigger: /*#__PURE__*/React.createElement("button", null, "More")
+      }, /*#__PURE__*/React.createElement(MenuItem, null, "Learning Mastery"), /*#__PURE__*/React.createElement(MenuItem, {
+        disabled: true
+      }, "Gradebook"))));
+      const trigger = screen.getByRole('button');
+      expect(trigger).toHaveAttribute('aria-haspopup');
+    });
+    it('should pass positionContainerDisplay prop to Popover', () => {
+      let popoverRef = null;
+      render( /*#__PURE__*/React.createElement(Menu, {
+        trigger: _button7 || (_button7 = /*#__PURE__*/React.createElement("button", null, "More")),
+        popoverRef: e => {
+          popoverRef = e;
+        },
+        positionContainerDisplay: "block"
+      }, _MenuItem15 || (_MenuItem15 = /*#__PURE__*/React.createElement(MenuItem, null, "Learning Mastery")), _MenuItem16 || (_MenuItem16 = /*#__PURE__*/React.createElement(MenuItem, {
+        disabled: true
+      }, "Gradebook"))));
+      const popoverProps = popoverRef.props;
+      expect(popoverProps.positionContainerDisplay).toBe('block');
+    });
+  });
+});