import { describe, expect, it } from "vitest"; import { clampPanelGeometry, defaultPanelGeometry, movePanelGeometry, resizePanelGeometry, } from "./panelGeometry"; const viewport = { width: 1440, height: 900 }; const minimums = { width: 320, height: 230 }; describe("floating panel geometry", () => { it("places desktop video and intelligence panels apart inside the viewport", () => { const video = defaultPanelGeometry("video", viewport, minimums); const intelligence = defaultPanelGeometry( "intelligence", viewport, { width: 340, height: 300 }, ); expect(video.x).toBeGreaterThanOrEqual(10); expect(video.y).toBeGreaterThanOrEqual(126); expect(intelligence.x).toBeGreaterThan(video.x + video.width); expect(intelligence.x + intelligence.width).toBeLessThanOrEqual(1430); }); it("clamps movement so the whole panel and its stop control stay reachable", () => { const geometry = { x: 20, y: 80, width: 500, height: 400 }; expect(movePanelGeometry(geometry, -10_000, -10_000, viewport, minimums)).toEqual({ x: 10, y: 126, width: 500, height: 400, }); expect(movePanelGeometry(geometry, 10_000, 10_000, viewport, minimums)).toEqual({ x: 930, y: 490, width: 500, height: 400, }); }); it("enforces minimum dimensions and constrains oversized panels", () => { expect(resizePanelGeometry( { x: 20, y: 80, width: 500, height: 400 }, -10_000, -10_000, viewport, minimums, )).toMatchObject({ width: 320, height: 230 }); expect(clampPanelGeometry( { x: -500, y: -500, width: 10_000, height: 10_000 }, viewport, minimums, )).toEqual({ x: 10, y: 126, width: 1420, height: 764 }); }); it("keeps both panels below the compact masthead and inside a phone viewport", () => { const phone = { width: 390, height: 844 }; for (const placement of ["video", "intelligence"] as const) { const panel = defaultPanelGeometry(placement, phone, minimums); expect(panel.y).toBeGreaterThanOrEqual(100); expect(panel.x + panel.width).toBeLessThanOrEqual(380); expect(panel.y + panel.height).toBeLessThanOrEqual(834); } }); });