@bigbinary/neetoui 3.2.74 → 3.2.77

package/package.json

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

package/tests/Dropdown.test.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Dropdown } from "../lib/components";
-import { fireEvent, render, screen } from "@testing-library/react";
+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>)

package/tests/EmailInput.test.js

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

@@ -0,0 +1,61 @@
+import React from "react";
+import { Switch } from "../lib/components";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+describe("Switch", () => {
+  it("should render without error", () => {
+    const { getByRole } = render(<Switch />);
+    const switchButton = getByRole("checkbox");
+    expect(switchButton).toBeInTheDocument();
+  });
+
+  it("should be unchecked by default", () => {
+    const { getByRole } = render(<Switch />);
+    const switchButton = getByRole("checkbox");
+    expect(switchButton).not.toBeChecked();
+  });
+
+  it("should be checked on clicking the checkbox", () => {
+    const { getByRole } = render(<Switch />);
+    const switchButton = getByRole("checkbox");
+    userEvent.click(switchButton);
+    expect(switchButton).toBeChecked();
+  });
+
+  it("should render label", () => {
+    const { getByText } = render(<Switch label="Switch" />);
+    const label = getByText("Switch");
+    expect(label).toBeInTheDocument();
+  });
+
+  it("should render asterisk when required is set to true", () => {
+    const { getByText } = render(<Switch required label="Switch" />);
+    const asterisk = getByText("*");
+    expect(asterisk).toBeInTheDocument();
+  });
+
+  it("should display error message", () => {
+    const { getByText } = render(<Switch error="Error message" />);
+    const errorMessage = getByText("Error message");
+    expect(errorMessage).toBeInTheDocument();
+  });
+
+  it("should be disabled if disabled is true", () => {
+    const { getByRole } = render(<Switch disabled />);
+    const switchButton = getByRole("checkbox");
+    expect(switchButton).toBeDisabled();
+  });
+
+  it("should render check icon icon when checked is true", () => {
+    const { getByTestId } = render(<Switch checked />);
+    const checkIcon = getByTestId("check-icon");
+    expect(checkIcon).toBeInTheDocument();
+  });
+
+  it("should render close icon icon when checked is false", () => {
+    const { getByTestId } = render(<Switch checked={false} />);
+    const closeIcon = getByTestId("close-icon");
+    expect(closeIcon).toBeInTheDocument();
+  });
+});

package/tests/Tab.test.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Tab } from "../lib/components";
+import { BrowserRouter } from "react-router-dom";
+
+describe("Tab", () => {
+  it("should render without error", () => {
+    render(
+      <Tab>
+        <Tab.Item>Tab 1</Tab.Item>
+        <Tab.Item>Tab 2</Tab.Item>
+      </Tab>
+    );
+    expect(screen.getByText("Tab 1")).toBeInTheDocument();
+    expect(screen.getByText("Tab 2")).toBeInTheDocument();
+  });
+
+  it("should render a link when activeClassName is provided", () => {
+    render(<BrowserRouter>
+      <Tab>
+        <Tab.Item activeClassName="active" to="/route">Tab 1</Tab.Item>
+        <Tab.Item>Tab 2</Tab.Item>
+      </Tab>
+    </BrowserRouter>);
+    expect(screen.getByRole("link")).toBeInTheDocument();
+    expect(screen.getByRole("link")).toHaveAttribute("href", "/route");
+  });
+
+  it("should render icon when provided", () => {
+    render(<Tab>
+      <Tab.Item icon={() => <svg data-testid="svg-icon" />}>Tab 1</Tab.Item>
+    </Tab>);
+    expect(screen.getByTestId("svg-icon")).toBeInTheDocument();
+  });
+
+  it("should render icon when icon className is provided", () => {
+    render(<Tab>
+      <Tab.Item icon="icon">Tab 1</Tab.Item>
+    </Tab>);
+    expect(screen.getByTestId("tab-icon")).toBeInTheDocument();
+  });
+
+  it("should call onClick when clicked on Tab", () => {
+    const onClick = jest.fn();
+    render(<Tab>
+      <Tab.Item icon="icon" onClick={onClick}>Tab 1</Tab.Item>
+    </Tab>);
+    userEvent.click(screen.getByText("Tab 1"));
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it("should make the tab active when active prop is true", () => {
+    render(<Tab>
+      <Tab.Item active>Tab 1</Tab.Item>
+      <Tab.Item>Tab 2</Tab.Item>
+    </Tab>);
+    expect(screen.getByText("Tab 1")).toHaveClass("active");
+  });
+});

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

package/tests/Tooltip.test.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { Tooltip, Typography } from "../lib/components";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+describe("Tooltip", () => {
+  it("should render on hover ", () => {
+    render(
+      <Tooltip content="Tooltip">
+        <Typography>Text</Typography>
+      </Tooltip>
+    );
+    const text = screen.getByText("Text")
+    userEvent.hover(text)
+    const tooltip = screen.getByText("Tooltip")
+    expect(tooltip).toBeInTheDocument();
+  });
+
+  it("should not render when user stops hovering", async () => {
+    render(
+      <Tooltip content="Tooltip" >
+        <Typography>Text</Typography>
+      </Tooltip>
+    );
+    const text = screen.getByText("Text")
+    userEvent.hover(text)
+    const tooltip = screen.getByText("Tooltip")
+    userEvent.unhover(text)
+    await waitFor(() => expect(tooltip).not.toBeVisible())
+  });
+
+  it("should auto hide tooltip after n milliseconds", async () => {
+    render(
+      <Tooltip content="Tooltip" hideAfter={100}>
+        <Typography>Text</Typography>
+      </Tooltip>
+    );
+
+    const text = screen.getByText("Text")
+    userEvent.hover(text)
+    const tooltip = screen.getByText("Tooltip")
+    await waitFor(() => expect(tooltip).not.toBeVisible())
+  });
+});