@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
115 lines (114 loc) • 5.07 kB
JavaScript
var import_jsx_runtime = require("react/jsx-runtime");
var import_test = require("@crossed/test");
var import__ = require("../index");
var import_Floating = require("../Floating");
var import_typography = require("../../typography");
var import_useMedia = require("../../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(import_Floating.Floating);
const useMediaMocked = jest.mocked(import_useMedia.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", () => {
(0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Popover, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Popover.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.Text, { children: "Trigger" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.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);
(0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Popover, { triggerStrategy: "onPointerEnter", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Popover.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.Text, { children: "Trigger" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.Text, { children: "Content" }) })
] })
);
const call = FloatingMocked.mock.calls[0][0];
expect(call).toHaveProperty("triggerStrategy", "onPress");
});
test("keeps triggerStrategy onPress on mobile", () => {
mockUseMedia(false);
(0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Popover, { triggerStrategy: "onPress", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Popover.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.Text, { children: "Trigger" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.Text, { children: "Content" }) })
] })
);
const call = FloatingMocked.mock.calls[0][0];
expect(call).toHaveProperty("triggerStrategy", "onPress");
});
test("keeps triggerStrategy onPointerEnter on desktop", () => {
mockUseMedia(true);
(0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Popover, { triggerStrategy: "onPointerEnter", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Popover.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.Text, { children: "Trigger" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Popover.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.Text, { children: "Content" }) })
] })
);
const call = FloatingMocked.mock.calls[0][0];
expect(call).toHaveProperty("triggerStrategy", "onPointerEnter");
});
test("renders Trigger and Content components", () => {
expect(import__.Popover.Trigger).toBeDefined();
expect(import__.Popover.Content).toBeDefined();
});
});
//# sourceMappingURL=Popover.spec.js.map