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