@dxc-technology/halstack-react 0.0.0-9bd9511 → 0.0.0-9c20370

package/text-input/TextInput.test.js

@@ -1,21 +1,32 @@
 "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"));
+
+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() {
@@ -32,6 +43,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   }]);
   return ResizeObserver;
 }();
+
 global.DOMRect = {
   fromRect: function fromRect() {
     return {
@@ -49,12 +61,13 @@ 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;
+      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();
@@ -64,39 +77,48 @@ describe("TextInput component tests", function () {
   });
   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;
+      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;
+      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"
@@ -104,24 +126,30 @@ describe("TextInput component tests", function () {
   });
   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;
+      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: "",
@@ -131,47 +159,58 @@ describe("TextInput component tests", function () {
   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;
+      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&"
@@ -180,48 +219,59 @@ describe("TextInput component tests", function () {
   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;
+      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"
@@ -230,64 +280,78 @@ describe("TextInput component tests", function () {
   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;
+      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&"
@@ -295,13 +359,17 @@ describe("TextInput component tests", function () {
   });
   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;
+      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({
@@ -311,19 +379,24 @@ describe("TextInput component tests", function () {
   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;
+      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"
@@ -331,35 +404,45 @@ describe("TextInput component tests", function () {
   });
   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;
+      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;
+      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 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;
+      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 input (action must be shown but not clickable)", function () {
@@ -380,40 +463,46 @@ describe("TextInput component tests", function () {
         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;
+      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 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;
+      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 input (suffix and preffix 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;
+      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();
@@ -438,16 +527,20 @@ describe("TextInput component tests", function () {
       })),
       title: "Search"
     };
+
     var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Input label",
-        action: action
-      })),
-      getByRole = _render16.getByRole,
-      getByTestId = _render16.getByTestId,
-      getByTitle = _render16.getByTitle;
+      label: "Input label",
+      action: action
+    })),
+        getByRole = _render16.getByRole,
+        getByTestId = _render16.getByTestId,
+        getByTitle = _render16.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 () {
@@ -477,35 +570,44 @@ describe("TextInput component tests", function () {
         data: "test"
       });
     });
+
     var _render17 = (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 = _render17.getByText,
-      getAllByRole = _render17.getAllByRole,
-      getByRole = _render17.getByRole;
+      onSubmit: handlerOnSubmit
+    }, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Input label",
+      name: "data",
+      action: action
+    }), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "submit"
+    }, "Submit"))),
+        getByText = _render17.getByText,
+        getAllByRole = _render17.getAllByRole,
+        getByRole = _render17.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 _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Input label",
-        prefix: "+34",
-        suffix: "USD"
-      })),
-      getByText = _render18.getByText;
+      label: "Input label",
+      prefix: "+34",
+      suffix: "USD"
+    })),
+        getByText = _render18.getByText;
+
     expect(getByText("+34")).toBeTruthy();
     expect(getByText("USD")).toBeTruthy();
   });
@@ -528,13 +630,15 @@ describe("TextInput component tests", function () {
       })),
       title: "Search"
     };
+
     var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Example label",
-        clearable: true,
-        action: action
-      })),
-      getByRole = _render19.getByRole,
-      getAllByRole = _render19.getAllByRole;
+      label: "Example label",
+      clearable: true,
+      action: action
+    })),
+        getByRole = _render19.getByRole,
+        getAllByRole = _render19.getAllByRole;
+
     var input = getByRole("textbox");
     expect(input.getAttribute("aria-autocomplete")).toBeNull();
     expect(input.getAttribute("aria-controls")).toBeNull();
@@ -544,7 +648,9 @@ describe("TextInput component tests", function () {
     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];
@@ -552,18 +658,21 @@ describe("TextInput component tests", function () {
   });
   test("Autosuggest has correct accesibility attributes", function () {
     var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        optional: true,
-        suggestions: countries
-      })),
-      getByRole = _render20.getByRole,
-      getAllByRole = _render20.getAllByRole;
+      label: "Autocomplete Countries",
+      optional: true,
+      suggestions: countries
+    })),
+        getByRole = _render20.getByRole,
+        getAllByRole = _render20.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");
@@ -574,15 +683,19 @@ describe("TextInput component tests", function () {
 describe("TextInput component synchronous autosuggest tests", function () {
   test("Autosuggest is displayed when the input gains focus", function () {
     var onChange = jest.fn();
+
     var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        suggestions: countries,
-        onChange: onChange
-      })),
-      getByRole = _render21.getByRole,
-      getByText = _render21.getByText;
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render21.getByRole,
+        getByText = _render21.getByText;
+
     var input = getByRole("combobox");
+
     _react2.fireEvent.focus(input);
+
     var list = getByRole("listbox");
     expect(list).toBeTruthy();
     expect(getByText("Afghanistan")).toBeTruthy();
@@ -592,15 +705,19 @@ describe("TextInput component synchronous autosuggest tests", function () {
   });
   test("Autosuggest is displayed when the user clicks the input", function () {
     var onChange = jest.fn();
+
     var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        suggestions: countries,
-        onChange: onChange
-      })),
-      getByRole = _render22.getByRole,
-      getByText = _render22.getByText;
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render22.getByRole,
+        getByText = _render22.getByText;
+
     var input = getByRole("combobox");
+
     _react2.fireEvent.focus(input);
+
     var list = getByRole("listbox");
     expect(list).toBeTruthy();
     expect(getByText("Afghanistan")).toBeTruthy();
@@ -610,27 +727,35 @@ describe("TextInput component synchronous autosuggest tests", function () {
   });
   test("Autosuggest is displayed while the user is writing (if closed previously, if it is open stays open)", function () {
     var onChange = jest.fn();
+
     var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        suggestions: countries,
-        onChange: onChange
-      })),
-      getByRole = _render23.getByRole,
-      queryByRole = _render23.queryByRole,
-      getByText = _render23.getByText,
-      getAllByText = _render23.getAllByText;
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render23.getByRole,
+        queryByRole = _render23.queryByRole,
+        getByText = _render23.getByText,
+        getAllByText = _render23.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();
@@ -640,125 +765,163 @@ describe("TextInput component synchronous autosuggest tests", function () {
   });
   test("Autosuggest displays filtered when the input has a default value", function () {
     var _render24 = (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 = _render24.getByRole,
-      getByText = _render24.getByText,
-      getAllByText = _render24.getAllByText;
+      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 = _render24.getByRole,
+        getByText = _render24.getByText,
+        getAllByText = _render24.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 _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        suggestions: [],
-        onChange: onChange
-      })),
-      queryByRole = _render25.queryByRole;
+      label: "Autocomplete Countries",
+      suggestions: [],
+      onChange: onChange
+    })),
+        queryByRole = _render25.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 _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        suggestions: countries,
-        onChange: onChange
-      })),
-      getByRole = _render26.getByRole,
-      queryByRole = _render26.queryByRole,
-      getByText = _render26.getByText;
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render26.getByRole,
+        queryByRole = _render26.queryByRole,
+        getByText = _render26.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 _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;
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render27.getByRole,
+        queryByRole = _render27.queryByRole,
+        getByText = _render27.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 _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        suggestions: countries,
-        onChange: onChange
-      })),
-      getByRole = _render28.getByRole,
-      getByText = _render28.getByText,
-      queryByRole = _render28.queryByRole;
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render28.getByRole,
+        getByText = _render28.getByText,
+        queryByRole = _render28.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 _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        value: "Andor",
-        suggestions: countries,
-        onChange: onChange
-      })),
-      getByRole = _render29.getByRole,
-      getByText = _render29.getByText,
-      queryByRole = _render29.queryByRole;
+      label: "Autocomplete Countries",
+      value: "Andor",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render29.getByRole,
+        getByText = _render29.getByText,
+        queryByRole = _render29.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"
     });
@@ -767,26 +930,35 @@ describe("TextInput component synchronous autosuggest tests", function () {
   test("Autosuggest - Pattern constraint", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
+
     var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        suggestions: countries,
-        onChange: onChange,
-        onBlur: onBlur,
-        pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
-      })),
-      getByRole = _render30.getByRole,
-      getByText = _render30.getByText;
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange,
+      onBlur: onBlur,
+      pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
+    })),
+        getByRole = _render30.getByRole,
+        getByText = _render30.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."
@@ -795,27 +967,36 @@ describe("TextInput component synchronous autosuggest tests", function () {
   test("Autosuggest - Length constraint", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
+
     var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        suggestions: countries,
-        onChange: onChange,
-        onBlur: onBlur,
-        minLength: 5,
-        maxLength: 10
-      })),
-      getByText = _render31.getByText,
-      getByRole = _render31.getByRole;
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange,
+      onBlur: onBlur,
+      minLength: 5,
+      maxLength: 10
+    })),
+        getByText = _render31.getByText,
+        getByRole = _render31.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."
@@ -823,224 +1004,281 @@ describe("TextInput component synchronous autosuggest tests", function () {
   });
   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 _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        suggestions: countries,
-        onChange: onChange
-      })),
-      getByRole = _render32.getByRole,
-      queryByRole = _render32.queryByRole;
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render32.getByRole,
+        queryByRole = _render32.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 _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        suggestions: countries,
-        onChange: onChange
-      })),
-      getByRole = _render33.getByRole,
-      queryByRole = _render33.queryByRole;
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render33.getByRole,
+        queryByRole = _render33.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 _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        suggestions: countries,
-        onChange: onChange
-      })),
-      getByRole = _render34.getByRole,
-      queryByRole = _render34.queryByRole;
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render34.getByRole,
+        queryByRole = _render34.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 _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        suggestions: countries,
-        onChange: onChange
-      })),
-      getByRole = _render35.getByRole,
-      queryByRole = _render35.queryByRole;
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render35.getByRole,
+        queryByRole = _render35.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 _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        suggestions: countries,
-        onChange: onChange
-      })),
-      getByRole = _render36.getByRole,
-      queryByRole = _render36.queryByRole;
+      label: "Autocomplete Countries",
+      suggestions: countries,
+      onChange: onChange
+    })),
+        getByRole = _render36.getByRole,
+        queryByRole = _render36.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 _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autocomplete Countries",
-        suggestions: specialCharacters,
-        onChange: onChange
-      })),
-      getAllByText = _render37.getAllByText,
-      getByText = _render37.getByText,
-      getByRole = _render37.getByRole;
+      label: "Autocomplete Countries",
+      suggestions: specialCharacters,
+      onChange: onChange
+    })),
+        getAllByText = _render37.getAllByText,
+        getByRole = _render37.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);
   });
@@ -1048,60 +1286,73 @@ describe("TextInput component synchronous autosuggest tests", function () {
 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, _render38, 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);
+      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();
+            _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+              label: "Autosuggest Countries",
+              suggestions: callbackFunc,
+              onChange: onChange
+            })), getByRole = _render38.getByRole, getByText = _render38.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
             });
-            return result;
-          });
-          onChange = jest.fn();
-          _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-            label: "Autosuggest Countries",
-            suggestions: callbackFunc,
-            onChange: onChange
-          })), getByRole = _render38.getByRole, getByText = _render38.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();
+
+            _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);
   })));
@@ -1117,287 +1368,355 @@ describe("TextInput component asynchronous autosuggest tests", function () {
       return result;
     });
     var onChange = jest.fn();
+
     var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-        label: "Autosuggest Countries",
-        suggestions: callbackFunc,
-        onChange: onChange
-      })),
-      getByRole = _render39.getByRole,
-      queryByText = _render39.queryByText,
-      queryByRole = _render39.queryByRole;
+      label: "Autosuggest Countries",
+      suggestions: callbackFunc,
+      onChange: onChange
+    })),
+        getByRole = _render39.getByRole,
+        queryByText = _render39.queryByText,
+        queryByRole = _render39.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, _render40, 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);
+      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();
+            _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+              label: "Autosuggest Countries",
+              suggestions: callbackFunc,
+              onChange: onChange
+            })), getByRole = _render40.getByRole, getByText = _render40.getByText, queryByText = _render40.queryByText, queryByRole = _render40.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...");
             });
-            return result;
-          });
-          onChange = jest.fn();
-          _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-            label: "Autosuggest Countries",
-            suggestions: callbackFunc,
-            onChange: onChange
-          })), getByRole = _render40.getByRole, getByText = _render40.getByText, queryByText = _render40.queryByText, queryByRole = _render40.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();
+
+          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, _render41, 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);
+      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;
             });
-            return result;
-          });
-          onChange = jest.fn();
-          _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-            label: "Autosuggest Countries",
-            onChange: onChange,
-            suggestions: callbackFunc
-          })), getByRole = _render41.getByRole, getByText = _render41.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();
+            onChange = jest.fn();
+            _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+              label: "Autosuggest Countries",
+              onChange: onChange,
+              suggestions: callbackFunc
+            })), getByRole = _render41.getByRole, getByText = _render41.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, _render42, 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);
+      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();
+            _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+              label: "Autosuggest Countries",
+              value: "Denm",
+              onChange: onChange,
+              suggestions: callbackFunc
+            })), getByRole = _render42.getByRole, getByText = _render42.getByText, queryByRole = _render42.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"
             });
-            return result;
-          });
-          onChange = jest.fn();
-          _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-            label: "Autosuggest Countries",
-            value: "Denm",
-            onChange: onChange,
-            suggestions: callbackFunc
-          })), getByRole = _render42.getByRole, getByText = _render42.getByText, queryByRole = _render42.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();
+            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, _render43, 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);
+      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;
             });
-            return result;
-          });
-          onChange = jest.fn();
-          _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-            label: "Autosuggest Countries",
-            onChange: onChange,
-            suggestions: callbackFunc
-          })), getByText = _render43.getByText, getByRole = _render43.getByRole, queryByRole = _render43.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();
+            onChange = jest.fn();
+            _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+              label: "Autosuggest Countries",
+              onChange: onChange,
+              suggestions: callbackFunc
+            })), getByText = _render43.getByText, getByRole = _render43.getByRole, queryByRole = _render43.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, _render44, 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);
+      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;
             });
-            return result;
-          });
-          onChange = jest.fn();
-          _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-            label: "Autosuggest Countries",
-            onChange: onChange,
-            suggestions: callbackFunc
-          })), getByText = _render44.getByText, getByRole = _render44.getByRole, queryByRole = _render44.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();
+            onChange = jest.fn();
+            _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+              label: "Autosuggest Countries",
+              onChange: onChange,
+              suggestions: callbackFunc
+            })), getByText = _render44.getByText, getByRole = _render44.getByRole, queryByRole = _render44.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, _render45, 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);
+      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;
             });
-            return result;
-          });
-          onChange = jest.fn();
-          _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-            label: "Autosuggest Countries",
-            onChange: onChange,
-            suggestions: errorCallbackFunc
-          })), getByRole = _render45.getByRole, getByText = _render45.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();
+            onChange = jest.fn();
+            _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+              label: "Autosuggest Countries",
+              onChange: onChange,
+              suggestions: errorCallbackFunc
+            })), getByRole = _render45.getByRole, getByText = _render45.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);
   })));