@dxc-technology/halstack-react 0.0.0-e201636 → 0.0.0-e26622f

package/text-input/TextInput.test.js

@@ -6,6 +6,10 @@ 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");
@@ -14,56 +18,54 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
 var _TextInput = _interopRequireDefault(require("./TextInput"));
 
+// 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"];
 describe("TextInput component tests", function () {
-  test("Renders with correct label", function () {
+  test("Renders with correct error aria attributes", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Example label"
-    })),
-        getByText = _render.getByText;
-
-    expect(getByText("Example label")).toBeTruthy();
-  });
-  test("Renders with correct label and helper text", function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Example label",
-      helperText: "Example helper text"
-    })),
-        getByText = _render2.getByText;
-
-    expect(getByText("Example label")).toBeTruthy();
-    expect(getByText("Example helper text")).toBeTruthy();
-  });
-  test("Renders with correct label and optional", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Example label",
-      helperText: "Example helper text",
-      optional: true
-    })),
-        getByText = _render3.getByText;
-
-    expect(getByText("Example label")).toBeTruthy();
-    expect(getByText("(Optional)")).toBeTruthy();
-    expect(getByText("Example helper text")).toBeTruthy();
-  });
-  test("Renders with correct placeholder", function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-      label: "Example label",
-      placeholder: "Placeholder"
-    })),
-        getByRole = _render4.getByRole;
-
-    var input = getByRole("textbox");
-    expect(input.getAttribute("placeholder")).toBe("Placeholder");
-  });
-  test("Renders with error message and correct aria attributes", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Error label",
       placeholder: "Placeholder",
       error: "Error message."
     })),
-        getByText = _render5.getByText,
-        getByRole = _render5.getByRole;
+        getByText = _render.getByText,
+        getByRole = _render.getByRole;
 
     var input = getByRole("textbox");
     var errorMessage = getByText("Error message.");
@@ -73,12 +75,12 @@ describe("TextInput component tests", function () {
     expect(errorMessage.getAttribute("aria-live")).toBe("assertive");
   });
   test("Renders with correct initial value", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Default label",
       placeholder: "Placeholder",
       defaultValue: "Example text"
     })),
-        getByRole = _render6.getByRole;
+        getByRole = _render2.getByRole;
 
     var input = getByRole("textbox");
     expect(input.value).toBe("Example text");
@@ -87,14 +89,14 @@ describe("TextInput component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Input label",
       placeholder: "Placeholder",
       onChange: onChange,
       onBlur: onBlur,
       clearable: true
     })),
-        getByRole = _render7.getByRole;
+        getByRole = _render3.getByRole;
 
     var input = getByRole("textbox");
 
@@ -124,13 +126,13 @@ describe("TextInput component tests", function () {
   test("Not optional constraint (onChange)", function () {
     var onChange = jest.fn();
 
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Input label",
       placeholder: "Placeholder",
       onChange: onChange,
       clearable: true
     })),
-        getByRole = _render8.getByRole;
+        getByRole = _render4.getByRole;
 
     var input = getByRole("textbox");
 
@@ -157,7 +159,7 @@ describe("TextInput component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Input label",
       placeholder: "Placeholder",
       onChange: onChange,
@@ -169,7 +171,7 @@ describe("TextInput component tests", function () {
       clearable: true,
       pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
     })),
-        getByRole = _render9.getByRole;
+        getByRole = _render5.getByRole;
 
     var input = getByRole("textbox");
 
@@ -217,7 +219,7 @@ describe("TextInput component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Input label",
       placeholder: "Placeholder",
       onChange: onChange,
@@ -230,7 +232,7 @@ describe("TextInput component tests", function () {
       minLength: 5,
       maxLength: 10
     })),
-        getByRole = _render10.getByRole;
+        getByRole = _render6.getByRole;
 
     var input = getByRole("textbox");
 
@@ -278,7 +280,7 @@ describe("TextInput component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Input label",
       placeholder: "Placeholder",
       onChange: onChange,
@@ -292,7 +294,7 @@ describe("TextInput component tests", function () {
       minLength: 5,
       maxLength: 10
     })),
-        getByRole = _render11.getByRole;
+        getByRole = _render7.getByRole;
 
     var input = getByRole("textbox");
 
@@ -357,11 +359,11 @@ describe("TextInput component tests", function () {
   test("onChange function is called correctly", function () {
     var onChange = jest.fn();
 
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Input label",
       onChange: onChange
     })),
-        getByRole = _render12.getByRole;
+        getByRole = _render8.getByRole;
 
     var input = getByRole("textbox");
 
@@ -377,12 +379,12 @@ describe("TextInput component tests", function () {
     var onBlur = jest.fn();
     var onChange = jest.fn();
 
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Input label",
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render13.getByRole;
+        getByRole = _render9.getByRole;
 
     var input = getByRole("textbox");
 
@@ -399,18 +401,18 @@ describe("TextInput component tests", function () {
       value: "Blur test"
     });
   });
-  test("Clear action's tooltip is correct", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-    var _render14, getByTitle;
+  test("Clear action tooltip is correct", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render10, getByTitle;
 
     return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
           case 0:
-            _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Input label",
               value: "Text",
               clearable: true
-            })), getByTitle = _render14.getByTitle;
+            })), getByTitle = _render10.getByTitle;
             expect(getByTitle("Clear field")).toBeTruthy();
 
           case 2:
@@ -421,11 +423,11 @@ describe("TextInput component tests", function () {
     }, _callee);
   })));
   test("Clear action onClick cleans the input", function () {
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Input label",
       clearable: true
     })),
-        getByRole = _render15.getByRole;
+        getByRole = _render11.getByRole;
 
     var input = getByRole("textbox");
 
@@ -440,15 +442,14 @@ describe("TextInput component tests", function () {
   test("Disabled input renders with correct aria and can not be modified", function () {
     var onChange = jest.fn();
 
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Input label",
       onChange: onChange,
       disabled: true
     })),
-        getByRole = _render16.getByRole;
+        getByRole = _render12.getByRole;
 
     var input = getByRole("textbox");
-    expect(input.getAttribute("aria-disabled")).toBe("true");
 
     _userEvent["default"].type(input, "Test");
 
@@ -473,12 +474,12 @@ describe("TextInput component tests", function () {
       }))
     };
 
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Disabled input label",
       action: action,
       disabled: true
     })),
-        getByRole = _render17.getByRole;
+        getByRole = _render13.getByRole;
 
     var input = getByRole("textbox");
     expect(input.disabled).toBeTruthy();
@@ -488,29 +489,29 @@ describe("TextInput component tests", function () {
     expect(onClick).not.toHaveBeenCalled();
   });
   test("Disabled input (clear default action should not be displayed, even with text written on the input)", function () {
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Disabled input label",
       value: "Sample text",
       disabled: true,
       clearable: true
     })),
-        getByRole = _render18.getByRole,
-        queryByRole = _render18.queryByRole;
+        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 _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    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 = _render19.getByRole,
-        getByText = _render19.getByText;
+        getByRole = _render15.getByRole,
+        getByText = _render15.getByText;
 
     var input = getByRole("textbox");
     expect(input.disabled).toBeTruthy();
@@ -537,13 +538,13 @@ describe("TextInput component tests", function () {
       title: "Search"
     };
 
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Input label",
       action: action
     })),
-        getByRole = _render20.getByRole,
-        getByTestId = _render20.getByTestId,
-        getByTitle = _render20.getByTitle;
+        getByRole = _render16.getByRole,
+        getByTestId = _render16.getByTestId,
+        getByTitle = _render16.getByTitle;
 
     expect(getByTestId("image")).toBeTruthy();
     expect(getByTitle("Search")).toBeTruthy();
@@ -553,17 +554,17 @@ describe("TextInput component tests", function () {
     expect(onClick).toHaveBeenCalled();
   });
   test("Renders with correct prefix and suffix", function () {
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Input label",
       prefix: "+34",
       suffix: "USD"
     })),
-        getByText = _render21.getByText;
+        getByText = _render17.getByText;
 
     expect(getByText("+34")).toBeTruthy();
     expect(getByText("USD")).toBeTruthy();
   });
-  test("Input has correct accesibility attributes", function () {
+  test("Text Input has correct aria accesibility attributes", function () {
     var onClick = jest.fn();
     var action = {
       onClick: onClick,
@@ -583,18 +584,19 @@ describe("TextInput component tests", function () {
       title: "Search"
     };
 
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Example label",
       clearable: true,
       action: action
     })),
-        getByRole = _render22.getByRole,
-        getAllByRole = _render22.getAllByRole;
+        getByRole = _render18.getByRole,
+        getAllByRole = _render18.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();
@@ -608,17 +610,18 @@ describe("TextInput component tests", function () {
     expect(search.getAttribute("aria-label")).toBe("Search");
   });
   test("Autosuggest has correct accesibility attributes", function () {
-    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Autocomplete Countries",
       optional: true,
       suggestions: countries
     })),
-        getByRole = _render23.getByRole,
-        getAllByRole = _render23.getAllByRole;
+        getByRole = _render19.getByRole,
+        getAllByRole = _render19.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);
@@ -626,25 +629,24 @@ describe("TextInput component tests", function () {
     var list = getByRole("listbox");
     expect(input.getAttribute("aria-controls")).toBe(list.id);
     expect(input.getAttribute("aria-expanded")).toBe("true");
-    expect(list.getAttribute("aria-label")).toBe("Autocomplete Countries");
     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", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-    var onChange, _render24, getByRole, getByText, input, list;
+    var onChange, _render20, getByRole, getByText, input, list;
 
     return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
             onChange = jest.fn();
-            _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autocomplete Countries",
               suggestions: countries,
               onChange: onChange
-            })), getByRole = _render24.getByRole, getByText = _render24.getByText;
+            })), getByRole = _render20.getByRole, getByText = _render20.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -664,18 +666,18 @@ describe("TextInput component synchronous autosuggest tests", function () {
     }, _callee2);
   })));
   test("Autosuggest is displayed when the user clicks the input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-    var onChange, _render25, getByRole, getByText, input, list;
+    var onChange, _render21, getByRole, getByText, input, list;
 
     return _regenerator["default"].wrap(function _callee3$(_context3) {
       while (1) {
         switch (_context3.prev = _context3.next) {
           case 0:
             onChange = jest.fn();
-            _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autocomplete Countries",
               suggestions: countries,
               onChange: onChange
-            })), getByRole = _render25.getByRole, getByText = _render25.getByText;
+            })), getByRole = _render21.getByRole, getByText = _render21.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -695,18 +697,18 @@ describe("TextInput component synchronous autosuggest tests", function () {
     }, _callee3);
   })));
   test("Autosuggest is displayed while the user is writing (if closed previously, if it is open stays open)", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-    var onChange, _render26, getByRole, queryByRole, getByText, getAllByText, input, list;
+    var onChange, _render22, getByRole, queryByRole, getByText, getAllByText, input, list;
 
     return _regenerator["default"].wrap(function _callee4$(_context4) {
       while (1) {
         switch (_context4.prev = _context4.next) {
           case 0:
             onChange = jest.fn();
-            _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render22 = (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, getAllByText = _render26.getAllByText;
+            })), getByRole = _render22.getByRole, queryByRole = _render22.queryByRole, getByText = _render22.getByText, getAllByText = _render22.getAllByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -740,7 +742,7 @@ describe("TextInput component synchronous autosuggest tests", function () {
     }, _callee4);
   })));
   test("Autosuggest displays filtered when the input has a default value", function () {
-    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Uncontrolled suggestions filtered by default",
       helperText: "Example of helper text",
       placeholder: "Placeholder",
@@ -749,9 +751,9 @@ describe("TextInput component synchronous autosuggest tests", function () {
       suggestions: ["Suggestion 11", "Suggestion 12", "Suggestion 23", "Suggestion 24"],
       clearable: true
     })),
-        getByRole = _render27.getByRole,
-        getByText = _render27.getByText,
-        getAllByText = _render27.getAllByText;
+        getByRole = _render23.getByRole,
+        getByText = _render23.getByText,
+        getAllByText = _render23.getAllByText;
 
     var input = getByRole("combobox");
     expect(input.value).toBe("Suggestion 2");
@@ -763,18 +765,18 @@ describe("TextInput component synchronous autosuggest tests", function () {
     expect(getByText("4")).toBeTruthy();
   });
   test("Autosuggest is not displayed when prop suggestions is an empty array", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
-    var onChange, _render28, queryByRole, input;
+    var onChange, _render24, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee5$(_context5) {
       while (1) {
         switch (_context5.prev = _context5.next) {
           case 0:
             onChange = jest.fn();
-            _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autocomplete Countries",
               suggestions: [],
               onChange: onChange
-            })), queryByRole = _render28.queryByRole;
+            })), queryByRole = _render24.queryByRole;
             input = queryByRole("textbox");
 
             _react2.fireEvent.focus(input);
@@ -789,18 +791,18 @@ describe("TextInput component synchronous autosuggest tests", function () {
     }, _callee5);
   })));
   test("Autosuggest closes the listbox when there are no matches for the user's input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
-    var onChange, _render29, getByRole, queryByRole, getByText, input, list;
+    var onChange, _render25, getByRole, queryByRole, getByText, input, list;
 
     return _regenerator["default"].wrap(function _callee6$(_context6) {
       while (1) {
         switch (_context6.prev = _context6.next) {
           case 0:
             onChange = jest.fn();
-            _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autocomplete Countries",
               suggestions: countries,
               onChange: onChange
-            })), getByRole = _render29.getByRole, queryByRole = _render29.queryByRole, getByText = _render29.getByText;
+            })), getByRole = _render25.getByRole, queryByRole = _render25.queryByRole, getByText = _render25.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -821,18 +823,18 @@ describe("TextInput component synchronous autosuggest tests", function () {
     }, _callee6);
   })));
   test("Autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
-    var onChange, _render30, getByRole, queryByRole, getByText, input, list;
+    var onChange, _render26, getByRole, queryByRole, getByText, input, list;
 
     return _regenerator["default"].wrap(function _callee7$(_context7) {
       while (1) {
         switch (_context7.prev = _context7.next) {
           case 0:
             onChange = jest.fn();
-            _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autocomplete Countries",
               suggestions: countries,
               onChange: onChange
-            })), getByRole = _render30.getByRole, queryByRole = _render30.queryByRole, getByText = _render30.getByText;
+            })), getByRole = _render26.getByRole, queryByRole = _render26.queryByRole, getByText = _render26.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -875,18 +877,18 @@ describe("TextInput component synchronous autosuggest tests", function () {
     }, _callee7);
   })));
   test("Autosuggest uncontrolled - Suggestion selected by click", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
-    var onChange, _render31, getByRole, getByText, queryByRole, input;
+    var onChange, _render27, getByRole, getByText, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee8$(_context8) {
       while (1) {
         switch (_context8.prev = _context8.next) {
           case 0:
             onChange = jest.fn();
-            _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autocomplete Countries",
               suggestions: countries,
               onChange: onChange
-            })), getByRole = _render31.getByRole, getByText = _render31.getByText, queryByRole = _render31.queryByRole;
+            })), getByRole = _render27.getByRole, getByText = _render27.getByText, queryByRole = _render27.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -910,19 +912,19 @@ describe("TextInput component synchronous autosuggest tests", function () {
     }, _callee8);
   })));
   test("Autosuggest controlled - Suggestion selected by click", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
-    var onChange, _render32, getByRole, getByText, queryByRole, input;
+    var onChange, _render28, getByRole, getByText, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee9$(_context9) {
       while (1) {
         switch (_context9.prev = _context9.next) {
           case 0:
             onChange = jest.fn();
-            _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autocomplete Countries",
               value: "Andor",
               suggestions: countries,
               onChange: onChange
-            })), getByRole = _render32.getByRole, getByText = _render32.getByText, queryByRole = _render32.queryByRole;
+            })), getByRole = _render28.getByRole, getByText = _render28.getByText, queryByRole = _render28.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -946,7 +948,7 @@ describe("TextInput component synchronous autosuggest tests", function () {
     }, _callee9);
   })));
   test("Autosuggest - Pattern constraint", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
-    var onChange, onBlur, _render33, getByRole, getByText, input;
+    var onChange, onBlur, _render29, getByRole, getByText, input;
 
     return _regenerator["default"].wrap(function _callee10$(_context10) {
       while (1) {
@@ -954,13 +956,13 @@ describe("TextInput component synchronous autosuggest tests", function () {
           case 0:
             onChange = jest.fn();
             onBlur = jest.fn();
-            _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autocomplete Countries",
               suggestions: countries,
               onChange: onChange,
               onBlur: onBlur,
               pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
-            })), getByRole = _render33.getByRole, getByText = _render33.getByText;
+            })), getByRole = _render29.getByRole, getByText = _render29.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -992,7 +994,7 @@ describe("TextInput component synchronous autosuggest tests", function () {
     }, _callee10);
   })));
   test("Autosuggest - Length constraint", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
-    var onChange, onBlur, _render34, getByText, getByRole, input;
+    var onChange, onBlur, _render30, getByText, getByRole, input;
 
     return _regenerator["default"].wrap(function _callee11$(_context11) {
       while (1) {
@@ -1000,14 +1002,14 @@ describe("TextInput component synchronous autosuggest tests", function () {
           case 0:
             onChange = jest.fn();
             onBlur = jest.fn();
-            _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autocomplete Countries",
               suggestions: countries,
               onChange: onChange,
               onBlur: onBlur,
               minLength: 5,
               maxLength: 10
-            })), getByText = _render34.getByText, getByRole = _render34.getByRole;
+            })), getByText = _render30.getByText, getByRole = _render30.getByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1039,18 +1041,18 @@ describe("TextInput component synchronous autosuggest tests", function () {
     }, _callee11);
   })));
   test("Autosuggest keys: arrow down key opens autosuggest, active first option is selected with Enter and closes the autosuggest", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
-    var onChange, _render35, getByRole, queryByRole, input, list;
+    var onChange, _render31, getByRole, queryByRole, input, list;
 
     return _regenerator["default"].wrap(function _callee12$(_context12) {
       while (1) {
         switch (_context12.prev = _context12.next) {
           case 0:
             onChange = jest.fn();
-            _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autocomplete Countries",
               suggestions: countries,
               onChange: onChange
-            })), getByRole = _render35.getByRole, queryByRole = _render35.queryByRole;
+            })), getByRole = _render31.getByRole, queryByRole = _render31.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.keyDown(input, {
@@ -1081,18 +1083,18 @@ describe("TextInput component synchronous autosuggest tests", function () {
     }, _callee12);
   })));
   test("Autosuggest keys: arrow up key opens autosuggest, active last option is selected with Enter and closes the autosuggest", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13() {
-    var onChange, _render36, getByRole, queryByRole, input, list;
+    var onChange, _render32, getByRole, queryByRole, input, list;
 
     return _regenerator["default"].wrap(function _callee13$(_context13) {
       while (1) {
         switch (_context13.prev = _context13.next) {
           case 0:
             onChange = jest.fn();
-            _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autocomplete Countries",
               suggestions: countries,
               onChange: onChange
-            })), getByRole = _render36.getByRole, queryByRole = _render36.queryByRole;
+            })), getByRole = _render32.getByRole, queryByRole = _render32.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.keyDown(input, {
@@ -1123,18 +1125,18 @@ describe("TextInput component synchronous autosuggest tests", function () {
     }, _callee13);
   })));
   test("Autosuggest keys: Esc key closes the autosuggest and cleans the input", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14() {
-    var onChange, _render37, getByRole, queryByRole, input, list;
+    var onChange, _render33, getByRole, queryByRole, input, list;
 
     return _regenerator["default"].wrap(function _callee14$(_context14) {
       while (1) {
         switch (_context14.prev = _context14.next) {
           case 0:
             onChange = jest.fn();
-            _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autocomplete Countries",
               suggestions: countries,
               onChange: onChange
-            })), getByRole = _render37.getByRole, queryByRole = _render37.queryByRole;
+            })), getByRole = _render33.getByRole, queryByRole = _render33.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1162,18 +1164,18 @@ describe("TextInput component synchronous autosuggest tests", function () {
     }, _callee14);
   })));
   test("Autosuggest keys: Enter, if no active suggestion closes the autosuggest", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15() {
-    var onChange, _render38, getByRole, queryByRole, input, list;
+    var onChange, _render34, getByRole, queryByRole, input, list;
 
     return _regenerator["default"].wrap(function _callee15$(_context15) {
       while (1) {
         switch (_context15.prev = _context15.next) {
           case 0:
             onChange = jest.fn();
-            _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autocomplete Countries",
               suggestions: countries,
               onChange: onChange
-            })), getByRole = _render38.getByRole, queryByRole = _render38.queryByRole;
+            })), getByRole = _render34.getByRole, queryByRole = _render34.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1199,18 +1201,18 @@ describe("TextInput component synchronous autosuggest tests", function () {
     }, _callee15);
   })));
   test("Autosuggest complex key secuence: write, arrow up two times, arrow down and select with Enter. Then, clean with Esc.", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16() {
-    var onChange, _render39, getByRole, queryByRole, input;
+    var onChange, _render35, getByRole, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee16$(_context16) {
       while (1) {
         switch (_context16.prev = _context16.next) {
           case 0:
             onChange = jest.fn();
-            _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autocomplete Countries",
               suggestions: countries,
               onChange: onChange
-            })), getByRole = _render39.getByRole, queryByRole = _render39.queryByRole;
+            })), getByRole = _render35.getByRole, queryByRole = _render35.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1268,7 +1270,7 @@ 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 _callee17() {
-    var callbackFunc, onChange, _render40, getByRole, getByText, input;
+    var callbackFunc, onChange, _render36, getByRole, getByText, input;
 
     return _regenerator["default"].wrap(function _callee17$(_context17) {
       while (1) {
@@ -1285,11 +1287,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               suggestions: callbackFunc,
               onChange: onChange
-            })), getByRole = _render40.getByRole, getByText = _render40.getByText;
+            })), getByRole = _render36.getByRole, getByText = _render36.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1340,7 +1342,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee17);
   })));
   test("Autosuggest Esc key works while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee18() {
-    var callbackFunc, onChange, _render41, getByRole, queryByText, queryByRole, input;
+    var callbackFunc, onChange, _render37, getByRole, queryByText, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee18$(_context18) {
       while (1) {
@@ -1357,11 +1359,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               suggestions: callbackFunc,
               onChange: onChange
-            })), getByRole = _render41.getByRole, queryByText = _render41.queryByText, queryByRole = _render41.queryByRole;
+            })), getByRole = _render37.getByRole, queryByText = _render37.queryByText, queryByRole = _render37.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1389,7 +1391,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee18);
   })));
   test("Autosuggest Esc + arrow down working while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee19() {
-    var callbackFunc, onChange, _render42, getByRole, getByText, queryByText, queryByRole, input, list;
+    var callbackFunc, onChange, _render38, getByRole, getByText, queryByText, queryByRole, input, list;
 
     return _regenerator["default"].wrap(function _callee19$(_context19) {
       while (1) {
@@ -1406,11 +1408,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               suggestions: callbackFunc,
               onChange: onChange
-            })), getByRole = _render42.getByRole, getByText = _render42.getByText, queryByText = _render42.queryByText, queryByRole = _render42.queryByRole;
+            })), getByRole = _render38.getByRole, getByText = _render38.getByText, queryByText = _render38.queryByText, queryByRole = _render38.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1458,7 +1460,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee19);
   })));
   test("Asynchronous uncontrolled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee20() {
-    var callbackFunc, onChange, _render43, getByRole, getByText, input;
+    var callbackFunc, onChange, _render39, getByRole, getByText, input;
 
     return _regenerator["default"].wrap(function _callee20$(_context20) {
       while (1) {
@@ -1475,11 +1477,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByRole = _render43.getByRole, getByText = _render43.getByText;
+            })), getByRole = _render39.getByRole, getByText = _render39.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1509,7 +1511,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee20);
   })));
   test("Asynchronous controlled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee21() {
-    var callbackFunc, onChange, _render44, getByRole, getByText, queryByRole, input;
+    var callbackFunc, onChange, _render40, getByRole, getByText, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee21$(_context21) {
       while (1) {
@@ -1526,12 +1528,12 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               value: "Denm",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByRole = _render44.getByRole, getByText = _render44.getByText, queryByRole = _render44.queryByRole;
+            })), getByRole = _render40.getByRole, getByText = _render40.getByText, queryByRole = _render40.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1560,7 +1562,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee21);
   })));
   test("Asynchronous autosuggest closes the listbox after finishing no matches search", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee22() {
-    var callbackFunc, onChange, _render45, getByText, getByRole, queryByRole, input;
+    var callbackFunc, onChange, _render41, getByText, getByRole, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee22$(_context22) {
       while (1) {
@@ -1577,11 +1579,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByText = _render45.getByText, getByRole = _render45.getByRole, queryByRole = _render45.queryByRole;
+            })), getByText = _render41.getByText, getByRole = _render41.getByRole, queryByRole = _render41.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1604,7 +1606,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee22);
   })));
   test("Asynchronous autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee23() {
-    var callbackFunc, onChange, _render46, getByText, getByRole, queryByRole, input;
+    var callbackFunc, onChange, _render42, getByText, getByRole, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee23$(_context23) {
       while (1) {
@@ -1621,11 +1623,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByText = _render46.getByText, getByRole = _render46.getByRole, queryByRole = _render46.queryByRole;
+            })), getByText = _render42.getByText, getByRole = _render42.getByRole, queryByRole = _render42.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1670,7 +1672,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee23);
   })));
   test("Asynchronous autosuggest request failed, shows 'Error fetching data' message", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee24() {
-    var errorCallbackFunc, onChange, _render47, getByRole, getByText, input;
+    var errorCallbackFunc, onChange, _render43, getByRole, getByText, input;
 
     return _regenerator["default"].wrap(function _callee24$(_context24) {
       while (1) {
@@ -1685,11 +1687,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: errorCallbackFunc
-            })), getByRole = _render47.getByRole, getByText = _render47.getByText;
+            })), getByRole = _render43.getByRole, getByText = _render43.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);