@activecollab/components 1.0.414 → 2.0.0

package/dist/cjs/components/Autocomplete/Autocomplete.spec.js

@@ -1,859 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-var _react = _interopRequireWildcard(require("react"));
-var _enzyme = require("enzyme");
-var _react2 = require("@testing-library/react");
-var _Autocomplete = require("./Autocomplete");
-var _Checkbox = require("../Checkbox");
-var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
-var _testUtils = require("react-dom/test-utils");
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var user = _userEvent.default.setup();
-describe("<Autocomplete/>", function () {
-  var Component = function Component(props) {
-    var target = /*#__PURE__*/_react.default.createElement("input", {
-      type: "text"
-    });
-    var childNode = (0, _react.useRef)();
-    var elementRef = (0, _react.useRef)(null);
-    var handleRefRef = (0, _useForkRef.default)(target ? target.ref : undefined, childNode);
-    var handleRef = (0, _useForkRef.default)(handleRefRef, elementRef);
-    var targetProps = {
-      ref: handleRef
-    };
-    return /*#__PURE__*/_react.default.createElement("div", null, target && /*#__PURE__*/_react.default.cloneElement(target, targetProps), /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, _extends({
-      renderOption: function renderOption(option, props) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, option.name), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
-      },
-      inputEl: childNode
-    }, props)));
-  };
-  var keyUpEvent = new KeyboardEvent("input");
-  var defaultNonGroupedOptions = [{
-    id: 1,
-    name: "User 1"
-  }, {
-    id: 2,
-    name: "User 2"
-  }, {
-    id: 3,
-    name: "User 3"
-  }, {
-    id: 4,
-    name: "User 4"
-  }, {
-    id: 5,
-    name: "User 5"
-  }];
-  var defaultGroupedOptions = [{
-    name: "group 1",
-    id: "111",
-    options: [{
-      id: "1",
-      name: "Option 1"
-    }, {
-      id: "2",
-      name: "Option 2"
-    }, {
-      id: "3",
-      name: "Option 13"
-    }]
-  }, {
-    name: "group 2",
-    id: "222",
-    options: [{
-      id: "4",
-      name: "Option 4"
-    }, {
-      id: "5",
-      name: "Option 5"
-    }, {
-      id: "9",
-      name: "Option 19"
-    }]
-  }, {
-    name: "group 3",
-    id: "333",
-    options: [{
-      id: "7",
-      name: "Option 7"
-    }, {
-      id: "8",
-      name: "Option 8"
-    }, {
-      id: "10",
-      name: "Option 110"
-    }]
-  }];
-  var setInputValue = function setInputValue(value, inputDomNode, wrapper, event) {
-    inputDomNode.value = value;
-    (0, _testUtils.act)(function () {
-      inputDomNode.dispatchEvent(event);
-    });
-    wrapper.update();
-  };
-  var simulateKeyDown = function simulateKeyDown(inputDomNode, wrapper) {
-    (0, _testUtils.act)(function () {
-      inputDomNode.dispatchEvent(new KeyboardEvent("keydown", {
-        key: "ArrowDown"
-      }));
-    });
-    wrapper.update();
-  };
-  var simulateEnter = function simulateEnter(inputDomNode, wrapper) {
-    (0, _testUtils.act)(function () {
-      inputDomNode.dispatchEvent(new KeyboardEvent("keydown", {
-        key: "Enter"
-      }));
-    });
-    wrapper.update();
-  };
-  it("should render Autocomplete", function () {
-    var wrapper = (0, _enzyme.render)( /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, null));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it("should render Autocomplete with selected options", function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, {
-      options: [{
-        name: "test1",
-        id: 1
-      }, {
-        name: "test2",
-        id: 2
-      }],
-      selected: [1, 2],
-      renderOption: function renderOption(option, props) {
-        return /*#__PURE__*/_react.default.createElement("div", null, option.name, " ", /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
-      }
-    }));
-    expect(wrapper.find("Checkbox").first().prop("checked")).toBe(true);
-    wrapper.unmount();
-  });
-  it("should render Autocomplete with no preselected default option", function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, {
-      defaultValue: "None",
-      options: [{
-        name: "test1",
-        id: 1
-      }, {
-        name: "test2",
-        id: 2
-      }],
-      selected: [],
-      renderOption: function renderOption(option, props) {
-        return /*#__PURE__*/_react.default.createElement("div", null, option.name, " ", /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
-      }
-    }));
-    expect(wrapper.find("Checkbox").first().prop("checked")).toBe(false);
-    wrapper.unmount();
-  });
-  it("should render Autocomplete with preselected default option", function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, {
-      defaultValue: "None",
-      options: [{
-        name: "test1",
-        id: 1
-      }, {
-        name: "test2",
-        id: 2
-      }],
-      selected: [],
-      preselectDefaultValue: true,
-      renderOption: function renderOption(option, props) {
-        return /*#__PURE__*/_react.default.createElement("div", null, option.name, " ", /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
-      }
-    }));
-    expect(wrapper.find("Checkbox").first().prop("checked")).toBe(true);
-    wrapper.unmount();
-  });
-  it("should render Autocomplete without order", function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, {
-      options: [{
-        name: "test2",
-        id: 2
-      }, {
-        name: "test1",
-        id: 1
-      }, {
-        name: "test3",
-        id: 3
-      }],
-      selected: 2,
-      disabledInternalSort: true
-    }));
-    expect(wrapper.find("li").at(0).text()).toBe("test2");
-    expect(wrapper.find("li").at(1).text()).toBe("test1");
-    expect(wrapper.find("li").at(2).text()).toBe("test3");
-    wrapper.unmount();
-  });
-  it("should do nothing on Enter pressed if no value is provided in input", function () {
-    var handleChange = jest.fn();
-    var handleEmpty = jest.fn();
-    var handleDefaultOptionChange = jest.fn();
-    var Component = function Component() {
-      var target = /*#__PURE__*/_react.default.createElement("input", null);
-      var childNode = (0, _react.useRef)();
-      var elementRef = (0, _react.useRef)(null);
-      var handleRefRef = (0, _useForkRef.default)(target ? target.ref : undefined, childNode);
-      var handleRef = (0, _useForkRef.default)(handleRefRef, elementRef);
-      var targetProps = {
-        ref: handleRef
-      };
-      return /*#__PURE__*/_react.default.createElement("div", null, target && /*#__PURE__*/_react.default.cloneElement(target, targetProps), /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, {
-        options: [{
-          name: "test2",
-          id: 2
-        }, {
-          name: "test1",
-          id: 1
-        }, {
-          name: "test3",
-          id: 3
-        }],
-        renderOption: function renderOption(option, props) {
-          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, option.name), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
-        },
-        handleChange: handleChange,
-        handleEmptyAction: handleEmpty,
-        handleDefaultOptionChange: handleDefaultOptionChange,
-        inputEl: childNode
-      }));
-    };
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, null));
-    var inputDomNode = wrapper.find("input").first().getDOMNode();
-    simulateEnter(inputDomNode, wrapper);
-    expect(handleChange).not.toBeCalled();
-    expect(handleEmpty).not.toBeCalled();
-    expect(handleDefaultOptionChange).not.toBeCalled();
-  });
-  it("should handle on click", function () {
-    var onChange = jest.fn();
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, {
-      options: [{
-        name: "test2",
-        id: 2
-      }, {
-        name: "test1",
-        id: 1
-      }, {
-        name: "test3",
-        id: 3
-      }],
-      defaultValue: "None",
-      handleChange: onChange,
-      selected: [],
-      renderOption: function renderOption(option, props) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, option.name), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
-      }
-    }));
-    var option = wrapper.find("Option").at(2);
-    option.find("li").first().simulate("click");
-    expect(onChange).toBeCalled();
-    wrapper.setProps({
-      selected: null
-    });
-    expect(wrapper.find("Checkbox").first().prop("checked")).toBe(true);
-    option.find("li").first().simulate("click");
-    expect(onChange).toBeCalled();
-    wrapper.setProps({
-      selected: 3
-    });
-    expect(wrapper.find("Checkbox").at(3).prop("checked")).toBe(true);
-    expect(wrapper.find("Checkbox").first().prop("checked")).toBe(false);
-    option.find("li").first().simulate("click");
-    expect(onChange).toBeCalled();
-    wrapper.setProps({
-      selected: null
-    });
-    expect(wrapper.find("Checkbox").first().prop("checked")).toBe(true);
-    expect(wrapper.find("Checkbox").at(3).prop("checked")).toBe(false);
-    wrapper.unmount();
-  });
-  it("should change the order of options on click", function () {
-    var onChange = jest.fn();
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, {
-      options: [{
-        name: "Option 1",
-        id: 1
-      }, {
-        name: "Option 2",
-        id: 2
-      }, {
-        name: "Option 3",
-        id: 3
-      }],
-      defaultValue: "None",
-      handleChange: onChange,
-      selected: [],
-      renderOption: function renderOption(option, props) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, option.name), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
-      }
-    }));
-    var option = wrapper.find("Option").at(2);
-    option.find("li").first().simulate("click");
-    expect(onChange).toBeCalled();
-    wrapper.setProps({
-      selected: null
-    });
-    expect(wrapper.find("Checkbox").first().prop("checked")).toBe(true);
-    expect(wrapper.find("Checkbox").at(2).prop("checked")).toBe(false);
-    expect(wrapper.find("Checkbox").at(3).prop("checked")).toBe(false);
-    wrapper.unmount();
-  });
-  it("shouldn't change order of options on click", function () {
-    var onChange = jest.fn();
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, {
-      options: [{
-        name: "Option 1",
-        id: 1
-      }, {
-        name: "Option 2",
-        id: 2
-      }, {
-        name: "Option 3",
-        id: 3
-      }],
-      defaultValue: "None",
-      handleChange: onChange,
-      selected: [],
-      renderOption: function renderOption(option, props) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, option.name), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
-      },
-      keepSameOptionsOrder: true
-    }));
-    var option = wrapper.find("Option").at(2);
-    option.find("li").first().simulate("click");
-    expect(onChange).toBeCalled();
-    wrapper.setProps({
-      selected: 2
-    });
-    expect(wrapper.find("Checkbox").first().prop("checked")).toBe(false);
-    expect(wrapper.find("Checkbox").at(2).prop("checked")).toBe(true);
-    expect(wrapper.find("Checkbox").at(3).prop("checked")).toBe(false);
-    wrapper.unmount();
-  });
-  it("should handle on hover", function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, {
-      options: [{
-        name: "test2",
-        id: 2
-      }, {
-        name: "test1",
-        id: 1
-      }, {
-        name: "test3",
-        id: 3
-      }, {
-        name: "test4",
-        id: 4
-      }, {
-        name: "test5",
-        id: 5
-      }, {
-        name: "test6",
-        id: 6
-      }, {
-        name: "test7",
-        id: 7
-      }, {
-        name: "test8",
-        id: 8
-      }, {
-        name: "test9",
-        id: 9
-      }, {
-        name: "test10",
-        id: 10
-      }, {
-        name: "test11",
-        id: 11
-      }],
-      renderOption: function renderOption(option, props) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, option.name), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
-      }
-    }));
-    wrapper.find("Option").last().simulate("mouseenter");
-    expect(wrapper.find("Option").last().prop("hover")).toBe(true);
-    wrapper.find("Option").first().simulate("mouseenter");
-    expect(wrapper.find("Option").first().prop("hover")).toBe(true);
-    wrapper.unmount();
-  });
-  it("should handle on default click", function () {
-    var defaultChange = jest.fn();
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, {
-      options: [{
-        name: "test2",
-        id: 2
-      }, {
-        name: "test1",
-        id: 1
-      }, {
-        name: "test3",
-        id: 3
-      }],
-      defaultValue: "default",
-      handleDefaultOptionChange: defaultChange,
-      renderOption: function renderOption(option, props) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, option.name), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
-      }
-    }));
-    var option = wrapper.find("Option").first();
-    option.simulate("mouseenter");
-    option.find("li").first().simulate("click");
-    expect(defaultChange).toBeCalled();
-    wrapper.unmount();
-  });
-  it("should handle keyboard events", function () {
-    var Component = function Component() {
-      var target = /*#__PURE__*/_react.default.createElement("input", null);
-      var childNode = (0, _react.useRef)();
-      var elementRef = (0, _react.useRef)(null);
-      var handleRefRef = (0, _useForkRef.default)(target ? target.ref : undefined, childNode);
-      var handleRef = (0, _useForkRef.default)(handleRefRef, elementRef);
-      var targetProps = {
-        ref: handleRef
-      };
-      return /*#__PURE__*/_react.default.createElement("div", null, target && /*#__PURE__*/_react.default.cloneElement(target, targetProps), /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, {
-        options: [{
-          name: "test2",
-          id: 2
-        }, {
-          name: "test1",
-          id: 1
-        }, {
-          name: "test3",
-          id: 3
-        }],
-        renderOption: function renderOption(option, props) {
-          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, option.name), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
-        },
-        inputEl: childNode
-      }));
-    };
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, null));
-    wrapper.find("input").first().simulate("keydown", {
-      key: "Enter"
-    });
-    wrapper.unmount();
-  });
-  describe("hover first matched option functionality", function () {
-    it("in non grouped options", function () {
-      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-        options: defaultNonGroupedOptions
-      }));
-      var inputDomNode = wrapper.find("input").first().getDOMNode();
-      for (var _i = 0, _arr = [0, 1, 2, 3, 4]; _i < _arr.length; _i++) {
-        var index = _arr[_i];
-        expect(wrapper.find("Option").at(index).prop("hover")).toEqual(false);
-      }
-      setInputValue("User", inputDomNode, wrapper, keyUpEvent);
-      expect(wrapper.find("Option").at(0).prop("hover")).toEqual(true);
-      for (var _i2 = 0, _arr2 = [1, 2, 3, 4]; _i2 < _arr2.length; _i2++) {
-        var _index = _arr2[_i2];
-        expect(wrapper.find("Option").at(_index).prop("hover")).toEqual(false);
-      }
-      wrapper.unmount();
-    });
-    it("in grouped options", function () {
-      var options = [{
-        name: "group 1",
-        id: "111",
-        options: [{
-          id: "1",
-          name: "Option 1"
-        }]
-      }, {
-        name: "group 2",
-        id: "222",
-        options: [{
-          id: "4",
-          name: "Option 4"
-        }]
-      }, {
-        name: "group 3",
-        id: "333",
-        options: [{
-          id: "7",
-          name: "Option 7"
-        }]
-      }];
-      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-        options: options
-      }));
-      var inputDomNode = wrapper.find("input").first().getDOMNode();
-      for (var _i3 = 0, _arr3 = [0, 1, 2]; _i3 < _arr3.length; _i3++) {
-        var index = _arr3[_i3];
-        expect(wrapper.find("Option").at(index).prop("hover")).toEqual(false);
-      }
-      setInputValue("Option", inputDomNode, wrapper, keyUpEvent);
-      expect(wrapper.find("Option").at(0).prop("hover")).toEqual(true);
-      for (var _i4 = 0, _arr4 = [1, 2]; _i4 < _arr4.length; _i4++) {
-        var _index2 = _arr4[_i4];
-        expect(wrapper.find("Option").at(_index2).prop("hover")).toEqual(false);
-      }
-      wrapper.unmount();
-    });
-  });
-  it("should filter and hover for grouped options", function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-      options: defaultGroupedOptions,
-      emptyValue: "Add"
-    }));
-    var inputDomNode = wrapper.find("input").first().getDOMNode();
-    setInputValue("Option 1", inputDomNode, wrapper, keyUpEvent);
-    expect(wrapper.find("Option").at(0).prop("hover")).toEqual(true);
-    for (var _i5 = 0, _arr5 = [1, 2, 3]; _i5 < _arr5.length; _i5++) {
-      var index = _arr5[_i5];
-      expect(wrapper.find("Option").at(index).prop("hover")).toEqual(false);
-    }
-    simulateKeyDown(inputDomNode, wrapper);
-    expect(wrapper.find("Option").at(1).prop("hover")).toEqual(true);
-    for (var _i6 = 0, _arr6 = [0, 2, 3]; _i6 < _arr6.length; _i6++) {
-      var _index3 = _arr6[_i6];
-      expect(wrapper.find("Option").at(_index3).prop("hover")).toEqual(false);
-    }
-    simulateKeyDown(inputDomNode, wrapper);
-    expect(wrapper.find("Option").at(2).prop("hover")).toEqual(true);
-    for (var _i7 = 0, _arr7 = [0, 1, 3]; _i7 < _arr7.length; _i7++) {
-      var _index4 = _arr7[_i7];
-      expect(wrapper.find("Option").at(_index4).prop("hover")).toEqual(false);
-    }
-    wrapper.unmount();
-  });
-  describe("Add new functionality", function () {
-    it("should not render if the emptyValue is not passed", function () {
-      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-        options: defaultNonGroupedOptions,
-        emptyValue: ""
-      }));
-      expect(wrapper.exists("StyledAutocompleteNewItem")).toEqual(false);
-      wrapper.unmount();
-    });
-    it("should not render if the emptyValue is passed but the input is empty", function () {
-      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-        options: defaultNonGroupedOptions,
-        emptyValue: "Add"
-      }));
-      expect(wrapper.exists("StyledAutocompleteNewItem")).toEqual(false);
-      wrapper.unmount();
-    });
-    it("should not render if the emptyValue is passed and the input consists only of whitespace characters", function () {
-      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-        options: defaultNonGroupedOptions,
-        emptyValue: "Add"
-      }));
-      var inputDomNode = wrapper.find("input").first().getDOMNode();
-      setInputValue(" ", inputDomNode, wrapper, keyUpEvent);
-      expect(wrapper.exists("StyledAutocompleteNewItem")).toEqual(false);
-      setInputValue("          ", inputDomNode, wrapper, keyUpEvent);
-      expect(wrapper.exists("StyledAutocompleteNewItem")).toEqual(false);
-      wrapper.unmount();
-    });
-    it("should render if the emptyValue is passed and the input is not empty #1", function () {
-      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-        options: defaultNonGroupedOptions,
-        emptyValue: "Add"
-      }));
-      var inputDomNode = wrapper.find("input").first().getDOMNode();
-      setInputValue("U", inputDomNode, wrapper, keyUpEvent);
-      expect(wrapper.exists("StyledAutocompleteNewItem")).toEqual(true);
-      wrapper.unmount();
-    });
-    it("should render if the emptyValue is passed and the input is not empty #2", function () {
-      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-        options: defaultNonGroupedOptions,
-        emptyValue: "Add"
-      }));
-      var inputDomNode = wrapper.find("input").first().getDOMNode();
-      setInputValue("User", inputDomNode, wrapper, keyUpEvent);
-      expect(wrapper.exists("StyledAutocompleteNewItem")).toEqual(true);
-      wrapper.unmount();
-    });
-    it("should not render if the input value is the full match with any of the options", function () {
-      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-        options: defaultNonGroupedOptions,
-        emptyValue: "Add"
-      }));
-      var inputDomNode = wrapper.find("input").first().getDOMNode();
-      setInputValue("User 1", inputDomNode, wrapper, keyUpEvent);
-      expect(wrapper.exists("StyledAutocompleteNewItem")).toEqual(false);
-      wrapper.unmount();
-    });
-    it("should render Add new if there are no filtered options and make it hovered", function () {
-      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-        options: defaultNonGroupedOptions,
-        emptyValue: "Add"
-      }));
-      var inputDomNode = wrapper.find("input").first().getDOMNode();
-      setInputValue("User 9", inputDomNode, wrapper, keyUpEvent);
-      expect(wrapper.exists("StyledAutocompleteNewItem")).toEqual(true);
-      expect(wrapper.find("StyledAutocompleteNewItem").first().prop("hover")).toEqual(true);
-      wrapper.unmount();
-    });
-    it("click on Add new option should call handler callback", function () {
-      var callback = jest.fn();
-      var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-        options: defaultNonGroupedOptions,
-        emptyValue: "Add",
-        handleEmptyAction: callback
-      }));
-      var inputDomNode = wrapper.find("input").first().getDOMNode();
-      setInputValue("User", inputDomNode, wrapper, keyUpEvent);
-      wrapper.find("StyledAutocompleteNewItem").first().simulate("mousedown", {
-        button: 1
-      });
-      expect(callback).not.toHaveBeenCalled();
-      wrapper.find("StyledAutocompleteNewItem").first().simulate("mousedown", {
-        button: 0
-      });
-      expect(callback).toHaveBeenCalled();
-      wrapper.unmount();
-    });
-  });
-  it("should handle Add New in grouped options", function () {
-    var event = new KeyboardEvent("input");
-    var Component = function Component(_ref) {
-      var emptyValue = _ref.emptyValue,
-        handleEmptyAction = _ref.handleEmptyAction,
-        noResultText = _ref.noResultText;
-      var groupedOptions = [{
-        name: "group 1",
-        id: "111",
-        options: [{
-          id: "1",
-          name: "Option 1"
-        }, {
-          id: "2",
-          name: "Option 2"
-        }]
-      }, {
-        name: "group 2",
-        id: "222",
-        options: [{
-          id: "4",
-          name: "Option 4"
-        }, {
-          id: "5",
-          name: "Option 5"
-        }]
-      }, {
-        name: "group 3",
-        id: "333",
-        options: [{
-          id: "7",
-          name: "Option 7"
-        }, {
-          id: "8",
-          name: "Option 8"
-        }]
-      }];
-      var target = /*#__PURE__*/_react.default.createElement("input", null);
-      var childNode = (0, _react.useRef)();
-      var elementRef = (0, _react.useRef)(null);
-      var handleRefRef = (0, _useForkRef.default)(target ? target.ref : undefined, childNode);
-      var handleRef = (0, _useForkRef.default)(handleRefRef, elementRef);
-      var targetProps = {
-        ref: handleRef
-      };
-      return /*#__PURE__*/_react.default.createElement("div", null, target && /*#__PURE__*/_react.default.cloneElement(target, targetProps), /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, {
-        handleEmptyAction: handleEmptyAction,
-        emptyValue: emptyValue,
-        noResultText: noResultText,
-        options: groupedOptions,
-        renderOption: function renderOption(option, props) {
-          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, option.name), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
-        },
-        inputEl: childNode
-      }));
-    };
-    var setInputValue = function setInputValue(value, inputDomNode, wrapper, event) {
-      inputDomNode.value = value;
-      (0, _testUtils.act)(function () {
-        inputDomNode.dispatchEvent(event);
-      });
-      wrapper.update();
-    };
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-      emptyValue: "Add"
-    }));
-    var inputDomNode = wrapper.find("input").first().getDOMNode();
-    setInputValue("O", inputDomNode, wrapper, event);
-    expect(wrapper.exists("StyledAutocompleteNewItem")).toEqual(true);
-    setInputValue("Option 1", inputDomNode, wrapper, event);
-    expect(wrapper.exists("StyledAutocompleteNewItem")).toEqual(false);
-    setInputValue("Option 12", inputDomNode, wrapper, event);
-    expect(wrapper.exists("StyledAutocompleteNewItem")).toEqual(true);
-    wrapper.unmount();
-  });
-  it("should render No result if needed", function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-      options: defaultNonGroupedOptions,
-      noResultText: "No result"
-    }));
-    var input = wrapper.find("input").first();
-    var inputDomNode = input.getDOMNode();
-
-    // On initial render, when user did not type anything yet, No result is not rendered.
-    expect(wrapper.exists("Autocomplete___StyledStyledOption")).toEqual(false);
-    var event = new KeyboardEvent("input");
-    setInputValue("User 1", inputDomNode, wrapper, event);
-    expect(wrapper.exists("Autocomplete___StyledStyledOption")).toEqual(false);
-    setInputValue("User 9", inputDomNode, wrapper, event);
-    expect(wrapper.exists("Autocomplete___StyledStyledOption")).toEqual(true);
-    wrapper.unmount();
-  });
-  it("should not render No result if no value for noResultText is provided", function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-      options: defaultNonGroupedOptions
-    }));
-    var input = wrapper.find("input").first();
-    var inputDomNode = input.getDOMNode();
-
-    // On initial render, when user did not type anything yet, No result is not rendered.
-    expect(wrapper.exists(".c-select--body--no-result")).toEqual(false);
-    var event = new KeyboardEvent("input");
-    setInputValue("User 1", inputDomNode, wrapper, event);
-    expect(wrapper.exists(".c-select--body--no-result")).toEqual(false);
-    setInputValue("User 9", inputDomNode, wrapper, event);
-    expect(wrapper.exists(".c-select--body--no-result")).toEqual(false);
-    wrapper.unmount();
-  });
-  it("should render No result if options is empty array", function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-      options: [],
-      noResultText: "No Result"
-    }));
-    expect(wrapper.exists("Autocomplete___StyledStyledOption")).toEqual(true);
-    wrapper.unmount();
-  });
-  it("should handle selection when multiple", function () {
-    var onChange = jest.fn();
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, {
-      options: defaultGroupedOptions,
-      defaultValue: "None",
-      handleChange: onChange,
-      selected: ["1", "2"],
-      type: "multiple",
-      renderOption: function renderOption(option, props) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, option.name), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
-      }
-    }));
-    var li = wrapper.find("OptionGroup").at(1).find("Option").first();
-    expect(li.text()).toEqual("Option 19");
-    li.simulate("mouseenter");
-    li.simulate("click");
-    expect(onChange).toBeCalledWith(["1", "2", "9"]);
-  });
-  it("should handle un-selection when multiple", function () {
-    var onChange = jest.fn();
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, {
-      options: defaultGroupedOptions,
-      defaultValue: "None",
-      handleChange: onChange,
-      selected: ["1", "2", "4"],
-      type: "multiple",
-      renderOption: function renderOption(option, props) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, option.name), /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, props));
-      }
-    }));
-    var li = wrapper.find("OptionGroup").at(1).find("Option").first();
-    expect(li.text()).toEqual("Option 4");
-    li.simulate("mouseenter");
-    li.simulate("click");
-    expect(onChange).toBeCalledWith(["1", "2"]);
-  });
-  it("should handleChange when multiple", function () {
-    var onChange = jest.fn();
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-      options: defaultGroupedOptions,
-      handleChange: onChange,
-      type: "multiple"
-    }));
-    var inputDomNode = wrapper.find("input").first().getDOMNode();
-    setInputValue("Option 1", inputDomNode, wrapper, keyUpEvent);
-    expect(wrapper.find("Option").at(0).prop("hover")).toEqual(true);
-    expect(wrapper.find("Checkbox").at(0).prop("checked")).toEqual(false);
-    simulateEnter(inputDomNode, wrapper);
-    expect(onChange).toBeCalledWith(["1"]);
-    wrapper.unmount();
-  });
-  it("should handle empty when multiple", function () {
-    var onChange = jest.fn();
-    var onEmpty = jest.fn();
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(Component, {
-      options: defaultGroupedOptions,
-      handleChange: onChange,
-      type: "multiple",
-      handleEmptyAction: onEmpty,
-      emptyValue: "Add new"
-    }));
-    var inputDomNode = wrapper.find("input").first().getDOMNode();
-    setInputValue("Im new Item", inputDomNode, wrapper, keyUpEvent);
-    simulateEnter(inputDomNode, wrapper);
-    expect(onEmpty).toBeCalledWith("Im new Item");
-    wrapper.unmount();
-  });
-  it("should handle clearInputOnSelect", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-    var onChange, _testRender, getByRole, inputDomNode;
-    return regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            onChange = jest.fn();
-            _testRender = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, {
-              options: defaultNonGroupedOptions,
-              handleChange: onChange,
-              type: "single",
-              clearInputOnSelect: true
-            })), getByRole = _testRender.getByRole;
-            inputDomNode = getByRole("textbox");
-            _context.next = 5;
-            return user.type(inputDomNode, "User 1");
-          case 5:
-            expect(inputDomNode).toHaveValue("User 1");
-            _context.next = 8;
-            return user.keyboard("{enter}");
-          case 8:
-            _context.next = 10;
-            return (0, _react2.waitFor)(function () {
-              return expect(inputDomNode).toHaveValue("");
-            });
-          case 10:
-          case "end":
-            return _context.stop();
-        }
-      }
-    }, _callee);
-  })));
-  it("selected groupped option should be at top of its group", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-    var onChange, _testRender2, getByText, getAllByRole, element;
-    return regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            onChange = jest.fn();
-            _testRender2 = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, {
-              options: defaultGroupedOptions,
-              handleChange: onChange,
-              type: "multiple",
-              clearInputOnSelect: true,
-              selected: ["3"]
-            })), getByText = _testRender2.getByText, getAllByRole = _testRender2.getAllByRole;
-            element = getByText("Option 13").parentElement;
-            expect(getAllByRole("listitem")[1]).toEqual(element);
-          case 4:
-          case "end":
-            return _context2.stop();
-        }
-      }
-    }, _callee2);
-  })));
-});
-//# sourceMappingURL=Autocomplete.spec.js.map