@activecollab/components 1.0.408 → 1.0.410

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

@@ -0,0 +1,853 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useRef } from "react";
+import { mount, render } from "enzyme";
+import { render as testRender, waitFor } from "@testing-library/react";
+import { Autocomplete } from "./Autocomplete";
+import { Checkbox } from "../Checkbox";
+import useForkRef from "../../utils/useForkRef";
+import { act } from "react-dom/test-utils";
+import userEvent from "@testing-library/user-event";
+var user = userEvent.setup();
+describe("<Autocomplete/>", function () {
+  var Component = function Component(props) {
+    var target = /*#__PURE__*/React.createElement("input", {
+      type: "text"
+    });
+    var childNode = useRef();
+    var elementRef = useRef(null);
+    var handleRefRef = useForkRef(target ? target.ref : undefined, childNode);
+    var handleRef = useForkRef(handleRefRef, elementRef);
+    var targetProps = {
+      ref: handleRef
+    };
+    return /*#__PURE__*/React.createElement("div", null, target && /*#__PURE__*/React.cloneElement(target, targetProps), /*#__PURE__*/React.createElement(Autocomplete, _extends({
+      renderOption: function renderOption(option, props) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, option.name), /*#__PURE__*/React.createElement(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;
+    act(function () {
+      inputDomNode.dispatchEvent(event);
+    });
+    wrapper.update();
+  };
+  var simulateKeyDown = function simulateKeyDown(inputDomNode, wrapper) {
+    act(function () {
+      inputDomNode.dispatchEvent(new KeyboardEvent("keydown", {
+        key: "ArrowDown"
+      }));
+    });
+    wrapper.update();
+  };
+  var simulateEnter = function simulateEnter(inputDomNode, wrapper) {
+    act(function () {
+      inputDomNode.dispatchEvent(new KeyboardEvent("keydown", {
+        key: "Enter"
+      }));
+    });
+    wrapper.update();
+  };
+  it("should render Autocomplete", function () {
+    var wrapper = render( /*#__PURE__*/React.createElement(Autocomplete, null));
+    expect(wrapper).toMatchSnapshot();
+  });
+  it("should render Autocomplete with selected options", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Autocomplete, {
+      options: [{
+        name: "test1",
+        id: 1
+      }, {
+        name: "test2",
+        id: 2
+      }],
+      selected: [1, 2],
+      renderOption: function renderOption(option, props) {
+        return /*#__PURE__*/React.createElement("div", null, option.name, " ", /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(Autocomplete, {
+      defaultValue: "None",
+      options: [{
+        name: "test1",
+        id: 1
+      }, {
+        name: "test2",
+        id: 2
+      }],
+      selected: [],
+      renderOption: function renderOption(option, props) {
+        return /*#__PURE__*/React.createElement("div", null, option.name, " ", /*#__PURE__*/React.createElement(Checkbox, props));
+      }
+    }));
+    expect(wrapper.find("Checkbox").first().prop("checked")).toBe(false);
+    wrapper.unmount();
+  });
+  it("should render Autocomplete with preselected default option", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(Autocomplete, {
+      defaultValue: "None",
+      options: [{
+        name: "test1",
+        id: 1
+      }, {
+        name: "test2",
+        id: 2
+      }],
+      selected: [],
+      preselectDefaultValue: true,
+      renderOption: function renderOption(option, props) {
+        return /*#__PURE__*/React.createElement("div", null, option.name, " ", /*#__PURE__*/React.createElement(Checkbox, props));
+      }
+    }));
+    expect(wrapper.find("Checkbox").first().prop("checked")).toBe(true);
+    wrapper.unmount();
+  });
+  it("should render Autocomplete without order", function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(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.createElement("input", null);
+      var childNode = useRef();
+      var elementRef = useRef(null);
+      var handleRefRef = useForkRef(target ? target.ref : undefined, childNode);
+      var handleRef = useForkRef(handleRefRef, elementRef);
+      var targetProps = {
+        ref: handleRef
+      };
+      return /*#__PURE__*/React.createElement("div", null, target && /*#__PURE__*/React.cloneElement(target, targetProps), /*#__PURE__*/React.createElement(Autocomplete, {
+        options: [{
+          name: "test2",
+          id: 2
+        }, {
+          name: "test1",
+          id: 1
+        }, {
+          name: "test3",
+          id: 3
+        }],
+        renderOption: function renderOption(option, props) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, option.name), /*#__PURE__*/React.createElement(Checkbox, props));
+        },
+        handleChange: handleChange,
+        handleEmptyAction: handleEmpty,
+        handleDefaultOptionChange: handleDefaultOptionChange,
+        inputEl: childNode
+      }));
+    };
+    var wrapper = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, option.name), /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, option.name), /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, option.name), /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, option.name), /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, option.name), /*#__PURE__*/React.createElement(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.createElement("input", null);
+      var childNode = useRef();
+      var elementRef = useRef(null);
+      var handleRefRef = useForkRef(target ? target.ref : undefined, childNode);
+      var handleRef = useForkRef(handleRefRef, elementRef);
+      var targetProps = {
+        ref: handleRef
+      };
+      return /*#__PURE__*/React.createElement("div", null, target && /*#__PURE__*/React.cloneElement(target, targetProps), /*#__PURE__*/React.createElement(Autocomplete, {
+        options: [{
+          name: "test2",
+          id: 2
+        }, {
+          name: "test1",
+          id: 1
+        }, {
+          name: "test3",
+          id: 3
+        }],
+        renderOption: function renderOption(option, props) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, option.name), /*#__PURE__*/React.createElement(Checkbox, props));
+        },
+        inputEl: childNode
+      }));
+    };
+    var wrapper = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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.createElement("input", null);
+      var childNode = useRef();
+      var elementRef = useRef(null);
+      var handleRefRef = useForkRef(target ? target.ref : undefined, childNode);
+      var handleRef = useForkRef(handleRefRef, elementRef);
+      var targetProps = {
+        ref: handleRef
+      };
+      return /*#__PURE__*/React.createElement("div", null, target && /*#__PURE__*/React.cloneElement(target, targetProps), /*#__PURE__*/React.createElement(Autocomplete, {
+        handleEmptyAction: handleEmptyAction,
+        emptyValue: emptyValue,
+        noResultText: noResultText,
+        options: groupedOptions,
+        renderOption: function renderOption(option, props) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, option.name), /*#__PURE__*/React.createElement(Checkbox, props));
+        },
+        inputEl: childNode
+      }));
+    };
+    var setInputValue = function setInputValue(value, inputDomNode, wrapper, event) {
+      inputDomNode.value = value;
+      act(function () {
+        inputDomNode.dispatchEvent(event);
+      });
+      wrapper.update();
+    };
+    var wrapper = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.createElement(Autocomplete, {
+      options: defaultGroupedOptions,
+      defaultValue: "None",
+      handleChange: onChange,
+      selected: ["1", "2"],
+      type: "multiple",
+      renderOption: function renderOption(option, props) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, option.name), /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.createElement(Autocomplete, {
+      options: defaultGroupedOptions,
+      defaultValue: "None",
+      handleChange: onChange,
+      selected: ["1", "2", "4"],
+      type: "multiple",
+      renderOption: function renderOption(option, props) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, option.name), /*#__PURE__*/React.createElement(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 = mount( /*#__PURE__*/React.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 = mount( /*#__PURE__*/React.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 = testRender( /*#__PURE__*/React.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 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 = testRender( /*#__PURE__*/React.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