@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
92 lines (91 loc) • 5.23 kB
JavaScript
var import_jsx_runtime = require("react/jsx-runtime");
var import_test = require("@crossed/test");
var import__ = require("../index");
var import_overlay = require("../../overlay");
var import_typography = require("../../typography");
jest.mock("../../overlay", () => ({
Popover: Object.assign(
jest.fn(({ children }) => children),
{
Trigger: jest.fn(({ children }) => children),
Content: jest.fn(({ children }) => children)
}
)
}));
const PopoverMocked = jest.mocked(import_overlay.Popover);
describe("Tooltip", () => {
afterEach(() => {
jest.clearAllMocks();
});
test("renders with default props", () => {
(0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Tooltip, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.Text, { children: "Hover me" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Text, { children: "Tooltip text" }) })
] })
);
const call = PopoverMocked.mock.calls[0][0];
expect(call).toHaveProperty("placement", "bottom");
expect(call).toHaveProperty("triggerStrategy", "onPointerEnter");
expect(call).toHaveProperty("children");
});
test("accepts custom placement", () => {
(0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Tooltip, { placement: "top", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.Text, { children: "Hover me" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Text, { children: "Tooltip text" }) })
] })
);
const call = PopoverMocked.mock.calls[0][0];
expect(call).toHaveProperty("placement", "top");
});
test("accepts custom triggerStrategy", () => {
(0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Tooltip, { triggerStrategy: "onPress", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.Text, { children: "Click me" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Text, { children: "Tooltip text" }) })
] })
);
const call = PopoverMocked.mock.calls[0][0];
expect(call).toHaveProperty("triggerStrategy", "onPress");
});
test("forwards additional props to Popover", () => {
(0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Tooltip, { offsetValue: 20, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.Text, { children: "Hover me" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Text, { children: "Tooltip text" }) })
] })
);
const call = PopoverMocked.mock.calls[0][0];
expect(call).toHaveProperty("offsetValue", 20);
});
test("renders all static components", () => {
expect(import__.Tooltip.Trigger).toBeDefined();
expect(import__.Tooltip.Content).toBeDefined();
expect(import__.Tooltip.Text).toBeDefined();
});
test("Tooltip.Text has correct displayName", () => {
expect(import__.Tooltip.Text.displayName).toBe("Tooltip.Text");
});
test("renders Trigger with Popover.Trigger", () => {
const PopoverTriggerMocked = jest.mocked(import_overlay.Popover.Trigger);
(0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Tooltip, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.Text, { children: "Hover me" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Text, { children: "Tooltip text" }) })
] })
);
expect(PopoverTriggerMocked).toHaveBeenCalled();
});
test("renders Content with Popover.Content", () => {
const PopoverContentMocked = jest.mocked(import_overlay.Popover.Content);
(0, import_test.render)(
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Tooltip, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_typography.Text, { children: "Hover me" }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Tooltip.Text, { children: "Tooltip text" }) })
] })
);
expect(PopoverContentMocked).toHaveBeenCalled();
});
});
//# sourceMappingURL=Tooltip.spec.js.map