@bigbinary/neetoui 3.2.61 → 3.2.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "3.2.61",
+  "version": "3.2.62",
   "main": "./index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -49,8 +49,8 @@
     "@storybook/manager-webpack5": "^6.4.19",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^6.4.19",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.1.9",
     "autoprefixer": "^9.0.0",
     "babel-eslint": "^10.1.0",

package/tests/Button.test.js

@@ -0,0 +1,72 @@
+import React from "react";
+import { Button } from "../lib/components";
+import { render, fireEvent } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+
+describe("Button", () => {
+  it("should render without error", () => {
+    const { getByText } = render(<Button label="Button" />);
+    expect(getByText("Button")).toBeInTheDocument();
+  });
+
+  it("should call onClick on button click", () => {
+    const onClick = jest.fn();
+    const { getByText } = render(<Button label="Button" onClick={onClick} />);
+    fireEvent.click(getByText("Button"));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not call onClick on button click when disabled", () => {
+    const onClick = jest.fn();
+    const { getByText } = render(
+      <Button label="Button" onClick={onClick} disabled />
+    );
+    fireEvent.click(getByText("Button"));
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+
+  it("should not call onClick on button click when loading", () => {
+    const onClick = jest.fn();
+    const { getByText } = render(
+      <Button label="Button" onClick={onClick} loading />
+    );
+    fireEvent.click(getByText("Button"));
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+
+  it("should show tooltip when button is hovered", () => {
+    const { getByText } = render(
+      <Button label="Button" tooltipProps={{ content: "Tooltip" }} />
+    );
+    fireEvent.mouseEnter(getByText("Button"), { bubbles: true });
+    expect(getByText("Tooltip")).toBeInTheDocument();
+  });
+
+  it("should show icon when icon string is provided", () => {
+    const { getByTestId } = render(<Button icon="check" />);
+    expect(getByTestId("class-icon")).toBeInTheDocument();
+  });
+
+  it("should show icon when icon component is provided", () => {
+    const { getByTestId } = render(
+      <Button icon={() => <svg data-testid="svg-icon" />} />
+    );
+    expect(getByTestId("svg-icon")).toBeInTheDocument();
+  });
+
+  it("should render a link when `href` prop is given", () => {
+    const { getByRole } = render(
+      <Button label="Link" href="https://example.com" />
+    );
+    expect(getByRole("link")).toHaveAttribute("href", "https://example.com");
+  });
+
+  it("should render a router link when `to` prop is given", () => {
+    const { getByRole } = render(
+      <BrowserRouter>
+        <Button label="Router Link" to="/some-path" />
+      </BrowserRouter>
+    );
+    expect(getByRole("link")).toHaveAttribute("href", "/some-path");
+  });
+});