@crossed/ui/lib/module/buttons/Button/__tests__/Button.spec.js

A universal & performant styling library for React Native, Next.js & React

import { jsx } from "react/jsx-runtime";
import React from "react";
import { render, screen, fireEvent } from "@crossed/test";
import { Button } from "../Button";
describe("Button", () => {
  it("renders correctly with default props", () => {
    render(/* @__PURE__ */ jsx(Button, { children: "Click Me" }));
    const button = screen.getByRole("button");
    expect(button).toBeTruthy();
    expect(button).not.toHaveAttribute("aria-disabled");
  });
  it("renders children correctly", () => {
    render(/* @__PURE__ */ jsx(Button, { children: "Click Me" }));
    const button = screen.getByRole("button");
    expect(button).toHaveTextContent("Click Me");
  });
  it("disables the button when `disabled` is true", () => {
    render(/* @__PURE__ */ jsx(Button, { disabled: true, children: "Click Me" }));
    const button = screen.getByRole("button");
    expect(button).toHaveAttribute("aria-disabled", "true");
    expect(button).toBeDisabled();
  });
  it("renders the loading indicator when `loading` is true", () => {
    render(/* @__PURE__ */ jsx(Button, { loading: true, children: "Click Me" }));
    const loadingIndicator = screen.getByRole("progressbar");
    expect(loadingIndicator).toBeTruthy();
    expect(screen.getByRole("button")).toHaveTextContent("Click Me");
  });
  it("applies the correct styles for primary variant", () => {
    render(/* @__PURE__ */ jsx(Button, { variant: "primary", children: "Primary" }));
    expect(screen.getByRole("button")).toMatchSnapshot();
  });
  it("applies the correct styles for secondary variant", () => {
    render(/* @__PURE__ */ jsx(Button, { variant: "secondary", children: "Secondary" }));
    expect(screen.getByRole("button")).toMatchSnapshot();
  });
  it("applies the correct styles for lg size", () => {
    render(/* @__PURE__ */ jsx(Button, { size: "lg", children: "Large Button" }));
    expect(screen.getByRole("button")).toMatchSnapshot();
  });
  it("applies the correct styles for sm size", () => {
    render(/* @__PURE__ */ jsx(Button, { size: "sm", children: "Small Button" }));
    expect(screen.getByRole("button")).toMatchSnapshot();
  });
  it("supports forwarding refs", () => {
    const ref = React.createRef();
    render(/* @__PURE__ */ jsx(Button, { ref, children: "Click Me" }));
    expect(ref.current).toBeTruthy();
  });
  it("handles dynamic states (hover and active)", () => {
    render(/* @__PURE__ */ jsx(Button, { children: "Dynamic Button" }));
    const button = screen.getByRole("button");
    fireEvent.mouseOver(button);
    expect(button).not.toHaveAttribute("aria-disabled");
    fireEvent.mouseDown(button);
    expect(button).not.toHaveAttribute("aria-disabled");
  });
});
//# sourceMappingURL=Button.spec.js.map