@lovett/ui 0.0.11 → 0.2.0

package/src/thread/__tests__/scroll-caret.test.ts

@@ -0,0 +1,58 @@
+/**
+ * `caretScrollDelta` — the arithmetic behind `handleScrollToSelection`.
+ *
+ * Why this is a unit test and not a rendered one: jsdom performs no layout, so
+ * `coordsAtPos` and `getBoundingClientRect` both return zeros there. A test
+ * that rendered the editor and asserted "the page did not scroll" would pass
+ * in jsdom no matter what this function returned — it would prove nothing.
+ * The decision is pure arithmetic, so that is what is pinned; the wiring
+ * (returning `true` so ProseMirror's ancestor-walking default never runs) is
+ * pinned by the CSS/DOM test beside it and, ultimately, by the owner's pass.
+ */
+
+import { describe, expect, it } from 'vitest'
+import { caretScrollDelta } from '../scroll-caret'
+
+// A 200px-tall editor with a 20px line height.
+const BOX = { top: 100, bottom: 300 }
+const PAD = 20
+
+describe('caretScrollDelta', () => {
+  it('is 0 when the caret sits comfortably inside', () => {
+    expect(caretScrollDelta(BOX, { top: 150, bottom: 170 }, PAD)).toBe(0)
+  })
+
+  it('is 0 exactly at the slack boundaries', () => {
+    expect(caretScrollDelta(BOX, { top: 120, bottom: 140 }, PAD)).toBe(0)
+    expect(caretScrollDelta(BOX, { top: 260, bottom: 280 }, PAD)).toBe(0)
+  })
+
+  it('is NEGATIVE when the caret is above — scrolls up by the shortfall', () => {
+    // 10px above the padded top edge (120).
+    expect(caretScrollDelta(BOX, { top: 110, bottom: 130 }, PAD)).toBe(-10)
+  })
+
+  it('is POSITIVE when the caret is below — the Enter case', () => {
+    // A new line pushes the caret 15px past the padded bottom edge (280).
+    expect(caretScrollDelta(BOX, { top: 275, bottom: 295 }, PAD)).toBe(15)
+  })
+
+  it('moves by the SMALLEST amount that satisfies the slack, not to centre', () => {
+    // Far below: the delta brings the caret to the padded edge and stops.
+    const delta = caretScrollDelta(BOX, { top: 480, bottom: 500 }, PAD)
+    expect(delta).toBe(220)
+    // After scrolling by `delta`, the caret's bottom lands exactly on 280.
+    expect(500 - delta).toBe(BOX.bottom - PAD)
+  })
+
+  it('treats a zero pad as "flush is acceptable"', () => {
+    expect(caretScrollDelta(BOX, { top: 280, bottom: 300 }, 0)).toBe(0)
+    expect(caretScrollDelta(BOX, { top: 281, bottom: 301 }, 0)).toBe(1)
+  })
+
+  it('prefers the TOP correction when the caret is taller than the box', () => {
+    // A selection spanning more than the viewport: showing its start is the
+    // useful behaviour, and the top branch runs first.
+    expect(caretScrollDelta(BOX, { top: 50, bottom: 400 }, PAD)).toBe(-70)
+  })
+})