@bigbinary/neetoui 3.2.80 → 3.2.81

package/tests/ColorPicker.test.js

@@ -1,117 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { ColorPicker } from "../lib/components";
-import userEvent from "@testing-library/user-event";
-
-describe("ColorPicker", () => {
-  it("should render without error", () => {
-    render(<ColorPicker color="#ffffff" />);
-    expect(screen.getByText("#ffffff")).toBeInTheDocument();
-  });
-
-  it("should trigger onChange when color is changed", () => {
-    const hex = "#000000";
-    const hsl = { a: 1, h: 0, l: 0, s: 0 };
-    const hsv = { a: 1, h: 0, v: 0, s: 0 };
-    const rgb = { a: 1, b: 0, g: 0, r: 0 };
-    const onChange = jest.fn((color) => {
-      expect(color.hex).toEqual(hex);
-      expect(color.hsl).toEqual(hsl);
-      expect(color.hsv).toEqual(hsv);
-      expect(color.rgb).toEqual(rgb);
-    });
-
-    render(<ColorPicker color="#ffffff" onChange={onChange} />);
-    userEvent.click(screen.getByText("#ffffff"));
-    userEvent.paste(screen.getByRole("textbox"), "000000");
-    expect(onChange).toHaveBeenCalledTimes(1);
-  });
-
-  it("should display color palette when colorPaletteProps is provided", () => {
-    render(<ColorPicker color="#ffffff" colorPaletteProps={{}} />);
-    userEvent.click(screen.getByText("#ffffff"));
-    expect(screen.getByTestId("color-palette")).toBeInTheDocument();
-  });
-
-  it("should trigger onChange when a color is selected from palette", () => {
-    const selectedColor = "#ffffff";
-    const DEFAULT_COLORS = {
-      "red-500": "#f56a58",
-      "yellow-500": "#f3cd82",
-      "green-500": "#00ba88",
-      "blue-500": "#276ef1",
-    };
-    const onChange = jest.fn();
-    render(
-      <ColorPicker
-        color={selectedColor}
-        colorPaletteProps={{
-          color: {
-            from: "red-500",
-            to: "red-500",
-          },
-          colorList: Object.keys(DEFAULT_COLORS).map((key) => ({
-            from: key,
-            to: key,
-          })),
-          onChange,
-        }}
-      />
-    );
-    userEvent.click(screen.getByText("#ffffff"));
-    const paletteItems = screen.getAllByTestId("color-palette-item");
-    userEvent.click(paletteItems[0]);
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith("red-500", "red-500");
-  });
-
-  it("should call onChange when user touches Heu slider", () => {
-    const touchStart = [{ pageX: 0, pageY: 0 }];
-
-    const hex = "#000000";
-    const hsl = { a: 1, h: 0, l: 0, s: 0 };
-    const hsv = { a: 1, h: 0, v: 0, s: 0 };
-    const rgb = { a: 1, b: 0, g: 0, r: 0 };
-    const onChange = jest.fn((color) => {
-      expect(color.hex).toEqual(hex);
-      expect(color.hsl).toEqual(hsl);
-      expect(color.hsv).toEqual(hsv);
-      expect(color.rgb).toEqual(rgb);
-    });
-
-    render(<ColorPicker color="#ffffff" onChange={onChange} />);
-    userEvent.click(screen.getByText("#ffffff"));
-
-    fireEvent.touchStart(
-      screen.getByTestId("color-picker-hue").querySelector(".hue-horizontal"),
-      { touches: touchStart }
-    );
-
-    expect(onChange).toHaveBeenCalledTimes(1);
-  });
-
-  it("should call onChange when user touches Saturation selector", () => {
-    const touchStart = [{ pageX: 0, pageY: 0 }];
-
-    const hex = "#000000";
-    const hsl = { a: 1, h: 0, l: 0, s: 0 };
-    const hsv = { a: 1, h: 0, v: 0, s: 0 };
-    const rgb = { a: 1, b: 0, g: 0, r: 0 };
-    const onChange = jest.fn((color) => {
-      expect(color.hex).toEqual(hex);
-      expect(color.hsl).toEqual(hsl);
-      expect(color.hsv).toEqual(hsv);
-      expect(color.rgb).toEqual(rgb);
-    });
-
-    render(<ColorPicker color="#ffffff" onChange={onChange} />);
-    userEvent.click(screen.getByText("#ffffff"));
-
-    fireEvent.touchStart(
-      screen.getByTestId("color-picker-saturation").querySelector(".saturation-black"),
-      { touches: touchStart }
-    );
-
-    expect(onChange).toHaveBeenCalledTimes(1);
-  });
-});

package/tests/DatePicker.test.js

@@ -1,111 +0,0 @@
-import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
-
-import dayjs from "dayjs";
-import DatePicker from "../lib/components/DatePicker";
-
-const today = dayjs();
-const tomorrow = dayjs().add(1, "day");
-
-describe("DatePicker", () => {
-  it("should render without error", () => {
-    render(<DatePicker defaultValue={today} />);
-    expect(screen.getByRole("textbox")).toHaveValue(today.format("DD/MM/YYYY"));
-  });
-
-  it("should show label if label is provided", () => {
-    render(<DatePicker label="DatePicker Label" />);
-    expect(screen.getByText("DatePicker Label")).toBeInTheDocument();
-  });
-
-  it("should show error if error is provided", () => {
-    render(<DatePicker error="DatePicker Error" />);
-    expect(screen.getByText("DatePicker Error")).toBeInTheDocument();
-  });
-
-  it("should render time if showTime is true", async () => {
-    render(<DatePicker defaultValue={today} showTime open />);
-    expect(await screen.findAllByText("00")).toHaveLength(3);
-  });
-
-  it("should show only hours if format is HH", async () => {
-    render(<DatePicker defaultValue={today} timeFormat="HH" showTime open />);
-    expect(await screen.findAllByText("00")).toHaveLength(1);
-  });
-
-  it("should show only hours and minutes if format is MM", async () => {
-    render(
-      <DatePicker defaultValue={today} timeFormat="HH:mm" showTime open />
-    );
-    expect(await screen.findAllByText("00")).toHaveLength(2);
-  });
-
-  it("should return date in the given format", async () => {
-    render(
-      <DatePicker
-        defaultValue={dayjs("2022-05-24", "YYYY-MM-DD")}
-        format="DD/MM/YYYY"
-      />
-    );
-    expect(screen.getByRole("textbox")).toHaveValue("24/05/2022");
-  });
-
-  it("should return date time in the given format", async () => {
-    render(
-      <DatePicker
-        defaultValue={dayjs("2022-05-24", "YYYY-MM-DD")
-          .hour(12)
-          .minute(30)
-          .second(0)}
-        format="DD/MM/YYYY HH:mm"
-        showTime
-      />
-    );
-    expect(screen.getByRole("textbox")).toHaveValue("24/05/2022 12:30");
-  });
-
-  it("should trigger onChange on selecting a date", () => {
-    const onChange = jest.fn();
-    render(<DatePicker defaultValue={today} onChange={onChange} open />);
-    fireEvent.click(screen.getByText(tomorrow.get("D")));
-    expect(onChange).toHaveBeenCalled();
-  });
-
-  it("should trigger onOk method on clicking on ok button", () => {
-    const onOk = jest.fn();
-    render(<DatePicker open showTime defaultValue={today} onOk={onOk} />);
-    fireEvent.click(screen.getByText("Ok"));
-    expect(onOk).toHaveBeenCalled();
-  });
-
-  it("should show 12 hour format if timeFormat is in 12 hr format", () => {
-    render(
-      <DatePicker
-        defaultValue={dayjs("12/04/2022", "DD/MM/YYYY").hour(14).minute(30)}
-        dateFormat="DD/MM/YYYY"
-        showTime
-        timeFormat="h:mm A"
-        open
-      />
-    );
-    expect(screen.getByRole("textbox")).toHaveValue("12/04/2022 2:30 PM");
-  });
-
-  it("should be able to select date in a range", () => {
-    render(
-      <DatePicker
-        defaultValue={[
-          dayjs("12/04/2022", "DD/MM/YYYY"),
-          dayjs("14/04/2022", "DD/MM/YYYY"),
-        ]}
-        type="range"
-        open
-      />
-    );
-    fireEvent.click(screen.getAllByText("11")[0]);
-    fireEvent.click(screen.getAllByText("16")[1]);
-    const dateInputBox = screen.getAllByRole("textbox");
-    expect(dateInputBox[0]).toHaveValue("11/04/2022");
-    expect(dateInputBox[1]).toHaveValue("16/05/2022");
-  });
-});

package/tests/Dropdown.test.js

@@ -1,185 +0,0 @@
-import React from "react";
-import { Dropdown } from "../lib/components";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const options = ["option 1", "option 2"].map(option => <li key={option}>{option}</li>)
-
-describe("Dropdown", () => {
-  it("should render without error", () => {
-    const { getByText } = render(
-      <Dropdown
-        label="Dropdown"
-      />)
-    expect(getByText("Dropdown")).toBeInTheDocument();
-  });
-
-  it("should show icon when icon component is provided", () => {
-    const { getByTestId } = render(
-      <Dropdown icon={() => <svg data-testid="svg-icon" />} />
-    );
-    expect(getByTestId("svg-icon")).toBeInTheDocument();
-  });
-
-  it("should render all the options when clicking dropdown without error", async () => {
-    const { getByText } = render(
-      <Dropdown label="Dropdown" >
-        {options}
-      </Dropdown>
-    )
-    userEvent.click(getByText("Dropdown"))
-    const listItems = await screen.findAllByText(/option/i)
-    expect(listItems.length).toBe(2);
-  });
-
-  it("should render all the options if isOpen is true", async () => {
-    const { findAllByText } = render(
-      <Dropdown label="Dropdown" isOpen>
-       {options}
-      </Dropdown>
-    )
-    const listItems = await findAllByText(/option/i)
-    expect(listItems.length).toBe(2);
-  });
-
-  it("should be disabled if disabled is true", () => {
-    const { getByRole } = render(
-      <Dropdown label="Dropdown" disabled />
-    );
-    expect(getByRole("button")).toBeDisabled();
-  });
-
-  it("should close the dropdown on select if closeOnSelect is true", () => {
-    const { getByText } = render(
-      <Dropdown label="Dropdown" closeOnSelect >
-        {options}
-      </Dropdown>
-    )
-    userEvent.click(getByText("Dropdown"))
-    const listItem = getByText("option 1")
-    userEvent.click(listItem)
-    expect(screen.queryAllByRole("listitem")).toHaveLength(0);
-  });
-
-  it("should not close the dropdown on select if closeOnSelect is false", async () => {
-    const { getByText } = render(
-      <Dropdown label="Dropdown" closeOnSelect={false} >
-        {options}
-      </Dropdown>
-    )
-    userEvent.click(getByText("Dropdown"))
-    const listItem = getByText("option 1")
-    userEvent.click(listItem)
-    const listItems = await screen.findAllByRole("listitem")
-    expect(listItems).toHaveLength(2);
-  });
-
-  it("should close the dropdown when Esc key is pressed if closeOnEsc is true", () => {
-    const { getByText } = render(
-      <Dropdown label="Dropdown" closeOnEsc >
-        {options}
-      </Dropdown>
-    )
-    userEvent.click(getByText("Dropdown"))
-    userEvent.keyboard("{esc}");
-    expect(screen.queryAllByRole("listitem")).toHaveLength(0);
-  });
-
-  it("should not close the dropdown when Esc key is pressed if closeOnEsc is false", async () => {
-    const { getByText } = render(
-      <Dropdown label="Dropdown" closeOnEsc={false} >
-        {options}
-      </Dropdown>
-    )
-    userEvent.click(getByText("Dropdown"))
-    userEvent.keyboard("{esc}");
-    const listItems = await screen.findAllByRole("listitem")
-    expect(listItems).toHaveLength(2);
-  });
-
-  it("should close dropdown on clicking outside if closeOnOutsideClick is true", () => {
-    const { getByText } = render(
-      <Dropdown label="Dropdown" closeOnOutsideClick >
-        {options}
-      </Dropdown>
-    )
-    userEvent.click(getByText("Dropdown"))
-    userEvent.click(document.body);
-    expect(screen.queryAllByRole("listitem")).toHaveLength(0);
-  });
-
-  it("should not close on clicking outside if closeOnOutsideClick is false", async () => {
-    const { getByText } = render(
-      <Dropdown label="Dropdown" closeOnOutsideClick={false} >
-        {options}
-      </Dropdown>
-    )
-    userEvent.click(getByText("Dropdown"))
-    userEvent.click(document.body);
-    const listItems = await screen.findAllByRole("listitem")
-    expect(listItems).toHaveLength(2);
-  });
-
-  it("should open another dropdown on click trigger when it is multilevel ", async () => {
-    const { getByText } = render(
-      <Dropdown label="Dropdown" isMultiLevel isOpen>
-        {options}
-        <Dropdown
-          customTarget={<li>Another Dropdown</li>}
-        >
-          {options}
-        </Dropdown>
-      </Dropdown>
-    )
-    userEvent.click(getByText("Another Dropdown"))
-    const listItems =  await screen.findAllByRole("listitem")
-    expect(listItems).toHaveLength(5);
-  });
-
-  it("should open another dropdown on hover trigger when it is multilevel  ", async () => {
-    const { getByText } = render(
-      <Dropdown label="Dropdown" isMultiLevel isOpen>
-        {options}
-        <Dropdown
-          customTarget={<li>Another Dropdown</li>}
-          trigger="hover"
-        >
-          {options}
-        </Dropdown>
-      </Dropdown>
-    )
-    userEvent.hover(getByText("Another Dropdown"))
-    const listItems =  await screen.findAllByRole("listitem")
-    expect(listItems).toHaveLength(5);
-  });
-
-  it("should close the multilevel dropdown when mouse leaves", async () => {
-    const { getByText } = render(
-      <Dropdown label="Dropdown" isMultiLevel isOpen>
-        {options}
-        <Dropdown
-          customTarget={<li>Another Dropdown</li>}
-          trigger="hover"
-          isOpen
-        >
-          {options}
-        </Dropdown>
-      </Dropdown>
-    )
-    userEvent.unhover(getByText("Another Dropdown"))
-    const listItems =  await screen.findAllByRole("listitem")
-    expect(listItems).toHaveLength(3);
-  });
-
-  it("should call onClose when Dropdown is closed", () => {
-    const onClose = jest.fn();
-    const { getByText } = render(
-      <Dropdown label="Dropdown" closeOnOutsideClick onClose={onClose}>
-        {options}
-      </Dropdown>
-    )
-    userEvent.click(getByText("Dropdown"))
-    userEvent.click(document.body);
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-});

package/tests/EmailInput.test.js

@@ -1,166 +0,0 @@
-import React from "react";
-import { EmailInput } from "../lib/components";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-describe("EmailInput", () => {
-  it("should render without error", () => {
-    render(<EmailInput />);
-    expect(screen.getByText("Email(s)")).toBeInTheDocument();
-  });
-
-  it("should display helpText", () => {
-    render(<EmailInput helpText="Help text" />);
-    expect(screen.getByText("Help text")).toBeInTheDocument();
-  });
-
-  it("should display error message", () => {
-    render(<EmailInput error="Error message" />);
-    expect(screen.getByText("Error message")).toBeInTheDocument();
-  });
-
-  it("should render correct number of emails", () => {
-    render(
-      <EmailInput
-        value={[
-          { label: "test@example.com", value: "test@example.com", valid: true },
-        ]}
-        counter={{ label: "email" }}
-      />
-    );
-    expect(screen.getByText("1 email")).toBeInTheDocument();
-  });
-
-  it("should render default counter text when no label is provided", () => {
-    const { rerender } = render(
-      <EmailInput
-        value={[
-          { label: "test@example.com", value: "test@example.com", valid: true },
-        ]}
-        counter={{}}
-      />
-    );
-    expect(screen.getByText("1 email")).toBeInTheDocument();
-    rerender(<EmailInput
-      value={[
-        { label: "test@example.com", value: "test@example.com", valid: true },
-        { label: "test2@example.com", value: "test2@example.com", valid: true },
-      ]}
-      counter={{}}
-    />);
-    expect(screen.getByText("2 emails")).toBeInTheDocument();
-  });
-
-  it("should call onBlur when focus from the input field changes", () => {
-    const onBlur = jest.fn();
-    render(<EmailInput onBlur={onBlur} />);
-    const emailInput = screen.getByRole("combobox");
-    userEvent.click(emailInput);
-    userEvent.click(document.body);
-    expect(onBlur).toHaveBeenCalledTimes(1);
-  });
-
-  it("should call onChange when input loses focus after entering email", () => {
-    const onChange = jest.fn();
-    render(<EmailInput onChange={onChange} />);
-    const emailInput = screen.getByRole("combobox");
-    userEvent.paste(emailInput, "test@email.com test2@email.com");
-    userEvent.click(document.body);
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith([
-      { label: "test@email.com", valid: true, value: "test@email.com" },
-      { label: "test2@email.com", valid: true, value: "test2@email.com" },
-    ]);
-  });
-
-  it("should call onInputChange when email input value changes", () => {
-    const onInputChange = jest.fn();
-    render(<EmailInput onInputChange={onInputChange} />);
-    const emailInput = screen.getByRole("combobox");
-    userEvent.type(emailInput, "test");
-    expect(onInputChange).toHaveBeenCalledTimes(4);
-  });
-
-  it("should call onChange when Enter key is pressed", () => {
-    const onChange = jest.fn();
-    render(<EmailInput onChange={onChange} />);
-    const emailInput = screen.getByRole("combobox");
-    userEvent.type(emailInput, "email@domain.com{enter}");
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith([
-      { label: "email@domain.com", valid: true, value: "email@domain.com" },
-    ]);
-  });
-
-  it("should call onChange when Space key is pressed", () => {
-    const onChange = jest.fn();
-    render(<EmailInput onChange={onChange} />);
-    const emailInput = screen.getByRole("combobox");
-    userEvent.type(emailInput, "email@domain.com{space}");
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith([
-      { label: "email@domain.com", valid: true, value: "email@domain.com" },
-    ]);
-  });
-
-  it("should call onChange when Tab key is pressed", () => {
-    const onChange = jest.fn();
-    render(<EmailInput onChange={onChange} />);
-    const emailInput = screen.getByRole("combobox");
-    userEvent.type(emailInput, "email@domain.com");
-    userEvent.tab();
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith([
-      { label: "email@domain.com", valid: true, value: "email@domain.com" },
-    ]);
-  });
-
-  it("should call onChange when comma key is pressed", () => {
-    const onChange = jest.fn();
-    render(<EmailInput onChange={onChange} />);
-    const emailInput = screen.getByRole("combobox");
-    userEvent.type(emailInput, "email@domain.com,");
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith([
-      { label: "email@domain.com", valid: true, value: "email@domain.com" },
-    ]);
-  });
-
-  it("should remove all invalid emails on clicking filterInvalidEmails label", () => {
-    const onChange = jest.fn();
-    render(
-      <EmailInput
-        onChange={onChange}
-        value={[
-          { label: "test@example.com", value: "test@example.com", valid: true },
-          { label: "invalidEmail", value: "invalidEmail" },
-        ]}
-        filterInvalidEmails={{
-          label: "Filter invalid emails",
-        }}
-        error="Invalid email"
-      />
-    );
-    userEvent.click(screen.getByText("Filter invalid emails"));
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenCalledWith([
-      { label: "test@example.com", value: "test@example.com", valid: true },
-    ]);
-  });
-
-  it("should display filterInvalidEmails label if no label is provided", () => {
-    const onChange = jest.fn();
-    render(
-      <EmailInput
-        onChange={onChange}
-        value={[
-          { label: "test@example.com", value: "test@example.com", valid: true },
-          { label: "invalidEmail", value: "invalidEmail" },
-        ]}
-        filterInvalidEmails={{}}
-        error="Invalid email"
-      />
-    );
-    expect(screen.getByText("Click here to remove invalid emails.")).toBeInTheDocument();
-  });
-});

package/tests/Input.test.js

@@ -1,75 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import { Input } from "../lib/components";
-import userEvent from "@testing-library/user-event";
-
-describe("Input", () => {
-  it("should render without error", () => {
-    const { getByLabelText } = render(<Input id="input" label="Input Label" />);
-    expect(getByLabelText("Input Label")).toBeInTheDocument();
-  });
-
-  it("should be able to type when uncontrolled", () => {
-    const { getByLabelText } = render(<Input id="input" label="Input Label" />);
-    const inputField = getByLabelText("Input Label");
-    userEvent.type(inputField, "sample content");
-    expect(inputField).toHaveValue("sample content");
-  });
-
-  it("should call onChange when textarea value changes", () => {
-    const onChange = jest.fn();
-    const { getByLabelText } = render(
-      <Input id="input" label="Input Label" onChange={onChange} />
-    );
-    userEvent.type(getByLabelText("Input Label"), "Test");
-    expect(onChange).toHaveBeenCalledTimes(4);
-  });
-
-  it("should display error message", () => {
-    const { getByText } = render(
-      <Input label="input" error={"Error message"} />
-    );
-    expect(getByText("Error message")).toBeInTheDocument();
-  });
-
-  it("should display helpText", () => {
-    const { getByText } = render(<Input label="Input" helpText="Help text" />);
-    expect(getByText("Help text")).toBeInTheDocument();
-  });
-
-  it("should be disabled if disabled is true", () => {
-    const { getByLabelText } = render(
-      <Input disabled id="input" label="Input Label" />
-    );
-    expect(getByLabelText("Input Label")).toBeDisabled();
-  });
-
-  it("should show suffix", () => {
-    const { getByText } = render(<Input label="input" suffix="suffix" />);
-    expect(getByText("suffix")).toBeInTheDocument();
-  });
-
-  it("should show prefix", () => {
-    const { getByText } = render(<Input label="input" prefix="prefix" />);
-    expect(getByText("prefix")).toBeInTheDocument();
-  });
-
-  it("should render asterisk when required is set to true", () => {
-    const { getByText } = render(<Input required label="Input" />);
-    const asterisk = getByText("*");
-    expect(asterisk).toBeInTheDocument();
-  });
-
-  it("should properly handle maxLength", () => {
-    const { getByLabelText, getByText } = render(
-      <Input id="input" label="Input label" maxLength={5} />
-    );
-
-    expect(getByText("0 / 5")).toBeInTheDocument();
-    expect(getByLabelText("Input label")).toHaveAttribute("maxLength", "5");
-
-    userEvent.type(getByLabelText("Input label"), "Testing maxLength");
-    expect(getByText("5 / 5")).toBeInTheDocument();
-    expect(getByLabelText("Input label")).toHaveValue("Testi");
-  });
-});