@bigbinary/neetoui 3.2.77 → 3.2.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "3.2.77",
+  "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/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();
+  });
+});