@dxc-technology/halstack-react 0.0.0-fc652e4 → 0.0.0-fdc49d2

package/select/Select.test.js

@@ -0,0 +1,2016 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Select = _interopRequireDefault(require("./Select"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var single_options = [{
+  label: "Option 01",
+  value: "1"
+}, {
+  label: "Option 02",
+  value: "2"
+}, {
+  label: "Option 03",
+  value: "3"
+}, {
+  label: "Option 04",
+  value: "4"
+}, {
+  label: "Option 05",
+  value: "5"
+}, {
+  label: "Option 06",
+  value: "6"
+}, {
+  label: "Option 07",
+  value: "7"
+}, {
+  label: "Option 08",
+  value: "8"
+}, {
+  label: "Option 09",
+  value: "9"
+}, {
+  label: "Option 10",
+  value: "10"
+}, {
+  label: "Option 11",
+  value: "11"
+}, {
+  label: "Option 12",
+  value: "12"
+}, {
+  label: "Option 13",
+  value: "13"
+}, {
+  label: "Option 14",
+  value: "14"
+}, {
+  label: "Option 15",
+  value: "15"
+}, {
+  label: "Option 16",
+  value: "16"
+}, {
+  label: "Option 17",
+  value: "17"
+}, {
+  label: "Option 18",
+  value: "18"
+}, {
+  label: "Option 19",
+  value: "19"
+}, {
+  label: "Option 20",
+  value: "20"
+}];
+var svg_icon_options = [{
+  label: "3G Mobile",
+  value: "1",
+  icon: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    width: "24px",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0,0h24v24H0V0z",
+    fill: "none"
+  })), /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z"
+  }))))
+}, {
+  label: "Ethernet",
+  value: "2",
+  icon: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    width: "24px",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z"
+  }))
+}, {
+  label: "Wi-fi",
+  value: "3",
+  icon: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    width: "24px",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0 0h24v24H0V0zm0 0h24v24H0V0z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"
+  }))
+}, {
+  label: "Settings backup restore (just for previous configuration)",
+  value: "4",
+  icon: /*#__PURE__*/_react["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    width: "24px",
+    fill: "currentColor"
+  }, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M0 0h24v24H0V0z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M14 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-9c-4.97 0-9 4.03-9 9H0l4 4 4-4H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.51 0-2.91-.49-4.06-1.3l-1.42 1.44C8.04 20.3 9.94 21 12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z"
+  }))
+}, {
+  label: "Regular",
+  value: "Regular"
+}];
+var url_icon_options = [{
+  label: "Instagram",
+  value: "1",
+  icon: "https://cdn.icon-icons.com/icons2/2518/PNG/512/brand_instagram_icon_151534.png"
+}, {
+  label: "Twitter",
+  value: "2",
+  icon: "https://cdn-icons-png.flaticon.com/512/81/81609.png"
+}, {
+  label: "Snapchat",
+  value: "3"
+}, {
+  label: "Facebook",
+  value: "4",
+  icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/2048px-2021_Facebook_icon.svg.png"
+}, {
+  label: "Pinterest",
+  value: "5",
+  icon: "https://cdn-icons-png.flaticon.com/512/145/145808.png"
+}];
+var group_options = [{
+  label: "Colores",
+  options: [{
+    label: "Azul",
+    value: "azul"
+  }, {
+    label: "Rojo",
+    value: "rojo"
+  }, {
+    label: "Rosa",
+    value: "rosa"
+  }, {
+    label: "Verde",
+    value: "verde"
+  }, {
+    label: "Amarillo",
+    value: "amarillo"
+  }, {
+    label: "Blanco",
+    value: "blanco"
+  }, {
+    label: "Negro",
+    value: "negro"
+  }]
+}, {
+  label: "Ciudades españolas",
+  options: [{
+    label: "Madrid",
+    value: "madrid"
+  }, {
+    label: "Oviedo",
+    value: "oviedo"
+  }, {
+    label: "Sevilla",
+    value: "sevilla"
+  }, {
+    label: "Bilbao",
+    value: "bilbao"
+  }, {
+    label: "Barcelona",
+    value: "barcelona"
+  }]
+}, {
+  label: "Ríos españoles",
+  options: [{
+    label: "Miño",
+    value: "miño"
+  }, {
+    label: "Duero",
+    value: "duero"
+  }, {
+    label: "Tajo",
+    value: "tajo"
+  }, {
+    label: "Guadiana",
+    value: "guadiana"
+  }, {
+    label: "Guadalquivir",
+    value: "guadalquivir"
+  }, {
+    label: "Ebro",
+    value: "ebro"
+  }]
+}];
+var grouped_icon_options = [{
+  label: "Social Media",
+  options: [{
+    label: "Instagram",
+    value: "1",
+    icon: "https://cdn.icon-icons.com/icons2/2518/PNG/512/brand_instagram_icon_151534.png"
+  }, {
+    label: "Twitter",
+    value: "2",
+    icon: "https://cdn-icons-png.flaticon.com/512/81/81609.png"
+  }, {
+    label: "Facebook",
+    value: "3",
+    icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/2048px-2021_Facebook_icon.svg.png"
+  }, {
+    label: "Pinterest",
+    value: "4",
+    icon: "https://cdn-icons-png.flaticon.com/512/145/145808.png"
+  }]
+}, {
+  label: "Group 2",
+  options: [{
+    label: "Option 4",
+    value: "5"
+  }, {
+    label: "Option 5",
+    value: "6"
+  }, {
+    label: "Option 6",
+    value: "7"
+  }]
+}, {
+  label: "Group 3",
+  options: [{
+    label: "Option 7",
+    value: "8"
+  }, {
+    label: "Option 8",
+    value: "9"
+  }, {
+    label: "Option 9",
+    value: "10"
+  }]
+}];
+describe("Select component tests", function () {
+  test("Renders with correct label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      helperText: "test-select-helper-text",
+      placeholder: "Example text"
+    })),
+        getByText = _render.getByText,
+        getByRole = _render.getByRole;
+
+    var select = getByRole("combobox");
+    var label = getByText("test-select-label");
+    expect(label).toBeTruthy();
+
+    _userEvent["default"].click(label);
+
+    expect(document.activeElement).toEqual(select);
+  });
+  test("Renders with correct helper text and placeholder", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      helperText: "test-select-helper-text",
+      placeholder: "Example text"
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("test-select-helper-text")).toBeTruthy();
+    expect(getByText("Example text")).toBeTruthy();
+  });
+  test("Renders with correct optional label", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      optional: true
+    })),
+        getByText = _render3.getByText;
+
+    expect(getByText("test-select-label")).toBeTruthy();
+    expect(getByText("(Optional)")).toBeTruthy();
+  });
+  test("Renders with error message and correct aria attributes", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "Error label",
+      error: "Error message."
+    })),
+        getByText = _render4.getByText,
+        getByRole = _render4.getByRole;
+
+    var select = getByRole("combobox");
+    var errorMessage = getByText("Error message.");
+    expect(errorMessage).toBeTruthy();
+    expect(select.getAttribute("aria-errormessage")).toBe(errorMessage.id);
+    expect(select.getAttribute("aria-invalid")).toBe("true");
+    expect(errorMessage.getAttribute("aria-live")).toBe("assertive");
+  });
+  test("Renders with correct aria attributes", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      placeholder: "Example",
+      options: single_options
+    })),
+        getByText = _render5.getByText,
+        getByRole = _render5.getByRole;
+
+    var select = getByRole("combobox");
+    var label = getByText("test-select-label");
+    expect(select.getAttribute("aria-disabled")).toBe("false");
+    expect(select.getAttribute("aria-haspopup")).toBe("listbox");
+    expect(select.getAttribute("aria-expanded")).toBe("false");
+    expect(select.getAttribute("aria-required")).toBe("true");
+    expect(select.getAttribute("aria-labelledby")).toBe(label.id);
+    expect(select.getAttribute("aria-activedescendant")).toBeNull();
+    expect(select.getAttribute("aria-invalid")).toBe("false");
+
+    _userEvent["default"].click(select);
+
+    var list = getByRole("listbox");
+    expect(select.getAttribute("aria-controls")).toBe(list.id);
+    expect(list.getAttribute("aria-multiselectable")).toBe("false");
+  });
+  test("Single selection: Renders with correct default value", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      name: "test",
+      defaultValue: "4",
+      options: single_options
+    })),
+        getByText = _render6.getByText,
+        getByRole = _render6.getByRole,
+        getAllByRole = _render6.getAllByRole,
+        queryByRole = _render6.queryByRole,
+        container = _render6.container;
+
+    var select = getByRole("combobox");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(getByText("Option 04")).toBeTruthy();
+    expect(submitInput.value).toBe("4");
+
+    _userEvent["default"].click(select);
+
+    expect(getAllByRole("option")[3].getAttribute("aria-selected")).toBe("true");
+
+    _userEvent["default"].click(getAllByRole("option")[7]);
+
+    expect(getByText("Option 08")).toBeTruthy();
+    expect(submitInput.value).toBe("8");
+  });
+  test("Multiple selection: Renders with correct default value", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      name: "test",
+      defaultValue: ["4", "2", "6"],
+      options: single_options,
+      multiple: true
+    })),
+        getByText = _render7.getByText,
+        getByRole = _render7.getByRole,
+        getAllByRole = _render7.getAllByRole,
+        queryByRole = _render7.queryByRole,
+        container = _render7.container;
+
+    var select = getByRole("combobox");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(getByText("Option 02, Option 04, Option 06")).toBeTruthy();
+    expect(submitInput.value).toBe("4,2,6");
+
+    _userEvent["default"].click(select);
+
+    expect(getAllByRole("option")[3].getAttribute("aria-selected")).toBe("true");
+    expect(getAllByRole("option")[1].getAttribute("aria-selected")).toBe("true");
+    expect(getAllByRole("option")[5].getAttribute("aria-selected")).toBe("true");
+
+    _userEvent["default"].click(getAllByRole("option")[2]);
+
+    expect(getByText("Option 02, Option 03, Option 04, Option 06")).toBeTruthy();
+    expect(submitInput.value).toBe("4,2,6,3");
+  });
+  test("Disabled select - Clear all options action must be shown but not clickable", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      value: ["1", "2"],
+      options: single_options,
+      disabled: true,
+      searchable: true,
+      multiple: true
+    })),
+        getByRole = _render8.getByRole,
+        getByText = _render8.getByText,
+        queryByRole = _render8.queryByRole;
+
+    var select = getByRole("combobox");
+    expect(select.getAttribute("aria-disabled")).toBe("true");
+
+    _userEvent["default"].click(select);
+
+    expect(queryByRole("listbox")).toBeFalsy();
+
+    _userEvent["default"].click(getByRole("button"));
+
+    expect(getByText("Option 01, Option 02")).toBeTruthy();
+  });
+  test("Focused select does not open the listbox", function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      value: ["1", "2"],
+      options: single_options,
+      disabled: true,
+      searchable: true,
+      multiple: true
+    })),
+        getByRole = _render9.getByRole,
+        queryByRole = _render9.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _react2.fireEvent.focus(select);
+
+    expect(queryByRole("listbox")).toBeFalsy();
+  });
+  test("Controlled - Not optional constraint", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options,
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByRole = _render10.getByRole,
+        getAllByRole = _render10.getAllByRole;
+
+    var select = getByRole("combobox");
+    expect(select.getAttribute("aria-required")).toBe("true");
+
+    _react2.fireEvent.focus(select);
+
+    _react2.fireEvent.blur(select);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value."
+    });
+
+    _userEvent["default"].click(select);
+
+    _userEvent["default"].click(getAllByRole("option")[0]);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "1",
+      error: null
+    });
+
+    _react2.fireEvent.focus(select);
+
+    _react2.fireEvent.blur(select);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "1",
+      error: null
+    });
+  });
+  test("Controlled - Optional constraint", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options,
+      onChange: onChange,
+      onBlur: onBlur,
+      optional: true
+    })),
+        getByRole = _render11.getByRole;
+
+    var select = getByRole("combobox");
+    expect(select.getAttribute("aria-required")).toBe("false");
+
+    _react2.fireEvent.focus(select);
+
+    _react2.fireEvent.blur(select);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "",
+      error: null
+    });
+    expect(select.getAttribute("aria-invalid")).toBe("false");
+  });
+  test("Non-Grouped Options - Opens listbox and renders correctly or closes it with a click on select", function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options
+    })),
+        getByText = _render12.getByText,
+        getByRole = _render12.getByRole,
+        getAllByRole = _render12.getAllByRole,
+        queryByRole = _render12.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    expect(getByRole("listbox")).toBeTruthy();
+    expect(select.getAttribute("aria-expanded")).toBe("true");
+    expect(getByText("Option 01")).toBeTruthy();
+    expect(getByText("Option 02")).toBeTruthy();
+    expect(getByText("Option 08")).toBeTruthy();
+    expect(getByText("Option 09")).toBeTruthy();
+    expect(getAllByRole("option").length).toBe(20);
+
+    _userEvent["default"].click(select);
+
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(select.getAttribute("aria-expanded")).toBe("false");
+  });
+  test("Non-Grouped Options - If an empty list of options is passed, the select is rendered but doestn't open the listbox", function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: []
+    })),
+        getByRole = _render13.getByRole,
+        queryByRole = _render13.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(select.getAttribute("aria-expanded")).toBe("false");
+  });
+  test("Non-Grouped Options - Click in an option selects it and closes the listbox", function () {
+    var onChange = jest.fn();
+
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      name: "test",
+      label: "test-select-label",
+      options: single_options,
+      onChange: onChange
+    })),
+        getByText = _render14.getByText,
+        getByRole = _render14.getByRole,
+        getAllByRole = _render14.getAllByRole,
+        queryByRole = _render14.queryByRole,
+        container = _render14.container;
+
+    var select = getByRole("combobox");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+
+    _userEvent["default"].click(select);
+
+    _userEvent["default"].click(getAllByRole("option")[2]);
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "3",
+      error: null
+    });
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(getByText("Option 03")).toBeTruthy();
+
+    _userEvent["default"].click(select);
+
+    expect(getAllByRole("option")[2].getAttribute("aria-selected")).toBe("true");
+    expect(submitInput.value).toBe("3");
+  });
+  test("Non-Grouped Options - Optional renders an empty first option (selected by default) with the placeholder as its label", function () {
+    var onChange = jest.fn();
+
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      placeholder: "Choose an option",
+      options: single_options,
+      onChange: onChange,
+      optional: true
+    })),
+        getByRole = _render15.getByRole,
+        getAllByRole = _render15.getAllByRole,
+        getAllByText = _render15.getAllByText;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    expect(getAllByText("Choose an option").length).toBe(2);
+    expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("true");
+
+    _userEvent["default"].click(getAllByRole("option")[0]);
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "",
+      error: null
+    });
+    expect(getAllByText("Choose an option").length).toBe(1);
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "",
+      error: null
+    });
+    expect(getAllByText("Choose an option").length).toBe(1);
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
+  });
+  test("Non-Grouped Options - Filtering options never affects the optional item until there are no coincidence", function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      placeholder: "Placeholder example",
+      options: single_options,
+      optional: true,
+      searchable: true
+    })),
+        getByRole = _render16.getByRole,
+        getAllByRole = _render16.getAllByRole,
+        getByText = _render16.getByText,
+        queryByText = _render16.queryByText,
+        container = _render16.container;
+
+    var select = getByRole("combobox");
+    var searchInput = container.querySelectorAll("input")[1];
+
+    _userEvent["default"].click(select);
+
+    _userEvent["default"].type(searchInput, "1");
+
+    expect(getByText("Placeholder example")).toBeTruthy();
+    expect(getAllByRole("option").length).toBe(12);
+
+    _userEvent["default"].type(searchInput, "123");
+
+    expect(queryByText("Placeholder example")).toBeFalsy();
+    expect(getByText("No matches found")).toBeTruthy();
+  });
+  test("Non-Grouped Options - Renders SVG icons correctly when passed with options", function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: svg_icon_options
+    })),
+        getByRole = _render17.getByRole,
+        getAllByRole = _render17.getAllByRole;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    expect(getByRole("listbox").querySelectorAll("[role='img']").length).toBe(4);
+    expect(getAllByRole("option").length).toBe(5);
+  });
+  test("Non-Grouped Options - Renders string url icons correctly when passed with options", function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: url_icon_options,
+      optional: true
+    })),
+        getByRole = _render18.getByRole,
+        getAllByRole = _render18.getAllByRole;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    expect(getByRole("listbox").querySelectorAll("img").length).toBe(4);
+    expect(getAllByRole("option").length).toBe(6);
+  });
+  test("Non-Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options
+    })),
+        getByRole = _render19.getByRole,
+        queryByRole = _render19.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-19");
+  });
+  test("Non-Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options
+    })),
+        getByRole = _render20.getByRole,
+        queryByRole = _render20.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-19");
+  });
+  test("Non-Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options
+    })),
+        getByRole = _render21.getByRole,
+        queryByRole = _render21.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
+  });
+  test("Non-Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", function () {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options
+    })),
+        getByRole = _render22.getByRole,
+        queryByRole = _render22.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
+  });
+  test("Non-Grouped Options: Enter key - Selects the visually focused option and closes the listbox", function () {
+    var onChange = jest.fn();
+
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options,
+      onChange: onChange,
+      optional: true
+    })),
+        getByText = _render23.getByText,
+        getByRole = _render23.getByRole,
+        getAllByRole = _render23.getAllByRole,
+        queryByRole = _render23.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "20",
+      error: null
+    });
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(getByText("Option 20")).toBeTruthy();
+
+    _userEvent["default"].click(select);
+
+    expect(getAllByRole("option")[20].getAttribute("aria-selected")).toBe("true");
+  });
+  test("Non-Grouped Options: Searchable - Displays an input for filtering the list of options", function () {
+    var onChange = jest.fn();
+
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render24.container,
+        getByText = _render24.getByText,
+        getByRole = _render24.getByRole,
+        getAllByRole = _render24.getAllByRole,
+        queryByRole = _render24.queryByRole;
+
+    var select = getByRole("combobox");
+    var searchInput = container.querySelectorAll("input")[1];
+
+    _userEvent["default"].click(select);
+
+    expect(getByRole("listbox")).toBeTruthy();
+
+    _userEvent["default"].type(searchInput, "08");
+
+    _userEvent["default"].click(getByRole("option"));
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "8",
+      error: null
+    });
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(getByText("Option 08")).toBeTruthy();
+    expect(searchInput.value).toBe("");
+
+    _userEvent["default"].click(select);
+
+    expect(getAllByRole("option")[7].getAttribute("aria-selected")).toBe("true");
+  });
+  test("Non-Grouped Options: Searchable - Displays 'No matches found' when there are no filtering results", function () {
+    var onChange = jest.fn();
+
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render25.container,
+        getByText = _render25.getByText,
+        getByRole = _render25.getByRole;
+
+    var select = getByRole("combobox");
+    var searchInput = container.querySelectorAll("input")[1];
+
+    _userEvent["default"].click(select);
+
+    expect(getByRole("listbox")).toBeTruthy();
+
+    _userEvent["default"].type(searchInput, "abc");
+
+    expect(getByText("No matches found")).toBeTruthy();
+  });
+  test("Non-Grouped Options: Searchable - Clicking the select, when the list is open, clears the search value", function () {
+    var onChange = jest.fn();
+
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render26.container,
+        getByText = _render26.getByText,
+        getByRole = _render26.getByRole,
+        getAllByRole = _render26.getAllByRole;
+
+    var select = getByRole("combobox");
+    var searchInput = container.querySelectorAll("input")[1];
+
+    _userEvent["default"].click(select);
+
+    expect(getByRole("listbox")).toBeTruthy();
+
+    _userEvent["default"].type(searchInput, "2");
+
+    expect(getByText("Option 02")).toBeTruthy();
+    expect(getByText("Option 12")).toBeTruthy();
+    expect(getByText("Option 20")).toBeTruthy();
+    expect(getAllByRole("option").length).toBe(3);
+
+    _userEvent["default"].click(select);
+
+    expect(searchInput.value).toBe("");
+  });
+  test("Non-Grouped Options: Searchable - Writing displays the listbox, if it was not open", function () {
+    var onChange = jest.fn();
+
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render27.container,
+        getByRole = _render27.getByRole,
+        queryByRole = _render27.queryByRole;
+
+    var select = getByRole("combobox");
+    var searchInput = container.querySelectorAll("input")[1];
+
+    _userEvent["default"].click(select);
+
+    _userEvent["default"].click(select);
+
+    expect(queryByRole("listbox")).toBeFalsy();
+
+    _userEvent["default"].type(searchInput, "2");
+
+    expect(getByRole("listbox")).toBeTruthy();
+  });
+  test("Non-Grouped Options: Searchable - Key Esc cleans the search value and closes the options", function () {
+    var onChange = jest.fn();
+
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render28.container,
+        getByRole = _render28.getByRole,
+        queryByRole = _render28.queryByRole;
+
+    var select = getByRole("combobox");
+    var searchInput = container.querySelectorAll("input")[1];
+
+    _userEvent["default"].type(searchInput, "Option 02");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "Esc",
+      code: "Esc",
+      keyCode: 27,
+      charCode: 27
+    });
+
+    expect(searchInput.value).toBe("");
+    expect(queryByRole("listbox")).toBeFalsy();
+  });
+  test("Non-Grouped Options: Searchable - While user types, a clear action is displayed for cleaning the search value", function () {
+    var onChange = jest.fn();
+
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render29.container,
+        getByRole = _render29.getByRole,
+        getAllByRole = _render29.getAllByRole,
+        queryByTitle = _render29.queryByTitle;
+
+    var searchInput = container.querySelectorAll("input")[1];
+
+    _userEvent["default"].type(searchInput, "Option 02");
+
+    expect(getAllByRole("option").length).toBe(1);
+    expect(queryByTitle("Clear search")).toBeTruthy();
+    var clearAction = getByRole("button");
+    expect(clearAction).toBeTruthy();
+
+    _userEvent["default"].click(clearAction);
+
+    expect(getByRole("listbox")).toBeTruthy();
+    expect(getAllByRole("option").length).toBe(20);
+    expect(queryByTitle("Clear search")).toBeFalsy();
+  });
+  test("Non-Grouped Options: Multiple selection - Displays a checkbox per option and enables the multi-selection", function () {
+    var onChange = jest.fn();
+
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      name: "test",
+      label: "test-select-label",
+      options: single_options,
+      onChange: onChange,
+      multiple: true
+    })),
+        getByText = _render30.getByText,
+        getAllByText = _render30.getAllByText,
+        getByRole = _render30.getByRole,
+        getAllByRole = _render30.getAllByRole,
+        queryByRole = _render30.queryByRole,
+        container = _render30.container;
+
+    var select = getByRole("combobox");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+
+    _userEvent["default"].click(select);
+
+    expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
+
+    _userEvent["default"].click(getAllByRole("option")[10]); // expect(onChange).toHaveBeenCalledWith({ value: ["11"], error: null });
+
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(getAllByText("Option 11").length).toBe(2);
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    }); // expect(onChange).toHaveBeenCalledWith({ value: ["11", "19"], error: null });
+
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(getByText("Option 11, Option 19")).toBeTruthy();
+    expect(getAllByRole("option")[10].getAttribute("aria-selected")).toBe("true");
+    expect(getAllByRole("option")[18].getAttribute("aria-selected")).toBe("true");
+    expect(submitInput.value).toBe("11,19");
+  });
+  test("Non-Grouped Options: Multiple selection - Clear action and selection indicator", function () {
+    var onChange = jest.fn();
+
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options,
+      onChange: onChange,
+      multiple: true
+    })),
+        getByText = _render31.getByText,
+        queryByText = _render31.queryByText,
+        getByRole = _render31.getByRole,
+        getAllByRole = _render31.getAllByRole,
+        queryByRole = _render31.queryByRole,
+        getByTitle = _render31.getByTitle,
+        queryByTitle = _render31.queryByTitle;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    _userEvent["default"].click(getAllByRole("option")[5]);
+
+    _userEvent["default"].click(getAllByRole("option")[8]);
+
+    _userEvent["default"].click(getAllByRole("option")[13]); // expect(onChange).toHaveBeenCalledWith({ value: ["6", "9", "14"], error: null });
+
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(getByText("Option 06, Option 09, Option 14")).toBeTruthy();
+    expect(getByText("3", {
+      exact: true
+    })).toBeTruthy();
+
+    _userEvent["default"].click(getByTitle("Clear selection"));
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(queryByText("Option 06, Option 09, Option 14")).toBeFalsy();
+    expect(queryByText("3")).toBeFalsy();
+    expect(queryByTitle("Clear selection")).toBeFalsy();
+  });
+  test("Non-Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", function () {
+    var onChange = jest.fn();
+
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      placeholder: "Choose an option",
+      options: single_options,
+      onChange: onChange,
+      multiple: true,
+      optional: true
+    })),
+        getByText = _render32.getByText,
+        getAllByText = _render32.getAllByText,
+        getByRole = _render32.getByRole,
+        getAllByRole = _render32.getAllByRole;
+
+    var select = getByRole("combobox");
+    expect(getByText("(Optional)")).toBeTruthy();
+
+    _userEvent["default"].click(select);
+
+    expect(getAllByText("Choose an option").length).toBe(1);
+    expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("false");
+
+    _userEvent["default"].click(getAllByRole("option")[0]); // expect(onChange).toHaveBeenCalledWith({ value: ["1"], error: null });
+
+
+    expect(getAllByText("Option 01").length).toBe(2);
+  });
+  test("Non-Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", function () {
+    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options
+    })),
+        getByText = _render33.getByText,
+        getByRole = _render33.getByRole,
+        getAllByRole = _render33.getAllByRole;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    _userEvent["default"].click(getAllByRole("option")[4]);
+
+    expect(getByText("Option 05")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-4");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    expect(getByText("Option 04")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-3");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    expect(getByText("Option 06")).toBeTruthy();
+  });
+  test("Non-Grouped Options - If an options was previously selected when its opened (by click and key press), the visual focus appears always in the selected option", function () {
+    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: single_options
+    })),
+        getByText = _render34.getByText,
+        getByRole = _render34.getByRole,
+        getAllByRole = _render34.getAllByRole,
+        queryByRole = _render34.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    _userEvent["default"].click(getAllByRole("option")[15]);
+
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(getByText("Option 16")).toBeTruthy();
+
+    _userEvent["default"].click(select);
+
+    expect(select.getAttribute("aria-activedescendant")).toBeNull();
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-15");
+
+    _userEvent["default"].click(select);
+
+    expect(queryByRole("listbox")).toBeFalsy();
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-15");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    expect(getByText("Option 17")).toBeTruthy();
+  });
+  test("Grouped Options - Opens listbox and renders it correctly or closes it with a click on select", function () {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: group_options
+    })),
+        getByText = _render35.getByText,
+        getByRole = _render35.getByRole,
+        getAllByRole = _render35.getAllByRole,
+        queryByRole = _render35.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    var listbox = getByRole("listbox");
+    expect(listbox).toBeTruthy();
+    expect(select.getAttribute("aria-expanded")).toBe("true");
+    expect(getByText("Colores")).toBeTruthy();
+    expect(getByText("Azul")).toBeTruthy();
+    expect(getByText("Negro")).toBeTruthy();
+    expect(getByText("Ciudades españolas")).toBeTruthy();
+    expect(getByText("Madrid")).toBeTruthy();
+    var groups = getAllByRole("group");
+    expect(groups.length).toBe(3);
+    var groupLabels = getAllByRole("presentation");
+    expect(groups[0].getAttribute("aria-labelledby")).toBe(groupLabels[0].id);
+    expect(groups[1].getAttribute("aria-labelledby")).toBe(groupLabels[1].id);
+    expect(groups[2].getAttribute("aria-labelledby")).toBe(groupLabels[2].id);
+    expect(getAllByRole("option").length).toBe(18);
+
+    _userEvent["default"].click(select);
+
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(select.getAttribute("aria-expanded")).toBe("false");
+  });
+  test("Grouped Options - If an empty list of options in a group is passed, the select is rendered but doestn't open the listbox", function () {
+    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: [{
+        label: "Group 1",
+        options: []
+      }]
+    })),
+        getByRole = _render36.getByRole,
+        queryByRole = _render36.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(select.getAttribute("aria-expanded")).toBe("false");
+  });
+  test("Grouped Options - Click in an option selects it and closes the listbox", function () {
+    var onChange = jest.fn();
+
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      name: "test",
+      label: "test-select-label",
+      options: group_options,
+      onChange: onChange
+    })),
+        getByText = _render37.getByText,
+        getByRole = _render37.getByRole,
+        getAllByRole = _render37.getAllByRole,
+        queryByRole = _render37.queryByRole,
+        container = _render37.container;
+
+    var select = getByRole("combobox");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+
+    _userEvent["default"].click(select);
+
+    _userEvent["default"].click(getAllByRole("option")[8]);
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "oviedo",
+      error: null
+    });
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(getByText("Oviedo")).toBeTruthy();
+
+    _userEvent["default"].click(select);
+
+    expect(getAllByRole("option")[8].getAttribute("aria-selected")).toBe("true");
+    expect(submitInput.value).toBe("oviedo");
+  });
+  test("Grouped Options - Optional renders an empty first option (out of any group) with the placeholder as its label", function () {
+    var onChange = jest.fn();
+
+    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      placeholder: "Placeholder example",
+      options: group_options,
+      onChange: onChange,
+      optional: true
+    })),
+        getByRole = _render38.getByRole,
+        getAllByRole = _render38.getAllByRole,
+        getAllByText = _render38.getAllByText;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    expect(getAllByText("Placeholder example").length).toBe(2);
+    expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("true");
+
+    _userEvent["default"].click(getAllByRole("option")[0]);
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "",
+      error: null
+    });
+    expect(getAllByText("Placeholder example").length).toBe(1);
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "",
+      error: null
+    });
+    expect(getAllByText("Placeholder example").length).toBe(1);
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
+  });
+  test("Grouped Options - Filtering options never affects the optional item until there are no coincidence", function () {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      placeholder: "Placeholder example",
+      options: group_options,
+      optional: true,
+      searchable: true
+    })),
+        getByRole = _render39.getByRole,
+        getAllByRole = _render39.getAllByRole,
+        getByText = _render39.getByText,
+        queryByText = _render39.queryByText,
+        container = _render39.container;
+
+    var select = getByRole("combobox");
+    var searchInput = container.querySelectorAll("input")[1];
+
+    _userEvent["default"].click(select);
+
+    _userEvent["default"].type(searchInput, "ro");
+
+    expect(getByText("Placeholder example")).toBeTruthy();
+    expect(getAllByRole("option").length).toBe(6);
+
+    _userEvent["default"].type(searchInput, "roro");
+
+    expect(queryByText("Placeholder example")).toBeFalsy();
+    expect(getByText("No matches found")).toBeTruthy();
+  });
+  test("Grouped Options - Renders icons correctly when passed with group options", function () {
+    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: grouped_icon_options,
+      optional: true
+    })),
+        getByRole = _render40.getByRole,
+        getAllByRole = _render40.getAllByRole;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    expect(getByRole("listbox").querySelectorAll("img").length).toBe(4);
+    expect(getAllByRole("option").length).toBe(11);
+  });
+  test("Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", function () {
+    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: group_options
+    })),
+        getByRole = _render41.getByRole,
+        queryByRole = _render41.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
+  });
+  test("Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", function () {
+    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: group_options
+    })),
+        getByRole = _render42.getByRole,
+        queryByRole = _render42.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
+  });
+  test("Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", function () {
+    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: group_options
+    })),
+        getByRole = _render43.getByRole,
+        queryByRole = _render43.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
+  });
+  test("Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", function () {
+    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: group_options
+    })),
+        getByRole = _render44.getByRole,
+        queryByRole = _render44.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
+  });
+  test("Grouped Options: Enter key - Selects the visually focused option and closes the listbox", function () {
+    var onChange = jest.fn();
+
+    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: group_options,
+      onChange: onChange,
+      optional: true
+    })),
+        getByText = _render45.getByText,
+        getByRole = _render45.getByRole,
+        getAllByRole = _render45.getAllByRole,
+        queryByRole = _render45.queryByRole;
+
+    var select = getByRole("combobox");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "ebro",
+      error: null
+    });
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(getByText("Ebro")).toBeTruthy();
+
+    _userEvent["default"].click(select);
+
+    expect(getAllByRole("option")[18].getAttribute("aria-selected")).toBe("true");
+  });
+  test("Grouped Options: Searchable - Displays an input for filtering the list of options", function () {
+    var onChange = jest.fn();
+
+    var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: group_options,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render46.container,
+        getByText = _render46.getByText,
+        getByRole = _render46.getByRole,
+        getAllByRole = _render46.getAllByRole,
+        queryByRole = _render46.queryByRole;
+
+    var select = getByRole("combobox");
+    var searchInput = container.querySelectorAll("input")[1];
+
+    _userEvent["default"].click(select);
+
+    expect(getByRole("listbox")).toBeTruthy();
+
+    _userEvent["default"].type(searchInput, "ro");
+
+    expect(getAllByRole("group").length).toBe(2);
+    expect(getAllByRole("presentation").length).toBe(2);
+    expect(getAllByRole("option").length).toBe(5);
+    expect(getByText("Colores")).toBeTruthy();
+    expect(getByText("Ríos españoles")).toBeTruthy();
+
+    _userEvent["default"].click(getAllByRole("option")[4]);
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "ebro",
+      error: null
+    });
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(getByText("Ebro")).toBeTruthy();
+    expect(searchInput.value).toBe("");
+
+    _userEvent["default"].click(select);
+
+    expect(getAllByRole("option")[17].getAttribute("aria-selected")).toBe("true");
+  });
+  test("Grouped Options: Searchable - Displays 'No matches found' when there are no filtering results", function () {
+    var onChange = jest.fn();
+
+    var _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: group_options,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render47.container,
+        getByText = _render47.getByText,
+        getByRole = _render47.getByRole;
+
+    var select = getByRole("combobox");
+    var searchInput = container.querySelectorAll("input")[1];
+
+    _userEvent["default"].click(select);
+
+    expect(getByRole("listbox")).toBeTruthy();
+
+    _userEvent["default"].type(searchInput, "very long string");
+
+    expect(getByText("No matches found")).toBeTruthy();
+  });
+  test("Grouped Options: Multiple selection - Displays a checkbox per option and enables the multi-selection", function () {
+    var onChange = jest.fn();
+
+    var _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      name: "test",
+      label: "test-select-label",
+      options: group_options,
+      onChange: onChange,
+      multiple: true
+    })),
+        getByText = _render48.getByText,
+        getAllByText = _render48.getAllByText,
+        getByRole = _render48.getByRole,
+        getAllByRole = _render48.getAllByRole,
+        queryByRole = _render48.queryByRole,
+        container = _render48.container;
+
+    var select = getByRole("combobox");
+    var submitInput = container.querySelector("input[name=\"test\"]");
+
+    _userEvent["default"].click(select);
+
+    expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
+
+    _userEvent["default"].click(getAllByRole("option")[10]); // expect(onChange).toHaveBeenCalledWith({ value: ["bilbao"], error: null });
+
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(getAllByText("Bilbao").length).toBe(2);
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    }); // expect(onChange).toHaveBeenCalledWith({ value: ["bilbao", "guadalquivir"], error: null });
+
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(getByText("Bilbao, Guadalquivir")).toBeTruthy();
+    expect(getAllByRole("option")[10].getAttribute("aria-selected")).toBe("true");
+    expect(getAllByRole("option")[16].getAttribute("aria-selected")).toBe("true");
+    expect(submitInput.value).toBe("bilbao,guadalquivir");
+  });
+  test("Grouped Options: Multiple selection - Clear action and selection indicator", function () {
+    var onChange = jest.fn();
+
+    var _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: group_options,
+      onChange: onChange,
+      multiple: true
+    })),
+        getByText = _render49.getByText,
+        queryByText = _render49.queryByText,
+        getByRole = _render49.getByRole,
+        getAllByRole = _render49.getAllByRole,
+        queryByRole = _render49.queryByRole,
+        getByTitle = _render49.getByTitle,
+        queryByTitle = _render49.queryByTitle;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    _userEvent["default"].click(getAllByRole("option")[5]);
+
+    _userEvent["default"].click(getAllByRole("option")[8]);
+
+    _userEvent["default"].click(getAllByRole("option")[13]);
+
+    _userEvent["default"].click(getAllByRole("option")[17]); // expect(onChange).toHaveBeenCalledWith({ value: ["blanco", "oviedo", "duero", "ebro"], error: null });
+
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(getByText("Blanco, Oviedo, Duero, Ebro")).toBeTruthy();
+    expect(getByText("4", {
+      exact: true
+    })).toBeTruthy();
+
+    _userEvent["default"].click(getByTitle("Clear selection"));
+
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(queryByText("Blanco, Oviedo, Duero, Ebro")).toBeFalsy();
+    expect(queryByText("4")).toBeFalsy();
+    expect(queryByTitle("Clear selection")).toBeFalsy();
+  });
+  test("Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", function () {
+    var onChange = jest.fn();
+
+    var _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      placeholder: "Choose an option",
+      options: group_options,
+      onChange: onChange,
+      multiple: true,
+      optional: true
+    })),
+        getByText = _render50.getByText,
+        getAllByText = _render50.getAllByText,
+        getByRole = _render50.getByRole,
+        getAllByRole = _render50.getAllByRole;
+
+    var select = getByRole("combobox");
+    expect(getByText("(Optional)")).toBeTruthy();
+
+    _userEvent["default"].click(select);
+
+    expect(getAllByText("Choose an option").length).toBe(1);
+    expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("false");
+
+    _userEvent["default"].click(getAllByRole("option")[0]); // expect(onChange).toHaveBeenCalledWith({ value: ["azul"], error: null });
+
+
+    expect(getAllByText("Azul").length).toBe(2);
+  });
+  test("Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", function () {
+    var _render51 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: group_options
+    })),
+        getByText = _render51.getByText,
+        getByRole = _render51.getByRole,
+        getAllByRole = _render51.getAllByRole;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    _userEvent["default"].click(getAllByRole("option")[2]);
+
+    expect(getByText("Rosa")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-2");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    expect(getByText("Rojo")).toBeTruthy();
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-1");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    expect(getByText("Verde")).toBeTruthy();
+  });
+  test("Grouped Options - If an options was previously selected when its opened (by click and key press), the visual focus appears always in the selected option", function () {
+    var _render52 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+      label: "test-select-label",
+      options: group_options
+    })),
+        getByText = _render52.getByText,
+        getByRole = _render52.getByRole,
+        getAllByRole = _render52.getAllByRole;
+
+    var select = getByRole("combobox");
+
+    _userEvent["default"].click(select);
+
+    _userEvent["default"].click(getAllByRole("option")[17]);
+
+    expect(getByText("Ebro")).toBeTruthy();
+
+    _userEvent["default"].click(select);
+
+    expect(select.getAttribute("aria-activedescendant")).toBeNull();
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
+
+    _userEvent["default"].click(select);
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
+    });
+
+    _react2.fireEvent.keyDown(select, {
+      key: "Enter",
+      code: "Enter",
+      keyCode: 13,
+      charCode: 13
+    });
+
+    expect(getByText("Azul")).toBeTruthy();
+  });
+});