@bigbinary/neetoui 3.2.73 → 3.3.0-beta.0

package/tests/Dropdown.test.js

@@ -1,185 +0,0 @@
-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/Modal.test.js

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

package/tests/PageLoader.test.js

@@ -1,15 +0,0 @@
-import React from "react";
-import { PageLoader } from "../lib/components";
-import { render } from "@testing-library/react";
-
-describe("PageLoader", () => {
-  it("should render without error", () => {
-    const { getByTestId } = render(<PageLoader data-testid="pageloader"/>);
-    expect(getByTestId("pageloader")).toBeInTheDocument();
-  });
-
-  it("should render text without error", () => {
-    const { getByText } = render(<PageLoader text="Loading"/>);
-    expect(getByText("Loading")).toBeInTheDocument();
-  });
-});

package/tests/Pane.test.js

@@ -1,116 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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 });
-  });
-});

package/tests/Spinner.test.js

@@ -1,10 +0,0 @@
-import React from "react";
-import { Spinner } from "../lib/components";
-import { render } from "@testing-library/react";
-
-describe("Spinner", () => {
-  it("should render without error", () => {
-    const { getByTestId } = render(<Spinner/>);
-    expect(getByTestId("spinner")).toBeInTheDocument();
-  });
-});

package/tests/Tag.test.js

@@ -1,40 +0,0 @@
-import React from "react";
-import { Tag } from "../lib/components";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-describe("Tag", () => {
-  it("should render without error", () => {
-    const { getByText } = render(<Tag label="Tag" />);
-    expect(getByText("Tag")).toBeInTheDocument();
-  });
-
-  it("should show icon when icon string is provided", () => {
-    const { getByTestId } = render(<Tag icon="check" />);
-    expect(getByTestId("class-icon")).toBeInTheDocument();
-  });
-
-  it("should show indicator when indicatorColor is provided", () => {
-    const { getByTestId } = render(<Tag indicatorColor="green" />);
-    expect(getByTestId("tag-indicator")).toBeInTheDocument();
-  });
-
-  it("should show close button if onClose function is provided", () => {
-    const { getByTestId } = render(<Tag onClose={() => {}} />);
-    expect(getByTestId("tag-close-button")).toBeInTheDocument();
-  });
-
-  it("should call onClose on button click", () => {
-    const onClose = jest.fn();
-    const { getByTestId } = render(<Tag onClose={onClose} />);
-    userEvent.click(getByTestId("tag-close-button"));
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it("should not call onClose function if tag is disabled", () => {
-    const onClose = jest.fn();
-    const { getByTestId } = render(<Tag onClose={onClose} disabled />);
-    userEvent.click(getByTestId("tag-close-button"));
-    expect(onClose).toHaveBeenCalledTimes(0);
-  });
-});

package/tests/Textarea.test.js

@@ -1,51 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import { Textarea } from "../lib/components";
-import userEvent from "@testing-library/user-event";
-
-describe("Textarea", () => {
-  it("should render without error", () => {
-    const { getByLabelText } = render(<Textarea id="text" label="Textarea" />);
-    expect(getByLabelText("Textarea")).toBeInTheDocument();
-  });
-
-  it("should update value on input when uncontrolled", () => {
-    const { getByLabelText } = render(<Textarea id="text" label="Textarea" />);
-    const textarea = getByLabelText("Textarea");
-    userEvent.type(textarea, "Test");
-    expect(textarea).toHaveValue("Test");
-  });
-
-  it("should call onChange when textarea value changes", () => {
-    const onChange = jest.fn();
-    const { getByLabelText } = render(
-      <Textarea id="text" label="Textarea" onChange={onChange} />
-    );
-    userEvent.type(getByLabelText("Textarea"), "Test");
-    expect(onChange).toHaveBeenCalledTimes(4);
-  });
-
-  it("should display helpText", () => {
-    const { getByText } = render(<Textarea id="text" label="Textarea" helpText="Help text" />);
-    expect(getByText("Help text")).toBeInTheDocument();
-  });
-
-  it("should display error message", () => {
-    const { getByText } = render(
-      <Textarea id="text" label="Textarea" error="Error message" />
-    );
-    expect(getByText("Error message")).toBeInTheDocument();
-  });
-
-  it("should properly handle maxLength", () => {
-    const { getByLabelText, getByText } = render(
-      <Textarea id="text" label="Textarea" maxLength={5} />
-    );
-    expect(getByText("0 / 5")).toBeInTheDocument();
-    expect(getByLabelText("Textarea")).toHaveAttribute("maxLength", "5");
-
-    userEvent.type(getByLabelText("Textarea"), "Testing maxLength");
-    expect(getByText("5 / 5")).toBeInTheDocument();
-    expect(getByLabelText("Textarea")).toHaveValue("Testi");
-  });
-});

package/tests/Typography.test.js

@@ -1,20 +0,0 @@
-import React from "react";
-import { Typography } from "../lib/components";
-import { render } from "@testing-library/react";
-
-describe("Typography", () => {
-  it("should render without error", () => {
-    const { getByText } = render(<Typography style="body1">Typography</Typography>);
-    expect(getByText("Typography")).toBeInTheDocument();
-  });
-
-  it("should render a heading when style is of heading type", () => {
-    const { getByRole } = render(<Typography style="h1">Typography</Typography>);
-    expect(getByRole("heading", { level: 1 })).toBeInTheDocument();
-  });
-
-  it("should override default tag when component prop is given", () => {
-    const { getByRole } = render(<Typography style="h1" component="h2">Typography</Typography>);
-    expect(getByRole("heading", { level: 2 })).toBeInTheDocument();
-  });
-});