@bigbinary/neetoui 3.2.78 → 3.2.79

package/jest-setup.js

@@ -1,7 +1,22 @@
 import "@testing-library/jest-dom";
 
-
 // Fixes element.getTotalLength is not a function. Refer: https://github.com/framer/motion/issues/204
 if (!SVGElement.prototype.getTotalLength) {
   SVGElement.prototype.getTotalLength = () => 1;
-}
+}
+
+//Fixes ReferenceError: ResizeObserver is not defined
+global.ResizeObserver = require('resize-observer-polyfill')
+
+//Fixes TypeError: window.matchMedia is not a function
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // Deprecated
+      removeListener: jest.fn(), // Deprecated
+    }
+  )),
+});

package/package.json

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

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