|
| 1 | +import { describe, expect, it } from 'vitest' |
| 2 | +import { getSelectionPopoverPosition } from './useSelectionPopoverDismiss' |
| 3 | + |
| 4 | +// Workspace surfaces size the menu 140x32 and float it 10px off the selection; |
| 5 | +// the chat toolbar uses its own numbers (see components/workspace/surfaces/textSelection.ts |
| 6 | +// and components/chat/MessageList.tsx). The placement rule itself is shared. |
| 7 | +const MENU = { menuWidth: 140, menuHeight: 32, offset: 10 } |
| 8 | + |
| 9 | +function rect(left: number, top: number, right: number, bottom: number) { |
| 10 | + return { |
| 11 | + left, |
| 12 | + top, |
| 13 | + right, |
| 14 | + bottom, |
| 15 | + width: right - left, |
| 16 | + height: bottom - top, |
| 17 | + x: left, |
| 18 | + y: top, |
| 19 | + toJSON: () => ({}), |
| 20 | + } |
| 21 | +} |
| 22 | + |
| 23 | +function renderLines(lines: string[]) { |
| 24 | + const root = document.createElement('div') |
| 25 | + for (const line of lines) { |
| 26 | + const row = document.createElement('div') |
| 27 | + row.textContent = line |
| 28 | + root.appendChild(row) |
| 29 | + } |
| 30 | + document.body.appendChild(root) |
| 31 | + return root |
| 32 | +} |
| 33 | + |
| 34 | +function textNodeOf(row: Element) { |
| 35 | + const node = row.firstChild |
| 36 | + if (!node) throw new Error('row has no text node') |
| 37 | + return node |
| 38 | +} |
| 39 | + |
| 40 | +/** |
| 41 | + * A two-line selection whose last line ends at x=200, leaving the whole right |
| 42 | + * half of the 1024px viewport free, and whose first line starts at y=100. |
| 43 | + */ |
| 44 | +function renderTwoLineSelection() { |
| 45 | + const root = renderLines(['first selected line', 'second selected line']) |
| 46 | + Object.assign(root, { getBoundingClientRect: () => rect(100, 24, 520, 420) }) |
| 47 | + |
| 48 | + const first = textNodeOf(root.children[0]!) |
| 49 | + const last = textNodeOf(root.children[1]!) |
| 50 | + const range = document.createRange() |
| 51 | + range.setStart(first, 0) |
| 52 | + range.setEnd(last, last.textContent!.length) |
| 53 | + Object.assign(range, { |
| 54 | + // Two client rects is how the browser reports a selection it wrapped |
| 55 | + // across two lines. |
| 56 | + getClientRects: () => [rect(120, 100, 500, 118), rect(120, 122, 200, 140)], |
| 57 | + getBoundingClientRect: () => rect(120, 100, 500, 140), |
| 58 | + }) |
| 59 | + |
| 60 | + return { root, range } |
| 61 | +} |
| 62 | + |
| 63 | +function positionFor(root: HTMLElement, range: Range, preferAbove?: boolean) { |
| 64 | + return getSelectionPopoverPosition(range, root, { |
| 65 | + ...MENU, |
| 66 | + selectionFocus: { node: null, offset: 0 }, |
| 67 | + ...(preferAbove === undefined ? {} : { preferAbove }), |
| 68 | + }) |
| 69 | +} |
| 70 | + |
| 71 | +describe('getSelectionPopoverPosition', () => { |
| 72 | + it('places a multi-line selection menu beside the selection by default', () => { |
| 73 | + const { root, range } = renderTwoLineSelection() |
| 74 | + |
| 75 | + // The default is the upstream rule: a multi-line range goes to the right of |
| 76 | + // where it ends, i.e. the end of the last selected line (200 + 10) centred |
| 77 | + // vertically on that line (122 + 9 - 16). Callers opt out per user setting. |
| 78 | + expect(positionFor(root, range)).toEqual({ x: 210, y: 115 }) |
| 79 | + }) |
| 80 | + |
| 81 | + it('places a multi-line selection menu above the selection when asked to', () => { |
| 82 | + const { root, range } = renderTwoLineSelection() |
| 83 | + |
| 84 | + // The right-side slot sits in the reader's path, so this mode floats the |
| 85 | + // menu above the whole selection instead: centred on it (120..500) and |
| 86 | + // clear of its first line (top 100 - 32 - 10). |
| 87 | + expect(positionFor(root, range, true)).toEqual({ x: 240, y: 58 }) |
| 88 | + }) |
| 89 | + |
| 90 | + it('keeps a single-line selection menu above the selection in either mode', () => { |
| 91 | + const root = renderLines(['one line only']) |
| 92 | + Object.assign(root, { getBoundingClientRect: () => rect(100, 24, 520, 420) }) |
| 93 | + |
| 94 | + const line = textNodeOf(root.children[0]!) |
| 95 | + const range = document.createRange() |
| 96 | + range.setStart(line, 0) |
| 97 | + range.setEnd(line, line.textContent!.length) |
| 98 | + Object.assign(range, { |
| 99 | + getClientRects: () => [rect(120, 100, 240, 118)], |
| 100 | + getBoundingClientRect: () => rect(120, 100, 240, 118), |
| 101 | + }) |
| 102 | + |
| 103 | + expect(positionFor(root, range)).toEqual({ x: 110, y: 58 }) |
| 104 | + expect(positionFor(root, range, true)).toEqual({ x: 110, y: 58 }) |
| 105 | + }) |
| 106 | +}) |
0 commit comments