@dxc-technology/halstack-react 0.0.0-5908eb4 → 0.0.0-5b2ad05

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/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/TabsForSections.test.js

@@ -1,34 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import DxcTabsForSections from "../src/tabs-for-sections/TabsForSections";
-
-const sections = [
-  {
-    tabLabel: "S1",
-    section: () => <div>test-section-1</div>,
-  },
-  {
-    tabLabel: "S2",
-    section: () => <div>test-section-2</div>,
-  },
-  {
-    tabLabel: "S3",
-    section: () => <div>test-section-3</div>,
-  },
-];
-
-describe("TabsForSections component tests", () => {
-  test("TabsForSections renders with correct sections label", () => {
-    const { getByText } = render(<DxcTabsForSections sections={sections}></DxcTabsForSections>);
-    expect(getByText("S1")).toBeTruthy();
-    expect(getByText("S2")).toBeTruthy();
-    expect(getByText("S3")).toBeTruthy();
-  });
-
-  test("TabsForSections renders with correct sections content", () => {
-    const { getByText } = render(<DxcTabsForSections sections={sections}></DxcTabsForSections>);
-    expect(getByText("test-section-1")).toBeTruthy();
-    expect(getByText("test-section-2")).toBeTruthy();
-    expect(getByText("test-section-3")).toBeTruthy();
-  });
-});