@instructure/ui-select 9.0.2-snapshot-7 → 9.0.2-snapshot-10

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

@@ -1,12 +1,17 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 require("@testing-library/jest-dom");
+var _generateA11yTests = require("@instructure/ui-scripts/lib/test/generateA11yTests");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
 var _index = _interopRequireDefault(require("../index"));
+var _Select8 = _interopRequireDefault(require("../__examples__/Select.examples"));
 var utils = _interopRequireWildcard(require("@instructure/ui-utils"));
+var _Select, _Select2, _Select3, _Select4, _Select5, _Select6, _Select7;
 /*
  * The MIT License (MIT)
  *
@@ -30,7 +35,16 @@ var utils = _interopRequireWildcard(require("@instructure/ui-utils"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
+// eslint-disable-next-line no-restricted-imports
+const defaultOptions = ['foo', 'bar', 'baz'];
+const getOptions = (highlighted, selected, disabled) => defaultOptions.map(opt => /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+  id: opt,
+  key: opt,
+  value: opt,
+  isHighlighted: opt === highlighted,
+  isSelected: opt === selected,
+  isDisabled: opt === disabled
+}, opt));
 jest.mock('@instructure/ui-utils', () => {
   const originalModule = jest.requireActual('@instructure/ui-utils');
   return {
@@ -41,13 +55,14 @@ jest.mock('@instructure/ui-utils', () => {
 });
 const mockUtils = utils;
 describe('<Select />', () => {
-  const defaultOptions = ['foo', 'bar', 'baz'];
-  const getOptions = disabled => defaultOptions.map(opt => /*#__PURE__*/_react.default.createElement(_index.default.Option, {
-    id: opt,
-    key: opt,
-    value: opt,
-    isDisabled: opt === disabled
-  }, opt));
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
+  });
+  afterEach(() => {
+    consoleErrorMock.mockRestore();
+  });
   it('should have role button in Safari without onInputChange', async () => {
     const _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
         renderLabel: "Choose an option"
@@ -76,4 +91,496 @@ describe('<Select />', () => {
     const input = container.querySelector('input');
     expect(input).toHaveAttribute('role', 'combobox');
   });
+  it('should render an input and a list', async () => {
+    const _render4 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        isShowingOptions: true,
+        "data-testid": "subidubi"
+      }, getOptions())),
+      container = _render4.container;
+    const select = container.querySelector('span[class$="-select"]');
+    const label = _react2.screen.getByLabelText('Choose an option');
+    const input = container.querySelector('input[id^="Select_"]');
+    const list = _react2.screen.getByRole('listbox');
+    const options = _react2.screen.getAllByRole('option');
+    const optionsCount = defaultOptions.length;
+    expect(select).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+    expect(input).toBeInTheDocument();
+    expect(list).toBeInTheDocument();
+    expect(options.length).toBe(optionsCount);
+    expect(options[0]).toHaveTextContent(defaultOptions[0]);
+    expect(options[1]).toHaveTextContent(defaultOptions[1]);
+    expect(options[2]).toHaveTextContent(defaultOptions[2]);
+  });
+  it('should render groups', async () => {
+    (0, _react2.render)(_Select || (_Select = /*#__PURE__*/_react.default.createElement(_index.default, {
+      renderLabel: "Choose an option",
+      isShowingOptions: true
+    }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "0"
+    }, "ungrouped option one"), /*#__PURE__*/_react.default.createElement(_index.default.Group, {
+      renderLabel: "Group one"
+    }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "1"
+    }, "grouped option one")), /*#__PURE__*/_react.default.createElement(_index.default.Group, {
+      renderLabel: "Group two"
+    }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "2"
+    }, "grouped option two")), /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "3"
+    }, "ungrouped option two"))));
+    const groups = _react2.screen.getAllByRole('group');
+    const groupLabel = _react2.screen.getByText('Group one');
+    expect(groupLabel).toHaveAttribute('role', 'presentation');
+    expect(groups[0].getAttribute('aria-labelledby')).toEqual(groupLabel.getAttribute('id'));
+    expect(groups.length).toBe(2);
+  });
+  it('should ignore invalid children', async () => {
+    (0, _react2.render)(_Select2 || (_Select2 = /*#__PURE__*/_react.default.createElement(_index.default, {
+      renderLabel: "Choose an option",
+      isShowingOptions: true
+    }, /*#__PURE__*/_react.default.createElement(_index.default.Option, {
+      id: "0"
+    }, "valid"), /*#__PURE__*/_react.default.createElement("div", null, "invalid"))));
+    const invalidChild = _react2.screen.queryByText('invalid');
+    expect(invalidChild).not.toBeInTheDocument();
+    const expectedErrorMessage = 'Expected one of Group, Option';
+    expect(consoleErrorMock).toHaveBeenCalledWith(expect.any(String), expect.any(String), expect.stringContaining(expectedErrorMessage), expect.any(String));
+  });
+  it('should provide a focus method', async () => {
+    var _ref$current;
+    const ref = /*#__PURE__*/_react.default.createRef();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+      renderLabel: "Choose an option",
+      ref: ref
+    }, getOptions()));
+    const input = _react2.screen.getByLabelText('Choose an option');
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+    await (0, _react2.waitFor)(() => {
+      expect(document.activeElement).toBe(input);
+    });
+  });
+  it('should provide a focused getter', async () => {
+    var _ref$current2, _ref$current3;
+    const ref = /*#__PURE__*/_react.default.createRef();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+      renderLabel: "Choose an option",
+      ref: ref
+    }, getOptions()));
+    expect((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focused).toBe(false);
+    (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.focus();
+    await (0, _react2.waitFor)(() => {
+      var _ref$current4;
+      expect((_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.focused).toBe(true);
+    });
+  });
+  describe('input', () => {
+    it('should render with a generated id by default', () => {
+      const _render5 = (0, _react2.render)(_Select3 || (_Select3 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option"
+        }))),
+        container = _render5.container;
+      const input = container.querySelector('input[id^="Select_"]');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveAttribute('id', expect.stringContaining('Select_'));
+    });
+    it('should render with a custom id if given', () => {
+      const _render6 = (0, _react2.render)(_Select4 || (_Select4 = /*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          id: "customSelect"
+        }))),
+        container = _render6.container;
+      const input = container.querySelector('input[id^="customSelect"]');
+      expect(input).toBeInTheDocument();
+      expect(input.getAttribute('id')).toEqual('customSelect');
+    });
+    it('should render readonly when interaction="enabled" with no onInputChange', () => {
+      (0, _react2.render)(_Select5 || (_Select5 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option"
+      })));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('readonly');
+      expect(input).not.toHaveAttribute('disabled');
+    });
+    it('should not render readonly when interaction="enabled" with onInputChange', () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        onInputChange: () => {}
+      }));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).not.toHaveAttribute('readonly');
+      expect(input).not.toHaveAttribute('disabled');
+    });
+    it('should render readonly when interaction="readonly"', () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        interaction: "readonly",
+        onInputChange: () => {}
+      }));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('readonly');
+      expect(input).not.toHaveAttribute('disabled');
+    });
+    it('should render disabled when interaction="disabled"', () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        interaction: "disabled",
+        onInputChange: () => {}
+      }));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('disabled');
+      expect(input).not.toHaveAttribute('readonly');
+    });
+    it('should not render readonly when disabled', () => {
+      (0, _react2.render)(_Select6 || (_Select6 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        interaction: "disabled"
+      })));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('disabled');
+      expect(input).not.toHaveAttribute('readonly');
+    });
+    it('should render required when isRequired={true}', () => {
+      (0, _react2.render)(_Select7 || (_Select7 = /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        isRequired: true
+      })));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('required');
+    });
+    it('should render with inputValue', () => {
+      const val = 'hello world';
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        inputValue: val
+      }));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('value', val);
+    });
+    it('should set aria-activedescendant based on the highlighted option', () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        isShowingOptions: true
+      }, getOptions(defaultOptions[1])));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('aria-activedescendant', defaultOptions[1]);
+    });
+    it('should not set aria-activedescendant when not showing options', () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option"
+      }, getOptions(defaultOptions[1])));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).not.toHaveAttribute('aria-activedescendant');
+    });
+    it('should allow assistive text', () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        assistiveText: "hello world"
+      }, getOptions()));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      const assistiveText = _react2.screen.getByText('hello world');
+      const assistiveTextId = assistiveText.getAttribute('id');
+      expect(input).toHaveAttribute('aria-describedby', assistiveTextId);
+    });
+    it('should allow custom props to pass through', () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        "data-custom-attr": "true"
+      }, getOptions()));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('data-custom-attr', 'true');
+    });
+    it('should allow override of autoComplete prop', () => {
+      const _render7 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option"
+        }, getOptions())),
+        rerender = _render7.rerender;
+      const input = _react2.screen.getByLabelText('Choose an option');
+      expect(input).toHaveAttribute('autocomplete', 'off');
+      rerender( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        autoComplete: "false"
+      }, getOptions()));
+      expect(input).toHaveAttribute('autocomplete', 'false');
+    });
+    it('should provide a ref to the input element', async () => {
+      const inputRef = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        inputRef: inputRef
+      }, getOptions()));
+      const input = _react2.screen.getByLabelText('Choose an option');
+      await (0, _react2.waitFor)(() => {
+        expect(inputRef).toHaveBeenCalledWith(input);
+      });
+    });
+  });
+  describe('list', () => {
+    it('should set aria-selected on options with isSelected={true}', () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        isShowingOptions: true
+      }, getOptions(void 0, defaultOptions[1])));
+      const options = _react2.screen.getAllByRole('option');
+      expect(options[1].getAttribute('aria-selected')).toEqual('true');
+    });
+    it('should set aria-disabled on options when isDisabled={true}', () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        isShowingOptions: true
+      }, getOptions(void 0, void 0, defaultOptions[2])));
+      const options = _react2.screen.getAllByRole('option');
+      expect(options[0]).not.toHaveAttribute('aria-disabled');
+      expect(options[2]).toHaveAttribute('aria-disabled', 'true');
+    });
+    it('should set list element role to "listbox"', async () => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        isShowingOptions: true
+      }, getOptions()));
+      const listbox = _react2.screen.getByRole('listbox');
+      expect(listbox).toBeInTheDocument();
+      expect(listbox.tagName).toBe('UL');
+    });
+    it('should provide a ref to the list element', async () => {
+      const listRef = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+        renderLabel: "Choose an option",
+        isShowingOptions: true,
+        listRef: listRef
+      }, getOptions()));
+      const listbox = _react2.screen.getByRole('listbox');
+      await (0, _react2.waitFor)(() => {
+        expect(listRef).toHaveBeenCalledWith(listbox);
+      });
+    });
+  });
+  describe('with callbacks', () => {
+    describe('should fire onRequestShowOptions', () => {
+      it('when root is clicked', async () => {
+        const onRequestShowOptions = jest.fn();
+        const _render8 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+            renderLabel: "Choose an option",
+            onRequestShowOptions: onRequestShowOptions
+          }, getOptions())),
+          container = _render8.container,
+          rerender = _render8.rerender;
+        const icon = container.querySelector('svg[name="IconArrowOpenDown"]');
+        const label = _react2.screen.getByText('Choose an option');
+        expect(icon).toBeInTheDocument();
+        expect(label).toBeInTheDocument();
+        await _userEvent.default.click(label);
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+        await _userEvent.default.click(icon);
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(2);
+        });
+        rerender( /*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          onRequestShowOptions: onRequestShowOptions,
+          isShowingOptions: true
+        }, getOptions()));
+        await _userEvent.default.click(label);
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(2);
+        });
+      });
+      it('when input is clicked', async () => {
+        const onRequestShowOptions = jest.fn();
+        const _render9 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+            renderLabel: "Choose an option",
+            onRequestShowOptions: onRequestShowOptions
+          }, getOptions())),
+          rerender = _render9.rerender;
+        const input = _react2.screen.getByLabelText('Choose an option');
+        await _userEvent.default.click(input);
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+        rerender( /*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          onRequestShowOptions: onRequestShowOptions,
+          isShowingOptions: true
+        }, getOptions()));
+        await _userEvent.default.click(input);
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+      });
+      it('when up/down arrows are pressed', async () => {
+        const onRequestShowOptions = jest.fn();
+        (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          onRequestShowOptions: onRequestShowOptions
+        }, getOptions()));
+        const input = _react2.screen.getByLabelText('Choose an option');
+        await _userEvent.default.type(input, '{arrowdown}');
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+        await _userEvent.default.type(input, '{arrowup}');
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(2);
+        });
+      });
+      it('when space is pressed', async () => {
+        const onRequestShowOptions = jest.fn();
+        const _render10 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+            renderLabel: "Choose an option",
+            onRequestShowOptions: onRequestShowOptions
+          }, getOptions())),
+          rerender = _render10.rerender;
+        const input = _react2.screen.getByLabelText('Choose an option');
+        await _userEvent.default.type(input, '{space}');
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+        rerender( /*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          onRequestShowOptions: onRequestShowOptions,
+          isShowingOptions: true
+        }, getOptions()));
+        await _userEvent.default.type(input, '{space}');
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestShowOptions).toHaveBeenCalledTimes(1);
+        });
+      });
+    });
+    describe('should fire onRequestHideOptions', () => {
+      it('when root is clicked and isShowingOptions is true', async () => {
+        const onRequestHideOptions = jest.fn();
+        const _render11 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+            renderLabel: "Choose an option",
+            isShowingOptions: true,
+            onRequestHideOptions: onRequestHideOptions
+          }, getOptions())),
+          container = _render11.container;
+        const icon = container.querySelector('svg[name="IconArrowOpenUp"]');
+        const label = _react2.screen.getByText('Choose an option');
+        expect(icon).toBeInTheDocument();
+        expect(label).toBeInTheDocument();
+        await _userEvent.default.click(label);
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
+        });
+        await _userEvent.default.click(icon);
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestHideOptions).toHaveBeenCalledTimes(2);
+        });
+      });
+      it('when root is clicked and isShowingOptions is false should NOT fire onRequestHideOptions', async () => {
+        const onRequestHideOptions = jest.fn();
+        (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isShowingOptions: false,
+          onRequestHideOptions: onRequestHideOptions
+        }, getOptions()));
+        const label = _react2.screen.getByText('Choose an option');
+        expect(label).toBeInTheDocument();
+        await _userEvent.default.click(label);
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestHideOptions).not.toHaveBeenCalled();
+        });
+      });
+      it('when input is clicked', async () => {
+        const onRequestHideOptions = jest.fn();
+        const _render12 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+            renderLabel: "Choose an option",
+            isShowingOptions: true,
+            onRequestHideOptions: onRequestHideOptions
+          }, getOptions())),
+          rerender = _render12.rerender;
+        const input = _react2.screen.getByLabelText('Choose an option');
+        await _userEvent.default.click(input);
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
+        });
+        rerender( /*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isShowingOptions: false,
+          onRequestHideOptions: onRequestHideOptions
+        }, getOptions()));
+        await _userEvent.default.click(input);
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
+        });
+      });
+      it('when escape is pressed', async () => {
+        const onRequestHideOptions = jest.fn();
+        (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isShowingOptions: true,
+          onRequestHideOptions: onRequestHideOptions
+        }, getOptions()));
+        const input = _react2.screen.getByLabelText('Choose an option');
+        await _userEvent.default.type(input, '{esc}');
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestHideOptions).toHaveBeenCalledTimes(1);
+        });
+      });
+    });
+    describe('should fire onRequestHighlightOption', () => {
+      it('when options are hovered', async () => {
+        const onRequestHighlightOption = jest.fn();
+        (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          isShowingOptions: true,
+          onRequestHighlightOption: onRequestHighlightOption
+        }, getOptions()));
+        const options = _react2.screen.getAllByRole('option');
+        await _userEvent.default.hover(options[0]);
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestHighlightOption).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({
+            id: defaultOptions[0]
+          }));
+        });
+        await _userEvent.default.hover(options[1]);
+        await (0, _react2.waitFor)(() => {
+          expect(onRequestHighlightOption).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({
+            id: defaultOptions[1]
+          }));
+        });
+      });
+    });
+    describe('input callbacks', () => {
+      it('should fire onInputChange when input is typed in', async () => {
+        const onInputChange = jest.fn();
+        (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          onInputChange: onInputChange
+        }, getOptions()));
+        const input = _react2.screen.getByLabelText('Choose an option');
+        await _userEvent.default.type(input, 'h');
+        await (0, _react2.waitFor)(() => {
+          expect(onInputChange).toHaveBeenCalled();
+        });
+      });
+      it('should fire onFocus when input gains focus', async () => {
+        const onFocus = jest.fn();
+        (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, {
+          renderLabel: "Choose an option",
+          onFocus: onFocus
+        }, getOptions()));
+        const input = _react2.screen.getByLabelText('Choose an option');
+        input.focus();
+        await (0, _react2.waitFor)(() => {
+          expect(onFocus).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+  describe('with generated examples', () => {
+    const generatedComponents = (0, _generateA11yTests.generateA11yTests)(_index.default, _Select8.default);
+    it.each(generatedComponents)('should be accessible with example: $description', async ({
+      content
+    }) => {
+      const _render13 = (0, _react2.render)(content),
+        container = _render13.container;
+      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      expect(axeCheck).toBe(true);
+    });
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-select",
-  "version": "9.0.2-snapshot-7",
+  "version": "9.0.2-snapshot-10",
   "description": "A component for select and autocomplete behavior.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,32 +23,35 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "9.0.2-snapshot-7",
-    "@instructure/ui-color-utils": "9.0.2-snapshot-7",
-    "@instructure/ui-test-locator": "9.0.2-snapshot-7",
-    "@instructure/ui-test-utils": "9.0.2-snapshot-7",
-    "@instructure/ui-themes": "9.0.2-snapshot-7",
+    "@instructure/ui-axe-check": "9.0.2-snapshot-10",
+    "@instructure/ui-babel-preset": "9.0.2-snapshot-10",
+    "@instructure/ui-color-utils": "9.0.2-snapshot-10",
+    "@instructure/ui-scripts": "9.0.2-snapshot-10",
+    "@instructure/ui-test-locator": "9.0.2-snapshot-10",
+    "@instructure/ui-test-utils": "9.0.2-snapshot-10",
+    "@instructure/ui-themes": "9.0.2-snapshot-10",
     "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7"
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "9.0.2-snapshot-7",
-    "@instructure/shared-types": "9.0.2-snapshot-7",
-    "@instructure/ui-dom-utils": "9.0.2-snapshot-7",
-    "@instructure/ui-form-field": "9.0.2-snapshot-7",
-    "@instructure/ui-icons": "9.0.2-snapshot-7",
-    "@instructure/ui-options": "9.0.2-snapshot-7",
-    "@instructure/ui-popover": "9.0.2-snapshot-7",
-    "@instructure/ui-position": "9.0.2-snapshot-7",
-    "@instructure/ui-prop-types": "9.0.2-snapshot-7",
-    "@instructure/ui-react-utils": "9.0.2-snapshot-7",
-    "@instructure/ui-selectable": "9.0.2-snapshot-7",
-    "@instructure/ui-testable": "9.0.2-snapshot-7",
-    "@instructure/ui-text-input": "9.0.2-snapshot-7",
-    "@instructure/ui-utils": "9.0.2-snapshot-7",
-    "@instructure/ui-view": "9.0.2-snapshot-7",
-    "@instructure/uid": "9.0.2-snapshot-7",
+    "@instructure/emotion": "9.0.2-snapshot-10",
+    "@instructure/shared-types": "9.0.2-snapshot-10",
+    "@instructure/ui-dom-utils": "9.0.2-snapshot-10",
+    "@instructure/ui-form-field": "9.0.2-snapshot-10",
+    "@instructure/ui-icons": "9.0.2-snapshot-10",
+    "@instructure/ui-options": "9.0.2-snapshot-10",
+    "@instructure/ui-popover": "9.0.2-snapshot-10",
+    "@instructure/ui-position": "9.0.2-snapshot-10",
+    "@instructure/ui-prop-types": "9.0.2-snapshot-10",
+    "@instructure/ui-react-utils": "9.0.2-snapshot-10",
+    "@instructure/ui-selectable": "9.0.2-snapshot-10",
+    "@instructure/ui-testable": "9.0.2-snapshot-10",
+    "@instructure/ui-text-input": "9.0.2-snapshot-10",
+    "@instructure/ui-utils": "9.0.2-snapshot-10",
+    "@instructure/ui-view": "9.0.2-snapshot-10",
+    "@instructure/uid": "9.0.2-snapshot-10",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {