@crossed/ui/lib/module/buttons/Button/__tests__/Text.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 { ButtonText } from "../Text";
import { buttonContext } from "../context";
describe("ButtonText", () => {
  const setTextIdMock = jest.fn();
  const renderWithContext = (props, contextValue) => {
    return render(
      /* @__PURE__ */ jsx(buttonContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(ButtonText, { ...props }) })
    );
  };
  it("renders correctly with default props", () => {
    renderWithContext(
      { children: "Hello, World!" },
      {
        variant: "primary",
        state: {},
        disabled: false,
        setTextId: setTextIdMock,
        textId: "text-id"
      }
    );
    const text = screen.getByText("Hello, World!");
    expect(text).toBeTruthy();
  });
  it("applies styles based on the variant", () => {
    renderWithContext(
      { children: "Primary Text" },
      {
        variant: "primary",
        state: {},
        disabled: false,
        setTextId: setTextIdMock,
        textId: "text-id"
      }
    );
    const text = screen.getByText("Primary Text");
    expect(text).toHaveClass(
      `color-[var(--components--action-primary-default-text)]`
    );
  });
  it("updates the textId when id changes", () => {
    const { rerender } = renderWithContext(
      { id: "new-id" },
      {
        variant: "secondary",
        state: {},
        disabled: false,
        setTextId: setTextIdMock,
        textId: "text-id"
      }
    );
    expect(setTextIdMock).toHaveBeenCalledWith("new-id");
    rerender(
      /* @__PURE__ */ jsx(
        buttonContext.Provider,
        {
          value: {
            variant: "secondary",
            state: {},
            disabled: false,
            setTextId: setTextIdMock,
            textId: "new-id"
          },
          children: /* @__PURE__ */ jsx(ButtonText, { id: "another-id" })
        }
      )
    );
    expect(setTextIdMock).toHaveBeenCalledWith("another-id");
  });
  it("applies hover styles when state.hover is true", () => {
    renderWithContext(
      { children: "Hover Text" },
      {
        variant: "primary",
        state: { hover: true },
        disabled: false,
        setTextId: setTextIdMock,
        textId: "text-id"
      }
    );
    const text = screen.getByText("Hover Text");
    expect(text).toHaveClass(
      `color-[var(--components--action-primary-hover-text)]`
    );
  });
  it("applies disabled styles when disabled is true", () => {
    renderWithContext(
      { children: "Disabled Text" },
      {
        variant: "primary",
        state: {},
        disabled: true,
        setTextId: setTextIdMock,
        textId: "text-id"
      }
    );
    const text = screen.getByText("Disabled Text");
    expect(text).toHaveClass(
      `color-[var(--components--action-primary-default-text)]`
    );
  });
  it("passes additional props to the underlying Text component", () => {
    renderWithContext(
      { children: "Custom Props", style: { color: "red" } },
      {
        variant: "primary",
        state: {},
        disabled: false,
        setTextId: setTextIdMock,
        textId: "text-id"
      }
    );
    const text = screen.getByText("Custom Props");
    expect(text).toHaveStyle("color: rgb(255, 0, 0)");
    expect(text).toHaveClass(
      `color-[var(--components--action-primary-default-text)]`
    );
  });
});
//# sourceMappingURL=Text.spec.js.map