@bigbinary/neetoui 3.2.64 → 3.2.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "3.2.64",
+  "version": "3.2.67",
   "main": "./index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -52,7 +52,7 @@
     "@storybook/react": "^6.4.19",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
-    "@testing-library/user-event": "^13.1.9",
+    "@testing-library/user-event": "^13.5.0",
     "autoprefixer": "^9.0.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.3.1",

package/tests/Accordion.test.js

@@ -0,0 +1,103 @@
+import React from "react";
+import { Accordion } from "../lib/components";
+import { render, waitForElementToBeRemoved } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+
+
+describe("Accordion", () => {
+  it("should render without error", () => {
+    const { getByText } = render(<Accordion>
+      <Accordion.Item title="Item 1">
+        <p>Content 1</p>
+      </Accordion.Item>
+    </Accordion>);
+    expect(getByText("Item 1")).toBeInTheDocument();
+  });
+
+  it("should not render content when accordion is closed", () => {
+    const { queryByText } = render(<Accordion>
+      <Accordion.Item title="Item 1">
+        <p>Content 1</p>
+      </Accordion.Item>
+    </Accordion>);
+    expect(queryByText("Content 1")).not.toBeInTheDocument();
+  });
+
+  it("should open accordion and render content when accordion title is clicked", () => {
+    const { getByText } = render(<Accordion>
+      <Accordion.Item title="Item 1">
+        <p>Content 1</p>
+      </Accordion.Item>
+    </Accordion>);
+    userEvent.click(getByText("Item 1"));
+    expect(getByText("Content 1")).toBeInTheDocument();
+  });
+
+  it("should toggle accordion when Enter or Space key is pressed", async () => {
+    const { getByText, queryByText } = render(<Accordion>
+      <Accordion.Item title="Item 1">
+        <p>Content 1</p>
+      </Accordion.Item>
+    </Accordion>);
+    userEvent.click(getByText("Item 1"));
+    expect(getByText("Content 1")).toBeInTheDocument();
+    userEvent.keyboard("{space}");
+    await waitForElementToBeRemoved(() => queryByText("Content 1"));
+    expect(queryByText("Content 1")).not.toBeInTheDocument();
+    userEvent.keyboard("{enter}");
+    expect(getByText("Content 1")).toBeInTheDocument();
+  });
+
+  it("should not toggle accordion when any other keys are pressed", () => {
+    const { getByText } = render(<Accordion>
+      <Accordion.Item title="Item 1">
+        <p>Content 1</p>
+      </Accordion.Item>
+    </Accordion>);
+    userEvent.click(getByText("Item 1"));
+    expect(getByText("Content 1")).toBeInTheDocument();
+    userEvent.type(getByText("Item 1"), "a");
+    expect(getByText("Content 1")).toBeInTheDocument();
+  });
+
+  it("should trigger onClick when title is clicked", () => {
+    const onClick = jest.fn();
+    const { getByText } = render(<Accordion>
+      <Accordion.Item title="Item 1" onClick={onClick}>
+        <p>Content 1</p>
+      </Accordion.Item>
+    </Accordion>);
+    userEvent.click(getByText("Item 1"));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should only open one accordion at a time", async () => {
+    const { getByText, queryByText } = render(<Accordion>
+      <Accordion.Item title="Item 1">
+        <p>Content 1</p>
+      </Accordion.Item>
+      <Accordion.Item title="Item 2">
+        <p>Content 2</p>
+      </Accordion.Item>
+    </Accordion>);
+    userEvent.click(getByText("Item 1"));
+    expect(getByText("Content 1")).toBeInTheDocument();
+    userEvent.click(getByText("Item 2"));
+    await waitForElementToBeRemoved(() => queryByText("Content 1"));
+    expect(queryByText("Content 1")).not.toBeInTheDocument();
+    expect(getByText("Content 2")).toBeInTheDocument();
+  });
+
+  it("should open the the accordion when defaultActiveKey is provided", () => {
+    const { getByText } = render(<Accordion defaultActiveKey={1}>
+      <Accordion.Item title="Item 1">
+        <p>Content 1</p>
+      </Accordion.Item>
+      <Accordion.Item title="Item 2">
+        <p>Content 2</p>
+      </Accordion.Item>
+    </Accordion>);
+    expect(getByText("Content 2")).toBeInTheDocument();
+  });
+});

package/tests/Alert.test.js

@@ -0,0 +1,126 @@
+import React from "react";
+import { Alert } from "../lib/components";
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+describe("Alert", () => {
+  it("should render without error", () => {
+    const { getByText } = render(
+      <Alert title="Alert title" message="Alert message" isOpen />
+    );
+    expect(getByText("Alert title")).toBeInTheDocument();
+    expect(getByText("Alert message")).toBeInTheDocument();
+  });
+
+  it("should not display content when isOpen is false", () => {
+    const { queryByText } = render(
+      <Alert title="Alert title" message="Alert message" isOpen={false} />
+    );
+    expect(queryByText("Alert title")).not.toBeInTheDocument();
+    expect(queryByText("Alert message")).not.toBeInTheDocument();
+  });
+
+  it("should call onClose when close button is clicked", () => {
+    const onClose = jest.fn();
+    const { getByTestId } = render(
+      <Alert
+        title="Alert title"
+        message="Alert message"
+        isOpen
+        onClose={onClose}
+      />
+    );
+    userEvent.click(getByTestId("close-button"));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call onSubmit when submit button is clicked", () => {
+    const onSubmit = jest.fn();
+    const { getByText } = render(
+      <Alert
+        title="Alert title"
+        message="Alert message"
+        isOpen
+        onSubmit={onSubmit}
+        submitButtonLabel="Submit"
+      />
+    );
+    userEvent.click(getByText("Submit"));
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call onClose when cancel button is clicked", () => {
+    const onClose = jest.fn();
+    const { getByText } = render(
+      <Alert
+        title="Alert title"
+        message="Alert message"
+        isOpen
+        onClose={onClose}
+        cancelButtonLabel="Cancel"
+      />
+    );
+    userEvent.click(getByText("Cancel"));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("should close the alert when Esc key is pressed", () => {
+    const onClose = jest.fn();
+    const { container } = render(
+      <Alert
+        title="Alert title"
+        message="Alert message"
+        isOpen
+        onClose={onClose}
+        closeOnEsc
+      />
+    );
+    userEvent.type(container, "{esc}");
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not close the alert when Esc key is pressed when closeOnEsc is false", () => {
+    const onClose = jest.fn();
+    const { container } = render(
+      <Alert
+        title="Alert title"
+        message="Alert message"
+        isOpen
+        onClose={onClose}
+        closeOnEsc={false}
+      />
+    );
+    userEvent.type(container, "{esc}");
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("should close alert when clicking outside", () => {
+    const onClose = jest.fn();
+    const { getByTestId } = render(
+      <Alert
+        title="Alert title"
+        message="Alert message"
+        isOpen
+        onClose={onClose}
+        closeOnOutsideClick
+      />
+    );
+    userEvent.click(getByTestId("backdrop"));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not close alert when clicking outside when closeOnOutsideClick is false", () => {
+    const onClose = jest.fn();
+    const { getByTestId } = render(
+      <Alert
+        title="Alert title"
+        message="Alert message"
+        isOpen
+        onClose={onClose}
+        closeOnOutsideClick={false}
+      />
+    );
+    userEvent.click(getByTestId("backdrop"));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+});

package/tests/Button.test.js

@@ -1,7 +1,8 @@
 import React from "react";
 import { Button } from "../lib/components";
-import { render, fireEvent } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
+import userEvent from "@testing-library/user-event";
 
 describe("Button", () => {
   it("should render without error", () => {
@@ -12,7 +13,7 @@ describe("Button", () => {
   it("should call onClick on button click", () => {
     const onClick = jest.fn();
     const { getByText } = render(<Button label="Button" onClick={onClick} />);
-    fireEvent.click(getByText("Button"));
+    userEvent.click(getByText("Button"));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
@@ -21,7 +22,7 @@ describe("Button", () => {
     const { getByText } = render(
       <Button label="Button" onClick={onClick} disabled />
     );
-    fireEvent.click(getByText("Button"));
+    userEvent.click(getByText("Button"));
     expect(onClick).toHaveBeenCalledTimes(0);
   });
 
@@ -30,7 +31,7 @@ describe("Button", () => {
     const { getByText } = render(
       <Button label="Button" onClick={onClick} loading />
     );
-    fireEvent.click(getByText("Button"));
+    userEvent.click(getByText("Button"));
     expect(onClick).toHaveBeenCalledTimes(0);
   });
 
@@ -38,7 +39,7 @@ describe("Button", () => {
     const { getByText } = render(
       <Button label="Button" tooltipProps={{ content: "Tooltip" }} />
     );
-    fireEvent.mouseEnter(getByText("Button"), { bubbles: true });
+    userEvent.hover(getByText("Button"));
     expect(getByText("Tooltip")).toBeInTheDocument();
   });
 

package/tests/Collapse.test.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import Collapse from "../lib/components/Accordion/Collapse";
+
+describe("Collapse", () => {
+  it("should render without error", () => {
+    const { getByText } = render(<Collapse open>
+      <p>Content</p>
+    </Collapse>);
+    expect(getByText("Content")).toBeInTheDocument();
+  });
+
+  it("should not display content when collapsed", () => {
+    const { queryByText } = render(<Collapse>
+      <p>Content</p>
+    </Collapse>);
+    expect(queryByText("Content")).not.toBeInTheDocument();
+  });
+});