@bigbinary/neetoui 3.2.72 → 3.2.75

package/tests/Pagination.test.js

@@ -0,0 +1,125 @@
+import React from "react";
+import { Pagination } from "../lib/components";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const currentPage = 3
+const count = 1000
+const pageSize = 100
+
+describe("Pagination", () => {
+  it("should render current page number without error", () => {
+    const { getByText } = render(
+      <Pagination
+        count={count}
+        pageNo={currentPage}
+        pageSize={pageSize}
+      />
+    );
+    expect(getByText(currentPage)).toBeInTheDocument();
+  });
+
+  it("should invoke navigate callback when the left navigate button is clicked.", () => {
+    const navigate = jest.fn()
+    const { getByTestId } = render(
+      <Pagination
+        count={count}
+        pageNo={currentPage}
+        pageSize={pageSize}
+        navigate={navigate}
+      />
+    );
+    userEvent.click(getByTestId("left-navigate-button"));
+    expect(navigate).toHaveBeenCalledTimes(1);
+    expect(navigate).toHaveBeenCalledWith(currentPage - 1);
+  });
+
+  it("should invoke navigate callback when the right navigate button is clicked.", () => {
+    const navigate = jest.fn()
+    const { getByTestId } = render(
+      <Pagination
+        count={count}
+        pageNo={currentPage}
+        pageSize={pageSize}
+        navigate={navigate}
+      />
+    );
+    userEvent.click(getByTestId("right-navigate-button"));
+    expect(navigate).toHaveBeenCalledTimes(1);
+    expect(navigate).toHaveBeenCalledWith(currentPage + 1);
+  });
+
+  it("should invoke navigate callback when any page number is clicked.", () => {
+    const navigate = jest.fn()
+    const { getByText } = render(
+      <Pagination
+        count={count}
+        pageNo={currentPage}
+        pageSize={pageSize}
+        navigate={navigate}
+      />
+    );
+    userEvent.click(getByText("4"));
+    expect(navigate).toHaveBeenCalledTimes(1);
+    expect(navigate).toHaveBeenCalledWith(4);
+  });
+
+  it("should not render anything when currentPage is 0", () => {
+    const { container } = render(
+      <Pagination
+        count={count}
+        pageNo={0}
+        pageSize={pageSize}
+      />
+    )
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should render only left dots when there are more than 1 page between the extremes of left sibling and the page limit", () => {
+    const { getByTestId } = render(
+      <Pagination
+        count={count}
+        pageNo={7}
+        pageSize={pageSize}
+      />
+    )
+    const dots = getByTestId("dots")
+    expect(dots).toBeInTheDocument()
+  });
+
+  it("should render only right dots when there are more than 1 page between the extremes of right sibling and the page limit", () => {
+    const { getByTestId } = render(
+      <Pagination
+        count={count}
+        pageNo={3}
+        pageSize={pageSize}
+      />
+    )
+    const dots = getByTestId("dots")
+    expect(dots).toBeInTheDocument()
+  });
+
+  it("should render both left and right dots when there are more than 1 page between the extremes of both siblings and the page limit", () => {
+    const { getAllByTestId } = render(
+      <Pagination
+        count={count}
+        pageNo={5}
+        pageSize={pageSize}
+      />
+    )
+    const dots = getAllByTestId("dots")
+    expect(dots.length).toBe(2)
+  });
+
+  it("should not render any dots if the number of pages is less than the page numbers we want to show ", () => {
+    const { queryByTestId } = render(
+      <Pagination
+        count={500}
+        pageNo={currentPage}
+        pageSize={pageSize}
+      />
+    )
+    const dots = queryByTestId("dots")
+    expect(dots).toBeNull()
+  });
+});

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

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import { Radio } from "../lib/components";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const ControlledRadio = () => {
+  const [value, setValue] = useState("");
+
+  return (
+    <Radio
+      label="Radio"
+      onChange={(e) => setValue(e.target.value)}
+      value={value}
+    >
+      <Radio.Item label="option1" name="options" value="option1" />
+      <Radio.Item label="option2" name="options" value="option2" />
+    </Radio>
+  );
+};
+
+describe("Radio", () => {
+  it("should render without error", () => {
+    const { getByText } = render(
+      <Radio label="Radio">
+        <Radio.Item label="option1" name="options" value="option1" />
+      </Radio>
+    );
+    expect(getByText("Radio")).toBeInTheDocument();
+  });
+
+  it("should call onChange when radio value is changed", () => {
+    const onChange = jest.fn((event) => {
+      expect(event.target.value).toBe("option1");
+    });
+    const { getByText } = render(
+      <Radio label="Radio" onChange={onChange}>
+        <Radio.Item label="option1" name="options" value="option1" />
+      </Radio>
+    );
+    userEvent.click(getByText("option1"));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("should display error message", () => {
+    const { getByText } = render(
+      <Radio label="Radio" error="Error message">
+        <Radio.Item label="option1" name="options" value="option1" />
+      </Radio>
+    );
+    expect(getByText("Error message")).toBeInTheDocument();
+  });
+
+  it("should be unchecked by default", () => {
+    const { getByRole } = render(
+      <Radio label="Radio">
+        <Radio.Item label="option1" name="options" value="option1" />
+      </Radio>
+    );
+    expect(getByRole("radio")).not.toBeChecked();
+  });
+
+  it("should show controlled behaviour", () => {
+    const { getAllByRole } = render(<ControlledRadio />);
+    const radio = getAllByRole("radio");
+    userEvent.click(radio[0]);
+    expect(radio[0]).toBeChecked();
+    expect(radio[1]).not.toBeChecked();
+    userEvent.click(radio[1]);
+    expect(radio[0]).not.toBeChecked();
+    expect(radio[1]).toBeChecked();
+  });
+
+  it("should be checked on clicking the radio item", () => {
+    const { getByRole } = render(
+      <Radio label="Radio">
+        <Radio.Item label="option1" name="options" value="option1" />
+      </Radio>
+    );
+    const radio = getByRole("radio");
+    userEvent.click(radio);
+    expect(radio).toBeChecked();
+  });
+});

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 });
+  });
+});

package/tests/TimePicker.test.js

@@ -0,0 +1,92 @@
+import React from "react";
+import dayjs from "dayjs";
+import { TimePicker } from "../lib/components";
+import { screen, render, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const currentTime = dayjs();
+const { getByRole, getByText, getAllByText, getAllByRole } = screen;
+
+describe("TimePicker", () => {
+  it("should render without error", () => {
+    render(<TimePicker defaultValue={currentTime} />);
+    expect(getByRole("textbox")).toHaveValue(currentTime.format("HH:mm"));
+  });
+
+  it("should show seconds section if format contains ss", () => {
+    render(<TimePicker defaultValue={currentTime} format="HH:mm:ss" open />);
+    expect(getAllByText("00").length).toBe(3);
+    expect(getByRole("textbox")).toHaveValue(currentTime.format("HH:mm:ss"));
+  });
+
+  it("should show meridiem if format contains A", () => {
+    render(<TimePicker defaultValue={currentTime} format="HH:mm A" open />);
+    expect(getByRole("textbox")).toHaveValue(currentTime.format("HH:mm A"));
+    expect(getByText("AM")).toBeInTheDocument();
+    expect(getByText("PM")).toBeInTheDocument();
+  });
+
+  it("should show label if available", () => {
+    render(<TimePicker label="TimePicker Label" />);
+    expect(getByText("TimePicker Label")).toBeInTheDocument();
+  });
+
+  it("should show error if available", () => {
+    render(<TimePicker error="TimePicker Error" />);
+    expect(getByText("TimePicker Error")).toBeInTheDocument();
+  });
+
+  it("should trigger onChange function on clicking ok button", () => {
+    const onChange = jest.fn();
+    render(<TimePicker defaultValue={currentTime} onChange={onChange} open />);
+    fireEvent.click(getAllByText("12")[0]);
+    fireEvent.click(getByText("30"));
+    fireEvent.click(getByText("Ok"));
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("should trigger onChange function on typing in textbox", () => {
+    const onChange = jest.fn();
+    render(<TimePicker onChange={onChange} open />);
+    userEvent.paste(getByRole("textbox"), "11:01");
+    fireEvent.click(getByText("Ok"));
+    expect(onChange).toHaveBeenCalledWith(
+      currentTime.hour(11).minute(1).second(0).millisecond(0),
+      "11:01"
+    );
+  });
+
+  it("should not break component even if onChange is not provided", () => {
+    render(<TimePicker open />);
+    userEvent.paste(getByRole("textbox"), "11:01");
+    fireEvent.click(getByText("Ok"));
+    expect(getByRole("textbox")).toHaveValue("11:01");
+  });
+
+  it("should be able to select time in a range", async () => {
+    const onChange = jest.fn();
+    render(<TimePicker onChange={onChange} type="range" format="HH:mm:ss" />);
+    const startTimeInput = getAllByRole("textbox")[0];
+    const endTimeInput = getAllByRole("textbox")[1];
+    userEvent.click(startTimeInput);
+    fireEvent.click(getAllByText("02")[0]);
+    fireEvent.click(getAllByText("15")[1]);
+    fireEvent.click(getAllByText("00")[2]);
+    fireEvent.click(getByText("Ok"));
+
+    userEvent.click(endTimeInput);
+    fireEvent.click(getAllByText("03")[0]);
+    fireEvent.click(getAllByText("20")[1]);
+    fireEvent.click(getAllByText("10")[2]);
+    fireEvent.click(getByText("Ok"));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+
+    expect(startTimeInput).toHaveValue(
+      currentTime.hour(2).minute(15).second(0).format("HH:mm:ss")
+    );
+    expect(endTimeInput).toHaveValue(
+      currentTime.hour(3).minute(20).second(10).format("HH:mm:ss")
+    );
+  });
+});