@dxc-technology/halstack-react 0.0.0-0d64afc → 0.0.0-0d951d2

package/test/NewDate.test.js

@@ -1,232 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import DxcNewDate from "../src/new-date/NewDate";
-
-describe("NewDate component tests", () => {
-  test("Renders with correct label, helper text, optional, placeholder and clearable action", () => {
-    const { getByText, getByRole, getAllByRole } = render(
-      <DxcNewDate label="Example label" helperText="Example of helper text" placeholder optional clearable />
-    );
-    const input = getByRole("textbox");
-    expect(getByText("Example label")).toBeTruthy();
-    expect(getByText("Example of helper text")).toBeTruthy();
-    expect(getByText("(Optional)")).toBeTruthy();
-    expect(input.getAttribute("placeholder")).toBe("DD-MM-YYYY");
-    userEvent.type(input, "10/10/2010");
-    const closeAction = getAllByRole("button")[0];
-    userEvent.click(closeAction);
-    expect(input.value).toBe("");
-  });
-
-  test("Renders with personalized error", () => {
-    const { getByText } = render(<DxcNewDate error="Personalized error." />);
-    expect(getByText("Personalized error.")).toBeTruthy();
-  });
-
-  test("Renders with correct format: user typed date but it's invalid, onBlur error", () => {
-    const onBlur = jest.fn(({ value, error }) => {
-      expect(value).toBe("10/90/2010");
-      expect(error).toBe("Invalid date.");
-    });
-    const { getByRole } = render(<DxcNewDate label="With format MM/dd/yyyy" format="MM/dd/yyyy" onBlur={onBlur} />);
-    const input = getByRole("textbox");
-
-    userEvent.type(input, "10/90/2010");
-    fireEvent.blur(input);
-  });
-
-  test("Renders with correct format: user typed date but it's invalid, onChange error", () => {
-    const onChange = jest.fn();
-    const { getByRole } = render(<DxcNewDate label="With format MM/dd/yyyy" format="MM/dd/yyyy" onChange={onChange} />);
-    const input = getByRole("textbox");
-
-    userEvent.type(input, "10/90/2010");
-    expect(onChange).toHaveBeenCalledTimes(10);
-    expect(onChange).toHaveBeenCalledWith({ value: "10/90/2010", error: "Invalid date.", date: null });
-  });
-
-  test("Calendar renders with correct date: today's date", () => {
-    const { getByText, getByRole } = render(<DxcNewDate />);
-    const calendarAction = getByRole("button");
-    const d = new Date();
-    const options = { weekday: "short", month: "short", day: "numeric" };
-
-    userEvent.click(calendarAction);
-    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
-  });
-
-  test("Calendar renders with correct date: value prop", () => {
-    const { getByText, getByRole } = render(<DxcNewDate value="20-10-2019" />);
-    const calendarAction = getByRole("button");
-    const d = new Date(2019, 9, 20);
-    const options = { weekday: "short", month: "short", day: "numeric" };
-
-    userEvent.click(calendarAction);
-    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
-  });
-
-  test("Calendar renders with correct date: user typed value", () => {
-    const { getByText, getByRole } = render(<DxcNewDate />);
-    const calendarAction = getByRole("button");
-    const d = new Date(2010, 0, 1);
-    const options = { weekday: "short", month: "short", day: "numeric" };
-    const input = getByRole("textbox");
-
-    userEvent.type(input, "01-01-2010");
-    userEvent.click(calendarAction);
-    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
-  });
-
-  test("Calendar renders with correct date: invalid date, renders with today's date", () => {
-    const onBlur = jest.fn();
-    const { getByText, getByRole } = render(<DxcNewDate onBlur={onBlur} />);
-    const calendarAction = getByRole("button");
-    const d = new Date();
-    const options = { weekday: "short", month: "short", day: "numeric" };
-    const input = getByRole("textbox");
-
-    userEvent.type(input, "01-01-xxxx");
-    fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "01-01-xxxx", error: "Invalid date.", date: null });
-    userEvent.click(calendarAction);
-    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
-  });
-
-  test("Selecting a date from the calendar with an specific format", () => {
-    const { getByText, getByRole } = render(<DxcNewDate label="With format M-dd-yyyy" format="M-dd-yyyy" />);
-    const input = getByRole("textbox");
-    const calendarAction = getByRole("button");
-    userEvent.click(calendarAction);
-    const dayButton = getByText("10").closest('button');
-    fireEvent.click(dayButton);
-    const d = new Date();
-    d.setDate(10);
-    const options = { weekday: "short", month: "short", day: "numeric" };
-    expect(getByText(d.toLocaleString("en-US", options))).toBeTruthy();
-    fireEvent.keyDown(document, { key: "Esc", code: "Esc", keyCode: 27, charCode: 27 });
-    expect(input.value).toBe(`${d.getMonth() + 1}-10-${d.getFullYear()}`);
-  });
-
-  test("Selecting a date from the calendar (using keyboard presses)", () => {
-    const { getByRole } = render(<DxcNewDate />);
-    const calendarAction = getByRole("button");
-    const input = getByRole("textbox");
-
-    userEvent.type(input, "01-01-2010");
-    userEvent.click(calendarAction);
-    fireEvent.keyDown(document, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
-    fireEvent.keyDown(document, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
-    fireEvent.keyDown(document, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
-    fireEvent.keyDown(document, { key: "ArrowLeft", code: "ArrowLeft", keyCode: 37, charCode: 37 });
-    fireEvent.keyDown(document, { key: "Esc", code: "Esc", keyCode: 27, charCode: 27 });
-    expect(input.value).toBe("03-01-2010");
-  });
-
-  test("onChange & onBlur functions are called correctly", () => {
-    const onBlur = jest.fn();
-    const onChange = jest.fn();
-    const { getByRole } = render(<DxcNewDate onChange={onChange} onBlur={onBlur} />);
-    const input = getByRole("textbox");
-    const d = new Date(2011, 9, 10);
-
-    userEvent.type(input, "10-10-2011");
-    expect(input.value).toBe("10-10-2011");
-    expect(onChange).toHaveBeenCalledTimes(10);
-    expect(onChange).toHaveBeenCalledWith({ value: "10-10-2011", error: null, date: d });
-    fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "10-10-2011", error: null, date: d });
-  });
-
-  test("onChange & onBlur functions are called correctly, also with errors", () => {
-    const onBlur = jest.fn();
-    const onChange = jest.fn();
-    const { getByRole } = render(<DxcNewDate onChange={onChange} onBlur={onBlur} />);
-    const input = getByRole("textbox");
-
-    userEvent.type(input, "10-10-");
-    expect(input.value).toBe("10-10-");
-    expect(onChange).toHaveBeenCalledTimes(6);
-    expect(onChange).toHaveBeenCalledWith({ value: "10-10-", error: "Invalid date.", date: null });
-    fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "10-10-", error: "Invalid date.", date: null });
-  });
-
-  test("onBlur function removes the error when it is fixed", () => {
-    const onBlur = jest.fn();
-    const { getByRole } = render(<DxcNewDate onBlur={onBlur} />);
-    const input = getByRole("textbox");
-    const d = new Date(2002, 1, 20);
-
-    userEvent.type(input, "test");
-    expect(input.value).toBe("test");
-    fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Invalid date.", date: null });
-    userEvent.clear(input);
-    userEvent.type(input, "20-02-2002");
-    expect(input.value).toBe("20-02-2002");
-    fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "20-02-2002", error: null, date: d });
-  });
-
-  test("onBlur function removes the error when the input is empty", () => {
-    const onBlur = jest.fn();
-    const { getByRole } = render(<DxcNewDate onBlur={onBlur} optional />);
-    const input = getByRole("textbox");
-
-    userEvent.type(input, "test");
-    expect(input.value).toBe("test");
-    fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Invalid date.", date: null });
-    userEvent.clear(input);
-    fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "", error: null, date: null });
-  });
-
-  test("onBlur & onChange functions error: required field (not optional)", () => {
-    const onBlur = jest.fn();
-    const onChange = jest.fn();
-    const { getByRole } = render(<DxcNewDate onBlur={onBlur} onChange={onChange} />);
-    const date = getByRole("textbox");
-
-    userEvent.type(date, "t");
-    expect(date.value).toBe("t");
-    userEvent.clear(date);
-    fireEvent.blur(date);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value.", date: null });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value.", date: null });
-  });
-
-  test("Disabled date (calendar action must be shown but not clickable)", () => {
-    const { getByRole, queryByText } = render(<DxcNewDate disabled />);
-    const calendarAction = getByRole("button");
-    const d = new Date();
-    const options = { weekday: "short", month: "short", day: "numeric" };
-
-    expect(getByRole("textbox").disabled).toBeTruthy();
-    userEvent.click(calendarAction);
-    expect(queryByText(d.toLocaleString("en-US", options))).toBeFalsy();
-  });
-
-  test("Input has correct accesibility attributes", () => {
-    const { getByRole } = render(<DxcNewDate label="Date label" />);
-    const input = getByRole("textbox");
-    expect(input.getAttribute("aria-autocomplete")).toBeNull();
-    expect(input.getAttribute("aria-controls")).toBeNull();
-    expect(input.getAttribute("aria-expanded")).toBeNull();
-    const calendarAction = getByRole("button");
-    userEvent.click(calendarAction);
-    const datePicker = getByRole("dialog");
-    expect(datePicker.getAttribute("aria-modal")).toBe("true");
-  });
-});

package/test/NewTextarea.test.js

@@ -1,195 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-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("Not optional constraint (onBlur)", () => {
-    const onChange = jest.fn();
-    const onBlur = jest.fn();
-    const { getByLabelText } = render(
-      <DxcNewTextarea label="Example label" placeholder="Placeholder" onChange={onChange} onBlur={onBlur} />
-    );
-    const textarea = getByLabelText("Example label");
-
-    fireEvent.focus(textarea);
-    fireEvent.blur(textarea);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
-    fireEvent.change(textarea, { target: { value: "Test" } });
-    fireEvent.blur(textarea);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "Test", error: null });
-  });
-  test("Not optional constraint (onChange)", () => {
-    const onChange = jest.fn();
-    const { getByLabelText } = render(
-      <DxcNewTextarea label="Example label" placeholder="Placeholder" onChange={onChange} />
-    );
-    const textarea = getByLabelText("Example label");
-
-    fireEvent.focus(textarea);
-    fireEvent.change(textarea, { target: { value: "Test" } });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({ value: "Test", error: null });
-    userEvent.clear(textarea);
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
-  });
-  test("Pattern constraint", () => {
-    const onChange = jest.fn();
-    const onBlur = jest.fn();
-    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: "pattern test" } });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({ value: "pattern test", error: "Please match the format requested." });
-    fireEvent.blur(textarea);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "pattern test", error: "Please match the format requested." });
-    userEvent.clear(textarea);
-    fireEvent.change(textarea, { target: { value: "pattern4&" } });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({ value: "pattern4&", error: null });
-    fireEvent.blur(textarea);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "pattern4&", error: null });
-  });
-  test("Length constraint", () => {
-    const onChange = jest.fn();
-    const onBlur = jest.fn();
-    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: "test" } });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
-    fireEvent.blur(textarea);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
-    userEvent.clear(textarea);
-    fireEvent.change(textarea, { target: { value: "length" } });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({ value: "length", error: null });
-    fireEvent.blur(textarea);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "length", error: null });
-  });
-  test("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" } });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
-    fireEvent.blur(textarea);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "test", error: "Min length 5, max length 10." });
-    fireEvent.change(textarea, { target: { value: "tests" } });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({ value: "tests", error: "Please match the format requested." });
-    fireEvent.blur(textarea);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "tests", error: "Please match the format requested." });
-    fireEvent.change(textarea, { target: { value: "tests4&" } });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({ value: "tests4&", error: null });
-    fireEvent.blur(textarea);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "tests4&", error: null });
-  });
-  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("onChange function is called correctly", () => {
-    const onChange = jest.fn();
-    const { getByLabelText } = render(
-      <DxcNewTextarea label="Example label" value="Test value" onChange={onChange} />
-    );
-    const textarea = getByLabelText("Example label");
-    fireEvent.change(textarea, { target: { value: "Controlled test" } });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({ value: "Controlled test", error: null });
-    expect(textarea.value).toBe("Test value");
-  });
-});

package/test/Number.test.js

@@ -1,257 +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("Number is not optional: required field, displays error if not filled in", () => {
-    const onBlur = jest.fn();
-    const onChange = jest.fn();
-    const { getByRole } = render(<DxcNumber onBlur={onBlur} onChange={onChange} />);
-    const input = getByRole("textbox");
-
-    userEvent.type(input, "1");
-    userEvent.clear(input);
-    fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({ value: "", error: "This field is required. Please, enter a value." });
-  });
-
-  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({ value: "t", error: null });
-    expect(number.value).toBe("");
-    userEvent.type(number, "1");
-    expect(onChange).toHaveBeenCalledWith({ value: "1", error: null });
-    expect(number.value).toBe("1");
-  });
-
-  test("Error message is shown if the value is less than the min value", () => {
-    const onChange = jest.fn(({ value, error }) => {
-      expect(value).toBe("1");
-      expect(error).toBe("Value must be greater than or equal to 5.");
-    });
-    const onBlur = jest.fn(({ value, error }) => {
-      expect(value).toBe("1");
-      expect(error).toBe("Value must be greater than or equal to 5.");
-    });
-    const { getByLabelText } = render(
-      <DxcNumber label="Number label" min={5} onBlur={onBlur} onChange={onChange} />
-    );
-    const number = getByLabelText("Number label");
-
-    userEvent.type(number, "1");
-    fireEvent.blur(number);
-  });
-
-  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 onChange = jest.fn();
-    const onBlur = jest.fn();
-    const { getByLabelText } = render(<DxcNumber label="Number label" max={10} onBlur={onBlur} onChange={onChange} />);
-    const number = getByLabelText("Number label");
-
-    userEvent.type(number, "12");    
-    expect(onChange).toHaveBeenCalledTimes(2);
-    expect(onChange).toHaveBeenCalledWith({ value: "12", error: "Value must be less than or equal to 10." });
-    fireEvent.blur(number);
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({ value: "12", error: "Value must be less than or equal to 10." });
-  });
-
-  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 onBlur = jest.fn(({ value, error }) => {
-      expect(value).toBe("1");
-      expect(error).toBe("Value must be greater than or equal to 5.");
-    });
-    const { getByLabelText, getAllByRole } = render(
-      <DxcNumber label="Number label" min={5} max={20} step={8} onBlur={onBlur} />
-    );
-    const number = getByLabelText("Number label");
-    userEvent.type(number, "1");
-    fireEvent.blur(number);
-    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("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");
-  });
-});