@instructure/ui-select 9.2.1-snapshot-1 → 9.2.1-snapshot-3

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-3](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.2.1-snapshot-3) (2024-07-12)
 
 **Note:** Version bump only for package @instructure/ui-select
 

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

@@ -24,6 +24,7 @@ var _Select, _Select2, _Select3, _Select4, _Select5, _Select6, _Select7;
  */
 import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
@@ -42,12 +43,12 @@ const getOptions = (highlighted, selected, disabled) => defaultOptions.map(opt =
   isSelected: opt === selected,
   isDisabled: opt === disabled
 }, opt));
-jest.mock('@instructure/ui-utils', () => {
-  const originalModule = jest.requireActual('@instructure/ui-utils');
+vi.mock('@instructure/ui-utils', async importOriginal => {
+  const originalModule = await importOriginal();
   return {
     __esModule: true,
     ...originalModule,
-    isSafari: jest.fn(() => true)
+    isSafari: vi.fn(() => true)
   };
 });
 const mockUtils = utils;
@@ -55,7 +56,7 @@ describe('<Select />', () => {
   let consoleErrorMock;
   beforeEach(() => {
     // Mocking console to prevent test output pollution and expect for messages
-    consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
   });
   afterEach(() => {
     consoleErrorMock.mockRestore();
@@ -69,7 +70,7 @@ describe('<Select />', () => {
     expect(input).toHaveAttribute('role', 'button');
   });
   it('should have role combobox in different browsers than Safari without onInputChange', async () => {
-    mockUtils.isSafari = jest.fn(() => false);
+    mockUtils.isSafari = vi.fn(() => false);
     const _render2 = render( /*#__PURE__*/React.createElement(Select, {
         renderLabel: "Choose an option"
       }, getOptions())),
@@ -302,7 +303,7 @@ describe('<Select />', () => {
       expect(input).toHaveAttribute('autocomplete', 'false');
     });
     it('should provide a ref to the input element', async () => {
-      const inputRef = jest.fn();
+      const inputRef = vi.fn();
       render( /*#__PURE__*/React.createElement(Select, {
         renderLabel: "Choose an option",
         inputRef: inputRef
@@ -341,7 +342,7 @@ describe('<Select />', () => {
       expect(listbox.tagName).toBe('UL');
     });
     it('should provide a ref to the list element', async () => {
-      const listRef = jest.fn();
+      const listRef = vi.fn();
       render( /*#__PURE__*/React.createElement(Select, {
         renderLabel: "Choose an option",
         isShowingOptions: true,
@@ -356,7 +357,7 @@ describe('<Select />', () => {
   describe('with callbacks', () => {
     describe('should fire onRequestShowOptions', () => {
       it('when root is clicked', async () => {
-        const onRequestShowOptions = jest.fn();
+        const onRequestShowOptions = vi.fn();
         const _render8 = render( /*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
@@ -386,7 +387,7 @@ describe('<Select />', () => {
         });
       });
       it('when input is clicked', async () => {
-        const onRequestShowOptions = jest.fn();
+        const onRequestShowOptions = vi.fn();
         const _render9 = render( /*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
@@ -408,7 +409,7 @@ describe('<Select />', () => {
         });
       });
       it('when up/down arrows are pressed', async () => {
-        const onRequestShowOptions = jest.fn();
+        const onRequestShowOptions = vi.fn();
         render( /*#__PURE__*/React.createElement(Select, {
           renderLabel: "Choose an option",
           onRequestShowOptions: onRequestShowOptions
@@ -424,7 +425,7 @@ describe('<Select />', () => {
         });
       });
       it('when space is pressed', async () => {
-        const onRequestShowOptions = jest.fn();
+        const onRequestShowOptions = vi.fn();
         const _render10 = render( /*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
@@ -448,7 +449,7 @@ describe('<Select />', () => {
     });
     describe('should fire onRequestHideOptions', () => {
       it('when root is clicked and isShowingOptions is true', async () => {
-        const onRequestHideOptions = jest.fn();
+        const onRequestHideOptions = vi.fn();
         const _render11 = render( /*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
             isShowingOptions: true,
@@ -469,7 +470,7 @@ describe('<Select />', () => {
         });
       });
       it('when root is clicked and isShowingOptions is false should NOT fire onRequestHideOptions', async () => {
-        const onRequestHideOptions = jest.fn();
+        const onRequestHideOptions = vi.fn();
         render( /*#__PURE__*/React.createElement(Select, {
           renderLabel: "Choose an option",
           isShowingOptions: false,
@@ -483,7 +484,7 @@ describe('<Select />', () => {
         });
       });
       it('when input is clicked', async () => {
-        const onRequestHideOptions = jest.fn();
+        const onRequestHideOptions = vi.fn();
         const _render12 = render( /*#__PURE__*/React.createElement(Select, {
             renderLabel: "Choose an option",
             isShowingOptions: true,
@@ -506,7 +507,7 @@ describe('<Select />', () => {
         });
       });
       it('when escape is pressed', async () => {
-        const onRequestHideOptions = jest.fn();
+        const onRequestHideOptions = vi.fn();
         render( /*#__PURE__*/React.createElement(Select, {
           renderLabel: "Choose an option",
           isShowingOptions: true,
@@ -521,7 +522,7 @@ describe('<Select />', () => {
     });
     describe('should fire onRequestHighlightOption', () => {
       it('when options are hovered', async () => {
-        const onRequestHighlightOption = jest.fn();
+        const onRequestHighlightOption = vi.fn();
         render( /*#__PURE__*/React.createElement(Select, {
           renderLabel: "Choose an option",
           isShowingOptions: true,
@@ -544,7 +545,7 @@ describe('<Select />', () => {
     });
     describe('input callbacks', () => {
       it('should fire onInputChange when input is typed in', async () => {
-        const onInputChange = jest.fn();
+        const onInputChange = vi.fn();
         render( /*#__PURE__*/React.createElement(Select, {
           renderLabel: "Choose an option",
           onInputChange: onInputChange
@@ -556,7 +557,7 @@ describe('<Select />', () => {
         });
       });
       it('should fire onFocus when input gains focus', async () => {
-        const onFocus = jest.fn();
+        const onFocus = vi.fn();
         render( /*#__PURE__*/React.createElement(Select, {
           renderLabel: "Choose an option",
           onFocus: onFocus

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

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
 var _generateA11yTests = require("@instructure/ui-scripts/lib/test/generateA11yTests");
@@ -45,12 +46,12 @@ const getOptions = (highlighted, selected, disabled) => defaultOptions.map(opt =
   isSelected: opt === selected,
   isDisabled: opt === disabled
 }, opt));
-jest.mock('@instructure/ui-utils', () => {
-  const originalModule = jest.requireActual('@instructure/ui-utils');
+_vitest.vi.mock('@instructure/ui-utils', async importOriginal => {
+  const originalModule = await importOriginal();
   return {
     __esModule: true,
     ...originalModule,
-    isSafari: jest.fn(() => true)
+    isSafari: _vitest.vi.fn(() => true)
   };
 });
 const mockUtils = utils;
@@ -58,7 +59,7 @@ describe('<Select />', () => {
   let consoleErrorMock;
   beforeEach(() => {
     // Mocking console to prevent test output pollution and expect for messages
-    consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
   });
   afterEach(() => {
     consoleErrorMock.mockRestore();
@@ -72,7 +73,7 @@ describe('<Select />', () => {
     expect(input).toHaveAttribute('role', 'button');
   });
   it('should have role combobox in different browsers than Safari without onInputChange', async () => {
-    mockUtils.isSafari = jest.fn(() => false);
+    mockUtils.isSafari = _vitest.vi.fn(() => false);
     const _render2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
         renderLabel: "Choose an option"
       }, getOptions())),
@@ -305,7 +306,7 @@ describe('<Select />', () => {
       expect(input).toHaveAttribute('autocomplete', 'false');
     });
     it('should provide a ref to the input element', async () => {
-      const inputRef = jest.fn();
+      const inputRef = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
         renderLabel: "Choose an option",
         inputRef: inputRef
@@ -344,7 +345,7 @@ describe('<Select />', () => {
       expect(listbox.tagName).toBe('UL');
     });
     it('should provide a ref to the list element', async () => {
-      const listRef = jest.fn();
+      const listRef = _vitest.vi.fn();
       (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
         renderLabel: "Choose an option",
         isShowingOptions: true,
@@ -359,7 +360,7 @@ describe('<Select />', () => {
   describe('with callbacks', () => {
     describe('should fire onRequestShowOptions', () => {
       it('when root is clicked', async () => {
-        const onRequestShowOptions = jest.fn();
+        const onRequestShowOptions = _vitest.vi.fn();
         const _render8 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
@@ -389,7 +390,7 @@ describe('<Select />', () => {
         });
       });
       it('when input is clicked', async () => {
-        const onRequestShowOptions = jest.fn();
+        const onRequestShowOptions = _vitest.vi.fn();
         const _render9 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
@@ -411,7 +412,7 @@ describe('<Select />', () => {
         });
       });
       it('when up/down arrows are pressed', async () => {
-        const onRequestShowOptions = jest.fn();
+        const onRequestShowOptions = _vitest.vi.fn();
         (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
           renderLabel: "Choose an option",
           onRequestShowOptions: onRequestShowOptions
@@ -427,7 +428,7 @@ describe('<Select />', () => {
         });
       });
       it('when space is pressed', async () => {
-        const onRequestShowOptions = jest.fn();
+        const onRequestShowOptions = _vitest.vi.fn();
         const _render10 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
             renderLabel: "Choose an option",
             onRequestShowOptions: onRequestShowOptions
@@ -451,7 +452,7 @@ describe('<Select />', () => {
     });
     describe('should fire onRequestHideOptions', () => {
       it('when root is clicked and isShowingOptions is true', async () => {
-        const onRequestHideOptions = jest.fn();
+        const onRequestHideOptions = _vitest.vi.fn();
         const _render11 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
             renderLabel: "Choose an option",
             isShowingOptions: true,
@@ -472,7 +473,7 @@ describe('<Select />', () => {
         });
       });
       it('when root is clicked and isShowingOptions is false should NOT fire onRequestHideOptions', async () => {
-        const onRequestHideOptions = jest.fn();
+        const onRequestHideOptions = _vitest.vi.fn();
         (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
           renderLabel: "Choose an option",
           isShowingOptions: false,
@@ -486,7 +487,7 @@ describe('<Select />', () => {
         });
       });
       it('when input is clicked', async () => {
-        const onRequestHideOptions = jest.fn();
+        const onRequestHideOptions = _vitest.vi.fn();
         const _render12 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
             renderLabel: "Choose an option",
             isShowingOptions: true,
@@ -509,7 +510,7 @@ describe('<Select />', () => {
         });
       });
       it('when escape is pressed', async () => {
-        const onRequestHideOptions = jest.fn();
+        const onRequestHideOptions = _vitest.vi.fn();
         (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
           renderLabel: "Choose an option",
           isShowingOptions: true,
@@ -524,7 +525,7 @@ describe('<Select />', () => {
     });
     describe('should fire onRequestHighlightOption', () => {
       it('when options are hovered', async () => {
-        const onRequestHighlightOption = jest.fn();
+        const onRequestHighlightOption = _vitest.vi.fn();
         (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
           renderLabel: "Choose an option",
           isShowingOptions: true,
@@ -547,7 +548,7 @@ describe('<Select />', () => {
     });
     describe('input callbacks', () => {
       it('should fire onInputChange when input is typed in', async () => {
-        const onInputChange = jest.fn();
+        const onInputChange = _vitest.vi.fn();
         (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
           renderLabel: "Choose an option",
           onInputChange: onInputChange
@@ -559,7 +560,7 @@ describe('<Select />', () => {
         });
       });
       it('should fire onFocus when input gains focus', async () => {
-        const onFocus = jest.fn();
+        const onFocus = _vitest.vi.fn();
         (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
           renderLabel: "Choose an option",
           onFocus: onFocus

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "9.2.1-snapshot-1",
+  "version": "9.2.1-snapshot-3",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,35 +23,36 @@
   },
   "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-scripts": "9.2.1-snapshot-1",
-    "@instructure/ui-test-locator": "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-3",
+    "@instructure/ui-babel-preset": "9.2.1-snapshot-3",
+    "@instructure/ui-color-utils": "9.2.1-snapshot-3",
+    "@instructure/ui-scripts": "9.2.1-snapshot-3",
+    "@instructure/ui-test-locator": "9.2.1-snapshot-3",
+    "@instructure/ui-test-utils": "9.2.1-snapshot-3",
+    "@instructure/ui-themes": "9.2.1-snapshot-3",
     "@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/emotion": "9.2.1-snapshot-1",
-    "@instructure/shared-types": "9.2.1-snapshot-1",
-    "@instructure/ui-dom-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-form-field": "9.2.1-snapshot-1",
-    "@instructure/ui-icons": "9.2.1-snapshot-1",
-    "@instructure/ui-options": "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-selectable": "9.2.1-snapshot-1",
-    "@instructure/ui-testable": "9.2.1-snapshot-1",
-    "@instructure/ui-text-input": "9.2.1-snapshot-1",
-    "@instructure/ui-utils": "9.2.1-snapshot-1",
-    "@instructure/ui-view": "9.2.1-snapshot-1",
-    "@instructure/uid": "9.2.1-snapshot-1",
+    "@instructure/emotion": "9.2.1-snapshot-3",
+    "@instructure/shared-types": "9.2.1-snapshot-3",
+    "@instructure/ui-dom-utils": "9.2.1-snapshot-3",
+    "@instructure/ui-form-field": "9.2.1-snapshot-3",
+    "@instructure/ui-icons": "9.2.1-snapshot-3",
+    "@instructure/ui-options": "9.2.1-snapshot-3",
+    "@instructure/ui-popover": "9.2.1-snapshot-3",
+    "@instructure/ui-position": "9.2.1-snapshot-3",
+    "@instructure/ui-prop-types": "9.2.1-snapshot-3",
+    "@instructure/ui-react-utils": "9.2.1-snapshot-3",
+    "@instructure/ui-selectable": "9.2.1-snapshot-3",
+    "@instructure/ui-testable": "9.2.1-snapshot-3",
+    "@instructure/ui-text-input": "9.2.1-snapshot-3",
+    "@instructure/ui-utils": "9.2.1-snapshot-3",
+    "@instructure/ui-view": "9.2.1-snapshot-3",
+    "@instructure/uid": "9.2.1-snapshot-3",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

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

@@ -23,6 +23,8 @@
  */
 import React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
+import type { MockInstance } from 'vitest'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
 
@@ -53,24 +55,25 @@ const getOptions = (
     </Select.Option>
   ))
 
-jest.mock('@instructure/ui-utils', () => {
-  const originalModule = jest.requireActual('@instructure/ui-utils')
-
+vi.mock('@instructure/ui-utils', async (importOriginal) => {
+  const originalModule = (await importOriginal()) as any
   return {
     __esModule: true,
     ...originalModule,
-    isSafari: jest.fn(() => true)
+    isSafari: vi.fn(() => true)
   }
 })
 
-const mockUtils = utils as jest.Mocked<typeof utils>
+const mockUtils = utils as any
 
 describe('<Select />', () => {
-  let consoleErrorMock: jest.SpyInstance
+  let consoleErrorMock: ReturnType<typeof vi.spyOn>
 
   beforeEach(() => {
     // Mocking console to prevent test output pollution and expect for messages
-    consoleErrorMock = jest.spyOn(console, 'error').mockImplementation()
+    consoleErrorMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {}) as MockInstance
   })
 
   afterEach(() => {
@@ -86,7 +89,7 @@ describe('<Select />', () => {
   })
 
   it('should have role combobox in different browsers than Safari without onInputChange', async () => {
-    mockUtils.isSafari = jest.fn(() => false)
+    mockUtils.isSafari = vi.fn(() => false)
 
     const { container } = render(
       <Select renderLabel="Choose an option">{getOptions()}</Select>
@@ -366,7 +369,7 @@ describe('<Select />', () => {
     })
 
     it('should provide a ref to the input element', async () => {
-      const inputRef = jest.fn()
+      const inputRef = vi.fn()
 
       render(
         <Select renderLabel="Choose an option" inputRef={inputRef}>
@@ -419,7 +422,7 @@ describe('<Select />', () => {
     })
 
     it('should provide a ref to the list element', async () => {
-      const listRef = jest.fn()
+      const listRef = vi.fn()
 
       render(
         <Select
@@ -442,7 +445,7 @@ describe('<Select />', () => {
   describe('with callbacks', () => {
     describe('should fire onRequestShowOptions', () => {
       it('when root is clicked', async () => {
-        const onRequestShowOptions = jest.fn()
+        const onRequestShowOptions = vi.fn()
 
         const { container, rerender } = render(
           <Select
@@ -486,7 +489,7 @@ describe('<Select />', () => {
       })
 
       it('when input is clicked', async () => {
-        const onRequestShowOptions = jest.fn()
+        const onRequestShowOptions = vi.fn()
 
         const { rerender } = render(
           <Select
@@ -521,7 +524,7 @@ describe('<Select />', () => {
       })
 
       it('when up/down arrows are pressed', async () => {
-        const onRequestShowOptions = jest.fn()
+        const onRequestShowOptions = vi.fn()
 
         render(
           <Select
@@ -546,7 +549,7 @@ describe('<Select />', () => {
       })
 
       it('when space is pressed', async () => {
-        const onRequestShowOptions = jest.fn()
+        const onRequestShowOptions = vi.fn()
 
         const { rerender } = render(
           <Select
@@ -583,7 +586,7 @@ describe('<Select />', () => {
 
     describe('should fire onRequestHideOptions', () => {
       it('when root is clicked and isShowingOptions is true', async () => {
-        const onRequestHideOptions = jest.fn()
+        const onRequestHideOptions = vi.fn()
 
         const { container } = render(
           <Select
@@ -613,7 +616,7 @@ describe('<Select />', () => {
       })
 
       it('when root is clicked and isShowingOptions is false should NOT fire onRequestHideOptions', async () => {
-        const onRequestHideOptions = jest.fn()
+        const onRequestHideOptions = vi.fn()
 
         render(
           <Select
@@ -636,7 +639,7 @@ describe('<Select />', () => {
       })
 
       it('when input is clicked', async () => {
-        const onRequestHideOptions = jest.fn()
+        const onRequestHideOptions = vi.fn()
 
         const { rerender } = render(
           <Select
@@ -671,7 +674,7 @@ describe('<Select />', () => {
       })
 
       it('when escape is pressed', async () => {
-        const onRequestHideOptions = jest.fn()
+        const onRequestHideOptions = vi.fn()
 
         render(
           <Select
@@ -694,7 +697,7 @@ describe('<Select />', () => {
 
     describe('should fire onRequestHighlightOption', () => {
       it('when options are hovered', async () => {
-        const onRequestHighlightOption = jest.fn()
+        const onRequestHighlightOption = vi.fn()
 
         render(
           <Select
@@ -731,7 +734,7 @@ describe('<Select />', () => {
 
     describe('input callbacks', () => {
       it('should fire onInputChange when input is typed in', async () => {
-        const onInputChange = jest.fn()
+        const onInputChange = vi.fn()
 
         render(
           <Select renderLabel="Choose an option" onInputChange={onInputChange}>
@@ -748,7 +751,7 @@ describe('<Select />', () => {
       })
 
       it('should fire onFocus when input gains focus', async () => {
-        const onFocus = jest.fn()
+        const onFocus = vi.fn()
 
         render(
           <Select renderLabel="Choose an option" onFocus={onFocus}>