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

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

import { jsx } from "react/jsx-runtime";
import { render, screen } from "@crossed/test";
import { ButtonIcon } from "../Icon";
import { buttonContext } from "../context";
import { afterEach } from "@jest/globals";
const X = jest.fn(() => /* @__PURE__ */ jsx("div", { "data-testid": "x" }));
describe("ButtonIcon", () => {
  const renderWithContext = (children, contextValue) => {
    return render(
      /* @__PURE__ */ jsx(buttonContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(ButtonIcon, { children }) })
    );
  };
  afterEach(() => {
    X.mockReset();
  });
  it("renders correctly with default props", () => {
    renderWithContext(null, { variant: "primary", state: {}, disabled: false });
    expect(() => screen.getByTestId("x")).toThrow();
  });
  it("renders the child element and applies color styles", () => {
    renderWithContext(/* @__PURE__ */ jsx(X, {}), {
      variant: "primary",
      state: { hover: false, active: false },
      disabled: false
    });
    expect(X).toBeCalledWith(
      { "color": "var(--components--action-primary-default-text)" },
      {}
    );
  });
  it("applies hover styles when state.hover is true", () => {
    renderWithContext(/* @__PURE__ */ jsx(X, {}), {
      variant: "primary",
      state: { hover: true, active: false },
      disabled: false
    });
    expect(X).toBeCalledWith(
      { "color": "var(--components--action-primary-hover-text)" },
      {}
    );
  });
  it("applies active styles when state.active is true", () => {
    renderWithContext(/* @__PURE__ */ jsx(X, {}), {
      variant: "primary",
      state: { hover: false, active: true },
      disabled: false
    });
    expect(X).toBeCalledWith(
      { "color": "var(--components--action-primary-active-text)" },
      {}
    );
  });
  it("applies disabled styles when disabled is true", () => {
    renderWithContext(/* @__PURE__ */ jsx(X, {}), {
      variant: "primary",
      state: {},
      disabled: true
    });
    expect(X).toBeCalledWith(
      { "color": "var(--components--action-primary-default-text)" },
      {}
    );
  });
  it("renders secondary variant styles correctly", () => {
    renderWithContext(/* @__PURE__ */ jsx(X, {}), {
      variant: "secondary",
      state: { hover: false, active: false },
      disabled: false
    });
    expect(X).toBeCalledWith(
      { "color": "var(--components--action-secondary-default-text)" },
      {}
    );
  });
  it("returns raw children if not a valid React element", () => {
    const { container } = renderWithContext("Raw Text", {
      variant: "primary",
      state: {},
      disabled: false
    });
    expect(container.textContent).toBe("Raw Text");
  });
});
//# sourceMappingURL=Icon.spec.js.map