@pingux/astro 1.27.0-alpha.21 → 1.27.0-alpha.23

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

@@ -1,934 +0,0 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
-import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/starts-with";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(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 ? _forEachInstanceProperty(_context7 = ownKeys(Object(source), !0)).call(_context7, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context8 = ownKeys(Object(source))).call(_context8, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React, { useState, useMemo } from 'react';
-import { fireEvent } from '@testing-library/react';
-import { axe } from 'jest-axe';
-import { useFilter } from '@react-aria/i18n';
-import userEvent from '@testing-library/user-event';
-import { render, screen, act, within } from '../../utils/testUtils/testWrapper';
-import { ComboBoxField, Item, OverlayProvider } from '../../index';
-import loadingStates from '../../utils/devUtils/constants/loadingStates';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-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 ? render : _ref$renderFn;
-
-  return renderFn(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({}, defaultProps, props), function (item) {
-    return ___EmotionJSX(Item, _extends({}, item, {
-      key: item.id,
-      "data-id": item.name
-    }), item.name);
-  })));
-};
-
-var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
-  var _useFilter = useFilter({
-    sensitivity: 'base'
-  }),
-      startsWith = _startsWithInstanceProperty(_useFilter);
-
-  var _useState = useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      filterValue = _useState2[0],
-      setFilterValue = _useState2[1];
-
-  var filteredItems = useMemo(function () {
-    return _filterInstanceProperty(items).call(items, function (item) {
-      return startsWith(item.name, filterValue);
-    });
-  }, [startsWith, filterValue]);
-  return ___EmotionJSX(ComboBoxField, _extends({}, defaultProps, {
-    items: filteredItems,
-    inputValue: filterValue,
-    onInputChange: setFilterValue
-  }), function (item) {
-    return ___EmotionJSX(Item, {
-      id: item.id
-    }, item.name);
-  });
-};
-
-var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
-  var _useState3 = useState(items),
-      _useState4 = _slicedToArray(_useState3, 2),
-      options = _useState4[0],
-      setOptions = _useState4[1];
-
-  var _useState5 = useState(''),
-      _useState6 = _slicedToArray(_useState5, 2),
-      inputValue = _useState6[0],
-      setInputValue = _useState6[1];
-
-  var _useState7 = useState(''),
-      _useState8 = _slicedToArray(_useState7, 2),
-      selectedKey = _useState8[0],
-      setSelectedKey = _useState8[1];
-
-  var onSelectionChange = function onSelectionChange(key) {
-    if (key && !_findInstanceProperty(options).call(options, function (_ref2) {
-      var name = _ref2.name;
-      return name === key;
-    })) {
-      var _context;
-
-      setOptions(_concatInstanceProperty(_context = []).call(_context, options, [{
-        key: key,
-        name: key
-      }]));
-    }
-
-    setInputValue(key);
-    setSelectedKey(key);
-  };
-
-  return ___EmotionJSX(ComboBoxField, {
-    label: "Example label",
-    defaultItems: options,
-    inputValue: inputValue,
-    selectedKey: selectedKey,
-    onInputChange: setInputValue,
-    onSelectionChange: onSelectionChange,
-    hasAddOption: true
-  }, function (item) {
-    return ___EmotionJSX(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 = screen.queryByRole('combobox');
-  var label = screen.getByText(defaultProps.label);
-  var button = screen.queryByRole('button');
-  expect(input).toBeInTheDocument();
-  expect(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 = screen.queryByRole('combobox');
-  expect(input).toHaveValue(''); // type something
-
-  userEvent.type(input, 'custom'); // blur input
-
-  userEvent.tab();
-  expect(input).not.toHaveValue('custom');
-  expect(input).toHaveValue('');
-});
-test('should allow custom value when prop is set', function () {
-  getComponent({
-    hasCustomValue: true
-  });
-  var input = screen.queryByRole('combobox');
-  expect(input).toHaveValue(''); // type something
-
-  userEvent.type(input, 'custom'); // blur input
-
-  userEvent.tab();
-  expect(input).toHaveValue('custom');
-});
-test('should disable options based on disabledKeys prop', function () {
-  getComponent({
-    disabledKeys: [items[0].id]
-  });
-  var input = screen.queryByRole('combobox');
-  var button = screen.queryByRole('button'); // Open the list by clicking on the button and ensure first option is not active
-
-  userEvent.click(button);
-  var options = 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.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 = screen.queryByRole('button');
-  var input = screen.queryByRole('combobox');
-  expect(screen.queryByRole('combobox')).toHaveValue('');
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Open the list by clicking on the button and ensure first option is not active
-
-  userEvent.click(button);
-  var options = screen.queryAllByRole('option');
-  expect(screen.queryByRole('listbox')).toBeInTheDocument(); // Both dismiss buttons should be available, but the dropdown button should be inaccessible
-
-  expect(screen.queryAllByRole('button')).toHaveLength(2);
-  expect(options).toHaveLength(items.length);
-  expect(input).not.toHaveAttribute('aria-activedescendant', options[0].id);
-
-  _forEachInstanceProperty(options).call(options, function (opt) {
-    return expect(opt).not.toHaveClass('is-focused');
-  }); // Ensure active styles are applied
-
-
-  userEvent.hover(options[0]);
-  expect(input).toHaveAttribute('aria-activedescendant', options[0].id);
-  expect(options[0]).toHaveClass('is-focused'); // Ensure option selection works
-
-  userEvent.click(options[0]);
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-  expect(input).toHaveValue(items[0].name); // Option stays focused when the overlay is re-opened
-
-  userEvent.click(button);
-  expect(options[0]).toHaveClass('is-focused');
-});
-test('should be able to open the listbox by keyboard', function () {
-  getComponent();
-  var input = screen.getByRole('combobox');
-  expect(input).toHaveValue('');
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Open the list by hitting the down arrow key and ensure first option is active
-
-  userEvent.tab();
-  userEvent.type(input, '{arrowdown}', {
-    skipClick: true
-  });
-  var options = screen.queryAllByRole('option');
-  expect(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.type(input, '{enter}', {
-    skipClick: true
-  });
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-  expect(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 = screen.getByRole('combobox');
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); // Open the list by focusing with tab
-
-  userEvent.tab();
-  expect(screen.queryByRole('listbox')).toBeInTheDocument();
-  expect(screen.queryAllByRole('option')).toHaveLength(items.length); // blur
-
-  userEvent.tab();
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-  expect(screen.queryByRole('option')).not.toBeInTheDocument(); // focus with click
-
-  userEvent.click(input);
-  expect(screen.queryByRole('listbox')).toBeInTheDocument();
-  expect(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 = screen.getByRole('combobox');
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-  userEvent.click(input);
-  expect(screen.queryByRole('listbox')).toBeInTheDocument();
-  userEvent.click(screen.queryAllByRole('option')[0]);
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-  expect(input).toHaveFocus();
-  userEvent.click(input);
-  expect(screen.queryByRole('listbox')).toBeInTheDocument();
-});
-test('Item accepts a data-id and the data-id can be found in the DOM', function () {
-  getComponent();
-  var button = screen.queryByRole('button');
-  userEvent.click(button);
-  var options = 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 = screen.getByRole('combobox');
-  expect(input).toHaveValue(inputValue);
-  expect(onInputChange).not.toHaveBeenCalled();
-  userEvent.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 = screen.queryByRole('button');
-  var listbox = screen.queryByRole('listbox');
-  expect(listbox).not.toBeInTheDocument();
-  expect(onOpenChange).not.toHaveBeenCalled(); // Should fire on button click
-
-  userEvent.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 = screen.queryByRole('combobox');
-  var listbox = screen.queryByRole('listbox');
-  expect(listbox).not.toBeInTheDocument();
-  expect(onOpenChange).not.toHaveBeenCalled(); // Should fire on input change (default menuTrigger)
-
-  userEvent.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 = screen.queryByRole('combobox');
-  var listbox = screen.queryByRole('listbox');
-  expect(listbox).not.toBeInTheDocument();
-  expect(onOpenChange).not.toHaveBeenCalled(); // Should fire on keyboard interaction
-
-  userEvent.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 = screen.queryByRole('combobox');
-  var listbox = screen.queryByRole('listbox');
-  expect(listbox).not.toBeInTheDocument();
-  expect(onOpenChange).not.toHaveBeenCalled(); // Should fire on keyboard interaction
-
-  userEvent.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 = screen.queryByRole('combobox');
-  var button = screen.queryByRole('button');
-  expect(onSelectionChange).not.toHaveBeenCalled(); // Should fire on item selection click
-
-  userEvent.click(button);
-  userEvent.click(screen.queryAllByRole('option')[2]);
-  expect(onSelectionChange).toHaveBeenNthCalledWith(1, items[2].id); // Should fire when input is cleared
-
-  userEvent.type(input, '{selectall}{backspace}');
-  expect(onSelectionChange).toHaveBeenNthCalledWith(2, null); // Should fire on keyboard interaction
-
-  userEvent.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 = screen.queryByRole('combobox'); // Should list all without filterable input
-
-  userEvent.type(input, '{arrowdown}');
-  expect(screen.queryAllByRole('option')).toHaveLength(items.length); // Should list all options on default contains filter
-
-  userEvent.type(input, 'k');
-  expect(screen.queryAllByRole('option')).toHaveLength(items.length); // Should list no options when none match
-
-  userEvent.type(input, 'z');
-  expect(screen.queryByRole('option')).not.toBeInTheDocument();
-});
-test('should be able to use controlled filtering', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-  var options, input;
-  return _regeneratorRuntime.wrap(function _callee$(_context2) {
-    while (1) {
-      switch (_context2.prev = _context2.next) {
-        case 0:
-          render(___EmotionJSX(ComboBoxWithCustomFilter, null));
-          input = screen.queryByRole('combobox'); // Should list all without filterable input
-
-          userEvent.type(input, '{arrowdown}');
-          _context2.next = 5;
-          return screen.findAllByRole('option');
-
-        case 5:
-          options = _context2.sent;
-          expect(options).toHaveLength(items.length); // Should only list the second option
-
-          userEvent.type(input, 'k');
-          _context2.next = 10;
-          return 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__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-  var options, defaultFilter, input;
-  return _regeneratorRuntime.wrap(function _callee2$(_context3) {
-    while (1) {
-      switch (_context3.prev = _context3.next) {
-        case 0:
-          defaultFilter = function defaultFilter(option, inputValue) {
-            return _startsWithInstanceProperty(option).call(option, inputValue);
-          };
-
-          getComponent({
-            defaultFilter: defaultFilter
-          });
-          input = screen.queryByRole('combobox'); // Should list all without filterable input
-
-          userEvent.type(input, '{arrowdown}');
-          _context3.next = 6;
-          return screen.findAllByRole('option');
-
-        case 6:
-          options = _context3.sent;
-          expect(options).toHaveLength(items.length); // Should only list the second option
-
-          userEvent.type(input, 'K');
-          _context3.next = 11;
-          return 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__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-  var newItems, input, options;
-  return _regeneratorRuntime.wrap(function _callee3$(_context4) {
-    while (1) {
-      switch (_context4.prev = _context4.next) {
-        case 0:
-          newItems = _mapInstanceProperty(items).call(items, function (item) {
-            return _objectSpread(_objectSpread({}, item), {}, {
-              textValue: item.id
-            });
-          });
-          getComponent({
-            items: newItems
-          });
-          input = screen.queryByRole('combobox');
-          userEvent.click(input);
-          _context4.next = 6;
-          return screen.findAllByRole('option');
-
-        case 6:
-          options = _context4.sent;
-          userEvent.click(options[0]);
-          expect(input).toHaveValue(newItems[0].textValue); // Check that on clicking again "textValue" still returning
-
-          userEvent.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__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-  var options, otherItems, input;
-  return _regeneratorRuntime.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 = screen.queryByRole('combobox');
-          userEvent.type(input, '{arrowdown}');
-          options = screen.queryAllByRole('option');
-          expect(options).toHaveLength(otherItems.length);
-          userEvent.type(input, 'This is very very very long item name');
-          fireEvent.scroll(input, {
-            target: {
-              scrollX: 10
-            }
-          });
-          options = screen.queryAllByRole('option');
-          expect(options.length).toBe(1);
-          expect(options[0]).toHaveTextContent(otherItems[3].name);
-          fireEvent.scroll(window, {
-            target: {
-              scrollX: 10
-            }
-          });
-          options = 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.LOADING
-    }),
-        rerender = _getComponent.rerender;
-
-    act(function () {
-      jest.advanceTimersByTime(500);
-    }); // First time load will show progress bar so user can know that items are being fetched
-
-    expect(screen.getByRole('alert')).toBeInTheDocument();
-    getComponent({
-      loadingState: loadingStates.FILTERING
-    }, {
-      renderFn: rerender
-    });
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-  });
-  test('it renders a loader if menu is not open but menuTrigger is "manual"', function () {
-    var _getComponent2 = getComponent({
-      loadingState: loadingStates.LOADING,
-      menuTrigger: 'manual'
-    }),
-        rerender = _getComponent2.rerender;
-
-    var input = screen.getByRole('combobox');
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-    act(function () {
-      jest.advanceTimersByTime(500);
-    });
-    expect(function () {
-      return within(input).getByRole('progressbar');
-    }).toBeTruthy();
-    getComponent({
-      loadingState: loadingStates.FILTERING,
-      menuTrigger: 'manual'
-    }, {
-      renderFn: rerender
-    });
-    expect(function () {
-      return within(input).getByRole('progressbar');
-    }).toBeTruthy();
-    getComponent({
-      loadingState: loadingStates.FILTERING
-    }, {
-      renderFn: rerender
-    });
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-  });
-  test('it should not render a loader until a delay of 500ms passes (loadingState: loading)', function () {
-    getComponent({
-      loadingState: loadingStates.LOADING
-    });
-    var input = screen.getByRole('combobox');
-    act(function () {
-      jest.advanceTimersByTime(250);
-    });
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-    act(function () {
-      jest.advanceTimersByTime(250);
-    });
-    expect(function () {
-      return within(input).getByRole('progressbar');
-    }).toBeTruthy();
-    var button = screen.getByRole('button');
-    userEvent.click(button);
-    expect(function () {
-      return 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.FILTERING
-    });
-    var input = screen.getByRole('combobox');
-    act(function () {
-      jest.advanceTimersByTime(500);
-    });
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-    var button = screen.getByRole('button');
-    userEvent.click(button);
-    expect(function () {
-      return within(input).getByRole('progressbar');
-    }).toBeTruthy();
-  });
-  test('hides the loader when loadingState changes to a non-loading state', function () {
-    var _getComponent3 = getComponent({
-      loadingState: loadingStates.FILTERING
-    }),
-        rerender = _getComponent3.rerender;
-
-    var input = screen.getByRole('combobox');
-    var button = screen.getByRole('button');
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-    userEvent.click(button);
-    act(function () {
-      jest.advanceTimersByTime(500);
-    });
-    expect(function () {
-      return within(input).getByRole('progressbar');
-    }).toBeTruthy();
-    getComponent({
-      loadingState: loadingStates.IDLE
-    }, {
-      renderFn: rerender
-    });
-    var listbox = screen.getByRole('listbox');
-    expect(listbox).toBeVisible();
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-  });
-  test('combobox should hide the loader when the menu closes', function () {
-    getComponent({
-      loadingState: loadingStates.FILTERING
-    });
-    var input = screen.getByRole('combobox');
-    var button = screen.getByRole('button');
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-    userEvent.click(button);
-    act(function () {
-      jest.advanceTimersByTime(500);
-    });
-    var listbox = screen.getByRole('listbox');
-    expect(listbox).toBeVisible();
-    expect(function () {
-      return within(input).getByRole('progressbar');
-    }).toBeTruthy();
-    userEvent.click(button);
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-    expect(function () {
-      return screen.getByRole('listbox');
-    }).toThrow();
-  });
-  test('cancels the 500ms loader delay timer if the loading finishes first', function () {
-    var _getComponent4 = getComponent({
-      loadingState: loadingStates.LOADING,
-      menuTrigger: 'manual'
-    }),
-        rerender = _getComponent4.rerender;
-
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-    act(function () {
-      jest.advanceTimersByTime(250);
-    });
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-    getComponent({
-      loadingState: loadingStates.IDLE
-    }, {
-      renderFn: rerender
-    });
-    act(function () {
-      jest.advanceTimersByTime(250);
-    });
-    expect(function () {
-      return 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.LOADING,
-      menuTrigger: 'manual'
-    }),
-        rerender = _getComponent5.rerender;
-
-    var input = screen.getByRole('combobox');
-    act(function () {
-      jest.advanceTimersByTime(250);
-    });
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-    getComponent({
-      loadingState: loadingStates.FILTERING,
-      menuTrigger: 'manual'
-    }, {
-      renderFn: rerender
-    });
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-    act(function () {
-      jest.advanceTimersByTime(250);
-    });
-    expect(function () {
-      return within(input).getByRole('progressbar');
-    }).toBeTruthy();
-  });
-  test('combobox should reset the 500ms loader delay timer when input text changes', function () {
-    getComponent({
-      loadingState: loadingStates.LOADING,
-      menuTrigger: 'manual'
-    });
-    var input = screen.getByRole('combobox');
-    act(function () {
-      jest.advanceTimersByTime(250);
-    });
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-    userEvent.type(input, 'O');
-    act(function () {
-      jest.advanceTimersByTime(250);
-    });
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-    act(function () {
-      jest.advanceTimersByTime(250);
-    });
-    expect(function () {
-      return within(input).getByRole('progressbar');
-    }).toBeTruthy();
-  });
-  test('should render the loader in the listbox when loadingState="loadingMore"', function () {
-    getComponent({
-      loadingState: loadingStates.LOADING_MORE
-    });
-    var button = screen.getByRole('button');
-    expect(function () {
-      return screen.getByRole('progressbar');
-    }).toThrow();
-    userEvent.click(button);
-    var listbox = screen.getByRole('listbox');
-    expect(listbox).toBeVisible();
-    var loader = 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(screen.queryByRole('listbox')).not.toBeInTheDocument();
-  expect(screen.queryByRole('option')).not.toBeInTheDocument();
-
-  var _screen$getAllByRole = screen.getAllByRole('button'),
-      _screen$getAllByRole2 = _slicedToArray(_screen$getAllByRole, 2),
-      button1 = _screen$getAllByRole2[0],
-      button2 = _screen$getAllByRole2[1];
-
-  userEvent.click(button1);
-  expect(screen.queryByRole('listbox')).toBeInTheDocument();
-  expect(screen.queryAllByRole('option')).toHaveLength(3);
-  expect(screen.queryByRole('option', {
-    name: 'Aardvark'
-  })).toBeInTheDocument();
-  userEvent.click(button2);
-  expect(screen.queryByRole('listbox')).toBeInTheDocument();
-  expect(screen.queryAllByRole('option')).toHaveLength(2);
-  expect(screen.queryByRole('option', {
-    name: 'Tango'
-  })).toBeInTheDocument();
-});
-test('should handle selecting custom option', function () {
-  getComponent({
-    hasCustomValue: true
-  });
-  var input = screen.queryByRole('combobox');
-  expect(input).toHaveValue(''); // type something
-
-  userEvent.type(input, 'custom'); // set input value as selected
-
-  userEvent.type(input, '{enter}', {
-    skipClick: true
-  });
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-  expect(screen.queryByRole('combobox')).toHaveValue('custom'); // blur input
-
-  userEvent.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 = screen.queryByRole('combobox');
-  expect(input).toHaveValue('');
-  expect(onSelectionChange).not.toHaveBeenCalled(); // Should fire when input value was typed, and enter was pressed
-
-  userEvent.type(input, 'custom{enter}');
-  expect(onSelectionChange).toHaveBeenCalledWith('custom'); // Should fire when input is cleared
-
-  userEvent.type(input, '{selectall}{backspace}{enter}');
-  expect(onSelectionChange).toHaveBeenCalledWith('');
-});
-test('add option shows when "hasAddOption" is provided', function () {
-  render(___EmotionJSX(ComboBoxWithAddOption, null));
-  var input = screen.queryByRole('combobox');
-  expect(input).toHaveValue('');
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-  expect(screen.queryByRole('option')).not.toBeInTheDocument();
-  var inputValue = 'New value';
-  userEvent.type(input, inputValue);
-  expect(input).toHaveValue(inputValue);
-  expect(screen.queryByRole('listbox')).toBeInTheDocument();
-  var option = 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 () {
-  render(___EmotionJSX(ComboBoxWithAddOption, null));
-  var input = screen.queryByRole('combobox');
-  var inputValue = 'New value';
-  userEvent.type(input, inputValue);
-  expect(input).toHaveValue(inputValue); // blur input
-
-  userEvent.tab();
-  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-  expect(screen.queryByRole('option')).not.toBeInTheDocument();
-  userEvent.click(input);
-  expect(input).toHaveValue(inputValue);
-  expect(screen.queryByRole('listbox')).toBeInTheDocument();
-  var options = screen.queryAllByRole('option');
-  expect(options[options.length - 1]).toHaveTextContent(inputValue);
-});
-test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-  var _getComponent6, container, results;
-
-  return _regeneratorRuntime.wrap(function _callee5$(_context6) {
-    while (1) {
-      switch (_context6.prev = _context6.next) {
-        case 0:
-          jest.useRealTimers();
-          _getComponent6 = getComponent(), container = _getComponent6.container;
-          _context6.next = 4;
-          return axe(container);
-
-        case 4:
-          results = _context6.sent;
-          expect(results).toHaveNoViolations();
-
-        case 6:
-        case "end":
-          return _context6.stop();
-      }
-    }
-  }, _callee5);
-})));