@crossed/primitive/lib/module/Button/__tests__/Button.spec.js

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

import { Fragment, jsx } from "react/jsx-runtime";
import "@testing-library/jest-dom";
import { render, screen } from "@crossed/test";
import { createButtonMain } from "../Button";
import React, { forwardRef } from "react";
import { Provider } from "../context";
import { ButtonGroupCollectionItemSlot } from "../contextCollection";
import { Item } from "../../utils/RovingFocus";
jest.mock("../contextCollection");
jest.mock("../context");
jest.mock("../../utils/RovingFocus");
const ProviderMocked = Provider;
const ItemSlotMocked = ButtonGroupCollectionItemSlot.render;
const RovingItemMocked = Item.render;
const Comp = forwardRef((p, ref) => /* @__PURE__ */ jsx("div", { ...p, ref }));
const NewComp = createButtonMain(Comp);
describe("createButtonMain", () => {
  const oldUseId = React.useId;
  beforeEach(() => {
    React.useId = jest.fn(() => "id");
    ProviderMocked.mockImplementation(({ children }) => /* @__PURE__ */ jsx(Fragment, { children }));
    ItemSlotMocked.mockImplementation(({ children }) => /* @__PURE__ */ jsx(Fragment, { children }));
    RovingItemMocked.mockImplementation(({ children }) => /* @__PURE__ */ jsx(Fragment, { children }));
  });
  afterEach(() => {
    React.useId = oldUseId;
    ProviderMocked.mockReset();
    ItemSlotMocked.mockReset();
    RovingItemMocked.mockReset();
  });
  afterAll(() => {
    jest.restoreAllMocks();
  });
  test("not disabled", async () => {
    const child = "Pass child";
    render(/* @__PURE__ */ jsx(NewComp, { children: child }));
    expect(React.useId).toHaveBeenCalled();
    expect(ProviderMocked).toHaveBeenCalled();
    expect(ProviderMocked.mock.calls[0][0]).toHaveProperty("id", "id");
    expect(ProviderMocked.mock.calls[0][0]).toHaveProperty("children");
    expect(ItemSlotMocked).toHaveBeenCalled();
    expect(ItemSlotMocked.mock.calls[0][0]).toHaveProperty("id", "id");
    expect(ItemSlotMocked.mock.calls[0][0]).toHaveProperty("children");
    expect(RovingItemMocked).toHaveBeenCalled();
    expect(RovingItemMocked.mock.calls[0][0]).toHaveProperty("focusable", true);
    expect(RovingItemMocked.mock.calls[0][0]).toHaveProperty("children");
    const button = await screen.getByRole("button");
    expect(button).toHaveTextContent(child);
    expect(button).toHaveAttribute("aria-labelledby", "id");
    expect(button).toHaveAttribute("aria-disabled", "false");
    expect(button).toHaveAttribute("id", "id");
    expect(button).toHaveAttribute("tabIndex", "0");
  });
  test("disabled", async () => {
    const child = "Pass child";
    render(/* @__PURE__ */ jsx(NewComp, { disabled: true, children: child }));
    expect(React.useId).toHaveBeenCalled();
    expect(ProviderMocked).toHaveBeenCalled();
    expect(ProviderMocked.mock.calls[0][0]).toHaveProperty("id", "id");
    expect(ProviderMocked.mock.calls[0][0]).toHaveProperty("children");
    expect(ItemSlotMocked).toHaveBeenCalled();
    expect(ItemSlotMocked.mock.calls[0][0]).toHaveProperty("id", "id");
    expect(ItemSlotMocked.mock.calls[0][0]).toHaveProperty("children");
    expect(RovingItemMocked).toHaveBeenCalled();
    expect(RovingItemMocked.mock.calls[0][0]).toHaveProperty(
      "focusable",
      false
    );
    expect(RovingItemMocked.mock.calls[0][0]).toHaveProperty("children");
    const button = await screen.getByRole("button");
    expect(button).toHaveTextContent(child);
    expect(button).toHaveAttribute("aria-labelledby", "id");
    expect(button).toHaveAttribute("aria-disabled", "true");
    expect(button).toHaveAttribute("disabled", "");
    expect(button).toHaveAttribute("id", "id");
    expect(button).toHaveAttribute("tabIndex", "-1");
  });
});
//# sourceMappingURL=Button.spec.js.map