@bigbinary/neetoui 3.2.76 → 3.2.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "3.2.76",
+  "version": "3.2.79",
   "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/Input.test.js

@@ -0,0 +1,75 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Input } from "../lib/components";
+import userEvent from "@testing-library/user-event";
+
+describe("Input", () => {
+  it("should render without error", () => {
+    const { getByLabelText } = render(<Input id="input" label="Input Label" />);
+    expect(getByLabelText("Input Label")).toBeInTheDocument();
+  });
+
+  it("should be able to type when uncontrolled", () => {
+    const { getByLabelText } = render(<Input id="input" label="Input Label" />);
+    const inputField = getByLabelText("Input Label");
+    userEvent.type(inputField, "sample content");
+    expect(inputField).toHaveValue("sample content");
+  });
+
+  it("should call onChange when textarea value changes", () => {
+    const onChange = jest.fn();
+    const { getByLabelText } = render(
+      <Input id="input" label="Input Label" onChange={onChange} />
+    );
+    userEvent.type(getByLabelText("Input Label"), "Test");
+    expect(onChange).toHaveBeenCalledTimes(4);
+  });
+
+  it("should display error message", () => {
+    const { getByText } = render(
+      <Input label="input" error={"Error message"} />
+    );
+    expect(getByText("Error message")).toBeInTheDocument();
+  });
+
+  it("should display helpText", () => {
+    const { getByText } = render(<Input label="Input" helpText="Help text" />);
+    expect(getByText("Help text")).toBeInTheDocument();
+  });
+
+  it("should be disabled if disabled is true", () => {
+    const { getByLabelText } = render(
+      <Input disabled id="input" label="Input Label" />
+    );
+    expect(getByLabelText("Input Label")).toBeDisabled();
+  });
+
+  it("should show suffix", () => {
+    const { getByText } = render(<Input label="input" suffix="suffix" />);
+    expect(getByText("suffix")).toBeInTheDocument();
+  });
+
+  it("should show prefix", () => {
+    const { getByText } = render(<Input label="input" prefix="prefix" />);
+    expect(getByText("prefix")).toBeInTheDocument();
+  });
+
+  it("should render asterisk when required is set to true", () => {
+    const { getByText } = render(<Input required label="Input" />);
+    const asterisk = getByText("*");
+    expect(asterisk).toBeInTheDocument();
+  });
+
+  it("should properly handle maxLength", () => {
+    const { getByLabelText, getByText } = render(
+      <Input id="input" label="Input label" maxLength={5} />
+    );
+
+    expect(getByText("0 / 5")).toBeInTheDocument();
+    expect(getByLabelText("Input label")).toHaveAttribute("maxLength", "5");
+
+    userEvent.type(getByLabelText("Input label"), "Testing maxLength");
+    expect(getByText("5 / 5")).toBeInTheDocument();
+    expect(getByLabelText("Input label")).toHaveValue("Testi");
+  });
+});

package/tests/Table.test.js

@@ -0,0 +1,204 @@
+import React from "react";
+import { Table } from "../lib/components";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const columnData = [
+  {
+    dataIndex: 'id',
+    key: 'id',
+    title: 'ID',
+    width: 150
+  },
+  {
+    title: "First Name",
+    dataIndex: "first_name",
+    key: "first_name",
+    width: 150,
+  },
+  {
+    title: "Last Name",
+    dataIndex: "last_name",
+    key: "last_name",
+    width: 150,
+  }
+]
+
+const rowData = [
+  {
+    id: 1,
+    first_name: "Oliver",
+    last_name: "Smith"
+  },
+  {
+    id: 2,
+    first_name: "Sam",
+    last_name: "Smith"
+  },
+  {
+    id: 3,
+    first_name: "Eve",
+    last_name: "Smith"
+  },
+  {
+    id: 4,
+    first_name: "Mark",
+    last_name: "Smith"
+  }
+]
+
+describe("Table", () => {
+  it("should render column data without error", () => {
+    render(
+      <Table
+        columnData={columnData}
+        rowData={rowData}
+      />
+    )
+    const column = screen.getByText("ID")
+    expect(column).toBeInTheDocument();
+  });
+
+  it("should render row data without error", () => {
+    render(
+      <Table
+        columnData={columnData}
+        rowData={rowData}
+      />
+    )
+    const row = screen.getByText("1")
+    expect(row).toBeInTheDocument();
+  });
+
+  it("should render all the rows", () => {
+    render(
+      <Table
+        columnData={columnData}
+        rowData={rowData}
+      />
+    )
+    const row = screen.getAllByRole("row")
+    expect(row.length).toBe(4);
+  });
+
+  it("should render all the columns", () => {
+    render(
+      <Table
+        columnData={columnData}
+        rowData={rowData}
+      />
+    )
+    const column1 = screen.getByText("ID")
+    expect(column1).toBeInTheDocument();
+    const column2 = screen.getByText("First Name")
+    expect(column2).toBeInTheDocument();
+    const column3 = screen.getByText("Last Name")
+    expect(column3).toBeInTheDocument();
+  });
+
+  it("should have checkbox to select table row if rowSelection is set to true", () => {
+    render(
+      <Table
+        columnData={columnData}
+        rowData={rowData}
+        rowSelection
+      />
+    )
+    const checkboxes = screen.getAllByRole("checkbox")
+    expect(checkboxes.length).not.toBe(0);
+  });
+
+  it("should not have checkbox to select table row by default", () => {
+    render(
+      <Table
+        columnData={columnData}
+        rowData={rowData}
+      />
+    )
+    const checkbox = screen.queryByRole("checkbox")
+    expect(checkbox).not.toBeInTheDocument();
+  });
+
+  it("should call onRowSelect on row selection", () => {
+    const onRowSelect = jest.fn()
+    render(
+      <Table
+        columnData={columnData}
+        rowData={rowData}
+        onRowSelect={onRowSelect}
+        rowSelection
+      />
+    )
+    const checkbox = screen.getAllByRole("checkbox")
+    userEvent.click(checkbox[0])
+    expect(onRowSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call onRowClick on row click by default", () => {
+    const onRowClick = jest.fn()
+    render(
+      <Table
+        columnData={columnData}
+        rowData={rowData}
+        onRowClick={onRowClick}
+      />
+    )
+    const row = screen.getByText("1")
+    userEvent.click(row)
+    expect(onRowClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not call onRowClick on row click when allowRowClick is disabled", () => {
+    const onRowClick = jest.fn()
+    render(
+      <Table
+        columnData={columnData}
+        rowData={rowData}
+        onRowClick={onRowClick}
+        allowRowClick={false}
+      />
+    )
+    const row = screen.getByText("1")
+    userEvent.click(row)
+    expect(onRowClick).toHaveBeenCalledTimes(0);
+  });
+
+  it("should render table with fixed height ", () => {
+    render(
+      <Table
+        columnData={columnData}
+        rowData={rowData}
+        fixedHeight
+      />
+    )
+    const row = screen.getByText("1")
+    expect(row).toBeInTheDocument();
+  });
+
+  it("should render table with rows equal to page size ", () => {
+    render(
+      <Table
+        columnData={columnData}
+        rowData={rowData}
+        defaultPageSize={2}
+      />
+    )
+    const row = screen.getAllByRole("row")
+    expect(row.length).toBe(2);
+  });
+
+  it("should call handlePageChange when page is changed ", () => {
+    const handlePageChange = jest.fn()
+    render(
+      <Table
+        columnData={columnData}
+        rowData={rowData}
+        defaultPageSize={2}
+        handlePageChange={handlePageChange}
+      />
+    )
+    const pages = screen.getAllByRole("listitem")
+    userEvent.click(pages[2])
+    expect(handlePageChange).toBeCalledTimes(1);
+  });
+});

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