|
| 1 | +import { afterEach, describe, expect, test } from "bun:test" |
| 2 | +import { act } from "react" |
| 3 | +import { TooeeProvider } from "@tooee/shell" |
| 4 | +import { testRender } from "../../../test/support/test-render.ts" |
| 5 | +import { Ask } from "../src/Ask.js" |
| 6 | +import { AskOverlay } from "../src/AskOverlay.js" |
| 7 | + |
| 8 | +let testSetup: Awaited<ReturnType<typeof testRender>> |
| 9 | + |
| 10 | +afterEach(() => { |
| 11 | + testSetup?.renderer.destroy() |
| 12 | +}) |
| 13 | + |
| 14 | +const THUMB = "█" |
| 15 | +const TRACK = "░" |
| 16 | + |
| 17 | +// 30 uniquely-identifiable lines, far taller than the boxes used below. |
| 18 | +const tallValue = Array.from({ length: 30 }, (_, i) => `L${String(i + 1).padStart(2, "0")}`).join( |
| 19 | + "\n", |
| 20 | +) |
| 21 | + |
| 22 | +async function setupAsk(value: string, width = 40, height = 14) { |
| 23 | + const s = await testRender( |
| 24 | + <TooeeProvider initialMode="insert"> |
| 25 | + <Ask prompt="Q" multiline defaultValue={value} /> |
| 26 | + </TooeeProvider>, |
| 27 | + { width, height, kittyKeyboard: true }, |
| 28 | + ) |
| 29 | + await s.renderOnce() |
| 30 | + return s |
| 31 | +} |
| 32 | + |
| 33 | +async function setupOverlay(value: string, width = 60, height = 20) { |
| 34 | + const s = await testRender( |
| 35 | + <TooeeProvider initialMode="insert"> |
| 36 | + <AskOverlay |
| 37 | + prompt="Q" |
| 38 | + multiline |
| 39 | + defaultValue={value} |
| 40 | + onSubmit={() => {}} |
| 41 | + onCancel={() => {}} |
| 42 | + /> |
| 43 | + </TooeeProvider>, |
| 44 | + { width, height, kittyKeyboard: true }, |
| 45 | + ) |
| 46 | + await s.renderOnce() |
| 47 | + return s |
| 48 | +} |
| 49 | + |
| 50 | +async function press(key: string, modifiers?: { ctrl?: boolean; shift?: boolean }) { |
| 51 | + await act(async () => { |
| 52 | + testSetup.mockInput.pressKey(key, modifiers) |
| 53 | + }) |
| 54 | + await testSetup.renderOnce() |
| 55 | +} |
| 56 | + |
| 57 | +async function pressEscape() { |
| 58 | + await act(async () => { |
| 59 | + testSetup.mockInput.pressEscape() |
| 60 | + }) |
| 61 | + await testSetup.renderOnce() |
| 62 | +} |
| 63 | + |
| 64 | +async function wheel(x: number, y: number, direction: "up" | "down") { |
| 65 | + await act(async () => { |
| 66 | + await testSetup.mockMouse.scroll(x, y, direction) |
| 67 | + }) |
| 68 | + await testSetup.renderOnce() |
| 69 | +} |
| 70 | + |
| 71 | +describe("Ask overflow scrolling", () => { |
| 72 | + test("the tail of overflowing content is reachable (cursor follows to the bottom)", async () => { |
| 73 | + testSetup = await setupAsk(tallValue) |
| 74 | + const frame = testSetup.captureCharFrame() |
| 75 | + // The box is far smaller than 30 lines; the last line must still be visible. |
| 76 | + expect(frame).toContain("L30") |
| 77 | + expect(frame).not.toContain("L01") |
| 78 | + }) |
| 79 | + |
| 80 | + test("the head of overflowing content is reachable via cursor-mode motions (gg)", async () => { |
| 81 | + testSetup = await setupAsk(tallValue) |
| 82 | + await pressEscape() |
| 83 | + await press("g") |
| 84 | + await press("g") |
| 85 | + const frame = testSetup.captureCharFrame() |
| 86 | + expect(frame).toContain("L01") |
| 87 | + expect(frame).not.toContain("L30") |
| 88 | + }) |
| 89 | + |
| 90 | + test("the mouse wheel scrolls overflowing content", async () => { |
| 91 | + testSetup = await setupAsk(tallValue) |
| 92 | + await pressEscape() |
| 93 | + await press("g") |
| 94 | + await press("g") |
| 95 | + expect(testSetup.captureCharFrame()).toContain("L01") |
| 96 | + |
| 97 | + // Wheel down over the editor should reveal content further down. |
| 98 | + await wheel(10, 6, "down") |
| 99 | + const frame = testSetup.captureCharFrame() |
| 100 | + expect(frame).not.toContain("L01") |
| 101 | + }) |
| 102 | + |
| 103 | + test("a scrollbar thumb is shown when content overflows", async () => { |
| 104 | + testSetup = await setupAsk(tallValue) |
| 105 | + const frame = testSetup.captureCharFrame() |
| 106 | + expect(frame).toContain(THUMB) |
| 107 | + expect(frame).toContain(TRACK) |
| 108 | + }) |
| 109 | + |
| 110 | + test("no scrollbar is shown when content fits", async () => { |
| 111 | + testSetup = await setupAsk("one\ntwo\nthree", 40, 20) |
| 112 | + const frame = testSetup.captureCharFrame() |
| 113 | + expect(frame).not.toContain(THUMB) |
| 114 | + expect(frame).not.toContain(TRACK) |
| 115 | + }) |
| 116 | + |
| 117 | + test("the scrollbar thumb moves as the viewport scrolls", async () => { |
| 118 | + testSetup = await setupAsk(tallValue) |
| 119 | + |
| 120 | + // Cursor starts at the end -> thumb sits at the bottom of the track. |
| 121 | + const bottomThumbRow = thumbRow(testSetup.captureCharFrame()) |
| 122 | + |
| 123 | + await pressEscape() |
| 124 | + await press("g") |
| 125 | + await press("g") |
| 126 | + const topThumbRow = thumbRow(testSetup.captureCharFrame()) |
| 127 | + |
| 128 | + expect(topThumbRow).toBeLessThan(bottomThumbRow) |
| 129 | + }) |
| 130 | +}) |
| 131 | + |
| 132 | +describe("AskOverlay overflow scrolling", () => { |
| 133 | + test("the tail of overflowing content is reachable", async () => { |
| 134 | + testSetup = await setupOverlay(tallValue) |
| 135 | + const frame = testSetup.captureCharFrame() |
| 136 | + expect(frame).toContain("L30") |
| 137 | + expect(frame).not.toContain("L01") |
| 138 | + }) |
| 139 | + |
| 140 | + test("the head is reachable via gg and a scrollbar thumb is shown", async () => { |
| 141 | + testSetup = await setupOverlay(tallValue) |
| 142 | + expect(testSetup.captureCharFrame()).toContain(THUMB) |
| 143 | + |
| 144 | + await pressEscape() |
| 145 | + await press("g") |
| 146 | + await press("g") |
| 147 | + const frame = testSetup.captureCharFrame() |
| 148 | + expect(frame).toContain("L01") |
| 149 | + expect(frame).not.toContain("L30") |
| 150 | + }) |
| 151 | + |
| 152 | + test("no scrollbar when content fits", async () => { |
| 153 | + testSetup = await setupOverlay("one\ntwo\nthree") |
| 154 | + const frame = testSetup.captureCharFrame() |
| 155 | + expect(frame).not.toContain(THUMB) |
| 156 | + expect(frame).not.toContain(TRACK) |
| 157 | + }) |
| 158 | +}) |
| 159 | + |
| 160 | +/** Index of the first frame row that contains a thumb character. */ |
| 161 | +function thumbRow(frame: string): number { |
| 162 | + const rows = frame.split("\n") |
| 163 | + const idx = rows.findIndex((row) => row.includes(THUMB)) |
| 164 | + if (idx === -1) throw new Error("no thumb found in frame") |
| 165 | + return idx |
| 166 | +} |
0 commit comments