@instructure/ui-menu 9.2.1-snapshot-1 → 9.2.1-snapshot-2

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.
 
-## [9.2.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-1) (2024-07-10)
+## [9.2.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-2) (2024-07-10)
 
 **Note:** Version bump only for package @instructure/ui-menu
 

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

@@ -25,6 +25,7 @@ var _MenuItem, _MenuItem2, _ExtendedMenuItem, _MenuItem3, _MenuItem4, _MenuItem5
 
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { MenuItem } from '../index';
 const ExtendedMenuItem = ({
@@ -54,7 +55,7 @@ describe('<MenuItem />', () => {
     expect(menuItem).toHaveAttribute('to', '/example');
   });
   it('should call onSelect after click', () => {
-    const onSelect = jest.fn();
+    const onSelect = vi.fn();
     render( /*#__PURE__*/React.createElement(MenuItem, {
       onSelect: onSelect,
       value: "foo"
@@ -64,7 +65,7 @@ describe('<MenuItem />', () => {
     expect(onSelect).toHaveBeenCalledWith(expect.any(Object), 'foo', true, expect.any(Object));
   });
   it('should call onClick after click', () => {
-    const onClick = jest.fn();
+    const onClick = vi.fn();
     render( /*#__PURE__*/React.createElement(MenuItem, {
       onClick: onClick,
       value: "foo"
@@ -104,7 +105,7 @@ describe('<MenuItem />', () => {
     render( /*#__PURE__*/React.createElement(MenuItem, {
       type: "checkbox",
       selected: true,
-      onSelect: jest.fn()
+      onSelect: vi.fn()
     }, "Hello"));
     const menuItem = screen.getByRole('menuitemcheckbox');
     expect(menuItem).toHaveAttribute('aria-checked', 'true');

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

@@ -25,6 +25,7 @@ var _MenuItemGroup, _MenuItemGroup2, _MenuItemGroup3, _MenuItemGroup4, _MenuItem
 
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { MenuItem } from '../../MenuItem';
 import { MenuItemSeparator } from '../../MenuItemSeparator';
@@ -100,7 +101,7 @@ describe('<MenuItemGroup />', () => {
   it('should set selected from selected prop', () => {
     render( /*#__PURE__*/React.createElement(MenuItemGroup, {
       label: "Select one",
-      onSelect: jest.fn(),
+      onSelect: vi.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');
@@ -118,7 +119,7 @@ describe('<MenuItemGroup />', () => {
     }, "Foo")), /*#__PURE__*/React.createElement(MenuItem, {
       key: "bar",
       selected: true,
-      onSelect: jest.fn()
+      onSelect: vi.fn()
     }, "Bar")));
     const menuItems = screen.getAllByRole('menuitemcheckbox');
     expect(menuItems).toHaveLength(2);
@@ -132,7 +133,7 @@ describe('<MenuItemGroup />', () => {
       defaultSelected: true
     }, "Foo")), /*#__PURE__*/React.createElement(MenuItem, {
       selected: true,
-      onSelect: jest.fn()
+      onSelect: vi.fn()
     }, "Bar")));
     const menuItems = screen.getAllByRole('menuitemradio');
     expect(menuItems).toHaveLength(2);
@@ -140,7 +141,7 @@ describe('<MenuItemGroup />', () => {
     expect(menuItems[1]).toHaveAttribute('aria-checked', 'false');
   });
   it('calls onSelect when items are selected', () => {
-    const onSelect = jest.fn();
+    const onSelect = vi.fn();
     render( /*#__PURE__*/React.createElement(MenuItemGroup, {
       label: "Select one",
       onSelect: onSelect,
@@ -153,7 +154,7 @@ describe('<MenuItemGroup />', () => {
     expect(onSelect.mock.calls[0][2]).toEqual(true);
   });
   it('does not call onSelect when disabled', () => {
-    const onSelect = jest.fn();
+    const onSelect = vi.fn();
     render( /*#__PURE__*/React.createElement(MenuItemGroup, {
       label: "Select one",
       onSelect: onSelect,

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

@@ -24,11 +24,23 @@ var _Menu, _Menu2, _Menu3, _Menu4, _MenuItem, _MenuItem2, _MenuItem3, _Menu5, _b
  */
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
+import { vi } from 'vitest';
 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 />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
   describe('without a trigger', () => {
     it('should render', () => {
       render(_Menu || (_Menu = /*#__PURE__*/React.createElement(Menu, {
@@ -69,7 +81,7 @@ describe('<Menu />', () => {
       expect(axeCheck).toBe(true);
     });
     it('should call onSelect when menu item is selected', async () => {
-      const onSelect = jest.fn();
+      const onSelect = vi.fn();
       const _render4 = render( /*#__PURE__*/React.createElement(Menu, {
           label: "Settings",
           onSelect: onSelect
@@ -83,7 +95,7 @@ describe('<Menu />', () => {
       expect(onSelect.mock.calls[0][1]).toEqual('Test');
     });
     it('should not call onSelect when disabled', () => {
-      const onSelect = jest.fn();
+      const onSelect = vi.fn();
       const _render5 = render( /*#__PURE__*/React.createElement(Menu, {
           label: "Settings",
           onSelect: onSelect,
@@ -92,12 +104,15 @@ describe('<Menu />', () => {
           value: "Account"
         }, "Account")))),
         getByText = _render5.getByText;
-      const item = getByText('Account');
-      userEvent.click(item);
-      expect(onSelect).not.toHaveBeenCalled();
+      const itemText = getByText('Account');
+      const menu = screen.getByRole('menu');
+      const menuItem = screen.getByRole('menuitem');
+      expect(itemText).toBeInTheDocument();
+      expect(menu).toHaveAttribute('aria-disabled', 'true');
+      expect(menuItem).toHaveAttribute('aria-disabled', 'true');
     });
     it('should provide a menu ref', () => {
-      const menuRef = jest.fn();
+      const menuRef = vi.fn();
       render( /*#__PURE__*/React.createElement(Menu, {
         label: "Settings",
         menuRef: menuRef
@@ -155,7 +170,7 @@ describe('<Menu />', () => {
       expect(menu).toHaveAttribute('aria-labelledby', trigger.getAttribute('id'));
     });
     it('should call onFocus on focus', () => {
-      const onFocus = jest.fn();
+      const onFocus = vi.fn();
       const _render6 = render( /*#__PURE__*/React.createElement(Menu, {
           trigger: _button2 || (_button2 = /*#__PURE__*/React.createElement("button", null, "More")),
           onFocus: onFocus
@@ -227,7 +242,7 @@ describe('<Menu />', () => {
       expect(menuItem2).toBeInTheDocument();
     });
     it('should provide a menu ref', () => {
-      const menuRef = jest.fn();
+      const menuRef = vi.fn();
       render( /*#__PURE__*/React.createElement(Menu, {
         trigger: _button4 || (_button4 = /*#__PURE__*/React.createElement("button", null, "More")),
         defaultShow: true,
@@ -239,7 +254,7 @@ describe('<Menu />', () => {
       expect(menuRef).toHaveBeenCalledWith(menu);
     });
     it('should provide a popoverRef ref', () => {
-      const popoverRef = jest.fn();
+      const popoverRef = vi.fn();
       render( /*#__PURE__*/React.createElement(Menu, {
         trigger: _button5 || (_button5 = /*#__PURE__*/React.createElement("button", null, "More")),
         defaultShow: true,
@@ -250,7 +265,7 @@ describe('<Menu />', () => {
       expect(popoverRef).toHaveBeenCalled();
     });
     it('should call onToggle on click', () => {
-      const onToggle = jest.fn();
+      const onToggle = vi.fn();
       render( /*#__PURE__*/React.createElement(Menu, {
         trigger: _button6 || (_button6 = /*#__PURE__*/React.createElement("button", null, "More")),
         onToggle: onToggle

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

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 require("@testing-library/jest-dom");
 var _index = require("../index");
 var _MenuItem, _MenuItem2, _ExtendedMenuItem, _MenuItem3, _MenuItem4, _MenuItem5, _MenuItem6, _MenuItem7, _MenuItem8, _MenuItem9;
@@ -56,7 +57,7 @@ describe('<MenuItem />', () => {
     expect(menuItem).toHaveAttribute('to', '/example');
   });
   it('should call onSelect after click', () => {
-    const onSelect = jest.fn();
+    const onSelect = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
       onSelect: onSelect,
       value: "foo"
@@ -66,7 +67,7 @@ describe('<MenuItem />', () => {
     expect(onSelect).toHaveBeenCalledWith(expect.any(Object), 'foo', true, expect.any(Object));
   });
   it('should call onClick after click', () => {
-    const onClick = jest.fn();
+    const onClick = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
       onClick: onClick,
       value: "foo"
@@ -106,7 +107,7 @@ describe('<MenuItem />', () => {
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItem, {
       type: "checkbox",
       selected: true,
-      onSelect: jest.fn()
+      onSelect: _vitest.vi.fn()
     }, "Hello"));
     const menuItem = _react2.screen.getByRole('menuitemcheckbox');
     expect(menuItem).toHaveAttribute('aria-checked', 'true');

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

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 require("@testing-library/jest-dom");
 var _MenuItem11 = require("../../MenuItem");
 var _MenuItemSeparator5 = require("../../MenuItemSeparator");
@@ -102,7 +103,7 @@ describe('<MenuItemGroup />', () => {
   it('should set selected from selected prop', () => {
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
       label: "Select one",
-      onSelect: jest.fn(),
+      onSelect: _vitest.vi.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');
@@ -120,7 +121,7 @@ describe('<MenuItemGroup />', () => {
     }, "Foo")), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, {
       key: "bar",
       selected: true,
-      onSelect: jest.fn()
+      onSelect: _vitest.vi.fn()
     }, "Bar")));
     const menuItems = _react2.screen.getAllByRole('menuitemcheckbox');
     expect(menuItems).toHaveLength(2);
@@ -134,7 +135,7 @@ describe('<MenuItemGroup />', () => {
       defaultSelected: true
     }, "Foo")), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, {
       selected: true,
-      onSelect: jest.fn()
+      onSelect: _vitest.vi.fn()
     }, "Bar")));
     const menuItems = _react2.screen.getAllByRole('menuitemradio');
     expect(menuItems).toHaveLength(2);
@@ -142,7 +143,7 @@ describe('<MenuItemGroup />', () => {
     expect(menuItems[1]).toHaveAttribute('aria-checked', 'false');
   });
   it('calls onSelect when items are selected', () => {
-    const onSelect = jest.fn();
+    const onSelect = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
       label: "Select one",
       onSelect: onSelect,
@@ -155,7 +156,7 @@ describe('<MenuItemGroup />', () => {
     expect(onSelect.mock.calls[0][2]).toEqual(true);
   });
   it('does not call onSelect when disabled', () => {
-    const onSelect = jest.fn();
+    const onSelect = _vitest.vi.fn();
     (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
       label: "Select one",
       onSelect: onSelect,

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

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 var _userEvent = require("@testing-library/user-event");
 require("@testing-library/jest-dom");
 var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
@@ -32,6 +33,17 @@ var _Menu, _Menu2, _Menu3, _Menu4, _MenuItem, _MenuItem2, _MenuItem3, _Menu5, _b
  * SOFTWARE.
  */
 describe('<Menu />', () => {
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
   describe('without a trigger', () => {
     it('should render', () => {
       (0, _react2.render)(_Menu || (_Menu = /*#__PURE__*/_react.default.createElement(_index.Menu, {
@@ -72,7 +84,7 @@ describe('<Menu />', () => {
       expect(axeCheck).toBe(true);
     });
     it('should call onSelect when menu item is selected', async () => {
-      const onSelect = jest.fn();
+      const onSelect = _vitest.vi.fn();
       const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
           label: "Settings",
           onSelect: onSelect
@@ -86,7 +98,7 @@ describe('<Menu />', () => {
       expect(onSelect.mock.calls[0][1]).toEqual('Test');
     });
     it('should not call onSelect when disabled', () => {
-      const onSelect = jest.fn();
+      const onSelect = _vitest.vi.fn();
       const _render5 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
           label: "Settings",
           onSelect: onSelect,
@@ -95,12 +107,15 @@ describe('<Menu />', () => {
           value: "Account"
         }, "Account")))),
         getByText = _render5.getByText;
-      const item = getByText('Account');
-      _userEvent.userEvent.click(item);
-      expect(onSelect).not.toHaveBeenCalled();
+      const itemText = getByText('Account');
+      const menu = _react2.screen.getByRole('menu');
+      const menuItem = _react2.screen.getByRole('menuitem');
+      expect(itemText).toBeInTheDocument();
+      expect(menu).toHaveAttribute('aria-disabled', 'true');
+      expect(menuItem).toHaveAttribute('aria-disabled', 'true');
     });
     it('should provide a menu ref', () => {
-      const menuRef = jest.fn();
+      const menuRef = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
         label: "Settings",
         menuRef: menuRef
@@ -158,7 +173,7 @@ describe('<Menu />', () => {
       expect(menu).toHaveAttribute('aria-labelledby', trigger.getAttribute('id'));
     });
     it('should call onFocus on focus', () => {
-      const onFocus = jest.fn();
+      const onFocus = _vitest.vi.fn();
       const _render6 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
           trigger: _button2 || (_button2 = /*#__PURE__*/_react.default.createElement("button", null, "More")),
           onFocus: onFocus
@@ -230,7 +245,7 @@ describe('<Menu />', () => {
       expect(menuItem2).toBeInTheDocument();
     });
     it('should provide a menu ref', () => {
-      const menuRef = jest.fn();
+      const menuRef = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
         trigger: _button4 || (_button4 = /*#__PURE__*/_react.default.createElement("button", null, "More")),
         defaultShow: true,
@@ -242,7 +257,7 @@ describe('<Menu />', () => {
       expect(menuRef).toHaveBeenCalledWith(menu);
     });
     it('should provide a popoverRef ref', () => {
-      const popoverRef = jest.fn();
+      const popoverRef = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
         trigger: _button5 || (_button5 = /*#__PURE__*/_react.default.createElement("button", null, "More")),
         defaultShow: true,
@@ -253,7 +268,7 @@ describe('<Menu />', () => {
       expect(popoverRef).toHaveBeenCalled();
     });
     it('should call onToggle on click', () => {
-      const onToggle = jest.fn();
+      const onToggle = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Menu, {
         trigger: _button6 || (_button6 = /*#__PURE__*/_react.default.createElement("button", null, "More")),
         onToggle: onToggle

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "9.2.1-snapshot-1",
+  "version": "9.2.1-snapshot-2",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,30 +23,31 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "9.2.1-snapshot-1",
-    "@instructure/ui-babel-preset": "9.2.1-snapshot-1",
-    "@instructure/ui-color-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-test-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-themes": "9.2.1-snapshot-1",
+    "@instructure/ui-axe-check": "9.2.1-snapshot-2",
+    "@instructure/ui-babel-preset": "9.2.1-snapshot-2",
+    "@instructure/ui-color-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-test-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-themes": "9.2.1-snapshot-2",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.5.2"
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^1.6.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "9.2.1-snapshot-1",
-    "@instructure/emotion": "9.2.1-snapshot-1",
-    "@instructure/shared-types": "9.2.1-snapshot-1",
-    "@instructure/ui-a11y-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-dom-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-icons": "9.2.1-snapshot-1",
-    "@instructure/ui-popover": "9.2.1-snapshot-1",
-    "@instructure/ui-position": "9.2.1-snapshot-1",
-    "@instructure/ui-prop-types": "9.2.1-snapshot-1",
-    "@instructure/ui-react-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-testable": "9.2.1-snapshot-1",
-    "@instructure/ui-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-view": "9.2.1-snapshot-1",
+    "@instructure/console": "9.2.1-snapshot-2",
+    "@instructure/emotion": "9.2.1-snapshot-2",
+    "@instructure/shared-types": "9.2.1-snapshot-2",
+    "@instructure/ui-a11y-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-dom-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-icons": "9.2.1-snapshot-2",
+    "@instructure/ui-popover": "9.2.1-snapshot-2",
+    "@instructure/ui-position": "9.2.1-snapshot-2",
+    "@instructure/ui-prop-types": "9.2.1-snapshot-2",
+    "@instructure/ui-react-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-testable": "9.2.1-snapshot-2",
+    "@instructure/ui-utils": "9.2.1-snapshot-2",
+    "@instructure/ui-view": "9.2.1-snapshot-2",
     "keycode": "^2.2.1",
     "prop-types": "^15.8.1"
   },

package/src/Menu/MenuItem/__new-tests__/MenuItem.test.tsx

@@ -24,6 +24,7 @@
 
 import React from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
 import '@testing-library/jest-dom'
 
 import { MenuItem } from '../index'
@@ -63,7 +64,7 @@ describe('<MenuItem />', () => {
   })
 
   it('should call onSelect after click', () => {
-    const onSelect = jest.fn()
+    const onSelect = vi.fn()
     render(
       <MenuItem onSelect={onSelect} value="foo">
         Hello
@@ -82,7 +83,7 @@ describe('<MenuItem />', () => {
   })
 
   it('should call onClick after click', () => {
-    const onClick = jest.fn()
+    const onClick = vi.fn()
     render(
       <MenuItem onClick={onClick} value="foo">
         Hello
@@ -129,7 +130,7 @@ describe('<MenuItem />', () => {
 
   it('should set the aria-checked attribute when selected prop is true', () => {
     render(
-      <MenuItem type="checkbox" selected onSelect={jest.fn()}>
+      <MenuItem type="checkbox" selected onSelect={vi.fn()}>
         Hello
       </MenuItem>
     )

package/src/Menu/MenuItemGroup/__new-tests__/MenuItemGroup.test.tsx

@@ -24,6 +24,7 @@
 
 import React from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
 import '@testing-library/jest-dom'
 
 import { MenuItem } from '../../MenuItem'
@@ -139,7 +140,7 @@ describe('<MenuItemGroup />', () => {
 
   it('should set selected from selected prop', () => {
     render(
-      <MenuItemGroup label="Select one" onSelect={jest.fn()} selected={[1]}>
+      <MenuItemGroup label="Select one" onSelect={vi.fn()} selected={[1]}>
         <MenuItem>Foo</MenuItem>
         <MenuItem>Bar</MenuItem>
         <MenuItemSeparator />
@@ -158,7 +159,7 @@ describe('<MenuItemGroup />', () => {
         <MenuItem key="foo" defaultSelected>
           Foo
         </MenuItem>
-        <MenuItem key="bar" selected onSelect={jest.fn()}>
+        <MenuItem key="bar" selected onSelect={vi.fn()}>
           Bar
         </MenuItem>
       </MenuItemGroup>
@@ -174,7 +175,7 @@ describe('<MenuItemGroup />', () => {
     render(
       <MenuItemGroup label="Select one">
         <MenuItem defaultSelected>Foo</MenuItem>
-        <MenuItem selected onSelect={jest.fn()}>
+        <MenuItem selected onSelect={vi.fn()}>
           Bar
         </MenuItem>
       </MenuItemGroup>
@@ -187,7 +188,7 @@ describe('<MenuItemGroup />', () => {
   })
 
   it('calls onSelect when items are selected', () => {
-    const onSelect = jest.fn()
+    const onSelect = vi.fn()
     render(
       <MenuItemGroup label="Select one" onSelect={onSelect} selected={[1]}>
         <MenuItem>Item 1</MenuItem>
@@ -205,7 +206,7 @@ describe('<MenuItemGroup />', () => {
   })
 
   it('does not call onSelect when disabled', () => {
-    const onSelect = jest.fn()
+    const onSelect = vi.fn()
     render(
       <MenuItemGroup label="Select one" onSelect={onSelect} disabled>
         <MenuItem>Item 1</MenuItem>

package/src/Menu/__new-tests__/Menu.test.tsx

@@ -23,6 +23,7 @@
  */
 import React from 'react'
 import { render, screen, fireEvent } from '@testing-library/react'
+import { vi } from 'vitest'
 import { userEvent } from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 
@@ -31,6 +32,24 @@ import { Popover } from '@instructure/ui-popover'
 import { Menu, MenuItem, MenuItemSeparator } from '../index'
 
 describe('<Menu />', () => {
+  let consoleWarningMock: ReturnType<typeof vi.spyOn>
+  let consoleErrorMock: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi
+      .spyOn(console, 'warn')
+      .mockImplementation(() => {}) as any
+    consoleErrorMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {}) as any
+  })
+
+  afterEach(() => {
+    consoleWarningMock.mockRestore()
+    consoleErrorMock.mockRestore()
+  })
+
   describe('without a trigger', () => {
     it('should render', () => {
       render(
@@ -82,7 +101,7 @@ describe('<Menu />', () => {
     })
 
     it('should call onSelect when menu item is selected', async () => {
-      const onSelect = jest.fn()
+      const onSelect = vi.fn()
 
       const { getByText } = render(
         <Menu label="Settings" onSelect={onSelect}>
@@ -98,22 +117,24 @@ describe('<Menu />', () => {
     })
 
     it('should not call onSelect when disabled', () => {
-      const onSelect = jest.fn()
+      const onSelect = vi.fn()
 
       const { getByText } = render(
         <Menu label="Settings" onSelect={onSelect} disabled>
           <MenuItem value="Account">Account</MenuItem>
         </Menu>
       )
-      const item = getByText('Account')
-
-      userEvent.click(item)
+      const itemText = getByText('Account')
+      const menu = screen.getByRole('menu')
+      const menuItem = screen.getByRole('menuitem')
 
-      expect(onSelect).not.toHaveBeenCalled()
+      expect(itemText).toBeInTheDocument()
+      expect(menu).toHaveAttribute('aria-disabled', 'true')
+      expect(menuItem).toHaveAttribute('aria-disabled', 'true')
     })
 
     it('should provide a menu ref', () => {
-      const menuRef = jest.fn()
+      const menuRef = vi.fn()
 
       render(
         <Menu label="Settings" menuRef={menuRef}>
@@ -187,7 +208,7 @@ describe('<Menu />', () => {
     })
 
     it('should call onFocus on focus', () => {
-      const onFocus = jest.fn()
+      const onFocus = vi.fn()
 
       const { getByRole } = render(
         <Menu trigger={<button>More</button>} onFocus={onFocus}>
@@ -256,7 +277,7 @@ describe('<Menu />', () => {
     })
 
     it('should provide a menu ref', () => {
-      const menuRef = jest.fn()
+      const menuRef = vi.fn()
 
       render(
         <Menu trigger={<button>More</button>} defaultShow menuRef={menuRef}>
@@ -270,7 +291,7 @@ describe('<Menu />', () => {
     })
 
     it('should provide a popoverRef ref', () => {
-      const popoverRef = jest.fn()
+      const popoverRef = vi.fn()
 
       render(
         <Menu
@@ -287,7 +308,7 @@ describe('<Menu />', () => {
     })
 
     it('should call onToggle on click', () => {
-      const onToggle = jest.fn()
+      const onToggle = vi.fn()
 
       render(
         <Menu trigger={<button>More</button>} onToggle={onToggle}>