@crossed/ui/lib/commonjs/buttons/Button/__tests__/Text.spec.js

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

var import_jsx_runtime = require("react/jsx-runtime");
var import_test = require("@crossed/test");
var import_Text = require("../Text");
var import_context = require("../context");
describe("ButtonText", () => {
  const setTextIdMock = jest.fn();
  const renderWithContext = (props, contextValue) => {
    return (0, import_test.render)(
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.buttonContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.ButtonText, { ...props }) })
    );
  };
  it("renders correctly with default props", () => {
    renderWithContext(
      { children: "Hello, World!" },
      {
        variant: "primary",
        state: {},
        disabled: false,
        setTextId: setTextIdMock,
        textId: "text-id"
      }
    );
    const text = import_test.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 = import_test.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__ */ (0, import_jsx_runtime.jsx)(
        import_context.buttonContext.Provider,
        {
          value: {
            variant: "secondary",
            state: {},
            disabled: false,
            setTextId: setTextIdMock,
            textId: "new-id"
          },
          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.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 = import_test.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 = import_test.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 = import_test.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