@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

package/lib/cjs/components/ComboBoxField/ComboBoxField.test.js

@@ -0,0 +1,1133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _startsWith = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/starts-with"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _i18n = require("@react-aria/i18n");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _index = require("../../index");
+
+var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
+
+var _react3 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context7, _context8; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty2(_context7 = ownKeys(Object(source), !0)).call(_context7, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty2(_context8 = ownKeys(Object(source))).call(_context8, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var items = [{
+  name: 'Aardvark',
+  id: '1'
+}, {
+  name: 'Kangaroo',
+  id: '2'
+}, {
+  name: 'Snake',
+  id: '3'
+}];
+var defaultProps = {
+  defaultItems: items,
+  label: 'Test Label'
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
+
+  return renderFn((0, _react3.jsx)(_index.OverlayProvider, null, (0, _react3.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, defaultProps, props), function (item) {
+    return (0, _react3.jsx)(_index.Item, (0, _extends2["default"])({}, item, {
+      key: item.id,
+      "data-id": item.name
+    }), item.name);
+  })));
+};
+
+var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
+  var _useFilter = (0, _i18n.useFilter)({
+    sensitivity: 'base'
+  }),
+      startsWith = (0, _startsWith["default"])(_useFilter);
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      filterValue = _useState2[0],
+      setFilterValue = _useState2[1];
+
+  var filteredItems = (0, _react.useMemo)(function () {
+    return (0, _filter["default"])(items).call(items, function (item) {
+      return startsWith(item.name, filterValue);
+    });
+  }, [startsWith, filterValue]);
+  return (0, _react3.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, defaultProps, {
+    items: filteredItems,
+    inputValue: filterValue,
+    onInputChange: setFilterValue
+  }), function (item) {
+    return (0, _react3.jsx)(_index.Item, {
+      id: item.id
+    }, item.name);
+  });
+};
+
+var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
+  var _useState3 = (0, _react.useState)(items),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      options = _useState4[0],
+      setOptions = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      inputValue = _useState6[0],
+      setInputValue = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      selectedKey = _useState8[0],
+      setSelectedKey = _useState8[1];
+
+  var onSelectionChange = function onSelectionChange(key) {
+    if (key && !(0, _find["default"])(options).call(options, function (_ref2) {
+      var name = _ref2.name;
+      return name === key;
+    })) {
+      var _context;
+
+      setOptions((0, _concat["default"])(_context = []).call(_context, options, [{
+        key: key,
+        name: key
+      }]));
+    }
+
+    setInputValue(key);
+    setSelectedKey(key);
+  };
+
+  return (0, _react3.jsx)(_index.ComboBoxField, {
+    label: "Example label",
+    defaultItems: options,
+    inputValue: inputValue,
+    selectedKey: selectedKey,
+    onInputChange: setInputValue,
+    onSelectionChange: onSelectionChange,
+    hasAddOption: true
+  }, function (item) {
+    return (0, _react3.jsx)(_index.Item, {
+      key: item.name
+    }, item.name);
+  });
+};
+
+beforeAll(function () {
+  jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  jest.spyOn(window.screen, 'width', 'get').mockImplementation(function () {
+    return 1024;
+  });
+  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
+    return cb();
+  });
+  jest.useFakeTimers();
+});
+afterEach(function () {
+  jest.clearAllMocks();
+});
+afterAll(function () {
+  jest.restoreAllMocks();
+});
+test('renders ComboBoxField component', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  var label = _testWrapper.screen.getByText(defaultProps.label);
+
+  var button = _testWrapper.screen.queryByRole('button');
+
+  expect(input).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByLabelText(defaultProps.label)).toEqual([input, button]);
+  expect(label).toBeInTheDocument();
+  expect(label).toHaveTextContent(defaultProps.label);
+  expect(button).toBeInTheDocument();
+});
+test('should not allow custom value by default', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  expect(input).toHaveValue(''); // type something
+
+  _userEvent["default"].type(input, 'custom'); // blur input
+
+
+  _userEvent["default"].tab();
+
+  expect(input).not.toHaveValue('custom');
+  expect(input).toHaveValue('');
+});
+test('should allow custom value when prop is set', function () {
+  getComponent({
+    hasCustomValue: true
+  });
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  expect(input).toHaveValue(''); // type something
+
+  _userEvent["default"].type(input, 'custom'); // blur input
+
+
+  _userEvent["default"].tab();
+
+  expect(input).toHaveValue('custom');
+});
+test('should disable options based on disabledKeys prop', function () {
+  getComponent({
+    disabledKeys: [items[0].id]
+  });
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  var button = _testWrapper.screen.queryByRole('button'); // Open the list by clicking on the button and ensure first option is not active
+
+
+  _userEvent["default"].click(button);
+
+  var options = _testWrapper.screen.queryAllByRole('option');
+
+  expect(options).toHaveLength(items.length);
+  expect(options[0]).toHaveAttribute('aria-disabled', 'true');
+  expect(options[0]).toHaveClass('is-disabled'); // Expect pointer events to not work
+
+  _userEvent["default"].click(options[0]);
+
+  expect(input).not.toHaveValue(items[0].name);
+});
+test('should be able to open and navigate through the listbox by click', function () {
+  getComponent();
+
+  var button = _testWrapper.screen.queryByRole('button');
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  expect(_testWrapper.screen.queryByRole('combobox')).toHaveValue('');
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument(); // Open the list by clicking on the button and ensure first option is not active
+
+  _userEvent["default"].click(button);
+
+  var options = _testWrapper.screen.queryAllByRole('option');
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument(); // Both dismiss buttons should be available, but the dropdown button should be inaccessible
+
+  expect(_testWrapper.screen.queryAllByRole('button')).toHaveLength(2);
+  expect(options).toHaveLength(items.length);
+  expect(input).not.toHaveAttribute('aria-activedescendant', options[0].id);
+  (0, _forEach["default"])(options).call(options, function (opt) {
+    return expect(opt).not.toHaveClass('is-focused');
+  }); // Ensure active styles are applied
+
+  _userEvent["default"].hover(options[0]);
+
+  expect(input).toHaveAttribute('aria-activedescendant', options[0].id);
+  expect(options[0]).toHaveClass('is-focused'); // Ensure option selection works
+
+  _userEvent["default"].click(options[0]);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(input).toHaveValue(items[0].name); // Option stays focused when the overlay is re-opened
+
+  _userEvent["default"].click(button);
+
+  expect(options[0]).toHaveClass('is-focused');
+});
+test('should be able to open the listbox by keyboard', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  expect(input).toHaveValue('');
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument(); // Open the list by hitting the down arrow key and ensure first option is active
+
+  _userEvent["default"].tab();
+
+  _userEvent["default"].type(input, '{arrowdown}', {
+    skipClick: true
+  });
+
+  var options = _testWrapper.screen.queryAllByRole('option');
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(options).toHaveLength(items.length);
+  expect(input).toHaveAttribute('aria-activedescendant', options[0].id);
+  expect(options[0]).toHaveClass('is-focused'); // Ensure option selection works
+
+  _userEvent["default"].type(input, '{enter}', {
+    skipClick: true
+  });
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('combobox')).toHaveValue(items[0].name);
+});
+test('should open list on focus when menuTrigger is set to use focus', function () {
+  getComponent({
+    menuTrigger: 'focus'
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument(); // Open the list by focusing with tab
+
+  _userEvent["default"].tab();
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(items.length); // blur
+
+  _userEvent["default"].tab();
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument(); // focus with click
+
+  _userEvent["default"].click(input);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(items.length);
+});
+test('should open list on focus on click after selection when menuTrigger is set to use focus', function () {
+  getComponent({
+    menuTrigger: 'focus'
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+
+  _userEvent["default"].click(input);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+
+  _userEvent["default"].click(_testWrapper.screen.queryAllByRole('option')[0]);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(input).toHaveFocus();
+
+  _userEvent["default"].click(input);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+});
+test('Item accepts a data-id and the data-id can be found in the DOM', function () {
+  getComponent();
+
+  var button = _testWrapper.screen.queryByRole('button');
+
+  _userEvent["default"].click(button);
+
+  var options = _testWrapper.screen.queryAllByRole('option');
+
+  expect(options).toHaveLength(items.length);
+  expect(options[0]).toHaveAttribute('data-id', items[0].name);
+});
+test('should invoke onInputChange', function () {
+  var inputValue = 'blah';
+  var onInputChange = jest.fn();
+  getComponent({
+    inputValue: inputValue,
+    onInputChange: onInputChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  expect(input).toHaveValue(inputValue);
+  expect(onInputChange).not.toHaveBeenCalled();
+
+  _userEvent["default"].type(input, 'a');
+
+  var newValue = "".concat(inputValue, "a");
+  expect(onInputChange).toHaveBeenNthCalledWith(1, newValue); // Should not have the new value since we did not update the prop and re-render
+
+  expect(input).not.toHaveValue(newValue);
+});
+test('should invoke onOpenChange on button click', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    onOpenChange: onOpenChange,
+    menuTrigger: 'manual'
+  });
+
+  var button = _testWrapper.screen.queryByRole('button');
+
+  var listbox = _testWrapper.screen.queryByRole('listbox');
+
+  expect(listbox).not.toBeInTheDocument();
+  expect(onOpenChange).not.toHaveBeenCalled(); // Should fire on button click
+
+  _userEvent["default"].click(button);
+
+  expect(onOpenChange).toHaveBeenNthCalledWith(1, true, 'manual');
+});
+test('should invoke onOpenChange on input change', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    onOpenChange: onOpenChange,
+    menuTrigger: 'input'
+  });
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  var listbox = _testWrapper.screen.queryByRole('listbox');
+
+  expect(listbox).not.toBeInTheDocument();
+  expect(onOpenChange).not.toHaveBeenCalled(); // Should fire on input change (default menuTrigger)
+
+  _userEvent["default"].type(input, 'a');
+
+  expect(onOpenChange).toHaveBeenNthCalledWith(1, true, 'input');
+});
+test('should invoke onOpenChange on keyboard arrow down', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    onOpenChange: onOpenChange,
+    menuTrigger: 'manual'
+  });
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  var listbox = _testWrapper.screen.queryByRole('listbox');
+
+  expect(listbox).not.toBeInTheDocument();
+  expect(onOpenChange).not.toHaveBeenCalled(); // Should fire on keyboard interaction
+
+  _userEvent["default"].type(input, '{arrowdown}');
+
+  expect(onOpenChange).toHaveBeenNthCalledWith(1, true, 'manual');
+});
+test('should invoke onOpenChange on keyboard arrow up', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    onOpenChange: onOpenChange,
+    menuTrigger: 'manual'
+  });
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  var listbox = _testWrapper.screen.queryByRole('listbox');
+
+  expect(listbox).not.toBeInTheDocument();
+  expect(onOpenChange).not.toHaveBeenCalled(); // Should fire on keyboard interaction
+
+  _userEvent["default"].type(input, '{arrowup}');
+
+  expect(onOpenChange).toHaveBeenNthCalledWith(1, true, 'manual');
+});
+test('should invoke onSelectionChange when selection is made', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    onSelectionChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  var button = _testWrapper.screen.queryByRole('button');
+
+  expect(onSelectionChange).not.toHaveBeenCalled(); // Should fire on item selection click
+
+  _userEvent["default"].click(button);
+
+  _userEvent["default"].click(_testWrapper.screen.queryAllByRole('option')[2]);
+
+  expect(onSelectionChange).toHaveBeenNthCalledWith(1, items[2].id); // Should fire when input is cleared
+
+  _userEvent["default"].type(input, '{selectall}{backspace}');
+
+  expect(onSelectionChange).toHaveBeenNthCalledWith(2, null); // Should fire on keyboard interaction
+
+  _userEvent["default"].type(input, '{arrowdown}{enter}');
+
+  expect(onSelectionChange).toHaveBeenNthCalledWith(3, items[0].id); // Total number of calls
+
+  expect(onSelectionChange).toHaveBeenCalledTimes(3);
+});
+test('should use default contains filtering', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.queryByRole('combobox'); // Should list all without filterable input
+
+
+  _userEvent["default"].type(input, '{arrowdown}');
+
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(items.length); // Should list all options on default contains filter
+
+  _userEvent["default"].type(input, 'k');
+
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(items.length); // Should list no options when none match
+
+  _userEvent["default"].type(input, 'z');
+
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+});
+test('should be able to use controlled filtering', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var options, input;
+  return _regenerator["default"].wrap(function _callee$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          (0, _testWrapper.render)((0, _react3.jsx)(ComboBoxWithCustomFilter, null));
+          input = _testWrapper.screen.queryByRole('combobox'); // Should list all without filterable input
+
+          _userEvent["default"].type(input, '{arrowdown}');
+
+          _context2.next = 5;
+          return _testWrapper.screen.findAllByRole('option');
+
+        case 5:
+          options = _context2.sent;
+          expect(options).toHaveLength(items.length); // Should only list the second option
+
+          _userEvent["default"].type(input, 'k');
+
+          _context2.next = 10;
+          return _testWrapper.screen.findAllByRole('option');
+
+        case 10:
+          options = _context2.sent;
+          expect(options[0]).toHaveTextContent(items[1].name);
+
+        case 12:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee);
+})));
+test('should be able to use custom default filtering', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+  var options, defaultFilter, input;
+  return _regenerator["default"].wrap(function _callee2$(_context3) {
+    while (1) {
+      switch (_context3.prev = _context3.next) {
+        case 0:
+          defaultFilter = function defaultFilter(option, inputValue) {
+            return (0, _startsWith["default"])(option).call(option, inputValue);
+          };
+
+          getComponent({
+            defaultFilter: defaultFilter
+          });
+          input = _testWrapper.screen.queryByRole('combobox'); // Should list all without filterable input
+
+          _userEvent["default"].type(input, '{arrowdown}');
+
+          _context3.next = 6;
+          return _testWrapper.screen.findAllByRole('option');
+
+        case 6:
+          options = _context3.sent;
+          expect(options).toHaveLength(items.length); // Should only list the second option
+
+          _userEvent["default"].type(input, 'K');
+
+          _context3.next = 11;
+          return _testWrapper.screen.findAllByRole('option');
+
+        case 11:
+          options = _context3.sent;
+          expect(options[0]).toHaveTextContent(items[1].name);
+
+        case 13:
+        case "end":
+          return _context3.stop();
+      }
+    }
+  }, _callee2);
+})));
+test('should show in input "textValue" if provided', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+  var newItems, input, options;
+  return _regenerator["default"].wrap(function _callee3$(_context4) {
+    while (1) {
+      switch (_context4.prev = _context4.next) {
+        case 0:
+          newItems = (0, _map["default"])(items).call(items, function (item) {
+            return _objectSpread(_objectSpread({}, item), {}, {
+              textValue: item.id
+            });
+          });
+          getComponent({
+            items: newItems
+          });
+          input = _testWrapper.screen.queryByRole('combobox');
+
+          _userEvent["default"].click(input);
+
+          _context4.next = 6;
+          return _testWrapper.screen.findAllByRole('option');
+
+        case 6:
+          options = _context4.sent;
+
+          _userEvent["default"].click(options[0]);
+
+          expect(input).toHaveValue(newItems[0].textValue); // Check that on clicking again "textValue" still returning
+
+          _userEvent["default"].click(options[0]);
+
+          expect(input).toHaveValue(newItems[0].textValue);
+
+        case 11:
+        case "end":
+          return _context4.stop();
+      }
+    }
+  }, _callee3);
+})));
+test('option list should be opened on scroll input value', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+  var options, otherItems, input;
+  return _regenerator["default"].wrap(function _callee4$(_context5) {
+    while (1) {
+      switch (_context5.prev = _context5.next) {
+        case 0:
+          otherItems = [{
+            name: 'Short item name one',
+            id: '1'
+          }, {
+            name: 'Short item name two',
+            id: '2'
+          }, {
+            name: 'Short item name three',
+            id: '3'
+          }, {
+            name: 'This is very very very long item name',
+            id: '4'
+          }];
+          getComponent({
+            defaultItems: otherItems
+          });
+          input = _testWrapper.screen.queryByRole('combobox');
+
+          _userEvent["default"].type(input, '{arrowdown}');
+
+          options = _testWrapper.screen.queryAllByRole('option');
+          expect(options).toHaveLength(otherItems.length);
+
+          _userEvent["default"].type(input, 'This is very very very long item name');
+
+          _react2.fireEvent.scroll(input, {
+            target: {
+              scrollX: 10
+            }
+          });
+
+          options = _testWrapper.screen.queryAllByRole('option');
+          expect(options.length).toBe(1);
+          expect(options[0]).toHaveTextContent(otherItems[3].name);
+
+          _react2.fireEvent.scroll(window, {
+            target: {
+              scrollX: 10
+            }
+          });
+
+          options = _testWrapper.screen.queryAllByRole('option');
+          expect(options.length).toBe(0);
+
+        case 14:
+        case "end":
+          return _context5.stop();
+      }
+    }
+  }, _callee4);
+})));
+describe('loadingState', function () {
+  it('combobox should not render a loader if menu is not open', function () {
+    var _getComponent = getComponent({
+      loadingState: _loadingStates["default"].LOADING
+    }),
+        rerender = _getComponent.rerender;
+
+    (0, _testWrapper.act)(function () {
+      jest.advanceTimersByTime(500);
+    }); // First time load will show progress bar so user can know that items are being fetched
+
+    expect(_testWrapper.screen.getByRole('alert')).toBeInTheDocument();
+    getComponent({
+      loadingState: _loadingStates["default"].FILTERING
+    }, {
+      renderFn: rerender
+    });
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+  });
+  test('it renders a loader if menu is not open but menuTrigger is "manual"', function () {
+    var _getComponent2 = getComponent({
+      loadingState: _loadingStates["default"].LOADING,
+      menuTrigger: 'manual'
+    }),
+        rerender = _getComponent2.rerender;
+
+    var input = _testWrapper.screen.getByRole('combobox');
+
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+    (0, _testWrapper.act)(function () {
+      jest.advanceTimersByTime(500);
+    });
+    expect(function () {
+      return (0, _testWrapper.within)(input).getByRole('progressbar');
+    }).toBeTruthy();
+    getComponent({
+      loadingState: _loadingStates["default"].FILTERING,
+      menuTrigger: 'manual'
+    }, {
+      renderFn: rerender
+    });
+    expect(function () {
+      return (0, _testWrapper.within)(input).getByRole('progressbar');
+    }).toBeTruthy();
+    getComponent({
+      loadingState: _loadingStates["default"].FILTERING
+    }, {
+      renderFn: rerender
+    });
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+  });
+  test('it should not render a loader until a delay of 500ms passes (loadingState: loading)', function () {
+    getComponent({
+      loadingState: _loadingStates["default"].LOADING
+    });
+
+    var input = _testWrapper.screen.getByRole('combobox');
+
+    (0, _testWrapper.act)(function () {
+      jest.advanceTimersByTime(250);
+    });
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+    (0, _testWrapper.act)(function () {
+      jest.advanceTimersByTime(250);
+    });
+    expect(function () {
+      return (0, _testWrapper.within)(input).getByRole('progressbar');
+    }).toBeTruthy();
+
+    var button = _testWrapper.screen.getByRole('button');
+
+    _userEvent["default"].click(button);
+
+    expect(function () {
+      return (0, _testWrapper.within)(input).getByRole('progressbar');
+    }).toBeTruthy();
+  });
+  test('it should not render a loader until a delay of 500ms passes and the menu is open (loadingState: filtering)', function () {
+    getComponent({
+      loadingState: _loadingStates["default"].FILTERING
+    });
+
+    var input = _testWrapper.screen.getByRole('combobox');
+
+    (0, _testWrapper.act)(function () {
+      jest.advanceTimersByTime(500);
+    });
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+
+    var button = _testWrapper.screen.getByRole('button');
+
+    _userEvent["default"].click(button);
+
+    expect(function () {
+      return (0, _testWrapper.within)(input).getByRole('progressbar');
+    }).toBeTruthy();
+  });
+  test('hides the loader when loadingState changes to a non-loading state', function () {
+    var _getComponent3 = getComponent({
+      loadingState: _loadingStates["default"].FILTERING
+    }),
+        rerender = _getComponent3.rerender;
+
+    var input = _testWrapper.screen.getByRole('combobox');
+
+    var button = _testWrapper.screen.getByRole('button');
+
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+
+    _userEvent["default"].click(button);
+
+    (0, _testWrapper.act)(function () {
+      jest.advanceTimersByTime(500);
+    });
+    expect(function () {
+      return (0, _testWrapper.within)(input).getByRole('progressbar');
+    }).toBeTruthy();
+    getComponent({
+      loadingState: _loadingStates["default"].IDLE
+    }, {
+      renderFn: rerender
+    });
+
+    var listbox = _testWrapper.screen.getByRole('listbox');
+
+    expect(listbox).toBeVisible();
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+  });
+  test('combobox should hide the loader when the menu closes', function () {
+    getComponent({
+      loadingState: _loadingStates["default"].FILTERING
+    });
+
+    var input = _testWrapper.screen.getByRole('combobox');
+
+    var button = _testWrapper.screen.getByRole('button');
+
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+
+    _userEvent["default"].click(button);
+
+    (0, _testWrapper.act)(function () {
+      jest.advanceTimersByTime(500);
+    });
+
+    var listbox = _testWrapper.screen.getByRole('listbox');
+
+    expect(listbox).toBeVisible();
+    expect(function () {
+      return (0, _testWrapper.within)(input).getByRole('progressbar');
+    }).toBeTruthy();
+
+    _userEvent["default"].click(button);
+
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+    expect(function () {
+      return _testWrapper.screen.getByRole('listbox');
+    }).toThrow();
+  });
+  test('cancels the 500ms loader delay timer if the loading finishes first', function () {
+    var _getComponent4 = getComponent({
+      loadingState: _loadingStates["default"].LOADING,
+      menuTrigger: 'manual'
+    }),
+        rerender = _getComponent4.rerender;
+
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+    (0, _testWrapper.act)(function () {
+      jest.advanceTimersByTime(250);
+    });
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+    getComponent({
+      loadingState: _loadingStates["default"].IDLE
+    }, {
+      renderFn: rerender
+    });
+    (0, _testWrapper.act)(function () {
+      jest.advanceTimersByTime(250);
+    });
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+  });
+  test('should not reset the 500ms loader delay timer when loadingState changes from loading to filtering', function () {
+    var _getComponent5 = getComponent({
+      loadingState: _loadingStates["default"].LOADING,
+      menuTrigger: 'manual'
+    }),
+        rerender = _getComponent5.rerender;
+
+    var input = _testWrapper.screen.getByRole('combobox');
+
+    (0, _testWrapper.act)(function () {
+      jest.advanceTimersByTime(250);
+    });
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+    getComponent({
+      loadingState: _loadingStates["default"].FILTERING,
+      menuTrigger: 'manual'
+    }, {
+      renderFn: rerender
+    });
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+    (0, _testWrapper.act)(function () {
+      jest.advanceTimersByTime(250);
+    });
+    expect(function () {
+      return (0, _testWrapper.within)(input).getByRole('progressbar');
+    }).toBeTruthy();
+  });
+  test('combobox should reset the 500ms loader delay timer when input text changes', function () {
+    getComponent({
+      loadingState: _loadingStates["default"].LOADING,
+      menuTrigger: 'manual'
+    });
+
+    var input = _testWrapper.screen.getByRole('combobox');
+
+    (0, _testWrapper.act)(function () {
+      jest.advanceTimersByTime(250);
+    });
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+
+    _userEvent["default"].type(input, 'O');
+
+    (0, _testWrapper.act)(function () {
+      jest.advanceTimersByTime(250);
+    });
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+    (0, _testWrapper.act)(function () {
+      jest.advanceTimersByTime(250);
+    });
+    expect(function () {
+      return (0, _testWrapper.within)(input).getByRole('progressbar');
+    }).toBeTruthy();
+  });
+  test('should render the loader in the listbox when loadingState="loadingMore"', function () {
+    getComponent({
+      loadingState: _loadingStates["default"].LOADING_MORE
+    });
+
+    var button = _testWrapper.screen.getByRole('button');
+
+    expect(function () {
+      return _testWrapper.screen.getByRole('progressbar');
+    }).toThrow();
+
+    _userEvent["default"].click(button);
+
+    var listbox = _testWrapper.screen.getByRole('listbox');
+
+    expect(listbox).toBeVisible();
+    var loader = (0, _testWrapper.within)(listbox).getByRole('alert');
+    expect(loader).toBeInTheDocument();
+    expect(loader).toHaveAttribute('aria-label', 'Loading more...');
+  });
+});
+test('two listbox can not be open at the same time', function () {
+  getComponent();
+  getComponent({
+    items: [{
+      name: 'Tango',
+      id: '4'
+    }, {
+      name: 'Foxtrot',
+      id: '5'
+    }]
+  });
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+
+  var _screen$getAllByRole = _testWrapper.screen.getAllByRole('button'),
+      _screen$getAllByRole2 = (0, _slicedToArray2["default"])(_screen$getAllByRole, 2),
+      button1 = _screen$getAllByRole2[0],
+      button2 = _screen$getAllByRole2[1];
+
+  _userEvent["default"].click(button1);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
+  expect(_testWrapper.screen.queryByRole('option', {
+    name: 'Aardvark'
+  })).toBeInTheDocument();
+
+  _userEvent["default"].click(button2);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(2);
+  expect(_testWrapper.screen.queryByRole('option', {
+    name: 'Tango'
+  })).toBeInTheDocument();
+});
+test('should handle selecting custom option', function () {
+  getComponent({
+    hasCustomValue: true
+  });
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  expect(input).toHaveValue(''); // type something
+
+  _userEvent["default"].type(input, 'custom'); // set input value as selected
+
+
+  _userEvent["default"].type(input, '{enter}', {
+    skipClick: true
+  });
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('combobox')).toHaveValue('custom'); // blur input
+
+  _userEvent["default"].tab();
+
+  expect(input).toHaveValue('custom');
+});
+test('onSelectionChange works properly with custom value', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    hasCustomValue: true,
+    onSelectionChange: onSelectionChange,
+    onInputChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  expect(input).toHaveValue('');
+  expect(onSelectionChange).not.toHaveBeenCalled(); // Should fire when input value was typed, and enter was pressed
+
+  _userEvent["default"].type(input, 'custom{enter}');
+
+  expect(onSelectionChange).toHaveBeenCalledWith('custom'); // Should fire when input is cleared
+
+  _userEvent["default"].type(input, '{selectall}{backspace}{enter}');
+
+  expect(onSelectionChange).toHaveBeenCalledWith('');
+});
+test('add option shows when "hasAddOption" is provided', function () {
+  (0, _testWrapper.render)((0, _react3.jsx)(ComboBoxWithAddOption, null));
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  expect(input).toHaveValue('');
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+  var inputValue = 'New value';
+
+  _userEvent["default"].type(input, inputValue);
+
+  expect(input).toHaveValue(inputValue);
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+
+  var option = _testWrapper.screen.queryByRole('option');
+
+  expect(option).toBeInTheDocument();
+  expect(option).toHaveClass('is-focused');
+  expect(option).toHaveTextContent("ADD: ".concat(inputValue));
+});
+test('if "hasAddOption" is provided, then custom value is added to listbox on blur', function () {
+  (0, _testWrapper.render)((0, _react3.jsx)(ComboBoxWithAddOption, null));
+
+  var input = _testWrapper.screen.queryByRole('combobox');
+
+  var inputValue = 'New value';
+
+  _userEvent["default"].type(input, inputValue);
+
+  expect(input).toHaveValue(inputValue); // blur input
+
+  _userEvent["default"].tab();
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+
+  _userEvent["default"].click(input);
+
+  expect(input).toHaveValue(inputValue);
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+
+  var options = _testWrapper.screen.queryAllByRole('option');
+
+  expect(options[options.length - 1]).toHaveTextContent(inputValue);
+});
+test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+  var _getComponent6, container, results;
+
+  return _regenerator["default"].wrap(function _callee5$(_context6) {
+    while (1) {
+      switch (_context6.prev = _context6.next) {
+        case 0:
+          jest.useRealTimers();
+          _getComponent6 = getComponent(), container = _getComponent6.container;
+          _context6.next = 4;
+          return (0, _jestAxe.axe)(container);
+
+        case 4:
+          results = _context6.sent;
+          expect(results).toHaveNoViolations();
+
+        case 6:
+        case "end":
+          return _context6.stop();
+      }
+    }
+  }, _callee5);
+})));