@crossed/ui/lib/module/overlay/__tests__/Popover.spec.js

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

import { jsx, jsxs } from "react/jsx-runtime";
import { render } from "@crossed/test";
import { Popover } from "../index";
import { Floating } from "../Floating";
import { Text } from "../../typography";
import { useMedia } from "../../useMedia";
jest.mock("../Floating", () => ({
  ...jest.requireActual("../Floating"),
  Floating: jest.fn(() => null)
}));
jest.mock("../Sheet/index", () => ({
  Sheet: Object.assign(
    jest.fn(({ children }) => children),
    {
      Padded: jest.fn(({ children }) => children),
      Header: jest.fn(({ children }) => children),
      Title: jest.fn(({ children }) => children),
      Body: jest.fn(({ children }) => children),
      ScrollView: jest.fn(({ children }) => children),
      Content: jest.fn(({ children }) => children)
    }
  )
}));
jest.mock("@floating-ui/react", () => ({
  useFloating: jest.fn(() => ({
    refs: {
      setReference: jest.fn(),
      setFloating: jest.fn()
    },
    floatingStyles: { position: "absolute", top: 0, left: 0 }
  })),
  autoUpdate: jest.fn(),
  offset: jest.fn((value) => ({ name: "offset", options: value }))
  // ✅ Mock correct
}));
jest.mock("@floating-ui/dom", () => ({
  flip: jest.fn((options) => ({ name: "flip", options }))
}));
jest.mock("../../useMedia", () => ({
  useMedia: jest.fn()
}));
jest.mock("react-focus-on", () => ({
  FocusOn: ({ children }) => children
}));
const FloatingMocked = jest.mocked(Floating);
const useMediaMocked = jest.mocked(useMedia);
const mockUseMedia = (md) => {
  useMediaMocked.mockReturnValue({
    md,
    sm: false,
    lg: false,
    xl: false
  });
};
describe("Popover", () => {
  beforeEach(() => {
    mockUseMedia(true);
  });
  afterEach(() => {
    FloatingMocked.mockReset();
    useMediaMocked.mockReset();
    jest.clearAllMocks();
  });
  test("verify default props", () => {
    render(
      /* @__PURE__ */ jsxs(Popover, { children: [
        /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(Text, { children: "Trigger" }) }),
        /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) })
      ] })
    );
    const call = FloatingMocked.mock.calls[0][0];
    expect(call).toHaveProperty("triggerStrategy", "onPress");
    expect(call).toHaveProperty("removeScroll", false);
    expect(call).toHaveProperty("children");
  });
  test("adapts triggerStrategy on mobile when onPointerEnter", () => {
    mockUseMedia(false);
    render(
      /* @__PURE__ */ jsxs(Popover, { triggerStrategy: "onPointerEnter", children: [
        /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(Text, { children: "Trigger" }) }),
        /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) })
      ] })
    );
    const call = FloatingMocked.mock.calls[0][0];
    expect(call).toHaveProperty("triggerStrategy", "onPress");
  });
  test("keeps triggerStrategy onPress on mobile", () => {
    mockUseMedia(false);
    render(
      /* @__PURE__ */ jsxs(Popover, { triggerStrategy: "onPress", children: [
        /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(Text, { children: "Trigger" }) }),
        /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) })
      ] })
    );
    const call = FloatingMocked.mock.calls[0][0];
    expect(call).toHaveProperty("triggerStrategy", "onPress");
  });
  test("keeps triggerStrategy onPointerEnter on desktop", () => {
    mockUseMedia(true);
    render(
      /* @__PURE__ */ jsxs(Popover, { triggerStrategy: "onPointerEnter", children: [
        /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(Text, { children: "Trigger" }) }),
        /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsx(Text, { children: "Content" }) })
      ] })
    );
    const call = FloatingMocked.mock.calls[0][0];
    expect(call).toHaveProperty("triggerStrategy", "onPointerEnter");
  });
  test("renders Trigger and Content components", () => {
    expect(Popover.Trigger).toBeDefined();
    expect(Popover.Content).toBeDefined();
  });
});
//# sourceMappingURL=Popover.spec.js.map