@dxc-technology/halstack-react 0.0.0-2d619b4 → 0.0.0-2f08981

package/test/{NewInputText.test.js → TextInput.test.js}

@@ -2,7 +2,7 @@ import React from "react";
 import { render, fireEvent, waitForElementToBeRemoved } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import DxcNewInputText from "../src/new-input-text/NewInputText";
+import DxcTextInput from "../src/text-input/TextInput";
 
 const countries = [
   "Afghanistan",
@@ -29,153 +29,127 @@ const countries = [
   "Djibouti",
 ];
 
-describe("NewInputText component tests", () => {
+describe("TextInput component tests", () => {
   test("Renders with correct label", () => {
-    const { getByText } = render(<DxcNewInputText label="Example label" />);
+    const { getByText } = render(<DxcTextInput label="Example label" />);
     expect(getByText("Example label")).toBeTruthy();
   });
   test("Renders with correct label and helper text", () => {
-    const { getByText } = render(<DxcNewInputText label="Example label" helperText="Example helper text" />);
+    const { getByText } = render(<DxcTextInput label="Example label" helperText="Example helper text" />);
     expect(getByText("Example label")).toBeTruthy();
     expect(getByText("Example helper text")).toBeTruthy();
   });
   test("Renders with correct label and optional", () => {
-    const { getByText } = render(<DxcNewInputText label="Example label" helperText="Example helper text" optional />);
+    const { getByText } = render(<DxcTextInput label="Example label" helperText="Example helper text" optional />);
     expect(getByText("Example label")).toBeTruthy();
     expect(getByText("(Optional)")).toBeTruthy();
     expect(getByText("Example helper text")).toBeTruthy();
   });
   test("Renders with correct placeholder", () => {
-    const { getByRole } = render(<DxcNewInputText label="Example label" placeholder="Placeholder" />);
+    const { getByRole } = render(<DxcTextInput label="Example label" placeholder="Placeholder" />);
     const input = getByRole("textbox");
     expect(input.getAttribute("placeholder")).toBe("Placeholder");
   });
   test("Renders with error message", () => {
-    const { getByText } = render(
-      <DxcNewInputText label="Error label" placeholder="Placeholder" error="Error message." />
-    );
+    const { getByText } = render(<DxcTextInput label="Error label" placeholder="Placeholder" error="Error message." />);
     expect(getByText("Error message.")).toBeTruthy();
   });
-  test("Input Strict - Not optional constraint", () => {
+  test("Not optional constraint (onBlur)", () => {
     const onChange = jest.fn();
     const onBlur = jest.fn();
-    const { getByRole, getByText, queryByText } = render(
-      <DxcNewInputText
-        label="Input label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        clearable
-      />
+    const { getByRole } = render(
+      <DxcTextInput label="Input label" placeholder="Placeholder" onChange={onChange} onBlur={onBlur} clearable />
     );
     const input = getByRole("textbox");
+
     fireEvent.focus(input);
     fireEvent.blur(input);
-    expect(getByText("This field is required. Please, enter a value.")).toBeTruthy();
-    userEvent.type(input, "A");
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
+    fireEvent.change(input, { target: { value: "Test" } });
     fireEvent.blur(input);
-    expect(queryByText("This field is required. Please, enter a value.")).toBeFalsy();
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "Test", error: null });
   });
-  test("Input Strict - Pattern constraint", () => {
+  test("Not optional constraint (onChange)", () => {
     const onChange = jest.fn();
-    const onBlur = jest.fn();
-    const { getByRole, getByText, queryByText } = render(
-      <DxcNewInputText
-        label="Input label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        clearable
-        pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
-      />
+    const { getByRole } = render(
+      <DxcTextInput label="Input label" placeholder="Placeholder" onChange={onChange} clearable />
     );
     const input = getByRole("textbox");
-    userEvent.type(input, "pattern test");
-    fireEvent.blur(input);
-    expect(getByText("Please match the format requested.")).toBeTruthy();
-    userEvent.type(input, "pattern4&");
-    fireEvent.blur(input);
-    expect(queryByText("Please match the format requested.")).toBeFalsy();
+
+    fireEvent.change(input, { target: { value: "Test" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "Test", error: null });
+    userEvent.clear(input);
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
   });
-  test("Input Strict - Length constraint", () => {
+  test("Pattern constraint", () => {
     const onChange = jest.fn();
     const onBlur = jest.fn();
-    const { getByRole, getByText, queryByText } = render(
-      <DxcNewInputText
+    const { getByRole } = render(
+      <DxcTextInput
         label="Input label"
         placeholder="Placeholder"
         onChange={onChange}
         onBlur={onBlur}
         margin={{ left: "medium", right: "medium" }}
         clearable
-        length={{ min: 5, max: 10 }}
+        pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
       />
     );
     const input = getByRole("textbox");
-    userEvent.type(input, "test");
+
+    fireEvent.change(input, { target: { value: "pattern test" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "pattern test", error: "Please match the format requested." });
     fireEvent.blur(input);
-    expect(getByText("Min length 5, max length 10.")).toBeTruthy();
-    userEvent.type(input, "test ");
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "pattern test", error: "Please match the format requested." });
+    userEvent.clear(input);
+    fireEvent.change(input, { target: { value: "pattern4&" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "pattern4&", error: null });
     fireEvent.blur(input);
-    expect(queryByText(/Min length /)).toBeFalsy();
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "pattern4&", error: null });
   });
-  test("Input Strict - Pattern and length constraints", () => {
+  test("Length constraint", () => {
     const onChange = jest.fn();
     const onBlur = jest.fn();
-    const { getByRole, getByText, queryByText } = render(
-      <DxcNewInputText
+    const { getByRole } = render(
+      <DxcTextInput
         label="Input label"
         placeholder="Placeholder"
         onChange={onChange}
         onBlur={onBlur}
         margin={{ left: "medium", right: "medium" }}
         clearable
-        pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
         length={{ min: 5, max: 10 }}
       />
     );
     const input = getByRole("textbox");
-    userEvent.type(input, "test");
-    fireEvent.blur(input);
-    expect(getByText("Min length 5, max length 10.")).toBeTruthy();
-    userEvent.type(input, "test ");
-    fireEvent.blur(input);
-    expect(getByText("Please match the format requested.")).toBeTruthy();
-    userEvent.type(input, "test 4");
+
+    fireEvent.change(input, { target: { value: "test" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
     fireEvent.blur(input);
-    expect(queryByText("Please match the format requested.")).toBeFalsy();
-  });
-  test("Input Non Strict - Not optional constraint", () => {
-    const onChange = jest.fn((value) => {
-      expect(value).toBe("");
-    });
-    const onBlur = jest.fn(({ value, error }) => {
-      expect(value).toBe("");
-      expect(error).toBe("This field is required. Please, enter a value.");
-    });
-    const { getByRole } = render(
-      <DxcNewInputText
-        label="Input label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-      />
-    );
-    const input = getByRole("textbox");
-    fireEvent.focus(input);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
+    userEvent.clear(input);
+    fireEvent.change(input, { target: { value: "length" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "length", error: null });
     fireEvent.blur(input);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "length", error: null });
   });
-  test("Input Non Strict - Pattern constraint", () => {
-    const onChange = jest.fn((value) => {
-      expect(value).toBe("t");
-    });
-    const onBlur = jest.fn(({ value, error }) => {
-      expect(value).toBe("t");
-      expect(error).toBe("Please match the format requested.");
-    });
+  test("Pattern and length constraints", () => {
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
     const { getByRole } = render(
-      <DxcNewInputText
+      <DxcTextInput
         label="Input label"
         placeholder="Placeholder"
         onChange={onChange}
@@ -183,102 +157,51 @@ describe("NewInputText component tests", () => {
         margin={{ left: "medium", right: "medium" }}
         clearable
         pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
-      />
-    );
-    const input = getByRole("textbox");
-    userEvent.type(input, "t");
-    fireEvent.blur(input);
-  });
-  test("Input Non Strict - Length constraint", () => {
-    const onChange = jest.fn((value) => {
-      expect(value).toBe("t");
-    });
-    const onBlur = jest.fn(({ value, error }) => {
-      expect(value).toBe("t");
-      expect(error).toBe("Min length 5, max length 10.");
-    });
-    const { getByRole } = render(
-      <DxcNewInputText
-        label="Input label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        clearable
         length={{ min: 5, max: 10 }}
       />
     );
     const input = getByRole("textbox");
-    userEvent.type(input, "t");
+
+    fireEvent.change(input, { target: { value: "test" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
     fireEvent.blur(input);
-  });
-  test("Input Non Strict - Pattern and length constraints", () => {
-    const onChange = jest.fn((value) => {
-      expect(value).toBe("t");
-    });
-    const onBlur = jest.fn(({ value, error }) => {
-      expect(value).toBe("t");
-      expect(error).toBe("Min length 5, max length 10.");
-    });
-    const { getByRole } = render(
-      <DxcNewInputText
-        label="Input label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        clearable
-        length={{ min: 5, max: 10 }}
-      />
-    );
-    const input = getByRole("textbox");
-    userEvent.type(input, "t");
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
+    fireEvent.change(input, { target: { value: "tests" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "tests", error: "Please match the format requested." });
+    fireEvent.blur(input);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "tests", error: "Please match the format requested." });
+    fireEvent.change(input, { target: { value: "tests4&" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({ value: "tests4&", error: null });
     fireEvent.blur(input);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({ value: "tests4&", error: null });
   });
   test("onChange function is called correctly", () => {
     const onChange = jest.fn();
-    const { getByRole } = render(<DxcNewInputText label="Input label" onChange={onChange} />);
+    const { getByRole } = render(<DxcTextInput label="Input label" onChange={onChange} />);
     const input = getByRole("textbox");
     userEvent.type(input, "onchange event test");
     expect(input.value).toBe("onchange event test");
     expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith("onchange event test");
+    expect(onChange).toHaveBeenCalledWith({ value: "onchange event test", error: null });
   });
   test("onBlur function is called correctly", () => {
     const onBlur = jest.fn();
     const onChange = jest.fn();
-    const { getByRole } = render(<DxcNewInputText label="Input label" onChange={onChange} onBlur={onBlur} />);
+    const { getByRole } = render(<DxcTextInput label="Input label" onChange={onChange} onBlur={onBlur} />);
     const input = getByRole("textbox");
-    userEvent.type(input, "Test string");
+    fireEvent.change(input, { target: { value: "Blur test" } });
     fireEvent.blur(input);
     expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "Test string", error: null });
-  });
-  test("Uncontrolled input", () => {
-    const onChange = jest.fn();
-    const { getByRole } = render(<DxcNewInputText label="Input label" onChange={onChange} />);
-    const input = getByRole("textbox");
-    userEvent.type(input, "Uncontrolled test");
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith("Uncontrolled test");
-    expect(input.value).toBe("Uncontrolled test");
-  });
-  test("Controlled input", () => {
-    const onChange = jest.fn();
-    const onBlur = jest.fn();
-    const { getByRole } = render(
-      <DxcNewInputText label="Input label" value="Test value" onChange={onChange} onBlur={onBlur} />
-    );
-    const input = getByRole("textbox");
-    userEvent.type(input, "Example text");
-    expect(onChange).toHaveBeenCalled();
-    expect(input.value).toBe("Test value");
-    fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "Test value", error: null });
+    expect(onBlur).toHaveBeenCalledWith({ value: "Blur test", error: null });
   });
   test("Clear action onClick cleans the input", () => {
-    const { getByRole } = render(<DxcNewInputText label="Input label" clearable />);
+    const { getByRole } = render(<DxcTextInput label="Input label" clearable />);
     const input = getByRole("textbox");
     userEvent.type(input, "Test");
     const closeAction = getByRole("button");
@@ -303,7 +226,7 @@ describe("NewInputText component tests", () => {
         </svg>
       ),
     };
-    const { getByRole } = render(<DxcNewInputText label="Disabled input label" action={action} disabled />);
+    const { getByRole } = render(<DxcTextInput label="Disabled input label" action={action} disabled />);
     const input = getByRole("textbox");
     expect(input.disabled).toBeTruthy();
     userEvent.click(getByRole("button"));
@@ -311,7 +234,7 @@ describe("NewInputText component tests", () => {
   });
   test("Disabled input (clear default action should not be displayed, even with text written on the input)", () => {
     const { getByRole, queryByRole } = render(
-      <DxcNewInputText label="Disabled input label" value="Sample text" disabled clearable />
+      <DxcTextInput label="Disabled input label" value="Sample text" disabled clearable />
     );
     const input = getByRole("textbox");
     expect(input.disabled).toBeTruthy();
@@ -319,7 +242,7 @@ describe("NewInputText component tests", () => {
   });
   test("Disabled input (suffix and preffix must be displayed)", () => {
     const { getByRole, getByText } = render(
-      <DxcNewInputText label="Disabled input label" value="Sample text" prefix="+34" suffix="USD" disabled />
+      <DxcTextInput label="Disabled input label" value="Sample text" prefix="+34" suffix="USD" disabled />
     );
     const input = getByRole("textbox");
     expect(input.disabled).toBeTruthy();
@@ -344,70 +267,16 @@ describe("NewInputText component tests", () => {
         </svg>
       ),
     };
-    const { getByRole, getByTestId } = render(<DxcNewInputText label="Input label" action={action} />);
+    const { getByRole, getByTestId } = render(<DxcTextInput label="Input label" action={action} />);
     expect(getByTestId("image")).toBeTruthy();
     userEvent.click(getByRole("button"));
     expect(onClick).toHaveBeenCalled();
   });
-  test("Renders with correct prefix and suffix (text)", () => {
-    const { getByText } = render(<DxcNewInputText label="Input label" prefix="+34" suffix="USD" />);
+  test("Renders with correct prefix and suffix", () => {
+    const { getByText } = render(<DxcTextInput label="Input label" prefix="+34" suffix="USD" />);
     expect(getByText("+34")).toBeTruthy();
     expect(getByText("USD")).toBeTruthy();
   });
-  test("Renders with correct prefix (icon)", () => {
-    const { getByTestId } = render(
-      <DxcNewInputText
-        label="Input label"
-        prefix={
-          <svg
-            data-testid="image"
-            version="1.1"
-            x="0px"
-            y="0px"
-            width="24px"
-            height="24px"
-            viewBox="0 0 24 24"
-            enable-background="new 0 0 24 24"
-          >
-            <g id="Bounding_Box">
-              <rect fill="none" width="24" height="24" />
-            </g>
-            <g id="Master">
-              <path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
-            </g>
-          </svg>
-        }
-      />
-    );
-    expect(getByTestId("image")).toBeTruthy();
-  });
-  test("Renders with correct suffix (icon)", () => {
-    const { getByTestId } = render(
-      <DxcNewInputText
-        label="Input label"
-        suffix={
-          <svg
-            data-testid="image"
-            version="1.1"
-            x="0px"
-            y="0px"
-            width="24px"
-            height="24px"
-            viewBox="0 0 24 24"
-            enable-background="new 0 0 24 24"
-          >
-            <g id="Bounding_Box">
-              <rect fill="none" width="24" height="24" />
-            </g>
-            <g id="Master">
-              <path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
-            </g>
-          </svg>
-        }
-      />
-    );
-    expect(getByTestId("image")).toBeTruthy();
-  });
   test("Input has correct accesibility attributes", () => {
     const onClick = jest.fn();
     const action = {
@@ -426,9 +295,7 @@ describe("NewInputText component tests", () => {
         </svg>
       ),
     };
-    const { getByRole, getAllByRole } = render(
-      <DxcNewInputText label="Example label" clearable action={action} />
-    );
+    const { getByRole, getAllByRole } = render(<DxcTextInput label="Example label" clearable action={action} />);
     const input = getByRole("textbox");
     expect(input.getAttribute("aria-autocomplete")).toBeNull();
     expect(input.getAttribute("aria-controls")).toBeNull();
@@ -440,14 +307,10 @@ describe("NewInputText component tests", () => {
     userEvent.type(input, "Text");
     const clear = getAllByRole("button")[0];
     expect(clear.getAttribute("aria-label")).toBe("Clear");
-    userEvent.click(clear);
-    fireEvent.blur(input);
-    expect(input.getAttribute("aria-invalid")).toBe("true");
-    expect(input.getAttribute("aria-describedBy")).not.toBeNull();
   });
   test("Autosuggest has correct accesibility attributes", () => {
     const { getByRole, getAllByRole } = render(
-      <DxcNewInputText label="Autocomplete Countries" optional suggestions={countries} />
+      <DxcTextInput label="Autocomplete Countries" optional suggestions={countries} />
     );
     const input = getByRole("combobox");
     const inputId = input.id;
@@ -464,11 +327,11 @@ describe("NewInputText component tests", () => {
   });
 });
 
-describe("NewInputText component synchronous autosuggest tests", () => {
+describe("TextInput component synchronous autosuggest tests", () => {
   test("Autosuggest is displayed when the input gains focus", async () => {
     const onChange = jest.fn();
     const { getByRole, getByText } = render(
-      <DxcNewInputText label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
+      <DxcTextInput label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
@@ -482,7 +345,7 @@ describe("NewInputText component synchronous autosuggest tests", () => {
   test("Autosuggest is displayed when the user clicks the input", async () => {
     const onChange = jest.fn();
     const { getByRole, getByText } = render(
-      <DxcNewInputText label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
+      <DxcTextInput label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
     );
     const input = getByRole("combobox");
     userEvent.click(input);
@@ -496,7 +359,7 @@ describe("NewInputText component synchronous autosuggest tests", () => {
   test("Autosuggest is displayed while the user is writing (if closed previously, if open stays open)", async () => {
     const onChange = jest.fn();
     const { getByRole, queryByRole, getByText, getAllByText } = render(
-      <DxcNewInputText label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
+      <DxcTextInput label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
@@ -515,7 +378,7 @@ describe("NewInputText component synchronous autosuggest tests", () => {
   test("Autosuggest is not displayed when prop suggestions is an empty array", async () => {
     const onChange = jest.fn();
     const { queryByRole } = render(
-      <DxcNewInputText label="Autocomplete Countries" suggestions={[]} onChange={onChange} />
+      <DxcTextInput label="Autocomplete Countries" suggestions={[]} onChange={onChange} />
     );
     const input = queryByRole("textbox");
     fireEvent.focus(input);
@@ -524,7 +387,7 @@ describe("NewInputText component synchronous autosuggest tests", () => {
   test("Autosuggest shows 'No results found' message when there are no matches with the user's input", async () => {
     const onChange = jest.fn();
     const { getByRole, getByText } = render(
-      <DxcNewInputText label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
+      <DxcTextInput label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
@@ -535,10 +398,10 @@ describe("NewInputText 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(
-      <DxcNewInputText label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
+      <DxcTextInput label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
@@ -551,10 +414,10 @@ describe("NewInputText 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(
-      <DxcNewInputText label="Autocomplete Countries" value="Andor" suggestions={countries} onChange={onChange} />
+      <DxcTextInput label="Autocomplete Countries" value="Andor" suggestions={countries} onChange={onChange} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
@@ -563,17 +426,18 @@ describe("NewInputText component synchronous autosuggest tests", () => {
     expect(getByText("ra")).toBeTruthy();
     fireEvent.mouseDown(getByRole("option"));
     fireEvent.mouseUp(getByRole("option"));
-    expect(onChange).toHaveBeenCalledWith("Andorra");
+    expect(onChange).toHaveBeenCalledWith({ value: "Andorra", error: null });
     expect(queryByRole("listbox")).toBeFalsy();
   });
-  test("Autosuggest Strict - Pattern constraint", async () => {
+  test("Autosuggest - Pattern constraint", async () => {
     const onChange = jest.fn();
-    const { getByRole, getByText, queryByText } = render(
-      <DxcNewInputText
+    const onBlur = jest.fn();
+    const { getByRole, getByText } = render(
+      <DxcTextInput
         label="Autocomplete Countries"
-        value="Andor"
         suggestions={countries}
         onChange={onChange}
+        onBlur={onBlur}
         pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
       />
     );
@@ -584,36 +448,38 @@ describe("NewInputText component synchronous autosuggest tests", () => {
     expect(getByText("ra")).toBeTruthy();
     fireEvent.mouseDown(getByRole("option"));
     fireEvent.mouseUp(getByRole("option"));
-    expect(onChange).toHaveBeenCalledWith("Andorra");
+    expect(onChange).toHaveBeenCalledWith({ value: "Andorra", error: "Please match the format requested." });
     fireEvent.blur(input);
-    expect(queryByText("Please match the format requested.")).toBeTruthy();
+    expect(onBlur).toHaveBeenCalledWith({ value: "Andorra", error: "Please match the format requested." });
   });
-  test("Autosuggest Strict - Length constraint", async () => {
+  test("Autosuggest - Length constraint", async () => {
     const onChange = jest.fn();
-    const { getByRole, queryByText } = render(
-      <DxcNewInputText
+    const onBlur = jest.fn();
+    const { getByText, getByRole } = render(
+      <DxcTextInput
         label="Autocomplete Countries"
-        value="Cha"
         suggestions={countries}
         onChange={onChange}
+        onBlur={onBlur}
         length={{ min: 5, max: 10 }}
       />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
-    userEvent.type(input, "d");
-    const option = getByRole("option");
-    fireEvent.mouseDown(option);
-    fireEvent.mouseUp(option);
-    expect(onChange).toHaveBeenCalledWith("Chad");
+    userEvent.type(input, "Cha");
+    expect(getByText("Cha")).toBeTruthy();
+    expect(getByText("d")).toBeTruthy();
+    fireEvent.mouseDown(getByRole("option"));
+    fireEvent.mouseUp(getByRole("option"));
+    expect(onChange).toHaveBeenCalledWith({ value: "Cha", error: "Min length 5, max length 10." });
     fireEvent.blur(input);
-    expect(queryByText("Min length 5, max length 10.")).toBeTruthy();
+    expect(onBlur).toHaveBeenCalledWith({ value: "Chad", error: "Min length 5, max length 10." });
   });
   test("Autosuggest keys: arrow down key opens autosuggest, active first option is selected with Enter and closes the autosuggest", async () => {
     Element.prototype.scrollTo = () => {};
     const onChange = jest.fn();
     const { getByRole, queryByRole } = render(
-      <DxcNewInputText label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
+      <DxcTextInput label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
     );
     const input = getByRole("combobox");
     fireEvent.keyDown(input, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
@@ -627,7 +493,7 @@ describe("NewInputText component synchronous autosuggest tests", () => {
     Element.prototype.scrollTo = () => {};
     const onChange = jest.fn();
     const { getByRole, queryByRole } = render(
-      <DxcNewInputText label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
+      <DxcTextInput label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
     );
     const input = getByRole("combobox");
     fireEvent.keyDown(input, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
@@ -641,7 +507,7 @@ describe("NewInputText component synchronous autosuggest tests", () => {
     Element.prototype.scrollTo = () => {};
     const onChange = jest.fn();
     const { getByRole, queryByRole } = render(
-      <DxcNewInputText label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
+      <DxcTextInput label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
@@ -656,7 +522,7 @@ describe("NewInputText component synchronous autosuggest tests", () => {
     Element.prototype.scrollTo = () => {};
     const onChange = jest.fn();
     const { getByRole, queryByRole } = render(
-      <DxcNewInputText label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
+      <DxcTextInput label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
@@ -670,13 +536,13 @@ describe("NewInputText component synchronous autosuggest tests", () => {
     Element.prototype.scrollTo = () => {};
     const onChange = jest.fn();
     const { getByRole, queryByRole } = render(
-      <DxcNewInputText label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
+      <DxcTextInput label="Autocomplete Countries" suggestions={countries} onChange={onChange} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
     userEvent.type(input, "Ba");
     fireEvent.keyDown(input, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
-    fireEvent.keyDown(input, { key: "ArrowUp", code: "ArrowUp", keyCode: 38, charCode: 38 });
+    fireEvent.keyDown(input, { key: "ArrowUp", code: "ArrowUpp", keyCode: 38, charCode: 38 });
     fireEvent.keyDown(input, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
     fireEvent.keyDown(input, { key: "Enter", code: "Enter", keyCode: 13, charCode: 13 });
     expect(input.value).toBe("Barbados");
@@ -687,7 +553,7 @@ describe("NewInputText component synchronous autosuggest tests", () => {
   });
 });
 
-describe("NewInputText component asynchronous autosuggest tests", () => {
+describe("TextInput component asynchronous autosuggest tests", () => {
   test("Autosuggest 'Searching...' message is shown", async () => {
     const callbackFunc = jest.fn((newValue) => {
       const result = new Promise((resolve) =>
@@ -701,7 +567,7 @@ describe("NewInputText component asynchronous autosuggest tests", () => {
     });
     const onChange = jest.fn();
     const { getByRole, getByText } = render(
-      <DxcNewInputText label="Autosuggest Countries" suggestions={callbackFunc} onChange={onChange} />
+      <DxcTextInput label="Autosuggest Countries" suggestions={callbackFunc} onChange={onChange} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
@@ -731,7 +597,7 @@ describe("NewInputText component asynchronous autosuggest tests", () => {
     });
     const onChange = jest.fn();
     const { getByRole, queryByText, queryByRole } = render(
-      <DxcNewInputText label="Autosuggest Countries" suggestions={callbackFunc} onChange={onChange} />
+      <DxcTextInput label="Autosuggest Countries" suggestions={callbackFunc} onChange={onChange} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
@@ -755,7 +621,7 @@ describe("NewInputText component asynchronous autosuggest tests", () => {
     });
     const onChange = jest.fn();
     const { getByRole, getByText, queryByText, queryByRole } = render(
-      <DxcNewInputText label="Autosuggest Countries" suggestions={callbackFunc} onChange={onChange} />
+      <DxcTextInput label="Autosuggest Countries" suggestions={callbackFunc} onChange={onChange} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
@@ -787,7 +653,7 @@ describe("NewInputText component asynchronous autosuggest tests", () => {
     });
     const onChange = jest.fn();
     const { getByRole, getByText } = render(
-      <DxcNewInputText label="Autosuggest Countries" onChange={onChange} suggestions={callbackFunc} />
+      <DxcTextInput label="Autosuggest Countries" onChange={onChange} suggestions={callbackFunc} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
@@ -796,7 +662,7 @@ describe("NewInputText component asynchronous autosuggest tests", () => {
     expect(getByText("Denmark")).toBeTruthy();
     fireEvent.mouseDown(getByRole("option"));
     fireEvent.mouseUp(getByRole("option"));
-    expect(onChange).toHaveBeenCalledWith("Denmark");
+    expect(onChange).toHaveBeenCalledWith({ value: "Denmark", error: null });
     expect(input.value).toBe("Denmark");
   });
   test("Asynchronous controlled autosuggest test", async () => {
@@ -812,7 +678,7 @@ describe("NewInputText component asynchronous autosuggest tests", () => {
     });
     const onChange = jest.fn();
     const { getByRole, getByText, queryByRole } = render(
-      <DxcNewInputText label="Autosuggest Countries" value="Denm" onChange={onChange} suggestions={callbackFunc} />
+      <DxcTextInput label="Autosuggest Countries" value="Denm" onChange={onChange} suggestions={callbackFunc} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
@@ -821,7 +687,7 @@ describe("NewInputText component asynchronous autosuggest tests", () => {
     expect(getByText("Denmark")).toBeTruthy();
     fireEvent.mouseDown(getByRole("option"));
     fireEvent.mouseUp(getByRole("option"));
-    expect(onChange).toHaveBeenCalledWith("Denmark");
+    expect(onChange).toHaveBeenCalledWith({ value: "Denmark", error: null });
     expect(queryByRole("listbox")).toBeFalsy();
   });
   test("Asynchronous autosuggest shows 'No results found' after finishing no matches search", async () => {
@@ -837,7 +703,7 @@ describe("NewInputText component asynchronous autosuggest tests", () => {
     });
     const onChange = jest.fn();
     const { getByRole, getByText } = render(
-      <DxcNewInputText label="Autosuggest Countries" onChange={onChange} suggestions={callbackFunc} />
+      <DxcTextInput label="Autosuggest Countries" onChange={onChange} suggestions={callbackFunc} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);
@@ -856,7 +722,7 @@ describe("NewInputText component asynchronous autosuggest tests", () => {
     });
     const onChange = jest.fn();
     const { getByRole, getByText } = render(
-      <DxcNewInputText label="Autosuggest Countries" onChange={onChange} suggestions={errorCallbackFunc} />
+      <DxcTextInput label="Autosuggest Countries" onChange={onChange} suggestions={errorCallbackFunc} />
     );
     const input = getByRole("combobox");
     fireEvent.focus(input);