@dxc-technology/halstack-react 0.0.0-d13627a → 0.0.0-d17aa47

package/test/NewTextarea.test.js

@@ -1,252 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-
-import DxcNewTextarea from "../src/new-textarea/NewTextarea";
-
-describe("NewTextarea component tests", () => {
-  test("Renders with correct label", () => {
-    const { getByText } = render(<DxcNewTextarea label="Example label" />);
-    expect(getByText("Example label")).toBeTruthy();
-  });
-  test("Renders with correct label and helper text", () => {
-    const { getByText } = render(<DxcNewTextarea 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, getByRole } = render(<DxcNewTextarea label="Example label" helperText="Example helper text" optional />);
-    const textarea = getByRole("textbox");
-    expect(getByText("Example label")).toBeTruthy();
-    expect(getByText("(Optional)")).toBeTruthy();
-    expect(getByText("Example helper text")).toBeTruthy();
-    expect(textarea.getAttribute("aria-required")).toBe("false");
-  });
-  test("Renders with correct placeholder", () => {
-    const { getByRole } = render(<DxcNewTextarea placeholder="Placeholder" />);
-    const textarea = getByRole("textbox");
-    expect(textarea.getAttribute("placeholder")).toBe("Placeholder");
-  });
-  test("Renders with error message", () => {
-    const { getByText, getByRole } = render(<DxcNewTextarea error="Error message." />);
-    const textarea = getByRole("textbox");
-    expect(getByText("Error message.")).toBeTruthy();
-    expect(textarea.getAttribute("aria-invalid")).toBe("true");
-    expect(textarea.getAttribute("aria-describedBy")).not.toBeNull();
-  });
-  test("Renders with correct default rows", () => {
-    const { getByLabelText } = render(<DxcNewTextarea label="Example label" rows={10} />);
-    const textarea = getByLabelText("Example label");
-    expect(textarea.rows).toBe(10);
-  });
-  test("Renders with correct accesibility attributes", () => {
-    const { getByLabelText } = render(<DxcNewTextarea label="Example label" />);
-    const textarea = getByLabelText("Example label");
-    expect(textarea.getAttribute("aria-invalid")).toBe("false");
-    expect(textarea.getAttribute("aria-describedBy")).toBeNull();
-    expect(textarea.getAttribute("aria-required")).toBe("true");
-  });
-  test("Strict mode - Not optional constraint", () => {
-    const onChange = jest.fn();
-    const onBlur = jest.fn();
-    const { getByLabelText, getByText, queryByText } = render(
-      <DxcNewTextarea
-        label="Example label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-      />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.focus(textarea);
-    fireEvent.blur(textarea);
-    expect(getByText("This field is required. Please, enter a value.")).toBeTruthy();
-    fireEvent.change(textarea, { target: { value: "Test" } });
-    fireEvent.blur(textarea);
-    expect(queryByText("This field is required. Please, enter a value.")).toBeFalsy();
-  });
-  test("Strict mode - Pattern constraint", () => {
-    const onChange = jest.fn();
-    const onBlur = jest.fn();
-    const { getByLabelText, getByText, queryByText } = render(
-      <DxcNewTextarea
-        label="Example label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
-      />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "pattern test" } });
-    fireEvent.blur(textarea);
-    expect(getByText("Please match the format requested.")).toBeTruthy();
-    fireEvent.change(textarea, { target: { value: "pattern4&" } });
-    fireEvent.blur(textarea);
-    expect(queryByText("Please match the format requested.")).toBeFalsy();
-  });
-  test("Strict mode - Length constraint", () => {
-    const onChange = jest.fn();
-    const onBlur = jest.fn();
-    const { getByLabelText, getByText, queryByText } = render(
-      <DxcNewTextarea
-        label="Example label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        length={{ min: 5, max: 10 }}
-      />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "test" } });
-    fireEvent.blur(textarea);
-    expect(getByText("Min length 5, max length 10.")).toBeTruthy();
-    fireEvent.change(textarea, { target: { value: "test " } });
-    fireEvent.blur(textarea);
-    expect(queryByText(/Min length /)).toBeFalsy();
-  });
-  test("Strict mode - Pattern and length constraints", () => {
-    const onChange = jest.fn();
-    const onBlur = jest.fn();
-    const { getByLabelText, getByText, queryByText } = render(
-      <DxcNewTextarea
-        label="Example label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
-        length={{ min: 5, max: 10 }}
-      />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "test" } });
-    fireEvent.blur(textarea);
-    expect(getByText("Min length 5, max length 10.")).toBeTruthy();
-    fireEvent.change(textarea, { target: { value: "test " } });
-    fireEvent.blur(textarea);
-    expect(getByText("Please match the format requested.")).toBeTruthy();
-    fireEvent.change(textarea, { target: { value: "test 4" } });
-    fireEvent.blur(textarea);
-    expect(queryByText("Please match the format requested.")).toBeFalsy();
-  });
-  test("Non Strict mode - 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 { getByLabelText } = render(
-      <DxcNewTextarea
-        label="Example label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-      />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.focus(textarea);
-    fireEvent.blur(textarea);
-  });
-  test("Non Strict mode - Pattern constraint", () => {
-    const onChange = jest.fn((value) => {
-      expect(value).toBe("Example value");
-    });
-    const onBlur = jest.fn(({ value, error }) => {
-      expect(value).toBe("Example value");
-      expect(error).toBe("Please match the format requested.");
-    });
-    const { getByLabelText } = render(
-      <DxcNewTextarea
-        label="Example label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        pattern='^.*(?=.*[a-zA-Z])(?=.*\d)(?=.*[!&$%&? "]).*$'
-      />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "Example value" } });
-    fireEvent.blur(textarea);
-  });
-  test("Non Strict mode - Length constraint", () => {
-    const onChange = jest.fn((value) => {
-      expect(value).toBe("Example value");
-    });
-    const onBlur = jest.fn(({ value, error }) => {
-      expect(value).toBe("Example value");
-      expect(error).toBe("Min length 5, max length 10.");
-    });
-    const { getByLabelText } = render(
-      <DxcNewTextarea
-        label="Example label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        length={{ min: 5, max: 10 }}
-      />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "Example value" } });
-    fireEvent.blur(textarea);
-  });
-  test("Non Strict mode - Pattern and length constraints", () => {
-    const onChange = jest.fn((value) => {
-      expect(value).toBe("Example value");
-    });
-    const onBlur = jest.fn(({ value, error }) => {
-      expect(value).toBe("Example value");
-      expect(error).toBe("Min length 5, max length 10.");
-    });
-    const { getByLabelText } = render(
-      <DxcNewTextarea
-        label="Example label"
-        placeholder="Placeholder"
-        onChange={onChange}
-        onBlur={onBlur}
-        margin={{ left: "medium", right: "medium" }}
-        length={{ min: 5, max: 10 }}
-      />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "Example value" } });
-    fireEvent.blur(textarea);
-  });
-  test("onBlur function is called correctly", () => {
-    const onBlur = jest.fn();
-    const { getByLabelText } = render(<DxcNewTextarea label="Example label" onBlur={onBlur} />);
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "Blur test" } });
-    fireEvent.blur(textarea);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "Blur test", error: null });
-  });
-  test("Controlled textarea", () => {
-    const onChange = jest.fn();
-    const onBlur = jest.fn();
-    const { getByLabelText } = render(
-      <DxcNewTextarea label="Example label" value="Test value" onChange={onChange} onBlur={onBlur} />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "Controlled test" } });
-    expect(onChange).toHaveBeenCalled();
-    expect(textarea.value).toBe("Test value");
-    fireEvent.blur(textarea);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "Test value", error: null });
-  });
-  test("Uncontrolled textarea", () => {
-    const onChange = jest.fn();
-    const { getByLabelText } = render(<DxcNewTextarea label="Example label" onChange={onChange} />);
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "Uncontrolled test" } });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith("Uncontrolled test");
-    expect(textarea.value).toBe("Uncontrolled test");
-  });
-});

package/test/Number.test.js

@@ -1,241 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import DxcNumber from "../src/number/Number";
-
-describe("Number component tests", () => {
-  test("Number renders with label", () => {
-    const { getByText } = render(<DxcNumber label="Number label" />);
-    expect(getByText("Number label")).toBeTruthy();
-  });
-
-  test("Number renders with helper text", () => {
-    const { getByText } = render(<DxcNumber helperText="Helper text" />);
-    expect(getByText("Helper text")).toBeTruthy();
-  });
-
-  test("Number renders with placeholder", () => {
-    const { getByLabelText } = render(<DxcNumber label="Number label" placeholder="Placeholder" />);
-    const number = getByLabelText("Number label");
-    expect(number.getAttribute("placeholder")).toBe("Placeholder");
-  });
-
-  test("Number renders increment and decrement buttons", () => {
-    const { queryAllByRole } = render(<DxcNumber label="Number label" />);
-    expect(queryAllByRole("button").length).toBe(2);
-  });
-
-  test("Number is disabled", () => {
-    const { getByLabelText } = render(<DxcNumber label="Number label" disabled />);
-    const number = getByLabelText("Number label");
-    expect(number.disabled).toBeTruthy();
-  });
-
-  test("Number is optional", () => {
-    const { getByText } = render(<DxcNumber label="Number label" optional />);
-    expect(getByText("(Optional)")).toBeTruthy();
-  });
-
-  test("Suffix and prefix must be shown)", () => {
-    const { getByText } = render(<DxcNumber label="Number label" prefix="+34" suffix="USD" />);
-    expect(getByText("+34")).toBeTruthy();
-    expect(getByText("USD")).toBeTruthy();
-  });
-
-  test("Invalid number renders error", () => {
-    const { getByText } = render(<DxcNumber error="Error message." />);
-    expect(getByText("Error message.")).toBeTruthy();
-  });
-
-  test("onChange function is called correctly", () => {
-    const onChange = jest.fn();
-    const { getByLabelText } = render(<DxcNumber label="Number label" onChange={onChange} />);
-    const number = getByLabelText("Number label");
-    userEvent.type(number, "t");
-    expect(onChange).not.toHaveBeenCalledWith("t");
-    expect(number.value).toBe("");
-    userEvent.type(number, "1");
-    expect(onChange).toHaveBeenCalledWith("1");
-    expect(number.value).toBe("1");
-  });
-
-  test("Error message is shown if the value is less than the min value", () => {
-    const { getByLabelText, getByText } = render(<DxcNumber label="Number label" min={5} />);
-    const number = getByLabelText("Number label");
-    userEvent.type(number, "1");
-    fireEvent.blur(number);
-    expect(getByText("Value must be greater than or equal to 5.")).toBeTruthy();
-  });
-
-  test("Cannot decrement the value if it is less than the min value", () => {
-    const { getByLabelText, getAllByRole } = render(<DxcNumber label="Number label" min={5} />);
-    const number = getByLabelText("Number label");
-    userEvent.type(number, "1");
-    fireEvent.blur(number);
-    expect(number.value).toBe("1");
-    const decrement = getAllByRole("button")[0];
-    userEvent.click(decrement);
-    expect(number.value).toBe("1");
-  });
-
-  test("Increment the value when it is less than the min value", () => {
-    const { getByLabelText, getAllByRole } = render(<DxcNumber label="Number label" min={5} />);
-    const number = getByLabelText("Number label");
-    userEvent.type(number, "1");
-    fireEvent.blur(number);
-    expect(number.value).toBe("1");
-    const increment = getAllByRole("button")[1];
-    userEvent.click(increment);
-    expect(number.value).toBe("5");
-  });
-
-  test("Error message is shown if the value is greater than the max value", () => {
-    const { getByLabelText, getByText } = render(<DxcNumber label="Number label" max={10} />);
-    const number = getByLabelText("Number label");
-    userEvent.type(number, "12");
-    fireEvent.blur(number);
-    expect(getByText("Value must be less than or equal to 10.")).toBeTruthy();
-  });
-
-  test("Cannot increment the value if it is greater than the max value", () => {
-    const { getByLabelText, getAllByRole } = render(<DxcNumber label="Number label" max={10} />);
-    const number = getByLabelText("Number label");
-    userEvent.type(number, "12");
-    fireEvent.blur(number);
-    expect(number.value).toBe("12");
-    const decrement = getAllByRole("button")[1];
-    userEvent.click(decrement);
-    expect(number.value).toBe("12");
-  });
-
-  test("Decrement the value when it is greater than the max value", () => {
-    const { getByLabelText, getAllByRole } = render(<DxcNumber label="Number label" max={10} />);
-    const number = getByLabelText("Number label");
-    userEvent.type(number, "12");
-    fireEvent.blur(number);
-    expect(number.value).toBe("12");
-    const decrement = getAllByRole("button")[0];
-    userEvent.click(decrement);
-    expect(number.value).toBe("10");
-  });
-
-  test("Increment and decrement the value with min and max values", () => {
-    const { getByLabelText, getAllByRole } = render(<DxcNumber label="Number label" min={5} max={10} />);
-    const number = getByLabelText("Number label");
-    userEvent.type(number, "1");
-    fireEvent.blur(number);
-    expect(number.value).toBe("1");
-    const decrement = getAllByRole("button")[0];
-    userEvent.click(decrement);
-    expect(number.value).toBe("1");
-    const increment = getAllByRole("button")[1];
-    userEvent.click(increment);
-    expect(number.value).toBe("5");
-    userEvent.click(increment);
-    userEvent.click(increment);
-    userEvent.click(increment);
-    userEvent.click(increment);
-    userEvent.click(increment);
-    expect(number.value).toBe("10");
-    userEvent.click(increment);
-    expect(number.value).toBe("10");
-  });
-
-  test("Increment and decrement the value with step", () => {
-    const { getByLabelText, getAllByRole } = render(<DxcNumber label="Number label" step={5} />);
-    const number = getByLabelText("Number label");
-    userEvent.type(number, "10");
-    fireEvent.blur(number);
-    expect(number.value).toBe("10");
-    const increment = getAllByRole("button")[1];
-    userEvent.click(increment);
-    expect(number.value).toBe("15");
-    userEvent.click(increment);
-    expect(number.value).toBe("20");
-    const decrement = getAllByRole("button")[0];
-    userEvent.click(decrement);
-    expect(number.value).toBe("15");
-    userEvent.click(decrement);
-    expect(number.value).toBe("10");
-  });
-
-  test("Increment and decrement the value with min, max and step", () => {
-    const { getByLabelText, getByText, getAllByRole } = render(
-      <DxcNumber label="Number label" min={5} max={20} step={8} />
-    );
-    const number = getByLabelText("Number label");
-    userEvent.type(number, "1");
-    fireEvent.blur(number);
-    expect(getByText("Value must be greater than or equal to 5.")).toBeTruthy();
-    const increment = getAllByRole("button")[1];
-    userEvent.click(increment);
-    expect(number.value).toBe("5");
-    userEvent.click(increment);
-    expect(number.value).toBe("13");
-    userEvent.click(increment);
-    expect(number.value).toBe("20");
-    userEvent.click(increment);
-    expect(number.value).toBe("20");
-    const decrement = getAllByRole("button")[0];
-    userEvent.click(decrement);
-    expect(number.value).toBe("12");
-    userEvent.click(decrement);
-    expect(number.value).toBe("5");
-    userEvent.click(decrement);
-    expect(number.value).toBe("5");
-  });
-
-  test("Increment and decrement the value with min, max and step using the arrows in keyboard", () => {
-    const { getByLabelText } = render(<DxcNumber label="Number label" min={5} max={20} step={5} />);
-    const number = getByLabelText("Number label");
-    userEvent.type(number, "1");
-    fireEvent.keyDown(number, { keyCode: 38 });
-    expect(number.value).toBe("5");
-    fireEvent.keyDown(number, { keyCode: 38 });
-    expect(number.value).toBe("10");
-    fireEvent.keyDown(number, { keyCode: 38 });
-    expect(number.value).toBe("15");
-    fireEvent.keyDown(number, { keyCode: 38 });
-    expect(number.value).toBe("20");
-    fireEvent.keyDown(number, { keyCode: 38 });
-    expect(number.value).toBe("20");
-    fireEvent.keyDown(number, { keyCode: 40 });
-    expect(number.value).toBe("15");
-    fireEvent.keyDown(number, { keyCode: 40 });
-    expect(number.value).toBe("10");
-    fireEvent.keyDown(number, { keyCode: 40 });
-    expect(number.value).toBe("5");
-    fireEvent.keyDown(number, { keyCode: 40 });
-    expect(number.value).toBe("5");
-  });
-
-  test("Custom error messages", () => {
-    const onChange = jest.fn((value) => {
-      expect(value).toBe("2");
-    });
-
-    const onBlur = jest.fn(({ value, error }) => {
-      expect(value).toBe("2");
-      expect(error).toBe("Value must be greater than or equal to 5.");
-    });
-
-    const { getByLabelText } = render(
-      <DxcNumber label="Number label" min={5} step={8} onChange={onChange} onBlur={onBlur} />
-    );
-    const number = getByLabelText("Number label");
-    userEvent.type(number, "2");
-    fireEvent.blur(number);
-  });
-
-  test("Number has correct accesibility attributes", () => {
-    const { getByLabelText, getAllByRole } = render(<DxcNumber label="Number label" />);
-    const number = getByLabelText("Number label");
-    expect(number.getAttribute("aria-autocomplete")).toBeNull();
-    expect(number.getAttribute("aria-controls")).toBeNull();
-    expect(number.getAttribute("aria-expanded")).toBeNull();
-    const decrement = getAllByRole("button")[0];
-    expect(decrement.getAttribute("aria-label")).toBe("Decrement");
-    const increment = getAllByRole("button")[1];
-    expect(increment.getAttribute("aria-label")).toBe("Increment");
-  });
-});

package/test/Paginator.test.js

@@ -1,177 +0,0 @@
-import React from "react";
-import { render, act } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import DxcPaginator from "../src/paginator/Paginator";
-
-describe("Paginator component tests", () => {
-  test("Paginator renders with default values", () => {
-    const { getByText } = render(<DxcPaginator></DxcPaginator>);
-    expect(getByText("1 to 1 of 1")).toBeTruthy();
-    expect(getByText("Page: 1 of 1")).toBeTruthy();
-  });
-
-  test("Paginator renders with currentPage", () => {
-    const { getByText } = render(<DxcPaginator currentPage={2}></DxcPaginator>);
-    expect(getByText("Page: 2 of 1")).toBeTruthy();
-  });
-
-  test("Paginator renders with itemsPerPageOptions", () => {
-    const { getByText } = render(
-      <DxcPaginator currentPage={1} itemsPerPage={10} itemsPerPageOptions={[10, 15]} totalItems={20}></DxcPaginator>
-    );
-    expect(getByText("Items per page")).toBeTruthy();
-  });
-
-  test("Paginator renders with itemsPerPageOptions", () => {
-    const { getByText } = render(<DxcPaginator currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>);
-    expect(getByText("1 to 10 of 20")).toBeTruthy();
-    expect(getByText("Page: 1 of 2")).toBeTruthy();
-  });
-
-  test("Paginator renders with totalItems", () => {
-    const { getByText } = render(<DxcPaginator totalItems={20}></DxcPaginator>);
-    expect(getByText("1 to 5 of 20")).toBeTruthy();
-    expect(getByText("Page: 1 of 4")).toBeTruthy();
-  });
-
-  test("Paginator renders with correct text in second page", () => {
-    const { getByText } = render(<DxcPaginator currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>);
-    expect(getByText("11 to 20 of 20")).toBeTruthy();
-    expect(getByText("Page: 2 of 2")).toBeTruthy();
-  });
-
-  test("Paginator renders goToPage select", () => {
-    const { getByText } = render(
-      <DxcPaginator currentPage={2} showGoToPage={true} itemsPerPage={10} totalItems={20}></DxcPaginator>
-    );
-    expect(getByText("Go to page:")).toBeTruthy();
-  });
-
-  test("Paginator goToPage call correct function", () => {
-    const onClick = jest.fn();
-    const { getByText, getAllByRole, getByRole } = render(
-      <DxcPaginator
-        currentPage={1}
-        itemsPerPage={10}
-        totalItems={27}
-        showGoToPage={true}
-        onPageChange={onClick}
-      ></DxcPaginator>
-    );
-    const goToPageSelect = getAllByRole("button")[2];
-    act(() => {
-      userEvent.click(goToPageSelect);
-    });
-    const goToPageOption = getByText("2");
-    act(() => {
-      userEvent.click(goToPageOption);
-    });
-    expect(onClick).toHaveBeenCalledWith(2);
-  });
-
-  test("Call correct goToPageFunction", () => {
-    const onClick = jest.fn();
-    const { getAllByRole } = render(
-      <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
-    );
-    const nextButton = getAllByRole("button")[2];
-    userEvent.click(nextButton);
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  test("Call correct itemsPerPageFunction", () => {
-    const onClick = jest.fn();
-    const { getAllByText, getByText } = render(
-      <DxcPaginator
-        currentPage={1}
-        itemsPerPage={10}
-        itemsPerPageOptions={[10, 15]}
-        itemsPerPageFunction={onClick}
-        totalItems={20}
-      ></DxcPaginator>
-    );
-    const select = getAllByText("10")[0];
-    act(() => {
-      userEvent.click(select);
-    });
-    const itemPerPageOption = getByText("15");
-    act(() => {
-      userEvent.click(itemPerPageOption);
-    });
-    expect(onClick).toHaveBeenCalledWith(15);
-  });
-
-  test("Next button is disable in last page", () => {
-    const onClick = jest.fn();
-    const { getAllByRole } = render(
-      <DxcPaginator onPageChange={onClick} currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>
-    );
-    const nextButton = getAllByRole("button")[2];
-    expect(nextButton.hasAttribute("disabled")).toBeTruthy();
-    userEvent.click(nextButton);
-    expect(onClick).toHaveBeenCalledTimes(0);
-  });
-
-  test("Last button is disable in last page", () => {
-    const onClick = jest.fn();
-    const { getAllByRole } = render(
-      <DxcPaginator onPageChange={onClick} currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>
-    );
-    const lastButton = getAllByRole("button")[3];
-    expect(lastButton.hasAttribute("disabled")).toBeTruthy();
-    userEvent.click(lastButton);
-    expect(onClick).toHaveBeenCalledTimes(0);
-  });
-
-  test("First button is disable in first page", () => {
-    const onClick = jest.fn();
-    const { getAllByRole } = render(
-      <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
-    );
-    const lastButton = getAllByRole("button")[0];
-    expect(lastButton.hasAttribute("disabled")).toBeTruthy();
-    userEvent.click(lastButton);
-    expect(onClick).toHaveBeenCalledTimes(0);
-  });
-
-  test("Previous button is disable in first page", () => {
-    const onClick = jest.fn();
-    const { getAllByRole } = render(
-      <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
-    );
-    const lastButton = getAllByRole("button")[1];
-    expect(lastButton.hasAttribute("disabled")).toBeTruthy();
-    userEvent.click(lastButton);
-    expect(onClick).toHaveBeenCalledTimes(0);
-  });
-
-  test("Last and next buttons are disable in last page", () => {
-    const onClick = jest.fn();
-    const { getAllByRole } = render(
-      <DxcPaginator onPageChange={onClick} currentPage={2} itemsPerPage={10} totalItems={20}></DxcPaginator>
-    );
-    const firstButton = getAllByRole("button")[0];
-    const prevButton = getAllByRole("button")[1];
-    const nextButton = getAllByRole("button")[2];
-    const lastButton = getAllByRole("button")[3];
-    expect(firstButton.hasAttribute("disabled")).toBeFalsy();
-    expect(prevButton.hasAttribute("disabled")).toBeFalsy();
-    expect(nextButton.hasAttribute("disabled")).toBeTruthy();
-    expect(lastButton.hasAttribute("disabled")).toBeTruthy();
-  });
-
-  test("First and previous buttons are disable in first page", () => {
-    const onClick = jest.fn();
-    const { getAllByRole } = render(
-      <DxcPaginator onPageChange={onClick} currentPage={1} itemsPerPage={10} totalItems={20}></DxcPaginator>
-    );
-    const firstButton = getAllByRole("button")[0];
-    const prevButton = getAllByRole("button")[1];
-    const nextButton = getAllByRole("button")[2];
-    const lastButton = getAllByRole("button")[3];
-    expect(firstButton.hasAttribute("disabled")).toBeTruthy();
-    expect(prevButton.hasAttribute("disabled")).toBeTruthy();
-    expect(nextButton.hasAttribute("disabled")).toBeFalsy();
-    expect(lastButton.hasAttribute("disabled")).toBeFalsy();
-  });
-});