@bigbinary/neetoui 3.2.72 → 3.2.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "3.2.72",
+  "version": "3.2.73",
   "main": "./index.js",
   "author": "BigBinary",
   "license": "MIT",

package/tests/ActionDropdown.test.js

@@ -0,0 +1,61 @@
+import React from "react";
+import { ActionDropdown } from "../lib/components";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+describe("ActionDropdown", () => {
+  it("should render without error", () => {
+    render(
+      <ActionDropdown label="ActionDropdown">
+        <li>Option 1</li>
+        <li>Option 2</li>
+      </ActionDropdown>
+    );
+    expect(screen.getByText("ActionDropdown")).toBeInTheDocument();
+  });
+
+  it("should call onClick on button click", () => {
+    const onClick = jest.fn();
+    render(
+      <ActionDropdown label="ActionDropdown" onClick={onClick}>
+        <li>Option 1</li>
+        <li>Option 2</li>
+      </ActionDropdown>
+    );
+    const button = screen.getByTestId("action-dropdown-btn");
+    userEvent.click(button);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not call onClick on button click when disabled", () => {
+    const onClick = jest.fn();
+    render(
+      <ActionDropdown label="ActionDropdown" disabled>
+        <li>Option 1</li>
+        <li>Option 2</li>
+      </ActionDropdown>
+    );
+    userEvent.click(screen.getByText("ActionDropdown"));
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+
+  it("should show options on clicking dropdown", async () => {
+    render(
+      <ActionDropdown
+        dropdownProps={{
+          buttonProps: {
+            "data-testid": "action-dropdown-dropdown",
+          },
+        }}
+        label="ActionDropdown"
+      >
+        <li>Option 1</li>
+        <li>Option 2</li>
+      </ActionDropdown>
+    );
+    const dropdown = screen.getByTestId("action-dropdown-dropdown");
+    userEvent.click(dropdown);
+    expect(await screen.findByText("Option 1")).toBeInTheDocument();
+    expect(await screen.findByText("Option 2")).toBeInTheDocument();
+  });
+});

package/tests/Dropdown.test.js

@@ -0,0 +1,185 @@
+import React from "react";
+import { Dropdown } from "../lib/components";
+import { fireEvent, 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/Pane.test.js

@@ -0,0 +1,116 @@
+import React from "react";
+import { Pane, Typography, Button } from "../lib/components";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+describe("Pane", () => {
+  it("should render without error", () => {
+    const { getByText } = render(
+      <Pane isOpen>
+        <Pane.Header>
+          <Typography style="h2">Pane header</Typography>
+        </Pane.Header>
+      </Pane>
+    );
+    expect(getByText("Pane header")).toBeInTheDocument();
+  });
+
+  it("should not display content when isOpen is false", () => {
+    const { queryByText } = render(
+      <Pane>
+        <Pane.Header>
+          <Typography style="h2">Pane header</Typography>
+        </Pane.Header>
+      </Pane>
+    );
+    expect(queryByText("Pane header")).not.toBeInTheDocument();
+  });
+
+  it("should render body", () => {
+    const { getByText } = render(
+      <Pane isOpen>
+        <Pane.Body>
+          <Typography style="body2" lineHeight="normal">
+            Pane body
+          </Typography>
+        </Pane.Body>
+      </Pane>
+    );
+    expect(getByText("Pane body")).toBeInTheDocument();
+  });
+
+  it("should render footer", () => {
+    const { getByText } = render(
+      <Pane isOpen>
+        <Pane.Footer>
+          <Button label="Submit" />
+        </Pane.Footer>
+      </Pane>
+    );
+    expect(getByText("Submit")).toBeInTheDocument();
+  });
+
+  it("should not show close button when closeButton is false", () => {
+    const { queryByTestId } = render(
+      <Pane isOpen closeButton={false}>
+        <Pane.Body>Pane body</Pane.Body>
+      </Pane>
+    );
+    expect(queryByTestId("close-button")).not.toBeInTheDocument();
+  });
+
+  it("should trigger onClose when close button is clicked", () => {
+    const onClose = jest.fn();
+    const { getByTestId } = render(
+      <Pane isOpen onClose={onClose}>
+        <Pane.Body>Pane body</Pane.Body>
+      </Pane>
+    );
+    userEvent.click(getByTestId("close-button"));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("should close the pane when Esc key is pressed", () => {
+    const onClose = jest.fn();
+    const { container } = render(
+      <Pane isOpen onClose={onClose}>
+        <Pane.Body>Pane body</Pane.Body>
+      </Pane>
+    );
+    userEvent.type(container, "{esc}");
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not close the pane when Esc key is pressed when closeOnEsc is false", () => {
+    const onClose = jest.fn();
+    const { container } = render(
+      <Pane isOpen onClose={onClose} closeOnEsc={false}>
+        <Pane.Body>Pane body</Pane.Body>
+      </Pane>
+    );
+    userEvent.type(container, "{esc}");
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("should close pane on clicking outside", () => {
+    const onClose = jest.fn();
+    const { getByTestId } = render(
+      <Pane isOpen onClose={onClose} closeOnOutsideClick>
+        <Pane.Body>Pane body</Pane.Body>
+      </Pane>
+    );
+    userEvent.click(getByTestId("backdrop"));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not close pane on clicking outside when closeOnOutsideClick is false", () => {
+    const onClose = jest.fn();
+    const { getByTestId } = render(
+      <Pane isOpen onClose={onClose} closeOnOutsideClick={false}>
+        <Pane.Body>Pane body</Pane.Body>
+      </Pane>
+    );
+    userEvent.click(getByTestId("backdrop"));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+});

package/tests/Select.test.js

@@ -0,0 +1,85 @@
+import React from "react";
+import { Select } from "../lib/components";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const options = [
+  {
+    label: "Option 1",
+    value: "option-1",
+  },
+  {
+    label: "Option 2",
+    value: "option-2",
+  },
+];
+
+describe("Select", () => {
+  it("should render without error", () => {
+    const { getByText } = render(<Select label="Select" options={options} />);
+    expect(getByText("Select")).toBeInTheDocument();
+  });
+
+  it("should show option list on clicking", () => {
+    const { getByRole, getByText } = render(
+      <Select label="Select" options={options} />
+    );
+    const select = getByRole("combobox");
+    userEvent.click(select);
+    expect(getByText("Option 1")).toBeInTheDocument();
+    expect(getByText("Option 2")).toBeInTheDocument();
+  });
+
+  it("should call onChange on select option", () => {
+    const onChange = jest.fn();
+    const { getByRole, getByText } = render(
+      <Select label="Select" options={options} onChange={onChange} />
+    );
+    const select = getByRole("combobox");
+    userEvent.click(select);
+    userEvent.click(getByText("Option 2"));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("should change selected option value when an option is selected", async () => {
+    const { getByRole, getByText } = render(
+      <Select label="Select" options={options} />
+    );
+    const select = getByRole("combobox");
+    userEvent.click(select);
+    userEvent.click(getByText("Option 2"));
+    expect(getByText("Option 2")).toBeInTheDocument();
+  });
+
+  it("should not render label if label is not provided", () => {
+    const { queryByTestId } = render(<Select options={options} />);
+    expect(queryByTestId("select-label")).not.toBeInTheDocument();
+  });
+
+  it("should show error message if provided", () => {
+    const { getByText, getByTestId } = render(
+      <Select label="Select" options={options} error="Error message" />
+    );
+    expect(getByTestId("select-error")).toBeInTheDocument();
+    expect(getByText("Error message")).toBeInTheDocument();
+  });
+
+  it("should show help text if provided", () => {
+    const { getByText, getByTestId } = render(
+      <Select label="Select" options={options} helpText="Help text" />
+    );
+    expect(getByTestId("select-help-text")).toBeInTheDocument();
+    expect(getByText("Help text")).toBeInTheDocument();
+  });
+
+  test("creatable Select should create new element", () => {
+    const { getByRole, getByTestId } = render(<Select isCreateable />);
+    const select = getByRole("combobox");
+    const selectBox = getByTestId("select");
+    userEvent.click(select);
+    expect(selectBox).toHaveTextContent("No options", { exact: false });
+    userEvent.type(select, "hello");
+    userEvent.type(select, "{enter}");
+    expect(selectBox).toHaveTextContent("hello", { exact: false });
+  });
+});