@bigbinary/neetoui 3.2.67 → 3.2.70

package/package.json

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

package/tests/Callout.test.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Callout } from "../lib/components";
+import { Check } from "@bigbinary/neeto-icons";
+import { render } from "@testing-library/react";
+
+describe("Callout", () => {
+  it("should render without error", () => {
+    const { getByText } = render(
+      <Callout>
+        <p>Tesing Callout</p>
+      </Callout>
+    );
+    expect(getByText("Tesing Callout")).toBeInTheDocument();
+  });
+
+  it("should show icon when icon component is provided", () => {
+    const { getByTestId } = render(<Callout icon={Check} />);
+    expect(getByTestId("callout-icon")).toBeInTheDocument();
+  });
+});

package/tests/Tag.test.js

@@ -0,0 +1,40 @@
+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

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