@bigbinary/neetoui 3.2.65 → 3.2.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "3.2.65",
+  "version": "3.2.68",
   "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

@@ -1,6 +1,7 @@
 import React from "react";
 import { Accordion } from "../lib/components";
-import { render, fireEvent, waitForElementToBeRemoved } from "@testing-library/react";
+import { render, waitForElementToBeRemoved } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 
 
@@ -29,7 +30,7 @@ describe("Accordion", () => {
         <p>Content 1</p>
       </Accordion.Item>
     </Accordion>);
-    fireEvent.click(getByText("Item 1"));
+    userEvent.click(getByText("Item 1"));
     expect(getByText("Content 1")).toBeInTheDocument();
   });
 
@@ -39,12 +40,12 @@ describe("Accordion", () => {
         <p>Content 1</p>
       </Accordion.Item>
     </Accordion>);
-    fireEvent.click(getByText("Item 1"));
+    userEvent.click(getByText("Item 1"));
     expect(getByText("Content 1")).toBeInTheDocument();
-    fireEvent.keyDown(getByText("Item 1"), { key: " ", bubbles: true });
+    userEvent.keyboard("{space}");
     await waitForElementToBeRemoved(() => queryByText("Content 1"));
     expect(queryByText("Content 1")).not.toBeInTheDocument();
-    fireEvent.keyDown(getByText("Item 1"), { key: "Enter", bubbles: true });
+    userEvent.keyboard("{enter}");
     expect(getByText("Content 1")).toBeInTheDocument();
   });
 
@@ -54,9 +55,9 @@ describe("Accordion", () => {
         <p>Content 1</p>
       </Accordion.Item>
     </Accordion>);
-    fireEvent.click(getByText("Item 1"));
+    userEvent.click(getByText("Item 1"));
     expect(getByText("Content 1")).toBeInTheDocument();
-    fireEvent.keyDown(getByText("Item 1"), { key: "a", bubbles: true });
+    userEvent.type(getByText("Item 1"), "a");
     expect(getByText("Content 1")).toBeInTheDocument();
   });
 
@@ -67,7 +68,7 @@ describe("Accordion", () => {
         <p>Content 1</p>
       </Accordion.Item>
     </Accordion>);
-    fireEvent.click(getByText("Item 1"));
+    userEvent.click(getByText("Item 1"));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 
@@ -80,9 +81,9 @@ describe("Accordion", () => {
         <p>Content 2</p>
       </Accordion.Item>
     </Accordion>);
-    fireEvent.click(getByText("Item 1"));
+    userEvent.click(getByText("Item 1"));
     expect(getByText("Content 1")).toBeInTheDocument();
-    fireEvent.click(getByText("Item 2"));
+    userEvent.click(getByText("Item 2"));
     await waitForElementToBeRemoved(() => queryByText("Content 1"));
     expect(queryByText("Content 1")).not.toBeInTheDocument();
     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();
+  });
+});

package/tests/Textarea.test.js

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { Typography } from "../lib/components";
+import { render } from "@testing-library/react";
+
+describe("Typography", () => {
+  it("should render without error", () => {
+    const { getByText } = render(<Typography style="body1">Typography</Typography>);
+    expect(getByText("Typography")).toBeInTheDocument();
+  });
+
+  it("should render a heading when style is of heading type", () => {
+    const { getByRole } = render(<Typography style="h1">Typography</Typography>);
+    expect(getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+
+  it("should override default tag when component prop is given", () => {
+    const { getByRole } = render(<Typography style="h1" component="h2">Typography</Typography>);
+    expect(getByRole("heading", { level: 2 })).toBeInTheDocument();
+  });
+});