@dxc-technology/halstack-react 0.0.0-20fc09e → 0.0.0-23f04da

package/test/Date.test.js

@@ -1,12 +1,12 @@
 import React from "react";
 import { render, fireEvent } from "@testing-library/react";
-import V3DxcDate from "../src/date/Date";
+import DxcDate from "../src/date/Date";
 
 const defaultFormat = "DD-MM-YYYY";
 
 describe("Date component general tests", () => {
   test("Date renders correctly", () => {
-    const { getByPlaceholderText } = render(<V3DxcDate label="Birthdate" placeholder />);
+    const { getByPlaceholderText } = render(<DxcDate label="Birthdate" placeholder />);
     // const input = getByPlaceholderText('DD-MM-YYYY');
     expect(getByPlaceholderText(defaultFormat)).toBeTruthy();
   });
@@ -22,19 +22,19 @@ describe("Controlled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText, rerender } = render(
-      <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
+      <DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
     );
     const input = getByPlaceholderText(defaultFormat);
 
     fireEvent.change(input, { target: { value: "something" } });
     expect(onChange).toHaveBeenCalled();
     fireEvent.blur(input);
-    rerender(<V3DxcDate label="Birthdate" value="" placeholder />);
+    rerender(<DxcDate label="Birthdate" value="" placeholder />);
     // expect(getByRole("textbox").value).toBe('');
   });
 
   test("The input´s value is the same as the one received as a parameter (Default format)", () => {
-    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" value="30/03/1981" placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" value="30/03/1981" placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
     expect(input.value).toBe("30/03/1981");
@@ -42,7 +42,7 @@ describe("Controlled Date Component", () => {
 
   test("The input´s value is the same as the one received as a parameter (Custom format)", () => {
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" placeholder />
+      <DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD/MM/YY");
@@ -50,20 +50,20 @@ describe("Controlled Date Component", () => {
   });
 
   test("Calendar´s value is the same as the input´s date if it´s right (Depending on the format)", () => {
-    const { getByRole, getByText, getByTestId } = render(<V3DxcDate label="Birthdate" value="16-10-2020" />);
+    const { getByRole, getByText, getByTestId } = render(<DxcDate label="Birthdate" value="16-10-2020" />);
     fireEvent.click(getByTestId("calendarIcon"));
     expect(getByText("Fri, Oct 16")).toBeTruthy();
   });
 
   test("Calendar´s value is the same as the input´s date if it´s right after changing the input value", () => {
     const { getByRole, getByText, rerender, getByPlaceholderText, getByTestId } = render(
-      <V3DxcDate label="Birthdate" value="30-03-1981" placeholder />
+      <DxcDate label="Birthdate" value="30-03-1981" placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
     fireEvent.change(input, { target: { value: "10-02-2020" } });
 
-    rerender(<V3DxcDate label="Birthdate" value="10-02-2020" />);
+    rerender(<DxcDate label="Birthdate" value="10-02-2020" />);
     const calendarButton = getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     expect(getByText("Mon, Feb 10")).toBeTruthy();
@@ -76,7 +76,7 @@ describe("Controlled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
+      <DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
@@ -92,7 +92,7 @@ describe("Controlled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
+      <DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
@@ -107,7 +107,7 @@ describe("Controlled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" format="dd-MM-yy" value="30-03-81" onChange={onChange} placeholder />
+      <DxcDate label="Birthdate" format="dd-MM-yy" value="30-03-81" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD-MM-YY");
@@ -123,7 +123,7 @@ describe("Controlled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
+      <DxcDate label="Birthdate" value="30-03-1981" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
@@ -139,7 +139,7 @@ describe("Controlled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" value="03/30/1981" format="MM/dd/yyyy" onChange={onChange} placeholder />
+      <DxcDate label="Birthdate" value="03/30/1981" format="MM/dd/yyyy" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("MM/DD/YYYY");
@@ -151,7 +151,7 @@ describe("Controlled Date Component", () => {
   test("onChange function is called when the user selects from the calendar", () => {
     const onChange = jest.fn();
 
-    const component = render(<V3DxcDate label="Birthdate" value="01-02-2020" onChange={onChange} />);
+    const component = render(<DxcDate label="Birthdate" value="01-02-2020" onChange={onChange} />);
     const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "10" });
@@ -165,7 +165,7 @@ describe("Controlled Date Component", () => {
       expect(returnedValue.dateValue.getTime()).toBe(date.getTime());
     });
 
-    const component = render(<V3DxcDate label="Birthdate" value="30-10-2020" onChange={onChange} />);
+    const component = render(<DxcDate label="Birthdate" value="30-10-2020" onChange={onChange} />);
     const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "16" });
@@ -178,7 +178,7 @@ describe("Controlled Date Component", () => {
       expect(returnedValue.stringValue).toBe("16-10-2020");
     });
 
-    const component = render(<V3DxcDate label="Birthdate" value="01-10-2020" onChange={onChange} />);
+    const component = render(<DxcDate label="Birthdate" value="01-10-2020" onChange={onChange} />);
     const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "16" });
@@ -191,9 +191,7 @@ describe("Controlled Date Component", () => {
       expect(returnedValue.stringValue).toBe("2020/10/16");
     });
 
-    const component = render(
-      <V3DxcDate label="Birthdate" format="yyyy/MM/dd" value="2020/10/01" onChange={onChange} />
-    );
+    const component = render(<DxcDate label="Birthdate" format="yyyy/MM/dd" value="2020/10/01" onChange={onChange} />);
     const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "16" });
@@ -202,7 +200,7 @@ describe("Controlled Date Component", () => {
   });
 
   test("Check selected date on calendar is the same date as the one on the input", () => {
-    const component = render(<V3DxcDate label="Birthdate" value="01-10-2020" />);
+    const component = render(<DxcDate label="Birthdate" value="01-10-2020" />);
     const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "1" });
@@ -211,7 +209,7 @@ describe("Controlled Date Component", () => {
   test("onBlur function is called", () => {
     const onBlur = jest.fn();
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
+      <DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
@@ -224,7 +222,7 @@ describe("Controlled Date Component", () => {
       expect(returnedValue).toBe("30-03-81");
     });
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
+      <DxcDate label="Birthdate" value="30-03-81" onBlur={onBlur} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
@@ -237,7 +235,7 @@ describe("Controlled Date Component", () => {
       expect(returnedValue).toBe("30/03/81");
     });
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" onBlur={onBlur} placeholder />
+      <DxcDate label="Birthdate" format="dd/MM/yy" value="30/03/81" onBlur={onBlur} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD/MM/YY");
@@ -252,14 +250,14 @@ describe("Uncontrolled Date Component", () => {
 
   test("Calendar´s value is the same as the input´s date if it´s right after changing the input value", () => {
     const { getByRole, getByText, rerender, getByPlaceholderText, getByTestId } = render(
-      <V3DxcDate label="Birthdate" placeholder />
+      <DxcDate label="Birthdate" placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
     fireEvent.change(input, { target: { value: "10-02-2020" } });
 
-    rerender(<V3DxcDate label="Birthdate" value="10-02-2020" />);
+    rerender(<DxcDate label="Birthdate" value="10-02-2020" />);
     const calendarButton = getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     expect(getByText("Mon, Feb 10")).toBeTruthy();
@@ -271,7 +269,7 @@ describe("Uncontrolled Date Component", () => {
       expect(returnedValue.stringValue).toBe("something");
     });
 
-    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
@@ -284,7 +282,7 @@ describe("Uncontrolled Date Component", () => {
       expect(returnedValue.stringValue).toBe("16-10-2020");
     });
 
-    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
@@ -298,7 +296,7 @@ describe("Uncontrolled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" format="dd-MM-yy" onChange={onChange} placeholder />
+      <DxcDate label="Birthdate" format="dd-MM-yy" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD-MM-YY");
@@ -313,7 +311,7 @@ describe("Uncontrolled Date Component", () => {
       expect(returnedValue.stringValue).toBe("11-15-2020");
     });
 
-    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onChange={onChange} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onChange={onChange} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
@@ -328,7 +326,7 @@ describe("Uncontrolled Date Component", () => {
     });
 
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" format="MM/dd/yyyy" onChange={onChange} placeholder />
+      <DxcDate label="Birthdate" format="MM/dd/yyyy" onChange={onChange} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("MM/DD/YYYY");
@@ -339,7 +337,7 @@ describe("Uncontrolled Date Component", () => {
   test("onChange function is called when the user selects from the calendar", () => {
     const onChange = jest.fn();
 
-    const component = render(<V3DxcDate label="Birthdate" onChange={onChange} />);
+    const component = render(<DxcDate label="Birthdate" onChange={onChange} />);
     const calendarButton = component.getByTestId("calendarIcon");
     fireEvent.click(calendarButton);
     const dayButton = component.getByRole("button", { name: "10" });
@@ -349,7 +347,7 @@ describe("Uncontrolled Date Component", () => {
   });
 
   test("Check selected date on calendar is the same date as the one on the input", () => {
-    const component = render(<V3DxcDate label="Birthdate" placeholder />);
+    const component = render(<DxcDate label="Birthdate" placeholder />);
     // const input = component.getByRole("textbox");
     const input = component.getByPlaceholderText(defaultFormat);
 
@@ -361,7 +359,7 @@ describe("Uncontrolled Date Component", () => {
   });
   test("onBlur function is called", () => {
     const onBlur = jest.fn();
-    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText(defaultFormat);
 
@@ -372,7 +370,7 @@ describe("Uncontrolled Date Component", () => {
     const onBlur = jest.fn((returnedValue) => {
       expect(returnedValue).toBe("10-02-2020");
     });
-    const { getByRole, getByPlaceholderText } = render(<V3DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
+    const { getByRole, getByPlaceholderText } = render(<DxcDate label="Birthdate" onBlur={onBlur} placeholder />);
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD-MM-YYYY");
 
@@ -385,7 +383,7 @@ describe("Uncontrolled Date Component", () => {
       expect(returnedValue).toBe("10/02/20");
     });
     const { getByRole, getByPlaceholderText } = render(
-      <V3DxcDate label="Birthdate" format="dd/MM/yy" onBlur={onBlur} placeholder />
+      <DxcDate label="Birthdate" format="dd/MM/yy" onBlur={onBlur} placeholder />
     );
     // const input = getByRole("textbox");
     const input = getByPlaceholderText("DD/MM/YY");

package/test/Heading.test.js

@@ -3,33 +3,81 @@ import { render } from "@testing-library/react";
 import DxcHeading from "../src/heading/Heading";
 
 describe("Heading component tests", () => {
-  test("Footer renders with default level", () => {
-    const { getByText } = render(<DxcHeading text="my-heading-test"></DxcHeading>);
+  test("Heading renders with default level", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test"></DxcHeading>);
     expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 1 })).toBeTruthy();
   });
 
-  test("Footer renders with level 1", () => {
-    const { getByText } = render(<DxcHeading text="my-heading-test" level={1}></DxcHeading>);
+  test("Heading renders with level 1", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={1}></DxcHeading>);
     expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 1 })).toBeTruthy();
   });
 
-  test("Footer renders with level 2", () => {
-    const { getByText } = render(<DxcHeading text="my-heading-test" level={2}></DxcHeading>);
+  test("Heading renders with level 2", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={2}></DxcHeading>);
     expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 2 })).toBeTruthy();
   });
 
-  test("Footer renders with level 3", () => {
-    const { getByText } = render(<DxcHeading text="my-heading-test" level={3}></DxcHeading>);
+  test("Heading renders with level 3", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={3}></DxcHeading>);
     expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 3 })).toBeTruthy();
   });
 
-  test("Footer renders with level 4", () => {
-    const { getByText } = render(<DxcHeading text="my-heading-test" level={4}></DxcHeading>);
+  test("Heading renders with level 4", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={4}></DxcHeading>);
     expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 4 })).toBeTruthy();
   });
 
-  test("Footer renders with level 5", () => {
-    const { getByText } = render(<DxcHeading text="my-heading-test" level={5}></DxcHeading>);
+  test("Heading renders with level 5", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={5}></DxcHeading>);
     expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 5 })).toBeTruthy();
+  });
+
+  test("Heading renders with default level and as h5", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" as="h5"></DxcHeading>);
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 5 })).toBeTruthy();
+  });
+
+  test("Heading renders with level 1 and as h5", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={1} as="h5"></DxcHeading>);
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 5 })).toBeTruthy();
+  });
+
+  test("Heading renders with level 2 and as h4", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={2} as="h4"></DxcHeading>);
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 4 })).toBeTruthy();
+  });
+
+  test("Heading renders with level 3 and as h2", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={3} as="h2"></DxcHeading>);
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 2 })).toBeTruthy();
+  });
+
+  test("Heading renders with level 4 and as h3", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={4} as="h3"></DxcHeading>);
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 3 })).toBeTruthy();
+  });
+
+  test("Heading renders with level 5 as h4", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={5} as="h4"></DxcHeading>);
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 4 })).toBeTruthy();
+  });
+
+  test("Heading renders with level 5 and invalid as", () => {
+    const { getByText, getByRole } = render(<DxcHeading text="my-heading-test" level={5} as="h4afdssf"></DxcHeading>);
+    expect(getByText("my-heading-test")).toBeTruthy();
+    expect(getByRole("heading", { level: 5 })).toBeTruthy();
   });
 });

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>);