@bigbinary/neetoui 3.2.79 → 3.2.82

package/tests/Tab.test.js

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

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

@@ -1,40 +0,0 @@
-import React from "react";
-import { Tag } from "../lib/components";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-describe("Tag", () => {
-  it("should render without error", () => {
-    const { getByText } = render(<Tag label="Tag" />);
-    expect(getByText("Tag")).toBeInTheDocument();
-  });
-
-  it("should show icon when icon string is provided", () => {
-    const { getByTestId } = render(<Tag icon="check" />);
-    expect(getByTestId("class-icon")).toBeInTheDocument();
-  });
-
-  it("should show indicator when indicatorColor is provided", () => {
-    const { getByTestId } = render(<Tag indicatorColor="green" />);
-    expect(getByTestId("tag-indicator")).toBeInTheDocument();
-  });
-
-  it("should show close button if onClose function is provided", () => {
-    const { getByTestId } = render(<Tag onClose={() => {}} />);
-    expect(getByTestId("tag-close-button")).toBeInTheDocument();
-  });
-
-  it("should call onClose on button click", () => {
-    const onClose = jest.fn();
-    const { getByTestId } = render(<Tag onClose={onClose} />);
-    userEvent.click(getByTestId("tag-close-button"));
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it("should not call onClose function if tag is disabled", () => {
-    const onClose = jest.fn();
-    const { getByTestId } = render(<Tag onClose={onClose} disabled />);
-    userEvent.click(getByTestId("tag-close-button"));
-    expect(onClose).toHaveBeenCalledTimes(0);
-  });
-});

package/tests/Textarea.test.js

@@ -1,51 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import { Textarea } from "../lib/components";
-import userEvent from "@testing-library/user-event";
-
-describe("Textarea", () => {
-  it("should render without error", () => {
-    const { getByLabelText } = render(<Textarea id="text" label="Textarea" />);
-    expect(getByLabelText("Textarea")).toBeInTheDocument();
-  });
-
-  it("should update value on input when uncontrolled", () => {
-    const { getByLabelText } = render(<Textarea id="text" label="Textarea" />);
-    const textarea = getByLabelText("Textarea");
-    userEvent.type(textarea, "Test");
-    expect(textarea).toHaveValue("Test");
-  });
-
-  it("should call onChange when textarea value changes", () => {
-    const onChange = jest.fn();
-    const { getByLabelText } = render(
-      <Textarea id="text" label="Textarea" onChange={onChange} />
-    );
-    userEvent.type(getByLabelText("Textarea"), "Test");
-    expect(onChange).toHaveBeenCalledTimes(4);
-  });
-
-  it("should display helpText", () => {
-    const { getByText } = render(<Textarea id="text" label="Textarea" helpText="Help text" />);
-    expect(getByText("Help text")).toBeInTheDocument();
-  });
-
-  it("should display error message", () => {
-    const { getByText } = render(
-      <Textarea id="text" label="Textarea" error="Error message" />
-    );
-    expect(getByText("Error message")).toBeInTheDocument();
-  });
-
-  it("should properly handle maxLength", () => {
-    const { getByLabelText, getByText } = render(
-      <Textarea id="text" label="Textarea" maxLength={5} />
-    );
-    expect(getByText("0 / 5")).toBeInTheDocument();
-    expect(getByLabelText("Textarea")).toHaveAttribute("maxLength", "5");
-
-    userEvent.type(getByLabelText("Textarea"), "Testing maxLength");
-    expect(getByText("5 / 5")).toBeInTheDocument();
-    expect(getByLabelText("Textarea")).toHaveValue("Testi");
-  });
-});

package/tests/TimePicker.test.js

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

@@ -1,217 +0,0 @@
-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();
-  });
-});