| ... | ... | @@ -0,0 +1,72 @@ |
| 1 | import { afterEach, describe, expect, it, vi } from "vite-plus/test"; |
| 2 | |
| 3 | import { |
| 4 | resolveRestingComposerControlsLayout, |
| 5 | resolveRestingComposerControlsNaturalWidth, |
| 6 | } from "../composerFooterLayout"; |
| 7 | import { measureRestingComposerControls } from "./restingComposerControlsMeasurement"; |
| 8 | |
| 9 | function measurePicker(input: { clientWidth: number; flexGrow: string; maxWidth?: string }) { |
| 10 | const label = { clientWidth: input.clientWidth, scrollWidth: 160 }; |
| 11 | const picker = { |
| 12 | getBoundingClientRect: () => ({ width: 52 }), |
| 13 | querySelector: () => label, |
| 14 | }; |
| 15 | const controls = { |
| 16 | querySelector: (selector: string) => { |
| 17 | if (selector === "[data-chat-provider-model-picker]") return picker; |
| 18 | if (selector === "[data-resting-controls-overflow]") { |
| 19 | return { getBoundingClientRect: () => ({ width: 24 }) }; |
| 20 | } |
| 21 | return null; |
| 22 | }, |
| 23 | querySelectorAll: () => [{ getBoundingClientRect: () => ({ width: 140 }) }], |
| 24 | }; |
| 25 | vi.stubGlobal("getComputedStyle", (element: unknown) => { |
| 26 | if (element === label) return { flexGrow: input.flexGrow }; |
| 27 | if (element === picker) return { minWidth: "52px", maxWidth: input.maxWidth ?? "none" }; |
| 28 | return { columnGap: "4px" }; |
| 29 | }); |
| 30 | return measureRestingComposerControls(controls as unknown as HTMLElement)!; |
| 31 | } |
| 32 | |
| 33 | afterEach(() => vi.unstubAllGlobals()); |
| 34 | |
| 35 | describe("measureRestingComposerControls", () => { |
| 36 | it("keeps controls inline when the model label is deliberately collapsed", () => { |
| 37 | const measurement = measurePicker({ clientWidth: 0, flexGrow: "0" }); |
| 38 | |
| 39 | expect(measurement.naturalFixedWidth).toBe(52); |
| 40 | expect(resolveRestingComposerControlsNaturalWidth(measurement)).toBe(196); |
| 41 | expect(resolveRestingComposerControlsLayout({ ...measurement, hostWidth: 200 })).toEqual({ |
| 42 | hiddenCount: 0, |
| 43 | visible: true, |
| 44 | }); |
| 45 | }); |
| 46 | |
| 47 | it("recovers truncated text while the model label is flexible", () => { |
| 48 | const measurement = measurePicker({ clientWidth: 20, flexGrow: "1" }); |
| 49 | |
| 50 | expect(measurement.naturalFixedWidth).toBe(192); |
| 51 | expect(resolveRestingComposerControlsLayout({ ...measurement, hostWidth: 200 })).toEqual({ |
| 52 | hiddenCount: 1, |
| 53 | visible: true, |
| 54 | }); |
| 55 | }); |
| 56 | |
| 57 | it("recovers flexible text squeezed to zero instead of mistaking it for collapsed text", () => { |
| 58 | const measurement = measurePicker({ clientWidth: 0, flexGrow: "1" }); |
| 59 | |
| 60 | expect(measurement.naturalFixedWidth).toBe(212); |
| 61 | expect(resolveRestingComposerControlsLayout({ ...measurement, hostWidth: 200 })).toEqual({ |
| 62 | hiddenCount: 1, |
| 63 | visible: true, |
| 64 | }); |
| 65 | }); |
| 66 | |
| 67 | it("still caps recovered text at the model picker's maximum width", () => { |
| 68 | expect( |
| 69 | measurePicker({ clientWidth: 0, flexGrow: "1", maxWidth: "180px" }).naturalFixedWidth, |
| 70 | ).toBe(180); |
| 71 | }); |
| 72 | }); |
Julius Marminge <julius0216@outlook.com> 2026-09-03 18:55:43-07:00
GitHub <noreply@github.com> 2026-09-03 18:55:43-07:00