jiang
74bf7c64c4
Let control surfaces size to their 40px buttons, padding and borders. Reserve the resulting 50px mobile dock height to keep the map controls clear. The initial alignment check covered only horizontal spacing and missed the mobile height constraint. Check all four outer edges at desktop and mobile widths, plus the dock gap, to prevent recurrence.
113 lines
3.4 KiB
TypeScript
113 lines
3.4 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
import {
|
|
clampAgentPanelWidth,
|
|
getAgentPanelDefaultWidth,
|
|
getAgentPanelMaxWidth,
|
|
getWorkbenchBasemapTone,
|
|
getWorkbenchCameraPadding,
|
|
getWorkbenchViewportLayout,
|
|
resolveMobileWorkbenchOverlayLayout
|
|
} from "./workbench-layout";
|
|
|
|
describe("workbench basemap surface tone", () => {
|
|
it.each([
|
|
["mapbox-light", "light"],
|
|
["mapbox-satellite", "satellite"],
|
|
["tianditu-vector", "light"],
|
|
["tianditu-image", "satellite"],
|
|
["none", "none"],
|
|
["unknown", "none"]
|
|
])("maps %s to %s", (baseLayerId, expectedTone) => {
|
|
expect(getWorkbenchBasemapTone(baseLayerId)).toBe(expectedTone);
|
|
});
|
|
});
|
|
|
|
describe("workbench floating panels", () => {
|
|
it("derives mobile dock and map control offsets from one overlay stack", () => {
|
|
expect(resolveMobileWorkbenchOverlayLayout(true)).toEqual({
|
|
timelineBottom: 12,
|
|
dockBottom: 68,
|
|
mapControlBottom: 126
|
|
});
|
|
expect(resolveMobileWorkbenchOverlayLayout(false)).toEqual({
|
|
timelineBottom: 12,
|
|
dockBottom: 12,
|
|
mapControlBottom: 70
|
|
});
|
|
});
|
|
|
|
it("uses bounded desktop and wide panel widths", () => {
|
|
expect(getWorkbenchViewportLayout(1440)).toMatchObject({
|
|
agentWidth: 500,
|
|
conditionWidth: 432,
|
|
conditionExpandedWidth: 880,
|
|
toolbarWidth: 48
|
|
});
|
|
expect(getWorkbenchViewportLayout(1536)).toMatchObject({
|
|
agentWidth: 540,
|
|
conditionExpandedWidth: 960
|
|
});
|
|
});
|
|
|
|
it("tracks the expanded condition panel in camera padding", () => {
|
|
expect(
|
|
getWorkbenchCameraPadding(1440, {
|
|
agentOpen: true,
|
|
conditionOpen: true,
|
|
conditionExpanded: false
|
|
})
|
|
).toEqual({ top: 72, right: 504, bottom: 32, left: 524 });
|
|
|
|
expect(
|
|
getWorkbenchCameraPadding(1440, {
|
|
agentOpen: true,
|
|
conditionOpen: true,
|
|
conditionExpanded: true
|
|
})
|
|
).toEqual({ top: 72, right: 952, bottom: 32, left: 476 });
|
|
});
|
|
|
|
it("does not reserve map width for the collapsed Agent launcher", () => {
|
|
expect(
|
|
getWorkbenchCameraPadding(1440, {
|
|
agentOpen: false,
|
|
conditionOpen: false
|
|
}).left
|
|
).toBe(24);
|
|
});
|
|
|
|
it("uses the committed Agent width without exceeding the hard limit", () => {
|
|
expect(
|
|
getWorkbenchCameraPadding(1920, {
|
|
agentOpen: true,
|
|
agentWidth: 620,
|
|
conditionOpen: true
|
|
})
|
|
).toEqual({ top: 72, right: 504, bottom: 32, left: 644 });
|
|
|
|
expect(
|
|
getWorkbenchCameraPadding(1920, {
|
|
agentOpen: true,
|
|
agentWidth: 900,
|
|
conditionOpen: false
|
|
}).left
|
|
).toBe(664);
|
|
});
|
|
|
|
it("uses responsive defaults and preserves the map corridor at maximum width", () => {
|
|
expect(getAgentPanelDefaultWidth(390)).toBe(500);
|
|
expect(getAgentPanelDefaultWidth(1024)).toBe(484);
|
|
expect(getAgentPanelDefaultWidth(1440)).toBe(500);
|
|
expect(getAgentPanelDefaultWidth(1536)).toBe(540);
|
|
expect(getAgentPanelMaxWidth(1024)).toBe(500);
|
|
expect(clampAgentPanelWidth(620, 1024)).toBe(500);
|
|
expect(clampAgentPanelWidth(300, 1440)).toBe(400);
|
|
expect(clampAgentPanelWidth(620, 1440)).toBe(620);
|
|
expect(getAgentPanelMaxWidth(1280)).toBe(516);
|
|
expect(getAgentPanelMaxWidth(1440)).toBe(640);
|
|
expect(getAgentPanelMaxWidth(1536)).toBe(640);
|
|
expect(getAgentPanelMaxWidth(1920)).toBe(640);
|
|
expect(getAgentPanelMaxWidth(1920, true)).toBe(628);
|
|
});
|
|
});
|