@dxc-technology/halstack-react 0.0.0-5b2ad05 → 0.0.0-5b6503c

package/test/InputText.test.js

@@ -4,7 +4,7 @@ import userEvent from "@testing-library/user-event";
 
 import icon from "../../app/src/images/invision.svg";
 
-import V3DxcInputText from "../src/input-text/InputText";
+import DxcInputText from "../src/input-text/InputText";
 
 const countries = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];
 
@@ -28,13 +28,13 @@ jest.mock("popper.js", () => {
 
 describe("InputText component tests", () => {
   test("Input renders with correct label", () => {
-    const { getByText } = render(<V3DxcInputText label="Input label" />);
+    const { getByText } = render(<DxcInputText label="Input label" />);
     expect(getByText("Input label")).toBeTruthy();
   });
 
   test("onChange function is called correctly", () => {
     const onChange = jest.fn();
-    const { getByRole } = render(<V3DxcInputText label="Input label" onChange={onChange} />);
+    const { getByRole } = render(<DxcInputText label="Input label" onChange={onChange} />);
     const input = getByRole("textbox");
     userEvent.type(input, "20000");
     expect(onChange).toHaveBeenCalled();
@@ -44,7 +44,7 @@ describe("InputText component tests", () => {
     const onBlur = jest.fn();
     const onChange = jest.fn();
 
-    const { getByRole } = render(<V3DxcInputText label="Input label" onChange={onChange} onBlur={onBlur} />);
+    const { getByRole } = render(<DxcInputText label="Input label" onChange={onChange} onBlur={onBlur} />);
     const input = getByRole("textbox");
     userEvent.type(input, "Test value");
     fireEvent.blur(input);
@@ -54,7 +54,7 @@ describe("InputText component tests", () => {
 
   test("Uncontrolled component", () => {
     const onChange = jest.fn();
-    const { getByRole } = render(<V3DxcInputText label="Input label" onChange={onChange} />);
+    const { getByRole } = render(<DxcInputText label="Input label" onChange={onChange} />);
     const input = getByRole("textbox");
     userEvent.type(input, "20000");
     expect(onChange).toHaveBeenCalled();
@@ -66,7 +66,7 @@ describe("InputText component tests", () => {
     const onChange = jest.fn();
     const onBlur = jest.fn();
     const { getByRole } = render(
-      <V3DxcInputText label="Input label" value="Test value" onChange={onChange} onBlur={onBlur} />
+      <DxcInputText label="Input label" value="Test value" onChange={onChange} onBlur={onBlur} />
     );
     const input = getByRole("textbox");
     userEvent.type(input, "20000");
@@ -78,14 +78,14 @@ describe("InputText component tests", () => {
   });
   test("Prefix icon onClick", () => {
     const onClick = jest.fn();
-    const { getByRole } = render(<V3DxcInputText label="Input label" prefixIconSrc={icon} onClickPrefix={onClick} />);
+    const { getByRole } = render(<DxcInputText label="Input label" prefixIconSrc={icon} onClickPrefix={onClick} />);
     const prefixIcon = getByRole("img");
     userEvent.click(prefixIcon);
     expect(onClick).toHaveBeenCalled();
   });
   test("Suffix icon onClick", () => {
     const onClick = jest.fn();
-    const { getByRole } = render(<V3DxcInputText label="Input label" suffixIconSrc={icon} onClickSuffix={onClick} />);
+    const { getByRole } = render(<DxcInputText label="Input label" suffixIconSrc={icon} onClickSuffix={onClick} />);
     const suffixIcon = getByRole("img");
     userEvent.click(suffixIcon);
     expect(onClick).toHaveBeenCalled();
@@ -96,7 +96,7 @@ describe("Autocomplete component Synchronous tests", () => {
   test("Autocomplete no matches found is shown", async () => {
     const onChangeAtocomplete = jest.fn();
     render(
-      <V3DxcInputText label="Autocomplete Countries" autocompleteOptions={countries} onChange={onChangeAtocomplete} />
+      <DxcInputText label="Autocomplete Countries" autocompleteOptions={countries} onChange={onChangeAtocomplete} />
     );
     const input = screen.getByRole("textbox");
     fireEvent.focus(input);
@@ -108,7 +108,7 @@ describe("Autocomplete component Synchronous tests", () => {
   test("Autocomplete suggestions are shown", async () => {
     const onChangeAtocomplete = jest.fn();
     render(
-      <V3DxcInputText label="Autocomplete Countries" autocompleteOptions={countries} onChange={onChangeAtocomplete} />
+      <DxcInputText label="Autocomplete Countries" autocompleteOptions={countries} onChange={onChangeAtocomplete} />
     );
     const input = screen.getByRole("textbox");
     fireEvent.focus(input);
@@ -118,7 +118,7 @@ describe("Autocomplete component Synchronous tests", () => {
   test("Autocomplete UNCONTROLLED suggestion selected", async () => {
     const onChangeAtocomplete = jest.fn();
     render(
-      <V3DxcInputText label="Autocomplete Countries" autocompleteOptions={countries} onChange={onChangeAtocomplete} />
+      <DxcInputText label="Autocomplete Countries" autocompleteOptions={countries} onChange={onChangeAtocomplete} />
     );
     const input = screen.getByRole("textbox");
     fireEvent.focus(input);
@@ -138,7 +138,7 @@ describe("Autocomplete component Synchronous tests", () => {
   test("Autocomplete CONTROLLED suggestions selected", async () => {
     const onChangeAtocomplete = jest.fn();
     render(
-      <V3DxcInputText
+      <DxcInputText
         label="Autocomplete Countries"
         value="Andorra"
         autocompleteOptions={countries}
@@ -165,11 +165,7 @@ describe("InputText component Asynchronous Autocomplete tests", () => {
 
     const onChangeAtocomplete = jest.fn();
     render(
-      <V3DxcInputText
-        label="Autocomplete Countries"
-        autocompleteOptions={callbackFunc}
-        onChange={onChangeAtocomplete}
-      />
+      <DxcInputText label="Autocomplete Countries" autocompleteOptions={callbackFunc} onChange={onChangeAtocomplete} />
     );
     const input = screen.getByRole("textbox");
     fireEvent.focus(input);
@@ -182,11 +178,7 @@ describe("InputText component Asynchronous Autocomplete tests", () => {
     const callbackFunc = jest.fn(() => new Promise((resolve) => setTimeout(resolve(["Italy", "Spain"]), 1000)));
     const onChangeAtocomplete = jest.fn();
     render(
-      <V3DxcInputText
-        label="Autocomplete Countries"
-        onChange={onChangeAtocomplete}
-        autocompleteOptions={callbackFunc}
-      />
+      <DxcInputText label="Autocomplete Countries" onChange={onChangeAtocomplete} autocompleteOptions={callbackFunc} />
     );
     const input = screen.getByRole("textbox");
     fireEvent.focus(input);
@@ -206,7 +198,7 @@ describe("InputText component Asynchronous Autocomplete tests", () => {
     const callbackFunc = jest.fn(() => new Promise((resolve) => setTimeout(resolve(["Italy", "Spain"]), 3000)));
     const onChangeAtocomplete = jest.fn();
     render(
-      <V3DxcInputText
+      <DxcInputText
         label="Autocomplete Countries"
         value="test value"
         onChange={onChangeAtocomplete}
@@ -232,7 +224,7 @@ describe("InputText component Asynchronous Autocomplete tests", () => {
     const onChangeAtocomplete = jest.fn();
 
     render(
-      <V3DxcInputText
+      <DxcInputText
         label="Autocomplete Countries"
         value="test value"
         onChange={onChangeAtocomplete}

package/test/Paginator.test.js

@@ -49,6 +49,8 @@ describe("Paginator component tests", () => {
 
   test("Paginator goToPage call correct function", () => {
     const onClick = jest.fn();
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
     const { getByText, getAllByRole, getByRole } = render(
       <DxcPaginator
         currentPage={1}
@@ -58,7 +60,7 @@ describe("Paginator component tests", () => {
         onPageChange={onClick}
       ></DxcPaginator>
     );
-    const goToPageSelect = getAllByRole("button")[2];
+    const goToPageSelect = getAllByRole("combobox")[0];
     act(() => {
       userEvent.click(goToPageSelect);
     });
@@ -81,6 +83,8 @@ describe("Paginator component tests", () => {
 
   test("Call correct itemsPerPageFunction", () => {
     const onClick = jest.fn();
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
     const { getAllByText, getByText } = render(
       <DxcPaginator
         currentPage={1}

package/test/ResultsetTable.test.js

@@ -244,7 +244,7 @@ describe("ResultsetTable component tests", () => {
     expect(getByText("Louis")).toBeTruthy();
     expect(getByText("Lana")).toBeTruthy();
     expect(getAllByRole("row").length - 1).toEqual(3);
-    const nextButton = getAllByRole("button")[3];
+    const nextButton = getAllByRole("button")[2];
     fireEvent.click(nextButton);
     expect(getByText("4 to 6 of 10")).toBeTruthy();
     // expect(getByText("Page: 2 of 4")).toBeTruthy();
@@ -255,6 +255,8 @@ describe("ResultsetTable component tests", () => {
   });
 
   test("Resultsettable goToPage works as expected", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
     const { getByText, getAllByRole, getByRole } = render(
       <DxcResultsetTable columns={columns} showGoToPage={true} rows={rows} itemsPerPage={3}></DxcResultsetTable>
     );
@@ -282,8 +284,7 @@ describe("ResultsetTable component tests", () => {
     const { getByText, getAllByRole } = render(
       <DxcResultsetTable columns={columns} rows={rows} itemsPerPage={3}></DxcResultsetTable>
     );
-    debugger;
-    const lastButton = getAllByRole("button")[4];
+    const lastButton = getAllByRole("button")[3];
     fireEvent.click(lastButton);
     expect(getByText("10 to 10 of 10")).toBeTruthy();
     expect(getAllByRole("row")).toHaveLength(2);
@@ -319,7 +320,7 @@ describe("ResultsetTable component tests", () => {
         itemsPerPageOptions={[2, 3]}
       ></DxcResultsetTable>
     );
-    const lastButton = getAllByRole("button")[5];
+    const lastButton = getAllByRole("button")[3];
     fireEvent.click(lastButton);
     expect(getAllByRole("row").length - 1).toEqual(1);
     rerender(<DxcResultsetTable columns={columns} rows={rows} itemsPerPage={6}></DxcResultsetTable>);

package/test/Select.test.js

@@ -0,0 +1,415 @@
+import React from "react";
+import DxcSelect from "../src/select/Select";
+import { render, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const 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" },
+];
+
+const group_options = [
+  {
+    label: "Group 1",
+    options: [
+      { label: "Option 001", value: "1" },
+      { label: "Option 002", value: "2" },
+      { label: "Option 003", value: "3" },
+    ],
+  },
+  {
+    label: "Group 2",
+    options: [
+      { label: "Option 0004", value: "4" },
+      { label: "Option 05", value: "5" },
+      { label: "Option 006", value: "6" },
+    ],
+  },
+  {
+    label: "Group 3",
+    options: [
+      { label: "Option 0007", value: "7" },
+      { label: "Option 008", value: "8" },
+      { label: "Option 9", value: "9" },
+    ],
+  },
+  {
+    label: "Group 4",
+    options: [
+      { label: "Option 10", value: "10" },
+      { label: "Option 11", value: "11" },
+      { label: "Option 12", value: "12" },
+    ],
+  },
+  {
+    label: "Group 5",
+    options: [
+      { label: "Option x", value: "13" },
+      { label: "Option y", value: "14" },
+      { label: "Option z", value: "15" },
+    ],
+  },
+  {
+    label: "Group 6",
+    options: [
+      { label: "Option 001", value: "16" },
+      { label: "Option 002", value: "17" },
+      { label: "Option 003", value: "18" },
+    ],
+  },
+  {
+    label: "Group 7",
+    options: [
+      { label: "Option 001", value: "19" },
+      { label: "Option 002", value: "20" },
+      { label: "Option 003", value: "21" },
+    ],
+  },
+];
+
+describe("Select component tests", () => {
+  test("Renders with correct label, helper text and placeholder", () => {
+    const { getByText } = render(
+      <DxcSelect label="test-select-label" helperText="test-select-helper-text" placeholder="Example text" />
+    );
+
+    expect(getByText("test-select-label")).toBeTruthy();
+    expect(getByText("test-select-helper-text")).toBeTruthy();
+    expect(getByText("Example text")).toBeTruthy();
+  });
+  test("Renders with correct optional label", () => {
+    const { getByText } = render(<DxcSelect label="test-select-label" optional />);
+
+    expect(getByText("test-select-label")).toBeTruthy();
+    expect(getByText("(Optional)")).toBeTruthy();
+  });
+  test("Renders with error message", () => {
+    const { getByText, getByRole } = render(<DxcSelect label="test-select-label" error="Error message." />);
+    const select = getByRole("combobox");
+
+    expect(getByText("Error message.")).toBeTruthy();
+    expect(select.getAttribute("aria-invalid")).toBe("true");
+  });
+  test("Disabled select - Clear all options action must be shown but not clickable", () => {
+    const { getByRole, getByText, queryByRole } = render(
+      <DxcSelect label="test-select-label" value={["1", "2"]} options={single_options} disabled searchable multiple />
+    );
+    const select = getByRole("combobox");
+
+    userEvent.click(select);
+    expect(queryByRole("listbox")).toBeFalsy();
+    userEvent.click(getByRole("button"));
+    expect(getByText("Option 01, Option 02")).toBeTruthy();
+  });
+  test("Focused select does not open the listbox", () => {
+    const { getByRole, queryByRole } = render(
+      <DxcSelect label="test-select-label" value={["1", "2"]} options={single_options} disabled searchable multiple />
+    );
+    const select = getByRole("combobox");
+    
+    fireEvent.focus(select);
+    expect(queryByRole("listbox")).toBeFalsy();
+  });
+  test("Controlled - Not optional constraint", () => {
+    // scrollIntoView & scrollTo are not implemented in jsdom
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
+    const { getByRole, getAllByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} onChange={onChange} onBlur={onBlur} />
+    );
+    const select = getByRole("combobox");
+
+    expect(select.getAttribute("aria-required")).toBe("true");
+    fireEvent.focus(select);
+    fireEvent.blur(select);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
+    userEvent.click(select);
+    userEvent.click(getAllByRole("option")[0]);
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "1", error: null });
+    fireEvent.focus(select);
+    fireEvent.blur(select);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "1", error: null });
+  });
+  test("Controlled - Optional constraint", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
+    const { getByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} onChange={onChange} onBlur={onBlur} optional />
+    );
+    const select = getByRole("combobox");
+
+    expect(select.getAttribute("aria-required")).toBe("false");
+    fireEvent.focus(select);
+    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 or closes it with a click on select", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const { getByText, getByRole, queryByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} />
+    );
+    const select = getByRole("combobox");
+
+    userEvent.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();
+    userEvent.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", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const { getByRole, queryByRole } = render(<DxcSelect label="test-select-label" options={[]} />);
+    const select = getByRole("combobox");
+
+    userEvent.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", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const onChange = jest.fn();
+    const { getByText, getByRole, getAllByRole, queryByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} onChange={onChange} />
+    );
+    const select = getByRole("combobox");
+
+    userEvent.click(select);
+    userEvent.click(getAllByRole("option")[2]);
+    expect(onChange).toHaveBeenCalledWith({ value: "3", error: null });
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(getByText("Option 03")).toBeTruthy();
+    userEvent.click(select);
+    expect(getAllByRole("option")[2].getAttribute("aria-selected")).toBe("true");
+  });
+  test("Non-Grouped Options - Optional renders an empty first option with the placeholder as its label", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const onChange = jest.fn();
+    const { getByRole, getAllByRole, getAllByText } = render(
+      <DxcSelect
+        label="test-select-label"
+        placeholder="Choose an option"
+        options={single_options}
+        onChange={onChange}
+        optional
+      />
+    );
+    const select = getByRole("combobox");
+
+    userEvent.click(select);
+    expect(getAllByText("Choose an option").length).toBe(2);
+    expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("true");
+    userEvent.click(getAllByRole("option")[0]);
+    expect(onChange).toHaveBeenCalledWith({ value: "", error: null });
+    expect(getAllByText("Choose an option").length).toBe(1);
+  });
+  test("Non-Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const { getByRole, queryByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} />
+    );
+    const select = getByRole("combobox");
+    
+    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", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const { getByRole, queryByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} />
+    );
+    const select = getByRole("combobox");
+    
+    fireEvent.keyDown(select, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
+    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", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const { getByRole, queryByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} />
+    );
+    const select = getByRole("combobox");
+    
+    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", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const { getByRole, queryByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} />
+    );
+    const select = getByRole("combobox");
+    
+    fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
+    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", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const onChange = jest.fn();
+    const { getByText, getByRole, getAllByRole, queryByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} onChange={onChange} />
+    );
+    const select = getByRole("combobox");
+    
+    fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
+    fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
+    fireEvent.keyDown(select, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
+    fireEvent.keyDown(select, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
+    fireEvent.keyDown(select, { key: "Enter", code: "Enter", keyCode: 13, charCode: 13 });
+    expect(onChange).toHaveBeenCalledWith({ value: "19", error: null });
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(getByText("Option 19")).toBeTruthy();
+    userEvent.click(select);
+    expect(getAllByRole("option")[18].getAttribute("aria-selected")).toBe("true");
+  });
+  test("Non-Grouped Options: Searchable - Displays an input for filtering the list of options", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const onChange = jest.fn();
+    const { container, getByText, getByRole, getAllByRole, queryByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} onChange={onChange} searchable />
+    );
+    const select = getByRole("combobox");
+    const searchInput = container.querySelectorAll("input")[1];
+
+    userEvent.click(select);
+    expect(getByRole("listbox")).toBeTruthy();
+    userEvent.type(searchInput, "08");
+    userEvent.click(getByRole("option"));
+    expect(onChange).toHaveBeenCalledWith({ value: "8", error: null });
+    expect(queryByRole("listbox")).toBeFalsy();
+    expect(getByText("Option 08")).toBeTruthy();
+    expect(searchInput.value).toBe("");
+    userEvent.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", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const onChange = jest.fn();
+    const { container, getByText, getByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} onChange={onChange} searchable />
+    );
+    const select = getByRole("combobox");
+    const searchInput = container.querySelectorAll("input")[1];
+
+    userEvent.click(select);
+    expect(getByRole("listbox")).toBeTruthy();
+    userEvent.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", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const onChange = jest.fn();
+    const { container, getByText, getByRole, getAllByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} onChange={onChange} searchable />
+    );
+    const select = getByRole("combobox");
+    const searchInput = container.querySelectorAll("input")[1];
+
+    userEvent.click(select);
+    expect(getByRole("listbox")).toBeTruthy();
+    userEvent.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.click(select);
+    expect(searchInput.value).toBe("");
+  });
+  test("Non-Grouped Options: Searchable - Writing displays the listbox, if was not open", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const onChange = jest.fn();
+    const { container, getByRole, queryByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} onChange={onChange} searchable />
+    );
+    const select = getByRole("combobox");
+    const searchInput = container.querySelectorAll("input")[1];
+
+    userEvent.click(select);
+    userEvent.click(select);
+    expect(queryByRole("listbox")).toBeFalsy();
+    userEvent.type(searchInput, "2");
+    expect(getByRole("listbox")).toBeTruthy();
+  });
+  test("Non-Grouped Options: Searchable - Key Esc cleans the search value and closes the options", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const onChange = jest.fn();
+    const { container, getByRole, queryByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} onChange={onChange} searchable />
+    );
+    const select = getByRole("combobox");
+    const searchInput = container.querySelectorAll("input")[1];
+
+    userEvent.type(searchInput, "Option 02");
+    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", () => {
+    window.HTMLElement.prototype.scrollIntoView = () => {};
+    window.HTMLElement.prototype.scrollTo = () => {};
+    const onChange = jest.fn();
+    const { container, getByRole, getAllByRole } = render(
+      <DxcSelect label="test-select-label" options={single_options} onChange={onChange} searchable />
+    );
+    const searchInput = container.querySelectorAll("input")[1];
+
+    userEvent.type(searchInput, "Option 02");
+    expect(getAllByRole("option").length).toBe(1);
+    const clearAction = getByRole("button");
+    expect(clearAction).toBeTruthy();
+    userEvent.click(clearAction);
+    expect(getByRole("listbox")).toBeTruthy();
+    expect(getAllByRole("option").length).toBe(20);
+  });
+});

package/test/TextInput.test.js

@@ -88,7 +88,7 @@ describe("TextInput component tests", () => {
   test("Pattern constraint", () => {
     const onChange = jest.fn();
     const onBlur = jest.fn();
-    const { getByRole, getByText, queryByText } = render(
+    const { getByRole } = render(
       <DxcTextInput
         label="Input label"
         placeholder="Placeholder"
@@ -118,7 +118,7 @@ describe("TextInput component tests", () => {
   test("Length constraint", () => {
     const onChange = jest.fn();
     const onBlur = jest.fn();
-    const { getByRole, getByText, queryByText } = render(
+    const { getByRole } = render(
       <DxcTextInput
         label="Input label"
         placeholder="Placeholder"
@@ -148,7 +148,7 @@ describe("TextInput component tests", () => {
   test("Pattern and length constraints", () => {
     const onChange = jest.fn();
     const onBlur = jest.fn();
-    const { getByRole, getByText, queryByText } = render(
+    const { getByRole } = render(
       <DxcTextInput
         label="Input label"
         placeholder="Placeholder"
@@ -398,7 +398,7 @@ describe("TextInput component synchronous autosuggest tests", () => {
     expect(list).toBeTruthy();
     expect(getByText("No results found")).toBeTruthy();
   });
-  test("Autosuggest uncontrolled suggestion selected", async () => {
+  test("Autosuggest uncontrolled - Suggestion selected by click", async () => {
     const onChange = jest.fn();
     const { getByRole, getByText, queryByRole } = render(
       <DxcTextInput label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
@@ -414,7 +414,7 @@ describe("TextInput component synchronous autosuggest tests", () => {
     expect(input.value).toBe("Albania");
     expect(queryByRole("listbox")).toBeFalsy();
   });
-  test("Autosuggest controlled suggestions selected", async () => {
+  test("Autosuggest controlled - Suggestion selected by click", async () => {
     const onChange = jest.fn();
     const { getByRole, getByText, queryByRole } = render(
       <DxcTextInput label="Autocomplete Countries" value="Andor" suggestions={countries} onChange={onChange} />