@bigbinary/neetoui 3.2.75 → 3.2.78

package/package.json

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

package/tests/ColorPicker.test.js

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

@@ -157,7 +157,7 @@ describe("EmailInput", () => {
           { label: "test@example.com", value: "test@example.com", valid: true },
           { label: "invalidEmail", value: "invalidEmail" },
         ]}
-        filterInvalidEmails
+        filterInvalidEmails={{}}
         error="Invalid email"
       />
     );

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

@@ -0,0 +1,217 @@
+import React from "react";
+import { Toastr, Button } from "../lib/components";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ToastContainer } from "react-toastify";
+
+describe("Toastr", () => {
+  it("should render Info Toastr without error", async () => {
+    render(
+      <>
+        <ToastContainer/>
+        <Button
+          label="Info Toastr"
+          onClick={() => Toastr.info("This is an info toastr.")}
+        />
+      </>
+    );
+    const button = screen.getByText("Info Toastr");
+    userEvent.click(button);
+    const infoToastr = await screen.findByText("This is an info toastr.");
+    expect(infoToastr).toBeInTheDocument();
+  });
+
+  it("should render Warning Toastr without error", async () => {
+    render(
+      <>
+        <ToastContainer/>
+        <Button
+          label="Warning Toastr"
+          onClick={() => Toastr.warning("This is a warning toastr.")}
+        />
+      </>
+    );
+    const button = screen.getByText("Warning Toastr");
+    userEvent.click(button);
+    const warningToastr = await screen.findByText("This is a warning toastr.");
+    expect(warningToastr).toBeInTheDocument();
+  });
+
+  it("should render Success Toastr without error", async () => {
+    render(
+      <>
+        <ToastContainer/>
+        <Button
+          label="Success Toastr"
+          onClick={() => Toastr.success("This is a success toastr.")}
+        />
+      </>
+    );
+    const button = screen.getByText("Success Toastr");
+    userEvent.click(button);
+    const successToastr = await screen.findByText("This is a success toastr.");
+    expect(successToastr).toBeInTheDocument();
+  });
+
+  it("should render Toastr with CTA without error", async () => {
+    render(
+      <>
+        <ToastContainer/>
+        <Button
+          label="Toastr with CTA"
+          onClick={() =>
+            Toastr.error(
+              Error("Ticket marked as spam."),
+              "Block Customer",
+              () => alert("Customer blocked successfully!")
+            )
+          }
+        />
+      </>
+    );
+    const button = screen.getByText("Toastr with CTA");
+    userEvent.click(button);
+    const toastr = await screen.findByText("Ticket marked as spam.");
+    expect(toastr).toBeInTheDocument();
+    const alertMock = jest.spyOn(window,'alert').mockImplementation();
+    const callToAction = screen.getByText("Block Customer");
+    userEvent.click(callToAction);
+    expect(alertMock).toHaveBeenCalledTimes(1);
+  });
+
+  it("should render Error Toastr without error", async () => {
+    render(
+      <>
+        <ToastContainer/>
+        <Button
+          label="Error Toastr"
+          onClick={() =>
+            Toastr.error(Error("Some error occured!"))
+          }
+        />
+      </>
+    );
+    const button = screen.getByText("Error Toastr");
+    userEvent.click(button);
+    const errorToastr = await screen.findByText("Some error occured!");
+    expect(errorToastr).toBeInTheDocument();
+  });
+
+  it("should render a clickable message when the toastr has a link", async () => {
+    render(
+      <>
+        <ToastContainer/>
+        <Button
+          label="Info Toastr"
+          onClick={() => Toastr.info("https://github.com/bigbinary/neeto-ui")}
+        />
+      </>
+    );
+    const button = screen.getByText("Info Toastr");
+    userEvent.click(button);
+    const link = await screen.findByRole("link");
+    expect(link).toHaveAttribute("href", "https://github.com/bigbinary/neeto-ui");
+  })
+
+  it("should render plain text error toastr", async () => {
+    render(
+      <>
+        <ToastContainer/>
+        <Button
+          label="String Error"
+          onClick={() =>
+            Toastr.error("This is a plain text error toastr!")
+          }
+        />
+      </>
+    );
+    const button = screen.getByText("String Error");
+    userEvent.click(button);
+    const errorToastr = await screen.findByText("This is a plain text error toastr!");
+    expect(errorToastr).toBeInTheDocument();
+  });
+
+  it("should render Axios Error Toastr without error", async () => {
+    const onAxiosStringError = () => {
+      try {
+        // Dummy axios error object
+        const axiosError = {
+          isAxiosError: true,
+          config: {
+            url: "https://api.github.com/users/org",
+          },
+          response: {
+            data: {
+              error: "Not Found",
+            },
+            status: 404,
+          },
+        };
+        throw axiosError;
+      } catch (e) {
+        Toastr.error(e);
+      }
+    };
+    render(
+      <>
+        <ToastContainer/>
+        <Button label="Throw an axios error" onClick={onAxiosStringError} />
+      </>
+    );
+    const button = screen.getByText("Throw an axios error");
+    userEvent.click(button);
+    const axiosError = await screen.findByText("Not Found");
+    expect(axiosError).toBeInTheDocument();
+  });
+
+  it("should render Axios Error Toastr with array of error messages", async () => {
+    const onAxiosArrayError = () => {
+      try {
+        // Dummy axios error object
+        const axiosError = {
+          isAxiosError: true,
+          config: {
+            url: "https://api.github.com/users/org",
+          },
+          response: {
+            data: {
+              errors: ["A is required", "B is required"],
+            },
+          },
+        };
+        throw axiosError;
+      } catch (e) {
+        Toastr.error(e);
+      }
+    };
+    render(
+      <>
+        <ToastContainer/>
+        <Button
+          label="Throw an axios error with array of error messages"
+          onClick={onAxiosArrayError}
+        />
+      </>
+    );
+    const button = screen.getByText("Throw an axios error with array of error messages");
+    userEvent.click(button);
+    const axiosError = await screen.findByText("A is required B is required");
+    expect(axiosError).toBeInTheDocument();
+  });
+
+  it("should render Error Toastr with 'Something went wrong.' when there is no message passed explicitly", async () => {
+    render(
+      <>
+        <ToastContainer/>
+        <Button
+          label="Error Toastr"
+          onClick={() => Toastr.error()}
+        />
+      </>
+    );
+    const button = screen.getByText("Error Toastr");
+    userEvent.click(button);
+    const errorToastr = await screen.findByText("Something went wrong.");
+    expect(errorToastr).toBeInTheDocument();
+  });
+});

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