@dxc-technology/halstack-react 0.0.0-5908eb4 → 0.0.0-59b9187

package/test/Number.test.js

@@ -1,205 +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("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);
-  });
-});

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 = getByRole("option", { name: /2/i });
-    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();
-  });
-});

package/test/Password.test.js

@@ -1,63 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import DxcPassword from "../src/password/Password";
-
-describe("Password component tests", () => {
-  test("Password renders with label", () => {
-    const { getByText } = render(<DxcPassword label="Password label" />);
-    expect(getByText("Password label")).toBeTruthy();
-  });
-
-  test("Password renders with helper text", () => {
-    const { getByText } = render(<DxcPassword helperText="Helper text" />);
-    expect(getByText("Helper text")).toBeTruthy();
-  });
-
-  test("Password renders error", () => {
-    const { getByText } = render(<DxcPassword error="Error message" />);
-    expect(getByText("Error message")).toBeTruthy();
-  });
-
-  test("onChange function is called correctly", () => {
-    const onChange = jest.fn();
-    const { getByLabelText } = render(<DxcPassword label="Password" onChange={onChange} />);
-    const password = getByLabelText("Password");
-    userEvent.type(password, "Pa$$w0rd");
-    expect(onChange).toHaveBeenCalledWith("P");
-    expect(password.value).toBe("Pa$$w0rd");
-  });
-
-  test("Clear password value", () => {
-    const onChange = jest.fn();
-    const { getAllByRole, getByLabelText } = render(<DxcPassword label="Password" onChange={onChange} clearable />);
-    const password = getByLabelText("Password");
-    userEvent.type(password, "Pa$$w0rd");
-    expect(password.value).toBe("Pa$$w0rd");
-    const clearButton = getAllByRole("button")[0];
-    userEvent.click(clearButton);
-    expect(password.value).toBe("");
-  });
-
-  test("Non clearable password has no clear icon", () => {
-    const onChange = jest.fn();
-    const { getAllByRole, getByLabelText } = render(<DxcPassword label="Password" onChange={onChange} />);
-    const password = getByLabelText("Password");
-    userEvent.type(password, "Pa$$w0rd");
-    expect(password.value).toBe("Pa$$w0rd");
-    const buttons = getAllByRole("button");
-    expect(buttons.length).toBe(1);
-  });
-
-  test("Show/hide password button works correctly", () => {
-    const onChange = jest.fn();
-    const { getAllByRole, getByLabelText } = render(<DxcPassword label="Password" clearable onChange={onChange} />);
-    const password = getByLabelText("Password");
-    userEvent.type(password, "Pa$$w0rd");
-    expect(password.value).toBe("Pa$$w0rd");
-    expect(password.type).toBe("password");
-    const showButton = getAllByRole("button")[1];
-    userEvent.click(showButton);
-    expect(password.type).toBe("text");
-  });
-});

package/test/ProgressBar.test.js

@@ -1,35 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import DxcProgressBar from "../src/progress-bar/ProgressBar";
-
-describe("ProgressBar component tests", () => {
-  test("ProgressBar renders with label", () => {
-    const { getByText } = render(<DxcProgressBar label="test-label"></DxcProgressBar>);
-    expect(getByText("test-label")).toBeTruthy();
-  });
-
-  test("Overlay progressBar renders with label", () => {
-    const { getByText } = render(<DxcProgressBar label="test-label" overlay></DxcProgressBar>);
-    expect(getByText("test-label")).toBeTruthy();
-  });
-
-  test("ProgressBar renders with default value", () => {
-    const { getByText } = render(<DxcProgressBar showValue></DxcProgressBar>);
-    expect(getByText("100 %")).toBeTruthy();
-  });
-
-  test("Overlay progressBar renders with default value", () => {
-    const { getByText } = render(<DxcProgressBar showValue overlay></DxcProgressBar>);
-    expect(getByText("100 %")).toBeTruthy();
-  });
-
-  test("ProgressBar renders with value", () => {
-    const { getByText } = render(<DxcProgressBar showValue value={25}></DxcProgressBar>);
-    expect(getByText("25 %")).toBeTruthy();
-  });
-
-  test("Overlay progressBar renders with value", () => {
-    const { getByText } = render(<DxcProgressBar showValue value={25} overlay></DxcProgressBar>);
-    expect(getByText("25 %")).toBeTruthy();
-  });
-});

package/test/Radio.test.js

@@ -1,37 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import DxcRadio from "../src/radio/Radio";
-
-describe("Radio component tests", () => {
-  test("Radio renders correctly", () => {
-    const { getByText } = render(<DxcRadio label="Radio button" />);
-    expect(getByText("Radio button")).toBeTruthy();
-  });
-  test("Calls correct function on click", () => {
-    const onClick = jest.fn();
-    const { getByText} = render(<DxcRadio label="Radio button" onClick={onClick} />);
-    fireEvent.click(getByText("Radio button"));
-    
-    expect(onClick).toHaveBeenCalled();
-    expect(onClick).toHaveBeenCalledWith(true);
-  });
-  test("Controlled Radio", () => {
-    const onClick = jest.fn();
-    const { getByText, getByRole } = render(<DxcRadio label="Radio button" checked={false} onClick={onClick} />);
-    expect(getByRole("radio").checked).toBe(false);
-    fireEvent.click(getByText("Radio button"));
-    expect(onClick).toHaveBeenCalled();
-    expect(onClick).toHaveBeenCalledWith(true);
-    expect(getByRole("radio").checked).toBe(false);
-  });
-  test("Uncontrolled Radio", () => {
-    const onClick = jest.fn();
-    const { getByText, getByRole } = render(<DxcRadio label="Radio button" onClick={onClick} />);
-    expect(getByRole("radio").checked).toBe(false);
-    fireEvent.click(getByText("Radio button"));
-    expect(onClick).toHaveBeenCalled();
-    expect(onClick).toHaveBeenCalledWith(true);
-    expect(getByRole("radio").checked).toBe(false);
-  });
-
-});