Carlos Florêncio
91 lines
3.9 KiB
TypeScript
91 lines
3.9 KiB
TypeScript
import { afterEach, describe, expect, it } from "vitest";
|
||
import type { DockviewApi } from "dockview-react";
|
||
import {
|
||
measureDockviewContainer,
|
||
measureDockviewGridWidth,
|
||
registerDockviewRoot,
|
||
unregisterDockviewRoot,
|
||
} from "./dockview-measure";
|
||
|
||
function fakeApi(width: number, height: number): DockviewApi {
|
||
return { width, height } as unknown as DockviewApi;
|
||
}
|
||
|
||
describe("measureDockviewContainer", () => {
|
||
const DV_CLASS = "dv-dockview";
|
||
|
||
afterEach(() => {
|
||
document.body.innerHTML = "";
|
||
});
|
||
|
||
it("measures the registered Dockview root instead of another mounted instance", () => {
|
||
const firstParent = document.createElement("div");
|
||
Object.defineProperty(firstParent, "clientWidth", { value: 300, configurable: true });
|
||
const first = document.createElement("div");
|
||
first.className = DV_CLASS;
|
||
firstParent.appendChild(first);
|
||
document.body.appendChild(firstParent);
|
||
|
||
const targetParent = document.createElement("div");
|
||
Object.defineProperty(targetParent, "clientWidth", { value: 900, configurable: true });
|
||
const target = document.createElement("div");
|
||
target.className = DV_CLASS;
|
||
targetParent.appendChild(target);
|
||
document.body.appendChild(targetParent);
|
||
|
||
const api = fakeApi(0, 0);
|
||
registerDockviewRoot(api, targetParent);
|
||
|
||
expect(measureDockviewGridWidth(api)).toBe(900);
|
||
unregisterDockviewRoot(api);
|
||
});
|
||
|
||
it("uses the live container size when it is laid out", () => {
|
||
const parent = document.createElement("div");
|
||
Object.defineProperty(parent, "clientWidth", { value: 1500, configurable: true });
|
||
Object.defineProperty(parent, "clientHeight", { value: 700, configurable: true });
|
||
const dv = document.createElement("div");
|
||
dv.className = DV_CLASS;
|
||
parent.appendChild(dv);
|
||
document.body.appendChild(parent);
|
||
|
||
expect(measureDockviewContainer(fakeApi(0, 0))).toEqual({ width: 1500, height: 700 });
|
||
});
|
||
|
||
it("ignores an implausibly-narrow live width during root layout but keeps the live height", () => {
|
||
// Regression (post unified-sidebar #1165): while the AppSidebar root-flex
|
||
// width was animated, the dockview content container could be measured at a
|
||
// tiny positive width. Keep rejecting that transient during initial layout:
|
||
// building the default at it collapses the horizontal columns into a
|
||
// vertical stack (chat / files+changes / terminal). On desktop the sidebar
|
||
// maxes at 30vw, so content is always >= ~70vw — a sub-half-viewport read is
|
||
// definitionally a transient: fall back the width to the viewport so the
|
||
// build stays horizontal (the resize observer then snaps to the exact size).
|
||
// Root flex layout changes are horizontal, so the live height is reliable.
|
||
const parent = document.createElement("div");
|
||
Object.defineProperty(parent, "clientWidth", { value: 80, configurable: true });
|
||
Object.defineProperty(parent, "clientHeight", { value: 700, configurable: true });
|
||
const dv = document.createElement("div");
|
||
dv.className = DV_CLASS;
|
||
parent.appendChild(dv);
|
||
document.body.appendChild(parent);
|
||
|
||
const result = measureDockviewContainer(fakeApi(0, 0));
|
||
expect(result.width).toBe(window.innerWidth);
|
||
expect(result.height).toBe(700);
|
||
});
|
||
|
||
it("never returns a zero size on a fresh mount (no container, api not laid out yet)", () => {
|
||
// Regression: a 0×0 measurement builds the default layout at zero width, so
|
||
// dockview collapses the horizontal columns into a vertical stack (chat /
|
||
// files+changes / terminal). Fall back to the viewport instead so the
|
||
// default builds horizontally; the resize observer then snaps it to the
|
||
// exact container size.
|
||
const { width, height } = measureDockviewContainer(fakeApi(0, 0));
|
||
expect(width).toBeGreaterThan(0);
|
||
expect(height).toBeGreaterThan(0);
|
||
expect(width).toBe(window.innerWidth);
|
||
expect(height).toBe(window.innerHeight);
|
||
});
|
||
});
|