Turns the manual QA ask ("verify DiffView + CodeBlock horizontal-scroll
on-device with a populated diff") into two automated layers:
1. Unit (deterministic, runs in `npm test` now): extracted the shared
ScrollView props into src/lib/scroll-config.ts (WIDE_CONTENT_SCROLL_CONFIG)
so DiffView.tsx and CodeBlock.tsx spread the SAME plain object their tests
assert on — no react-native-renderer needed. Added a source-scan
regression test (wide-content-scroll.regression.test.ts) that fails if
either component loses its ScrollView wiring or reintroduces
numberOfLines truncation.
2. E2E (Maestro): .maestro/flows/diff-scroll.yaml opens a session with a
pre-seeded wide edit-diff tool call and a wide fenced code block, then
swipes each horizontal ScrollView left and asserts the off-screen marker
text becomes visible. mock-opencode-server.ts gained a --seed-diff mode
that serves this session via GET /session/:id/message (pre-existing
history), not SSE — issue #90 (a separate SSE-render bug) is being fixed
independently, and this flow must not depend on it landing first. Wired
the new flow + port 4100 into run-e2e-flows.sh and activation-e2e.yml.
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
27 lines
1.3 KiB
TypeScript
27 lines
1.3 KiB
TypeScript
import { test } from "node:test"
|
|
import assert from "node:assert/strict"
|
|
import { WIDE_CONTENT_SCROLL_CONFIG } from "./scroll-config.ts"
|
|
|
|
// GitHub issue #21: DiffView + CodeBlock must render wide content in a
|
|
// horizontally-scrollable container (not wrapped, not truncated). Both
|
|
// components spread WIDE_CONTENT_SCROLL_CONFIG onto their ScrollView (see
|
|
// src/components/chat/DiffView.tsx and src/components/markdown/CodeBlock.tsx)
|
|
// so asserting on this object here is asserting on the actual runtime props,
|
|
// not a parallel copy that can drift out of sync.
|
|
|
|
test("wide-content scroll config enables horizontal scrolling", () => {
|
|
assert.equal(WIDE_CONTENT_SCROLL_CONFIG.horizontal, true)
|
|
})
|
|
|
|
test("wide-content scroll config shows the horizontal scroll indicator", () => {
|
|
// Regression guard: a container that scrolls but hides its indicator is
|
|
// easy to mistake for content that simply doesn't overflow. Keep the
|
|
// indicator visible so on-device QA (and screenshots) can tell scrollable
|
|
// content apart from clipped/truncated content.
|
|
assert.equal(WIDE_CONTENT_SCROLL_CONFIG.showsHorizontalScrollIndicator, true)
|
|
})
|
|
|
|
test("wide-content scroll config has no unexpected keys", () => {
|
|
assert.deepEqual(Object.keys(WIDE_CONTENT_SCROLL_CONFIG).sort(), ["horizontal", "showsHorizontalScrollIndicator"])
|
|
})
|