Add playwright tests for diffs and edit mode#927
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b170f67cf1
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| loadWorktreeEnv(); | ||
|
|
||
| const portOffset = Number(process.env.PIERRE_PORT_OFFSET ?? 0); | ||
| const e2ePort = 4175 + portOffset; |
There was a problem hiding this comment.
Choose a port that does not collide with path-store demo
In a worktree where path-store's demo server is running, this new diffs E2E port uses the same 4175 + PIERRE_PORT_OFFSET base as packages/path-store/moon.yml:25. Since both Vite servers use strictPort, diffs:test-e2e will fail to start instead of choosing another port, and the worktree port tools now also report/clean that shared port as diffsE2E; please pick an unused base and update the config/port map together.
Useful? React with 👍 / 👎.
Updated summaryAdded Playwright E2E coverage for the Since New test files
Bugs found along the way (in the demos/tests, not the library)
Verification
|
|
This is a pretty big change all at once. But shouldn't the pw tests enable us to remove the unit/integration tests that do a lot of browser emulation? I'd get Claude to review which existing jsdom tests are being replaced by these tests and remove them from the unit test suite. |
Click into an editable diff in an older browser, an embedded WebView, or the pinned CI Chromium and the caret never seeds: the surface stays unusable because nothing maps the click to a position in the editor. The selectionchange handler only read the selection through Selection.getComposedRanges, which is newly available and absent in those engines, so it bailed out on every event. Fall back to the older Blink/WebKit ShadowRoot.getSelection() when getComposedRanges is missing, normalizing its first range to a StaticRange so callers see the same shape. Only bail when neither API yields a range.
The jsdom unit suite cannot exercise shadow-DOM rendering or the contentEditable edit surface, so those behaviors need a real browser to test. Stand up the harness before any specs: a Vite fixture server serves the built dist and Playwright drives real Chromium, mirroring the trees E2E setup. This adds the moon `test-e2e` / `test-e2e-server` tasks, the Playwright and Vite dev dependencies, the Playwright and Vite configs, the Chromium binary preflight, shared browser-global typings, and the fixtures index page. The worktree helper reserves E2E port 4175 so the fixture server gets a stable, offset port and appears in `wt ps`.
Add browser E2E specs for the read-only diff surface: unified and split diff rendering, added/deleted/renamed file states, theming, inline markers and their hover popups, annotations, gutter line selection, and the floating selection action. Each spec drives real Chromium against a dedicated HTML fixture so the shadow-DOM output and pointer interactions are exercised as a user sees them.
Add browser E2E specs for the contentEditable edit surface: typing and committing edits, whole-file rewrites, multi-caret editing, find and replace, and conflict resolution (accepting current, incoming, or both). These drive real Chromium so caret placement, key handling, and the editor's shadow-DOM updates are verified end to end.
Add `diffs:test-e2e` to the `moon ci` target list so the new diffs Playwright suite runs on every CI build alongside the existing `trees:test-e2e` job.
Add browser E2E tests for diffs & edit mode
Adds a Playwright E2E suite for
@pierre/diffs, covering behavior the jsdomunit tests can't reach: shadow-DOM rendering and real
contentEditableediting.Mirrors the existing
treesE2E setup — a Vite server serves the builtdistand Playwright drives real Chromium against static HTML fixtures.
Coverage
onChange, undo/redo, additions-editable vsdeletions-read-only, full-file rewrite
bounds), line selection + gutter utility, annotations,
theme switching (selection-stable), selection actions (in-bounds)
Notable fix
ShadowRoot.getSelection()whenSelection.getComposedRangesis unavailable (older browsers, WebViews, andthe pinned CI Chromium), so a click reliably seeds the caret and typing works.
Infra
diffs:test-e2e+diffs:test-e2e-servermoon tasks;diffs:test-e2ewiredinto CI
4175(scripts/wt.ts,scripts/README.md)test/e2e/e2e-globals.d.tsfor fixturewindowglobalsRunning the tests
Run the full suite:
moon run diffs:test-e2eView the fixtures in your own browser — start the server and open the index:
moon run diffs:test-e2e-serverThe index page lists every fixture with a description, its ready-flag, and the
spec that drives it.