@lovett/ui 0.0.11 → 0.2.0

package/src/thread/__tests__/thread-scroll-ownership.test.tsx

@@ -0,0 +1,88 @@
+/**
+ * The thread OWNS its scroll — the permanent fix for "the entire viewport is
+ * scrolling down" (owner, 2026-09-07).
+ *
+ * Three things have to be true at once, and they fail independently:
+ *   1. the section has a height CEILING that does not depend on the host
+ *      (`max-block-size` with a viewport fallback) — otherwise an unbounded
+ *      host lets it grow to content and scrolls the whole thread;
+ *   2. the body is the scroll region and the ROOT COMPOSER is outside it,
+ *      after it — otherwise the composer scrolls away on a long thread;
+ *   3. the rich composer's editor has a ceiling too — a contenteditable with
+ *      only a floor grows with every line typed.
+ *
+ * jsdom does no layout, so (1) and (3) are asserted against the stylesheet
+ * text — the same technique `token-shape.test.ts` uses — and (2) against the
+ * DOM order.
+ */
+
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import { Thread } from '../thread'
+import { THREAD_FIXTURE, FIXTURE_NOW } from './fixtures/thread-fixture'
+
+// vitest runs each package from its own directory (also under `pnpm -r`), so
+// the stylesheet is cwd-relative — same approach as token-shape.test.ts.
+const css = readFileSync(resolve(process.cwd(), 'src/styles.css'), 'utf8')
+
+function block(selector: string): string {
+  // Anchored at LINE START: a bare indexOf matched the `.my-drawer .ds-thread { … }`
+  // example inside an earlier comment and read that as the rule.
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const match = new RegExp(`^${escaped} \\{`, 'm').exec(css)
+  if (match === null) throw new Error(`no rule for ${selector}`)
+  const start = match.index
+  return css.slice(start, css.indexOf('\n}', start))
+}
+
+describe('thread scroll ownership', () => {
+  it('(1) .ds-thread has a viewport-relative height ceiling with a host override', () => {
+    const rule = block('.ds-thread')
+    expect(rule).toMatch(/--thread-max-block-size:\s*100dvh/)
+    expect(rule).toMatch(/max-block-size:\s*var\(--thread-max-block-size\)/)
+  })
+
+  it('(2) the root composer sits AFTER the scroll region, not inside it', () => {
+    render(
+      <Thread comments={THREAD_FIXTURE} now={FIXTURE_NOW} onSubmit={() => undefined} />,
+    )
+    const section = screen.getByRole('region', { name: 'Comments' })
+    const scroller = section.querySelector('.ds-thread__scroll')
+    expect(scroller).not.toBeNull()
+    expect(scroller?.className).toMatch(/\boverflow-y-auto\b/)
+    expect(scroller?.className).toMatch(/\bmin-h-0\b/)
+    const composer = screen.getByRole('textbox', { name: /comment/i })
+    // Outside the scroller…
+    expect(scroller?.contains(composer)).toBe(false)
+    // …and after it in document order, so it is pinned below, never above.
+    expect(
+      scroller!.compareDocumentPosition(composer) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy()
+  })
+
+  it('(3a) both scroll regions CONTAIN their overscroll', () => {
+    // Ceilings decide where a scrollbar appears; containment decides whether a
+    // gesture that reaches the end of one leaks into the page behind it. The
+    // Enter-key path is handled in JS (handleScrollToSelection); this is the
+    // wheel/touch path, and both are needed.
+    expect(block('.ds-thread-rich-composer .ProseMirror')).toMatch(
+      /overscroll-behavior:\s*contain/,
+    )
+    render(
+      <Thread comments={THREAD_FIXTURE} now={FIXTURE_NOW} onSubmit={() => undefined} />,
+    )
+    const scroller = screen
+      .getByRole('region', { name: 'Comments' })
+      .querySelector('.ds-thread__scroll')
+    expect(scroller?.className).toMatch(/\boverscroll-contain\b/)
+  })
+
+  it('(3) the rich editor has a ceiling and scrolls internally past it', () => {
+    const rule = block('.ds-thread-rich-composer .ProseMirror')
+    expect(rule).toMatch(/max-block-size:\s*calc\(var\(--composer-max-rows\)/)
+    expect(block('.ds-thread-rich-composer')).toMatch(/--composer-max-rows:\s*12/)
+    expect(rule).toMatch(/overflow-y:\s*auto/)
+  })
+})