83 lines
1.9 KiB
JavaScript
83 lines
1.9 KiB
JavaScript
import test from "node:test";
|
|
import assert from "node:assert/strict";
|
|
|
|
import {
|
|
clampDropdownToViewport,
|
|
constrainFloatingMenuToViewport,
|
|
} from "./dropdown-position.ts";
|
|
|
|
test("dropdown keeps the anchor width when it fits inside the viewport", () => {
|
|
assert.deepEqual(clampDropdownToViewport({
|
|
anchorLeft: 24,
|
|
anchorWidth: 240,
|
|
viewportWidth: 390,
|
|
}), { left: 24, width: 240 });
|
|
});
|
|
|
|
test("dropdown moves inside the right viewport edge", () => {
|
|
assert.deepEqual(clampDropdownToViewport({
|
|
anchorLeft: 220,
|
|
anchorWidth: 240,
|
|
viewportWidth: 390,
|
|
}), { left: 142, width: 240 });
|
|
});
|
|
|
|
test("dropdown shrinks to the safe mobile viewport width", () => {
|
|
assert.deepEqual(clampDropdownToViewport({
|
|
anchorLeft: -30,
|
|
anchorWidth: 420,
|
|
viewportWidth: 320,
|
|
}), { left: 8, width: 304 });
|
|
});
|
|
|
|
test("floating menu stays in its natural position when it fits", () => {
|
|
assert.deepEqual(constrainFloatingMenuToViewport({
|
|
anchorTop: 100,
|
|
menuHeight: 180,
|
|
menuLeft: 120,
|
|
menuTop: 140,
|
|
menuWidth: 220,
|
|
viewportHeight: 700,
|
|
viewportWidth: 390,
|
|
}), {
|
|
maxHeight: null,
|
|
maxWidth: 366,
|
|
translateX: 0,
|
|
translateY: 0,
|
|
});
|
|
});
|
|
|
|
test("floating menu shifts horizontally and opens above a low trigger", () => {
|
|
assert.deepEqual(constrainFloatingMenuToViewport({
|
|
anchorTop: 620,
|
|
menuHeight: 240,
|
|
menuLeft: -40,
|
|
menuTop: 660,
|
|
menuWidth: 260,
|
|
viewportHeight: 700,
|
|
viewportWidth: 390,
|
|
}), {
|
|
maxHeight: 240,
|
|
maxWidth: 366,
|
|
translateX: 52,
|
|
translateY: -288,
|
|
});
|
|
});
|
|
|
|
test("floating menu becomes scrollable in the larger available direction", () => {
|
|
assert.deepEqual(constrainFloatingMenuToViewport({
|
|
anchorTop: 90,
|
|
menuHeight: 640,
|
|
menuLeft: 20,
|
|
menuTop: 130,
|
|
menuWidth: 220,
|
|
viewportHeight: 400,
|
|
viewportWidth: 320,
|
|
}), {
|
|
maxHeight: 258,
|
|
maxWidth: 296,
|
|
translateX: 0,
|
|
translateY: 0,
|
|
});
|
|
});
|