76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import { render } from "@testing-library/react";
|
|
import { vi } from "vitest";
|
|
|
|
import { Popover } from "./Popover";
|
|
|
|
const mockPopoverDimensions = (width: number, height: number) => {
|
|
const getBoundingClientRect = vi
|
|
.spyOn(HTMLDivElement.prototype, "getBoundingClientRect")
|
|
.mockReturnValue({
|
|
left: 0,
|
|
top: 0,
|
|
right: width,
|
|
bottom: height,
|
|
width,
|
|
height,
|
|
x: 0,
|
|
y: 0,
|
|
toJSON: () => {},
|
|
});
|
|
|
|
return () => {
|
|
getBoundingClientRect.mockRestore();
|
|
};
|
|
};
|
|
|
|
describe("Popover", () => {
|
|
it("shifts overflowing content within its positioning container", () => {
|
|
const restoreDimensions = mockPopoverDimensions(100, 80);
|
|
|
|
try {
|
|
const { container } = render(
|
|
<Popover
|
|
left={180}
|
|
top={180}
|
|
fitInViewport={true}
|
|
viewportWidth={200}
|
|
viewportHeight={200}
|
|
/>,
|
|
);
|
|
const popover = container.querySelector<HTMLDivElement>(".popover")!;
|
|
|
|
expect(popover.style.left).toBe("90px");
|
|
expect(popover.style.top).toBe("110px");
|
|
} finally {
|
|
restoreDimensions();
|
|
}
|
|
});
|
|
|
|
it("resizes oversized content within the container gap", () => {
|
|
const restoreDimensions = mockPopoverDimensions(250, 250);
|
|
|
|
try {
|
|
const { container } = render(
|
|
<Popover
|
|
left={180}
|
|
top={180}
|
|
fitInViewport={true}
|
|
viewportWidth={200}
|
|
viewportHeight={200}
|
|
/>,
|
|
);
|
|
const popover = container.querySelector<HTMLDivElement>(".popover")!;
|
|
|
|
expect(popover.style.width).toBe("180px");
|
|
expect(popover.style.height).toBe("180px");
|
|
expect(popover.style.left).toBe("10px");
|
|
expect(popover.style.top).toBe("10px");
|
|
expect(popover.style.overflowX).toBe("scroll");
|
|
expect(popover.style.overflowY).toBe("scroll");
|
|
} finally {
|
|
restoreDimensions();
|
|
}
|
|
});
|
|
});
|