@dxc-technology/halstack-react 0.0.0-b7324ab → 0.0.0-b7a7d72

package/text-input/TextInput.test.js

@@ -0,0 +1,1834 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _TextInput = _interopRequireDefault(require("./TextInput.tsx"));
+
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver(cb) {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+    this.cb = cb;
+  }
+
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {
+      this.cb([{
+        borderBoxSize: {
+          inlineSize: 0,
+          blockSize: 0
+        }
+      }]);
+    }
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }]);
+  return ResizeObserver;
+}();
+
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
+var countries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Cayman Islands, The", "Central African Republic", "Chad", "Democratic Republic of the Congo", "Dominican Republic", "Dominica", "Denmark", "Djibouti"];
+var specialCharacters = ["/", "\\", "*", "(", ")", "[", "]", "+", "?", "*{[]}|"];
+describe("TextInput component tests", function () {
+  test("Renders with correct error aria attributes", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Error label",
+      placeholder: "Placeholder",
+      error: "Error message."
+    })),
+        getByText = _render.getByText,
+        getByRole = _render.getByRole;
+
+    var input = getByRole("textbox");
+    var errorMessage = getByText("Error message.");
+    expect(errorMessage).toBeTruthy();
+    expect(input.getAttribute("aria-errormessage")).toBe(errorMessage.id);
+    expect(input.getAttribute("aria-invalid")).toBe("true");
+    expect(errorMessage.getAttribute("aria-live")).toBe("assertive");
+  });
+  test("Renders with correct initial value", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Default label",
+      placeholder: "Placeholder",
+      defaultValue: "Example text"
+    })),
+        getByRole = _render2.getByRole;
+
+    var input = getByRole("textbox");
+    expect(input.value).toBe("Example text");
+  });
+  test("Not optional constraint (onBlur)", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur,
+      clearable: true
+    })),
+        getByRole = _render3.getByRole;
+
+    var input = getByRole("textbox");
+
+    _react2.fireEvent.focus(input);
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value."
+    });
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "Test"
+      }
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "Test"
+    });
+  });
+  test("Not optional constraint (onChange)", function () {
+    var onChange = jest.fn();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      clearable: true
+    })),
+        getByRole = _render4.getByRole;
+
+    var input = getByRole("textbox");
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "Test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "Test"
+    });
+
+    _userEvent["default"].clear(input);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value."
+    });
+  });
+  test("Pattern constraint", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur,
+      margin: {
+        left: "medium",
+        right: "medium"
+      },
+      clearable: true,
+      pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
+    })),
+        getByRole = _render5.getByRole;
+
+    var input = getByRole("textbox");
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "pattern test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "pattern test",
+      error: "Please match the format requested."
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "pattern test",
+      error: "Please match the format requested."
+    });
+
+    _userEvent["default"].clear(input);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "pattern4&"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "pattern4&"
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "pattern4&"
+    });
+  });
+  test("Length constraint", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur,
+      margin: {
+        left: "medium",
+        right: "medium"
+      },
+      clearable: true,
+      minLength: 5,
+      maxLength: 10
+    })),
+        getByRole = _render6.getByRole;
+
+    var input = getByRole("textbox");
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _userEvent["default"].clear(input);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "length"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "length"
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "length"
+    });
+  });
+  test("Pattern and length constraints", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur,
+      margin: {
+        left: "medium",
+        right: "medium"
+      },
+      clearable: true,
+      pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$",
+      minLength: 5,
+      maxLength: 10
+    })),
+        getByRole = _render7.getByRole;
+
+    var input = getByRole("textbox");
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "tests"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "tests",
+      error: "Please match the format requested."
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "tests",
+      error: "Please match the format requested."
+    });
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "tests4&"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "tests4&"
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "tests4&"
+    });
+  });
+  test("onChange function is called correctly", function () {
+    var onChange = jest.fn();
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      onChange: onChange
+    })),
+        getByRole = _render8.getByRole;
+
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "onchange event test");
+
+    expect(input.value).toBe("onchange event test");
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "onchange event test"
+    });
+  });
+  test("onBlur function is called correctly", function () {
+    var onBlur = jest.fn();
+    var onChange = jest.fn();
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByRole = _render9.getByRole;
+
+    var input = getByRole("textbox");
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "Blur test"
+      }
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "Blur test"
+    });
+  });
+  test("Clear action tooltip is correct", function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      value: "Text",
+      clearable: true
+    })),
+        getByTitle = _render10.getByTitle;
+
+    expect(getByTitle("Clear field")).toBeTruthy();
+  });
+  test("Clear action onClick cleans the input", function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      clearable: true
+    })),
+        getByRole = _render11.getByRole;
+
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "Test");
+
+    var closeAction = getByRole("button");
+
+    _userEvent["default"].click(closeAction);
+
+    expect(input.value).toBe("");
+  });
+  test("Disabled text input renders with correct aria and can not be modified", function () {
+    var onChange = jest.fn();
+
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      onChange: onChange,
+      disabled: true
+    })),
+        getByRole = _render12.getByRole;
+
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "Test");
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  test("Disabled text input (action must be shown but not clickable)", function () {
+    var onClick = jest.fn();
+    var action = {
+      onClick: onClick,
+      icon: /*#__PURE__*/_react["default"].createElement("svg", {
+        "data-testid": "image",
+        xmlns: "http://www.w3.org/2000/svg",
+        height: "24px",
+        viewBox: "0 0 24 24",
+        width: "24px",
+        fill: "currentColor"
+      }, /*#__PURE__*/_react["default"].createElement("path", {
+        d: "M0 0h24v24H0V0z",
+        fill: "none"
+      }), /*#__PURE__*/_react["default"].createElement("path", {
+        d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+      }))
+    };
+
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Disabled input label",
+      action: action,
+      disabled: true
+    })),
+        getByRole = _render13.getByRole;
+
+    var input = getByRole("textbox");
+    expect(input.disabled).toBeTruthy();
+
+    _userEvent["default"].click(getByRole("button"));
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+  test("Disabled text input (clear default action should not be displayed, even with text written on the input)", function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Disabled input label",
+      value: "Sample text",
+      disabled: true,
+      clearable: true
+    })),
+        getByRole = _render14.getByRole,
+        queryByRole = _render14.queryByRole;
+
+    var input = getByRole("textbox");
+    expect(input.disabled).toBeTruthy();
+    expect(queryByRole("button")).toBeFalsy();
+  });
+  test("Disabled text input (suffix and prefix must be displayed)", function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Disabled input label",
+      value: "Sample text",
+      prefix: "+34",
+      suffix: "USD",
+      disabled: true
+    })),
+        getByRole = _render15.getByRole,
+        getByText = _render15.getByText;
+
+    var input = getByRole("textbox");
+    expect(input.disabled).toBeTruthy();
+    expect(getByText("+34")).toBeTruthy();
+    expect(getByText("USD")).toBeTruthy();
+  });
+  test("Read-only text input doesn't render the clear action", function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Disabled input label",
+      defaultValue: "Sample text",
+      readOnly: true,
+      clearable: true
+    })),
+        getByRole = _render16.getByRole,
+        queryByRole = _render16.queryByRole;
+
+    var input = getByRole("textbox");
+    expect(input.readOnly).toBeTruthy();
+    expect(queryByRole("button")).toBeFalsy();
+  });
+  test("Read-only text input does not trigger onChange function", function () {
+    var onChange = jest.fn();
+
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Example label",
+      onChange: onChange,
+      readOnly: true
+    })),
+        getByLabelText = _render17.getByLabelText;
+
+    var textInput = getByLabelText("Example label");
+
+    _userEvent["default"].type(textInput, "Test");
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  test("Read-only text input sends its value on submit", function () {
+    var handlerOnSubmit = jest.fn(function (e) {
+      e.preventDefault();
+      var formData = new FormData(e.target);
+      var formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({
+        data: "Text"
+      });
+    });
+
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+      onSubmit: handlerOnSubmit
+    }, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Example label",
+      name: "data",
+      defaultValue: "Text",
+      readOnly: true
+    }), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "submit"
+    }, "Submit"))),
+        getByText = _render18.getByText;
+
+    var submit = getByText("Submit");
+
+    _userEvent["default"].click(submit);
+
+    expect(handlerOnSubmit).toHaveBeenCalled();
+  });
+  test("Read-only text input doesn't trigger custom action's onClick event", function () {
+    var onClick = jest.fn();
+    var action = {
+      onClick: onClick,
+      icon: /*#__PURE__*/_react["default"].createElement("svg", {
+        "data-testid": "image",
+        xmlns: "http://www.w3.org/2000/svg",
+        height: "24px",
+        viewBox: "0 0 24 24",
+        width: "24px",
+        fill: "currentColor"
+      }, /*#__PURE__*/_react["default"].createElement("path", {
+        d: "M0 0h24v24H0V0z",
+        fill: "none"
+      }), /*#__PURE__*/_react["default"].createElement("path", {
+        d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+      })),
+      title: "Search"
+    };
+
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      action: action,
+      readOnly: true
+    })),
+        getByRole = _render19.getByRole;
+
+    _userEvent["default"].click(getByRole("button"));
+
+    expect(onClick).not.toHaveBeenCalled();
+  });
+  test("Action prop: image displayed with title and onClick event", function () {
+    var onClick = jest.fn();
+    var action = {
+      onClick: onClick,
+      icon: /*#__PURE__*/_react["default"].createElement("svg", {
+        "data-testid": "image",
+        xmlns: "http://www.w3.org/2000/svg",
+        height: "24px",
+        viewBox: "0 0 24 24",
+        width: "24px",
+        fill: "currentColor"
+      }, /*#__PURE__*/_react["default"].createElement("path", {
+        d: "M0 0h24v24H0V0z",
+        fill: "none"
+      }), /*#__PURE__*/_react["default"].createElement("path", {
+        d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+      })),
+      title: "Search"
+    };
+
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      action: action
+    })),
+        getByRole = _render20.getByRole,
+        getByTestId = _render20.getByTestId,
+        getByTitle = _render20.getByTitle;
+
+    expect(getByTestId("image")).toBeTruthy();
+    expect(getByTitle("Search")).toBeTruthy();
+
+    _userEvent["default"].click(getByRole("button"));
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test("Text input submit correctly value in form", function () {
+    var onClick = jest.fn();
+    var action = {
+      onClick: onClick,
+      icon: /*#__PURE__*/_react["default"].createElement("svg", {
+        "data-testid": "image",
+        xmlns: "http://www.w3.org/2000/svg",
+        height: "24px",
+        viewBox: "0 0 24 24",
+        width: "24px",
+        fill: "currentColor"
+      }, /*#__PURE__*/_react["default"].createElement("path", {
+        d: "M0 0h24v24H0V0z",
+        fill: "none"
+      }), /*#__PURE__*/_react["default"].createElement("path", {
+        d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+      })),
+      title: "Search"
+    };
+    var handlerOnSubmit = jest.fn(function (e) {
+      e.preventDefault();
+      var formData = new FormData(e.target);
+      var formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({
+        data: "test"
+      });
+    });
+
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+      onSubmit: handlerOnSubmit
+    }, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      name: "data",
+      action: action
+    }), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "submit"
+    }, "Submit"))),
+        getByText = _render21.getByText,
+        getAllByRole = _render21.getAllByRole,
+        getByRole = _render21.getByRole;
+
+    var search = getAllByRole("button")[0];
+    var submit = getByText("Submit");
+    var input = getByRole("textbox");
+
+    _userEvent["default"].type(input, "test");
+
+    expect(input.value).toBe("test");
+
+    _userEvent["default"].click(search);
+
+    expect(handlerOnSubmit).not.toHaveBeenCalled();
+
+    _userEvent["default"].click(submit);
+
+    expect(handlerOnSubmit).toHaveBeenCalled();
+  });
+  test("Renders with correct prefix and suffix", function () {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      prefix: "+34",
+      suffix: "USD"
+    })),
+        getByText = _render22.getByText;
+
+    expect(getByText("+34")).toBeTruthy();
+    expect(getByText("USD")).toBeTruthy();
+  });
+  test("Text Input has correct aria accessibility attributes", function () {
+    var onClick = jest.fn();
+    var action = {
+      onClick: onClick,
+      icon: /*#__PURE__*/_react["default"].createElement("svg", {
+        "data-testid": "image",
+        xmlns: "http://www.w3.org/2000/svg",
+        height: "24px",
+        viewBox: "0 0 24 24",
+        width: "24px",
+        fill: "currentColor"
+      }, /*#__PURE__*/_react["default"].createElement("path", {
+        d: "M0 0h24v24H0V0z",
+        fill: "none"
+      }), /*#__PURE__*/_react["default"].createElement("path", {
+        d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+      })),
+      title: "Search"
+    };
+
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Example label",
+      clearable: true,
+      action: action
+    })),
+        getByRole = _render23.getByRole,
+        getAllByRole = _render23.getAllByRole;
+
+    var input = getByRole("textbox");
+    expect(input.getAttribute("aria-autocomplete")).toBeNull();
+    expect(input.getAttribute("aria-controls")).toBeNull();
+    expect(input.getAttribute("aria-expanded")).toBeNull();
+    expect(input.getAttribute("aria-haspopup")).toBeNull();
+    expect(input.getAttribute("aria-activedescendant")).toBeNull();
+    expect(input.getAttribute("aria-invalid")).toBe("false");
+    expect(input.getAttribute("aria-errormessage")).toBeNull();
+    expect(input.getAttribute("aria-required")).toBe("true");
+
+    _userEvent["default"].type(input, "Text");
+
+    var clear = getAllByRole("button")[0];
+    expect(clear.getAttribute("aria-label")).toBe("Clear field");
+    var search = getAllByRole("button")[1];
+    expect(search.getAttribute("aria-label")).toBe("Search");
+  });
+  test("Autosuggest has correct accessibility attributes", function () {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      optional: true,
+      suggestions: countries
+    })),
+        getByRole = _render24.getByRole,
+        getAllByRole = _render24.getAllByRole;
+
+    var input = getByRole("combobox");
+    expect(input.getAttribute("aria-autocomplete")).toBe("list");
+    expect(input.getAttribute("aria-expanded")).toBe("false");
+    expect(input.getAttribute("aria-haspopup")).toBe("listbox");
+    expect(input.getAttribute("aria-required")).toBe("false");
+
+    _react2.fireEvent.focus(input);
+
+    var list = getByRole("listbox");
+    expect(input.getAttribute("aria-controls")).toBe(list.id);
+    expect(input.getAttribute("aria-expanded")).toBe("true");
+    var options = getAllByRole("option");
+    expect(options[0].getAttribute("aria-selected")).toBeNull();
+  });
+});
+describe("TextInput component synchronous autosuggest tests", function () {
+  test("Autosuggest is displayed when the input gains focus", function () {
+    var onChange = jest.fn();
+
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render25.getByRole,
+        getByText = _render25.getByText;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    var list = getByRole("listbox");
+    expect(list).toBeTruthy();
+    expect(getByText("Afghanistan")).toBeTruthy();
+    expect(getByText("Albania")).toBeTruthy();
+    expect(getByText("Algeria")).toBeTruthy();
+    expect(getByText("Andorra")).toBeTruthy();
+  });
+  test("Autosuggest is displayed when the user clicks the input", function () {
+    var onChange = jest.fn();
+
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render26.getByRole,
+        getByText = _render26.getByText;
+
+    var input = getByRole("combobox");
+
+    _userEvent["default"].click(input);
+
+    var list = getByRole("listbox");
+    expect(list).toBeTruthy();
+    expect(getByText("Afghanistan")).toBeTruthy();
+    expect(getByText("Albania")).toBeTruthy();
+    expect(getByText("Algeria")).toBeTruthy();
+    expect(getByText("Andorra")).toBeTruthy();
+  });
+  test("Autosuggest is displayed while the user is writing (if closed previously, if it is open stays open)", function () {
+    var onChange = jest.fn();
+
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render27.getByRole,
+        queryByRole = _render27.queryByRole,
+        getByText = _render27.getByText,
+        getAllByText = _render27.getAllByText;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    var list = getByRole("listbox");
+    expect(list).toBeTruthy();
+
+    _react2.fireEvent.keyDown(input, {
+      key: "Esc",
+      code: "Esc",
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(queryByRole("listbox")).toBeFalsy();
+
+    _userEvent["default"].type(input, "B");
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("B").length).toBe(4);
+    expect(getByText("ahamas")).toBeTruthy();
+    expect(getByText("ahrain")).toBeTruthy();
+    expect(getByText("angladesh")).toBeTruthy();
+    expect(getByText("arbados")).toBeTruthy();
+  });
+  test("Read-only text input does not open the suggestions list", function () {
+    var onChange = jest.fn();
+
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange,
+      readOnly: true
+    })),
+        getByRole = _render28.getByRole,
+        queryByRole = _render28.queryByRole;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    expect(queryByRole("listbox")).toBeFalsy();
+
+    _userEvent["default"].click(input);
+
+    expect(queryByRole("listbox")).toBeFalsy();
+  });
+  test("Autosuggest displays filtered when the input has a default value", function () {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Uncontrolled suggestions filtered by default",
+      helperText: "Example of helper text",
+      placeholder: "Placeholder",
+      margin: "medium",
+      defaultValue: "Suggestion 2",
+      suggestions: ["Suggestion 11", "Suggestion 12", "Suggestion 23", "Suggestion 24"],
+      clearable: true
+    })),
+        getByRole = _render29.getByRole,
+        getByText = _render29.getByText,
+        getAllByText = _render29.getAllByText;
+
+    var input = getByRole("combobox");
+    expect(input.value).toBe("Suggestion 2");
+
+    _react2.fireEvent.focus(input);
+
+    expect(getAllByText("Suggestion 2").length).toBe(2);
+    expect(getByText("3")).toBeTruthy();
+    expect(getByText("4")).toBeTruthy();
+  });
+  test("Autosuggest is not displayed when prop suggestions is an empty array", function () {
+    var onChange = jest.fn();
+
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: [],
+      onChange: onChange
+    })),
+        queryByRole = _render30.queryByRole;
+
+    var input = queryByRole("textbox");
+
+    _react2.fireEvent.focus(input);
+
+    expect(queryByRole("listbox")).toBeFalsy();
+  });
+  test("Autosuggest closes the listbox when there are no matches for the user's input", function () {
+    var onChange = jest.fn();
+
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render31.getByRole,
+        queryByRole = _render31.queryByRole,
+        getByText = _render31.getByText;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    var list = getByRole("listbox");
+    expect(list).toBeTruthy();
+    expect(getByText("Afghanistan")).toBeTruthy();
+
+    _userEvent["default"].type(input, "x");
+
+    expect(queryByRole("listbox")).toBeFalsy();
+  });
+  test("Autosuggest with no matches founded doesn't let the listbox to be opened", function () {
+    var onChange = jest.fn();
+
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render32.getByRole,
+        queryByRole = _render32.queryByRole,
+        getByText = _render32.getByText;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    var list = getByRole("listbox");
+    expect(list).toBeTruthy();
+    expect(getByText("Afghanistan")).toBeTruthy();
+
+    _userEvent["default"].type(input, "x");
+
+    expect(queryByRole("listbox")).toBeFalsy();
+
+    _react2.fireEvent.focus(input);
+
+    expect(queryByRole("listbox")).toBeFalsy();
+
+    _react2.fireEvent.keyDown(input, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    expect(queryByRole("listbox")).toBeFalsy();
+
+    _react2.fireEvent.keyDown(input, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(queryByRole("listbox")).toBeFalsy();
+  });
+  test("Autosuggest uncontrolled - Suggestion selected by click", function () {
+    var onChange = jest.fn();
+
+    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render33.getByRole,
+        getByText = _render33.getByText,
+        queryByRole = _render33.queryByRole;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    _userEvent["default"].type(input, "Alba");
+
+    expect(onChange).toHaveBeenCalled();
+    expect(getByText("Alba")).toBeTruthy();
+    expect(getByText("nia")).toBeTruthy();
+
+    _userEvent["default"].click(getByRole("option"));
+
+    expect(input.value).toBe("Albania");
+    expect(queryByRole("listbox")).toBeFalsy();
+  });
+  test("Autosuggest controlled - Suggestion selected by click", function () {
+    var onChange = jest.fn();
+
+    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      value: "Andor",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render34.getByRole,
+        getByText = _render34.getByText,
+        queryByRole = _render34.queryByRole;
+
+    var input = getByRole("combobox");
+
+    _userEvent["default"].click(getByText("Autocomplete Countries"));
+
+    expect(input.value).toBe("Andor");
+    expect(getByText("Andor")).toBeTruthy();
+    expect(getByText("ra")).toBeTruthy();
+
+    _userEvent["default"].click(getByRole("option"));
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "Andorra"
+    });
+    expect(queryByRole("listbox")).toBeFalsy();
+  });
+  test("Autosuggest - Pattern constraint", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange,
+      onBlur: onBlur,
+      pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
+    })),
+        getByRole = _render35.getByRole,
+        getByText = _render35.getByText;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    _userEvent["default"].type(input, "Andor");
+
+    expect(getByText("Andor")).toBeTruthy();
+    expect(getByText("ra")).toBeTruthy();
+
+    _userEvent["default"].click(getByRole("option"));
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "Andorra",
+      error: "Please match the format requested."
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "Andorra",
+      error: "Please match the format requested."
+    });
+  });
+  test("Autosuggest - Length constraint", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange,
+      onBlur: onBlur,
+      minLength: 5,
+      maxLength: 10
+    })),
+        getByText = _render36.getByText,
+        getByRole = _render36.getByRole;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    _userEvent["default"].type(input, "Cha");
+
+    expect(getByText("Cha")).toBeTruthy();
+    expect(getByText("d")).toBeTruthy();
+
+    _userEvent["default"].click(getByRole("option"));
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "Cha",
+      error: "Min length 5, max length 10."
+    });
+
+    _react2.fireEvent.blur(input);
+
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "Chad",
+      error: "Min length 5, max length 10."
+    });
+  });
+  test("Autosuggest keys: arrow down key opens autosuggest, active first option is selected with Enter and closes the autosuggest", function () {
+    var onChange = jest.fn();
+
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render37.getByRole,
+        queryByRole = _render37.queryByRole;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.keyDown(input, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    var list = getByRole("listbox");
+    expect(list).toBeTruthy();
+
+    _react2.fireEvent.keyDown(input, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    expect(input.value).toBe("Afghanistan");
+    expect(queryByRole("list")).toBeFalsy();
+  });
+  test("Autosuggest keys: arrow up key opens autosuggest, active last option is selected with Enter and closes the autosuggest", function () {
+    var onChange = jest.fn();
+
+    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render38.getByRole,
+        queryByRole = _render38.queryByRole;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.keyDown(input, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    var list = getByRole("listbox");
+    expect(list).toBeTruthy();
+
+    _react2.fireEvent.keyDown(input, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    expect(input.value).toBe("Djibouti");
+    expect(queryByRole("list")).toBeFalsy();
+  });
+  test("Autosuggest keys: Esc key closes the autosuggest and cleans the input", function () {
+    var onChange = jest.fn();
+
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render39.getByRole,
+        queryByRole = _render39.queryByRole;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    _userEvent["default"].type(input, "Bangla");
+
+    var list = getByRole("listbox");
+    expect(list).toBeTruthy();
+
+    _react2.fireEvent.keyDown(input, {
+      key: "Esc",
+      code: "Esc",
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(input.value).toBe("");
+    expect(queryByRole("listbox")).toBeFalsy();
+  });
+  test("Autosuggest keys: Enter, if no active suggestion closes the autosuggest", function () {
+    var onChange = jest.fn();
+
+    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render40.getByRole,
+        queryByRole = _render40.queryByRole;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    var list = getByRole("listbox");
+    expect(list).toBeTruthy();
+
+    _react2.fireEvent.keyDown(input, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(input.value).toBe("");
+    expect(queryByRole("list")).toBeFalsy();
+  });
+  test("Autosuggest complex key secuence: write, arrow up two times, arrow down and select with Enter. Then, clean with Esc.", function () {
+    var onChange = jest.fn();
+
+    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render41.getByRole,
+        queryByRole = _render41.queryByRole;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    _userEvent["default"].type(input, "Ba");
+
+    _react2.fireEvent.keyDown(input, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(input, {
+      key: "ArrowUp",
+      code: "ArrowUpp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(input, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    _react2.fireEvent.keyDown(input, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    expect(input.value).toBe("Barbados");
+    expect(queryByRole("listbox")).toBeFalsy();
+
+    _react2.fireEvent.keyDown(input, {
+      key: "Esc",
+      code: "Esp",
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(input.value).toBe("");
+    expect(queryByRole("listbox")).toBeFalsy();
+  });
+  test("Autosuggest escapes special characters", function () {
+    var onChange = jest.fn();
+
+    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: specialCharacters,
+      onChange: onChange
+    })),
+        getAllByText = _render42.getAllByText,
+        getByRole = _render42.getByRole;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    var list = getByRole("listbox");
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "/"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("/").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "\\"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("\\").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "*"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("*").length).toBe(2);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "("
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("(").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: ")"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText(")").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "["
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("[").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "]"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("]").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "+"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("+").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "?"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("?").length).toBe(1);
+  });
+});
+describe("TextInput component asynchronous autosuggest tests", function () {
+  test("Autosuggest 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var callbackFunc, onChange, _render43, getByRole, getByText, input;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            callbackFunc = jest.fn(function (newValue) {
+              var result = new Promise(function (resolve) {
+                return setTimeout(function () {
+                  resolve(newValue ? countries.filter(function (option) {
+                    return option.toUpperCase().includes(newValue.toUpperCase());
+                  }) : countries);
+                }, 100);
+              });
+              return result;
+            });
+            onChange = jest.fn();
+            _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+              label: "Autosuggest Countries",
+              suggestions: callbackFunc,
+              onChange: onChange
+            })), getByRole = _render43.getByRole, getByText = _render43.getByText;
+            input = getByRole("combobox");
+
+            _react2.fireEvent.focus(input);
+
+            expect(getByRole("listbox")).toBeTruthy();
+            _context.next = 8;
+            return (0, _react2.waitForElementToBeRemoved)(function () {
+              return getByText("Searching...");
+            });
+
+          case 8:
+            expect(getByText("Afghanistan")).toBeTruthy();
+            expect(getByText("Albania")).toBeTruthy();
+            expect(getByText("Algeria")).toBeTruthy();
+            expect(getByText("Andorra")).toBeTruthy();
+
+            _userEvent["default"].type(input, "Ab");
+
+            _context.next = 15;
+            return (0, _react2.waitForElementToBeRemoved)(function () {
+              return getByText("Searching...");
+            });
+
+          case 15:
+            expect(getByText("Cabo Verde")).toBeTruthy();
+
+            _react2.fireEvent.keyDown(input, {
+              key: "ArrowUp",
+              code: "ArrowUp",
+              keyCode: 38,
+              charCode: 38
+            });
+
+            _react2.fireEvent.keyDown(input, {
+              key: "Enter",
+              code: "Enter",
+              keyCode: 13,
+              charCode: 13
+            });
+
+            expect(input.value).toBe("Cabo Verde");
+
+          case 19:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  test("Autosuggest Esc key works while 'Searching...' message is shown", function () {
+    var callbackFunc = jest.fn(function (newValue) {
+      var result = new Promise(function (resolve) {
+        return setTimeout(function () {
+          resolve(newValue ? countries.filter(function (option) {
+            return option.toUpperCase().includes(newValue.toUpperCase());
+          }) : countries);
+        }, 100);
+      });
+      return result;
+    });
+    var onChange = jest.fn();
+
+    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autosuggest Countries",
+      suggestions: callbackFunc,
+      onChange: onChange
+    })),
+        getByRole = _render44.getByRole,
+        queryByText = _render44.queryByText,
+        queryByRole = _render44.queryByRole;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    expect(getByRole("listbox")).toBeTruthy();
+
+    _userEvent["default"].type(input, "Ab");
+
+    _react2.fireEvent.keyDown(input, {
+      key: "Esc",
+      code: "Esc",
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(queryByText("Searching...")).toBeFalsy();
+    expect(input.value).toBe("");
+  });
+  test("Autosuggest Esc + arrow down working while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var callbackFunc, onChange, _render45, getByRole, getByText, queryByText, queryByRole, input, list;
+
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            callbackFunc = jest.fn(function (newValue) {
+              var result = new Promise(function (resolve) {
+                return setTimeout(function () {
+                  resolve(newValue ? countries.filter(function (option) {
+                    return option.toUpperCase().includes(newValue.toUpperCase());
+                  }) : countries);
+                }, 100);
+              });
+              return result;
+            });
+            onChange = jest.fn();
+            _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+              label: "Autosuggest Countries",
+              suggestions: callbackFunc,
+              onChange: onChange
+            })), getByRole = _render45.getByRole, getByText = _render45.getByText, queryByText = _render45.queryByText, queryByRole = _render45.queryByRole;
+            input = getByRole("combobox");
+
+            _react2.fireEvent.focus(input);
+
+            list = getByRole("listbox");
+            expect(list).toBeTruthy();
+
+            _userEvent["default"].type(input, "Ab");
+
+            _react2.fireEvent.keyDown(input, {
+              key: "Esc",
+              code: "Esc",
+              keyCode: 27,
+              charCode: 27
+            });
+
+            expect(queryByRole("listbox")).toBeFalsy();
+            expect(queryByText("Searching...")).toBeFalsy();
+            expect(input.value).toBe("");
+
+            _react2.fireEvent.keyDown(input, {
+              key: "ArrowDown",
+              code: "ArrowDown",
+              keyCode: 40,
+              charCode: 40
+            });
+
+            expect(list).toBeTruthy();
+            _context2.next = 16;
+            return (0, _react2.waitForElementToBeRemoved)(function () {
+              return getByText("Searching...");
+            });
+
+          case 16:
+            expect(getByText("Afghanistan")).toBeTruthy();
+            expect(getByText("Albania")).toBeTruthy();
+            expect(getByText("Algeria")).toBeTruthy();
+            expect(getByText("Andorra")).toBeTruthy();
+
+          case 20:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  test("Asynchronous uncontrolled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var callbackFunc, onChange, _render46, getByRole, getByText, input;
+
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            callbackFunc = jest.fn(function (newValue) {
+              var result = new Promise(function (resolve) {
+                return setTimeout(function () {
+                  resolve(newValue ? countries.filter(function (option) {
+                    return option.toUpperCase().includes(newValue.toUpperCase());
+                  }) : countries);
+                }, 100);
+              });
+              return result;
+            });
+            onChange = jest.fn();
+            _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+              label: "Autosuggest Countries",
+              onChange: onChange,
+              suggestions: callbackFunc
+            })), getByRole = _render46.getByRole, getByText = _render46.getByText;
+            input = getByRole("combobox");
+
+            _react2.fireEvent.focus(input);
+
+            _userEvent["default"].type(input, "Den");
+
+            _context3.next = 8;
+            return (0, _react2.waitForElementToBeRemoved)(function () {
+              return getByText("Searching...");
+            });
+
+          case 8:
+            expect(getByText("Denmark")).toBeTruthy();
+
+            _userEvent["default"].click(getByRole("option"));
+
+            expect(onChange).toHaveBeenCalledWith({
+              value: "Denmark"
+            });
+            expect(input.value).toBe("Denmark");
+
+          case 12:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  test("Asynchronous controlled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var callbackFunc, onChange, _render47, getByRole, getByText, queryByRole, input;
+
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            callbackFunc = jest.fn(function (newValue) {
+              var result = new Promise(function (resolve) {
+                return setTimeout(function () {
+                  resolve(newValue ? countries.filter(function (option) {
+                    return option.toUpperCase().includes(newValue.toUpperCase());
+                  }) : countries);
+                }, 100);
+              });
+              return result;
+            });
+            onChange = jest.fn();
+            _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+              label: "Autosuggest Countries",
+              value: "Denm",
+              onChange: onChange,
+              suggestions: callbackFunc
+            })), getByRole = _render47.getByRole, getByText = _render47.getByText, queryByRole = _render47.queryByRole;
+            input = getByRole("combobox");
+            expect(input.value).toBe("Denm");
+
+            _userEvent["default"].click(getByText("Autosuggest Countries"));
+
+            _context4.next = 8;
+            return (0, _react2.waitForElementToBeRemoved)(function () {
+              return getByText("Searching...");
+            });
+
+          case 8:
+            expect(getByText("Denmark")).toBeTruthy();
+
+            _react2.fireEvent.focus(getByRole("option"));
+
+            _userEvent["default"].click(getByText("Denmark"));
+
+            expect(onChange).toHaveBeenCalledWith({
+              value: "Denmark"
+            });
+            expect(queryByRole("listbox")).toBeFalsy();
+
+          case 13:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
+  test("Asynchronous autosuggest closes the listbox after finishing no matches search", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var callbackFunc, onChange, _render48, getByText, getByRole, queryByRole, input;
+
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            callbackFunc = jest.fn(function (newValue) {
+              var result = new Promise(function (resolve) {
+                return setTimeout(function () {
+                  resolve(newValue ? countries.filter(function (option) {
+                    return option.toUpperCase().includes(newValue.toUpperCase());
+                  }) : countries);
+                }, 100);
+              });
+              return result;
+            });
+            onChange = jest.fn();
+            _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+              label: "Autosuggest Countries",
+              onChange: onChange,
+              suggestions: callbackFunc
+            })), getByText = _render48.getByText, getByRole = _render48.getByRole, queryByRole = _render48.queryByRole;
+            input = getByRole("combobox");
+
+            _react2.fireEvent.focus(input);
+
+            _userEvent["default"].type(input, "Example text");
+
+            _context5.next = 8;
+            return (0, _react2.waitForElementToBeRemoved)(function () {
+              return getByText("Searching...");
+            });
+
+          case 8:
+            expect(queryByRole("listbox")).toBeFalsy();
+
+          case 9:
+          case "end":
+            return _context5.stop();
+        }
+      }
+    }, _callee5);
+  })));
+  test("Asynchronous autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var callbackFunc, onChange, _render49, getByText, getByRole, queryByRole, input;
+
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            callbackFunc = jest.fn(function (newValue) {
+              var result = new Promise(function (resolve) {
+                return setTimeout(function () {
+                  resolve(newValue ? countries.filter(function (option) {
+                    return option.toUpperCase().includes(newValue.toUpperCase());
+                  }) : countries);
+                }, 100);
+              });
+              return result;
+            });
+            onChange = jest.fn();
+            _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+              label: "Autosuggest Countries",
+              onChange: onChange,
+              suggestions: callbackFunc
+            })), getByText = _render49.getByText, getByRole = _render49.getByRole, queryByRole = _render49.queryByRole;
+            input = getByRole("combobox");
+
+            _react2.fireEvent.focus(input);
+
+            _userEvent["default"].type(input, "wrong");
+
+            _context6.next = 8;
+            return (0, _react2.waitForElementToBeRemoved)(function () {
+              return getByText("Searching...");
+            });
+
+          case 8:
+            expect(queryByRole("listbox")).toBeFalsy();
+
+            _react2.fireEvent.focus(input);
+
+            expect(queryByRole("listbox")).toBeFalsy();
+
+            _react2.fireEvent.keyDown(input, {
+              key: "ArrowUp",
+              code: "ArrowUp",
+              keyCode: 38,
+              charCode: 38
+            });
+
+            expect(queryByRole("listbox")).toBeFalsy();
+
+            _react2.fireEvent.keyDown(input, {
+              key: "ArrowDown",
+              code: "ArrowDown",
+              keyCode: 40,
+              charCode: 40
+            });
+
+            expect(queryByRole("listbox")).toBeFalsy();
+
+          case 15:
+          case "end":
+            return _context6.stop();
+        }
+      }
+    }, _callee6);
+  })));
+  test("Asynchronous autosuggest request failed, shows 'Error fetching data' message", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+    var errorCallbackFunc, onChange, _render50, getByRole, getByText, input;
+
+    return _regenerator["default"].wrap(function _callee7$(_context7) {
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            errorCallbackFunc = jest.fn(function () {
+              var result = new Promise(function (resolve, reject) {
+                return setTimeout(function () {
+                  reject("err");
+                }, 100);
+              });
+              return result;
+            });
+            onChange = jest.fn();
+            _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+              label: "Autosuggest Countries",
+              onChange: onChange,
+              suggestions: errorCallbackFunc
+            })), getByRole = _render50.getByRole, getByText = _render50.getByText;
+            input = getByRole("combobox");
+
+            _react2.fireEvent.focus(input);
+
+            _context7.next = 7;
+            return (0, _react2.waitForElementToBeRemoved)(function () {
+              return getByText("Searching...");
+            });
+
+          case 7:
+            expect(getByText("Error fetching data")).toBeTruthy();
+
+          case 8:
+          case "end":
+            return _context7.stop();
+        }
+      }
+    }, _callee7);
+  })));
+});