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

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

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _index = require("../index");
+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.
+ */
+const ExtendedMenuItem = ({
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_index.MenuItem, props);
+};
+describe('<MenuItem />', () => {
+  it('should render', () => {
+    (0, _react2.render)(_MenuItem || (_MenuItem = /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Menu Item Text")));
+    const menuItem = _react2.screen.getByText('Menu Item Text');
+    expect(menuItem).toBeInTheDocument();
+  });
+  it('should render as a link when an href is provided', () => {
+    (0, _react2.render)(_MenuItem2 || (_MenuItem2 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+      href: "example.html"
+    }, "Menu Item Text")));
+    const menuItem = _react2.screen.getByRole('menuitem');
+    expect(menuItem).toBeInTheDocument();
+    expect(menuItem).toHaveAttribute('href', 'example.html');
+  });
+  it('should render as a link when a to is provided', () => {
+    (0, _react2.render)(_ExtendedMenuItem || (_ExtendedMenuItem = /*#__PURE__*/_react.default.createElement(ExtendedMenuItem, {
+      to: "/example"
+    }, "Hello")));
+    const menuItem = _react2.screen.getByRole('menuitem');
+    expect(menuItem).toHaveAttribute('to', '/example');
+  });
+  it('should call onSelect after click', () => {
+    const onSelect = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+      onSelect: onSelect,
+      value: "foo"
+    }, "Hello"));
+    const menuItem = _react2.screen.getByRole('menuitem');
+    _react2.fireEvent.click(menuItem);
+    expect(onSelect).toHaveBeenCalledWith(expect.any(Object), 'foo', true, expect.any(Object));
+  });
+  it('should call onClick after click', () => {
+    const onClick = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+      onClick: onClick,
+      value: "foo"
+    }, "Hello"));
+    const menuItem = _react2.screen.getByRole('menuitem');
+    _react2.fireEvent.click(menuItem);
+    expect(onClick).toHaveBeenCalled();
+  });
+  it('should set the tabIndex attribute', () => {
+    (0, _react2.render)(_MenuItem3 || (_MenuItem3 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Hello")));
+    const menuItem = _react2.screen.getByRole('menuitem');
+    expect(menuItem).toHaveAttribute('tabIndex', '-1');
+  });
+  it('should set the aria-controls attribute', () => {
+    (0, _react2.render)(_MenuItem4 || (_MenuItem4 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+      controls: "testId"
+    }, "Hello")));
+    const menuItem = _react2.screen.getByRole('menuitem');
+    expect(menuItem).toHaveAttribute('aria-controls', 'testId');
+  });
+  it('should set the aria-disabled attribute', () => {
+    (0, _react2.render)(_MenuItem5 || (_MenuItem5 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+      disabled: true
+    }, "Hello")));
+    const menuItem = _react2.screen.getByRole('menuitem');
+    expect(menuItem).toHaveAttribute('aria-disabled', 'true');
+  });
+  it('should set the aria-checked attribute when defaultSelected prop is true', () => {
+    (0, _react2.render)(_MenuItem6 || (_MenuItem6 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+      type: "checkbox",
+      defaultSelected: true
+    }, "Hello")));
+    const menuItem = _react2.screen.getByRole('menuitemcheckbox');
+    expect(menuItem).toHaveAttribute('aria-checked', 'true');
+  });
+  it('should set the aria-checked attribute when selected prop is true', () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+      type: "checkbox",
+      selected: true,
+      onSelect: jest.fn()
+    }, "Hello"));
+    const menuItem = _react2.screen.getByRole('menuitemcheckbox');
+    expect(menuItem).toHaveAttribute('aria-checked', 'true');
+  });
+  it('should default to the "menuitem" role', () => {
+    const _render = (0, _react2.render)(_MenuItem7 || (_MenuItem7 = /*#__PURE__*/_react.default.createElement(_index.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 = (0, _react2.render)(_MenuItem8 || (_MenuItem8 = /*#__PURE__*/_react.default.createElement(_index.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 = (0, _react2.render)(_MenuItem9 || (_MenuItem9 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+        type: "radio"
+      }, "Hello"))),
+      container = _render3.container;
+    const menuItem = container.querySelector("span[class$='-menuItem']");
+    expect(menuItem).toHaveAttribute('role', 'menuitemradio');
+  });
+});

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

@@ -0,0 +1,168 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _MenuItem11 = require("../../MenuItem");
+var _MenuItemSeparator5 = require("../../MenuItemSeparator");
+var _index = require("../index");
+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.
+ */
+describe('<MenuItemGroup />', () => {
+  it('should render', () => {
+    const _render = (0, _react2.render)(_MenuItemGroup || (_MenuItemGroup = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+        label: "Menu Label"
+      }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Item Text 1"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Item Text 2"), /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null)))),
+      container = _render.container;
+    const group = container.querySelector("[id*='MenuItemGroup_']");
+    const groupMenu = _react2.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 = (0, _react2.render)(_MenuItemGroup2 || (_MenuItemGroup2 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+        label: "Select one"
+      }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar"), /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.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"', () => {
+    (0, _react2.render)(_MenuItemGroup3 || (_MenuItemGroup3 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+      label: "Select one"
+    }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Food"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar"))));
+    const menu = _react2.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"', () => {
+    (0, _react2.render)(_MenuItemGroup4 || (_MenuItemGroup4 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+      label: "Select one"
+    }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar"), /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
+    const menuItems = _react2.screen.getAllByRole('menuitemradio');
+    expect(menuItems).toHaveLength(2);
+  });
+  it('should render children with type "checkbox" if allowMultiple is true', () => {
+    (0, _react2.render)(_MenuItemGroup5 || (_MenuItemGroup5 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+      label: "Select a few",
+      allowMultiple: true
+    }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar"), /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
+    const menuItems = _react2.screen.getAllByRole('menuitemcheckbox');
+    expect(menuItems).toHaveLength(2);
+  });
+  it('should set aria-disabled', () => {
+    (0, _react2.render)(_MenuItemGroup6 || (_MenuItemGroup6 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+      label: "Select one",
+      disabled: true
+    }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar"), /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
+    const menu = _react2.screen.getByRole('menu');
+    const menuItems = _react2.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', () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+      label: "Select one",
+      defaultSelected: [1]
+    }, _MenuItem || (_MenuItem = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo")), _MenuItem2 || (_MenuItem2 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar")), _MenuItemSeparator || (_MenuItemSeparator = /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
+    const menuItems = _react2.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', () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+      label: "Select one",
+      onSelect: jest.fn(),
+      selected: [1]
+    }, _MenuItem3 || (_MenuItem3 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo")), _MenuItem4 || (_MenuItem4 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar")), _MenuItemSeparator2 || (_MenuItemSeparator2 = /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
+    const menuItems = _react2.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', () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+      label: "Select a few",
+      allowMultiple: true
+    }, _MenuItem5 || (_MenuItem5 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, {
+      key: "foo",
+      defaultSelected: true
+    }, "Foo")), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, {
+      key: "bar",
+      selected: true,
+      onSelect: jest.fn()
+    }, "Bar")));
+    const menuItems = _react2.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)', () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+      label: "Select one"
+    }, _MenuItem6 || (_MenuItem6 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, {
+      defaultSelected: true
+    }, "Foo")), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, {
+      selected: true,
+      onSelect: jest.fn()
+    }, "Bar")));
+    const menuItems = _react2.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();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+      label: "Select one",
+      onSelect: onSelect,
+      selected: [1]
+    }, _MenuItem7 || (_MenuItem7 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Item 1")), _MenuItem8 || (_MenuItem8 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Item 2")), _MenuItemSeparator3 || (_MenuItemSeparator3 = /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
+    const menuItem = _react2.screen.getByText('Item 1');
+    _react2.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();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+      label: "Select one",
+      onSelect: onSelect,
+      disabled: true
+    }, _MenuItem9 || (_MenuItem9 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Item 1")), _MenuItem10 || (_MenuItem10 = /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Item 2")), _MenuItemSeparator4 || (_MenuItemSeparator4 = /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
+    const menuItem = _react2.screen.getByText('Item 1');
+    _react2.fireEvent.click(menuItem);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,291 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = require("@testing-library/user-event");
+require("@testing-library/jest-dom");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _index = require("../index");
+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.
+ */
+describe('<Menu />', () => {
+  describe('without a trigger', () => {
+    it('should render', () => {
+      (0, _react2.render)(_Menu || (_Menu = /*#__PURE__*/_react.default.createElement(_index.Menu, {
+        label: "Menu-label-text"
+      }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Menu Item Text"))));
+      const menu = _react2.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 = (0, _react2.render)(_Menu2 || (_Menu2 = /*#__PURE__*/_react.default.createElement(_index.Menu, {
+          label: "Menu-label-text"
+        }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Menu Item Text")))),
+        container = _render.container;
+      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('should meet standards when menu is closed', async () => {
+      const _render2 = (0, _react2.render)(_Menu3 || (_Menu3 = /*#__PURE__*/_react.default.createElement(_index.Menu, {
+          trigger: /*#__PURE__*/_react.default.createElement("button", null, "More")
+        }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Learning Mastery"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+          disabled: true
+        }, "Gradebook")))),
+        container = _render2.container;
+      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('should meet standards when menu is open', async () => {
+      const _render3 = (0, _react2.render)(_Menu4 || (_Menu4 = /*#__PURE__*/_react.default.createElement(_index.Menu, {
+          trigger: /*#__PURE__*/_react.default.createElement("button", null, "More"),
+          defaultShow: true
+        }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Learning Mastery"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+          disabled: true
+        }, "Gradebook")))),
+        container = _render3.container;
+      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('should call onSelect when menu item is selected', async () => {
+      const onSelect = jest.fn();
+      const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
+          label: "Settings",
+          onSelect: onSelect
+        }, _MenuItem || (_MenuItem = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+          value: "Test"
+        }, "Test Item")))),
+        getByText = _render4.getByText;
+      const item = getByText('Test Item');
+      await _userEvent.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 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
+          label: "Settings",
+          onSelect: onSelect,
+          disabled: true
+        }, _MenuItem2 || (_MenuItem2 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+          value: "Account"
+        }, "Account")))),
+        getByText = _render5.getByText;
+      const item = getByText('Account');
+      _userEvent.userEvent.click(item);
+      expect(onSelect).not.toHaveBeenCalled();
+    });
+    it('should provide a menu ref', () => {
+      const menuRef = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
+        label: "Settings",
+        menuRef: menuRef
+      }, _MenuItem3 || (_MenuItem3 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+        value: "Account"
+      }, "Account"))));
+      const menu = _react2.screen.getByRole('menu');
+      expect(menuRef).toHaveBeenLastCalledWith(menu);
+    });
+    it('should set aria attributes properly', () => {
+      (0, _react2.render)(_Menu5 || (_Menu5 = /*#__PURE__*/_react.default.createElement(_index.Menu, {
+        disabled: true,
+        label: "Settings"
+      }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+        value: "Account"
+      }, "Account"))));
+      const menu = _react2.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);
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
+        defaultShow: true,
+        mountNode: mountNode,
+        label: "Settings",
+        trigger: _button || (_button = /*#__PURE__*/_react.default.createElement("button", null, "Settings"))
+      }, _MenuItem4 || (_MenuItem4 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Account"))));
+      expect(mountNode).toHaveTextContent('Account');
+      document.body.removeChild(mountNode);
+    });
+    it('should set aria attributes properly', () => {
+      (0, _react2.render)(_Menu6 || (_Menu6 = /*#__PURE__*/_react.default.createElement(_index.Menu, {
+        trigger: /*#__PURE__*/_react.default.createElement("button", null, "Settings"),
+        defaultShow: true
+      }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Learning Mastery"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+        disabled: true
+      }, "Gradebook"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+        type: "radio",
+        defaultChecked: true
+      }, "Default (Grid view)"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+        type: "radio"
+      }, "Individual (List view)"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+        type: "checkbox",
+        defaultChecked: true
+      }, "Include Anchor Standards"), /*#__PURE__*/_react.default.createElement(_index.MenuItemSeparator, null), /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Open grading history..."))));
+      const menu = _react2.screen.getByRole('menu');
+      const trigger = _react2.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 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
+          trigger: _button2 || (_button2 = /*#__PURE__*/_react.default.createElement("button", null, "More")),
+          onFocus: onFocus
+        }, _MenuItem5 || (_MenuItem5 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Learning Mastery")), _MenuItem6 || (_MenuItem6 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+          disabled: true
+        }, "Gradebook")))),
+        getByRole = _render6.getByRole;
+      const triggerButton = getByRole('button', {
+        name: 'More'
+      });
+      _react2.fireEvent.focus(triggerButton);
+      expect(onFocus).toHaveBeenCalled();
+    });
+    it('should render when show and onToggle props are set', () => {
+      const _render7 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
+          trigger: _button3 || (_button3 = /*#__PURE__*/_react.default.createElement("button", null, "More")),
+          show: true,
+          onToggle: () => {}
+        }, _MenuItem7 || (_MenuItem7 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Test1")), _MenuItem8 || (_MenuItem8 = /*#__PURE__*/_react.default.createElement(_index.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 = (0, _react2.render)(_Menu7 || (_Menu7 = /*#__PURE__*/_react.default.createElement(_index.Menu, {
+          trigger: /*#__PURE__*/_react.default.createElement("button", null, "More")
+        }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Test1"), /*#__PURE__*/_react.default.createElement(_index.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 = (0, _react2.render)(_Menu8 || (_Menu8 = /*#__PURE__*/_react.default.createElement(_index.Menu, {
+          trigger: /*#__PURE__*/_react.default.createElement("button", null, "More"),
+          defaultShow: true
+        }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Test1"), /*#__PURE__*/_react.default.createElement(_index.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();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
+        trigger: _button4 || (_button4 = /*#__PURE__*/_react.default.createElement("button", null, "More")),
+        defaultShow: true,
+        menuRef: menuRef
+      }, _MenuItem9 || (_MenuItem9 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Learning Mastery")), _MenuItem10 || (_MenuItem10 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+        disabled: true
+      }, "Gradebook"))));
+      const menu = _react2.screen.getByRole('menu');
+      expect(menuRef).toHaveBeenCalledWith(menu);
+    });
+    it('should provide a popoverRef ref', () => {
+      const popoverRef = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
+        trigger: _button5 || (_button5 = /*#__PURE__*/_react.default.createElement("button", null, "More")),
+        defaultShow: true,
+        popoverRef: popoverRef
+      }, _MenuItem11 || (_MenuItem11 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Learning Mastery")), _MenuItem12 || (_MenuItem12 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+        disabled: true
+      }, "Gradebook"))));
+      expect(popoverRef).toHaveBeenCalled();
+    });
+    it('should call onToggle on click', () => {
+      const onToggle = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
+        trigger: _button6 || (_button6 = /*#__PURE__*/_react.default.createElement("button", null, "More")),
+        onToggle: onToggle
+      }, _MenuItem13 || (_MenuItem13 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Learning Mastery")), _MenuItem14 || (_MenuItem14 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+        disabled: true
+      }, "Gradebook"))));
+      const trigger = _react2.screen.getByRole('button');
+      _react2.fireEvent.click(trigger);
+      expect(onToggle).toHaveBeenCalled();
+    });
+    it('should have an aria-haspopup attribute', () => {
+      (0, _react2.render)(_Menu9 || (_Menu9 = /*#__PURE__*/_react.default.createElement(_index.Menu, {
+        trigger: /*#__PURE__*/_react.default.createElement("button", null, "More")
+      }, /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Learning Mastery"), /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+        disabled: true
+      }, "Gradebook"))));
+      const trigger = _react2.screen.getByRole('button');
+      expect(trigger).toHaveAttribute('aria-haspopup');
+    });
+    it('should pass positionContainerDisplay prop to Popover', () => {
+      let popoverRef = null;
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
+        trigger: _button7 || (_button7 = /*#__PURE__*/_react.default.createElement("button", null, "More")),
+        popoverRef: e => {
+          popoverRef = e;
+        },
+        positionContainerDisplay: "block"
+      }, _MenuItem15 || (_MenuItem15 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, null, "Learning Mastery")), _MenuItem16 || (_MenuItem16 = /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
+        disabled: true
+      }, "Gradebook"))));
+      const popoverProps = popoverRef.props;
+      expect(popoverProps.positionContainerDisplay).toBe('block');
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "8.53.3-snapshot-10",
+  "version": "8.53.3-snapshot-13",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,27 +23,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.53.3-snapshot-10",
-    "@instructure/ui-color-utils": "8.53.3-snapshot-10",
-    "@instructure/ui-test-locator": "8.53.3-snapshot-10",
-    "@instructure/ui-test-queries": "8.53.3-snapshot-10",
-    "@instructure/ui-test-utils": "8.53.3-snapshot-10",
-    "@instructure/ui-themes": "8.53.3-snapshot-10"
+    "@instructure/ui-axe-check": "8.53.3-snapshot-13",
+    "@instructure/ui-babel-preset": "8.53.3-snapshot-13",
+    "@instructure/ui-color-utils": "8.53.3-snapshot-13",
+    "@instructure/ui-test-utils": "8.53.3-snapshot-13",
+    "@instructure/ui-themes": "8.53.3-snapshot-13",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
-    "@instructure/console": "8.53.3-snapshot-10",
-    "@instructure/emotion": "8.53.3-snapshot-10",
-    "@instructure/shared-types": "8.53.3-snapshot-10",
-    "@instructure/ui-a11y-utils": "8.53.3-snapshot-10",
-    "@instructure/ui-dom-utils": "8.53.3-snapshot-10",
-    "@instructure/ui-icons": "8.53.3-snapshot-10",
-    "@instructure/ui-popover": "8.53.3-snapshot-10",
-    "@instructure/ui-position": "8.53.3-snapshot-10",
-    "@instructure/ui-prop-types": "8.53.3-snapshot-10",
-    "@instructure/ui-react-utils": "8.53.3-snapshot-10",
-    "@instructure/ui-testable": "8.53.3-snapshot-10",
-    "@instructure/ui-utils": "8.53.3-snapshot-10",
+    "@instructure/console": "8.53.3-snapshot-13",
+    "@instructure/emotion": "8.53.3-snapshot-13",
+    "@instructure/shared-types": "8.53.3-snapshot-13",
+    "@instructure/ui-a11y-utils": "8.53.3-snapshot-13",
+    "@instructure/ui-dom-utils": "8.53.3-snapshot-13",
+    "@instructure/ui-icons": "8.53.3-snapshot-13",
+    "@instructure/ui-popover": "8.53.3-snapshot-13",
+    "@instructure/ui-position": "8.53.3-snapshot-13",
+    "@instructure/ui-prop-types": "8.53.3-snapshot-13",
+    "@instructure/ui-react-utils": "8.53.3-snapshot-13",
+    "@instructure/ui-testable": "8.53.3-snapshot-13",
+    "@instructure/ui-utils": "8.53.3-snapshot-13",
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1"
   },