67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
import { test, expect } from "bun:test";
|
|
import { Window } from "happy-dom";
|
|
import { REACTIVE_RUNTIME } from "../src/reactive-runtime.ts";
|
|
|
|
function fixture(panel: Record<string, number>, clipped = false) {
|
|
const win = new Window();
|
|
win.document.body.innerHTML =
|
|
'<div id="clip"><div data-ui-component="ComboBox"><div data-wrn-anchored></div></div></div>';
|
|
const element = win.document.querySelector("[data-wrn-anchored]")! as any;
|
|
const host = element.parentElement;
|
|
const rect = (left: number, top: number, width: number, height: number) => ({
|
|
left,
|
|
top,
|
|
width,
|
|
height,
|
|
right: left + width,
|
|
bottom: top + height,
|
|
});
|
|
host.getBoundingClientRect = () => rect(270, 170, 40, 30);
|
|
element.getBoundingClientRect = () =>
|
|
rect(
|
|
panel.left,
|
|
panel.top,
|
|
Math.min(panel.width, parseFloat(element.style.maxWidth) || Infinity),
|
|
Math.min(panel.height, parseFloat(element.style.maxHeight) || Infinity),
|
|
);
|
|
if (clipped) {
|
|
const clip = win.document.querySelector("#clip")! as any;
|
|
clip.style.overflow = "hidden";
|
|
clip.getBoundingClientRect = () => rect(100, 50, 220, 220);
|
|
Object.defineProperty(clip, "clientWidth", { value: 220 });
|
|
Object.defineProperty(clip, "clientHeight", { value: 220 });
|
|
}
|
|
const start = REACTIVE_RUNTIME.indexOf(" function isRenderedElement(");
|
|
const end = REACTIVE_RUNTIME.indexOf(" function repositionAnchored(", start);
|
|
const clamp = new Function(
|
|
"window",
|
|
"document",
|
|
"ANCHOR_MARGIN",
|
|
REACTIVE_RUNTIME.slice(start, end) + "; return clampAnchored;",
|
|
)(win, win.document, 8);
|
|
return { win, element, clamp };
|
|
}
|
|
|
|
test("anchored panels fit clipping containers and positioning does not drift", async () => {
|
|
const { win, element, clamp } = fixture({ left: 40, top: 208, width: 180, height: 100 }, true);
|
|
clamp(element);
|
|
expect(element.style.translate).toBe("68px -146px");
|
|
clamp(element);
|
|
expect(element.style.translate).toBe("68px -146px");
|
|
await win.happyDOM.close();
|
|
});
|
|
|
|
test("oversized panels become scrollable and recover authored sizing when space returns", async () => {
|
|
const { win, element, clamp } = fixture({ left: 40, top: 60, width: 500, height: 400 }, true);
|
|
element.style.minWidth = "300px";
|
|
clamp(element);
|
|
expect(element.style.maxWidth).toBe("204px");
|
|
expect(element.style.maxHeight).toBe("204px");
|
|
expect(element.style.overflow).toBe("auto");
|
|
element.parentElement.parentElement.style.overflow = "visible";
|
|
clamp(element);
|
|
expect(element.style.minWidth).toBe("300px");
|
|
expect(element.style.maxWidth).toBe("");
|
|
await win.happyDOM.close();
|
|
});
|