test: run the refresh modules in a real browser

[cardmagic]

Roadmap milestone 5, the browser-coverage half.

Why this first

Four defects reached production this session: the batch endpoint's Accept header, notifications arriving in separate tasks, unconditional aborts, and same-revision requests overwriting each other. Every one passed the jsdom suite. Each was fixed by first repairing the harness, not the module: jsdom did not send the header a browser sends, did not deliver across task boundaries, and ignored abort signals.

jsdom also cannot model the thing these modules exist to trigger: Turbo applying a stream to a live document.

What this adds

A Playwright suite serving the real browser modules alongside a real @hotwired/turbo build, driving headless Chromium against a local HTTP server that answers component requests.

Five tests, all against component_refresh.js, which previously had zero tests despite driving every individual morph refresh:

• a morph refresh actually replaces frame content and advances the revision
• a stale response cannot overwrite a newer frame
• the refresh element removes itself once applied
• a response without the target frame reports missing_frame
• morph preserves data-turbo-permanent, which is only observable with real Turbo

That last one is the point of the exercise: it asserts a property the jsdom suite is structurally incapable of checking.

Layering

npm test keeps the fast jsdom suite for logic; npm run test:browser runs the slower browser suite for integration with Turbo. CI runs both in the existing javascript job, installing Chromium with --with-deps.

Roadmap

The "Browser module coverage" gap is removed, since every module now has tests. Milestone 4 is narrowed to Turbo append intents, noting reconnect scenarios are still not covered in a browser. Per #15.

Honest scope

This covers the refresh modules against real Turbo. It does not yet cover reconnect convergence, a real Action Cable connection, or the batch and payload modules in-browser; those remain on the milestone. This is the harness plus the highest-value gap, not the whole milestone.

bundle exec rake      # 312 runs, 0 failures
npm test              # 26 pass
npm run test:browser  # 5 pass

[greptile-apps]

Greptile Summary

Adds real-browser integration coverage for component refresh behavior using Playwright, Chromium, and Turbo.

• Introduces a loopback HTTP test server and reusable browser helpers.
• Tests morph application, stale-response handling, cleanup, missing-frame errors, and permanent-element preservation.
• Runs the browser suite in the existing JavaScript CI job.
• Updates development dependencies, changelog, and roadmap documentation.

Confidence Score: 5/5

The PR appears safe to merge with no concrete blocking or independently actionable non-blocking issues identified.

The browser harness is isolated to loopback, current test inputs are controlled fixtures, dependency installation remains lockfile-backed, and the new CI path consistently exercises the added suite.

Important Files Changed

Filename	Overview
test/browser/browser_test_helper.mjs	Adds a focused loopback server and Playwright page setup for exercising the shipped browser modules against real Turbo.
test/browser/component_refresh.test.mjs	Adds five browser tests covering the primary component-refresh success, ordering, cleanup, error, and morph-preservation behaviors.
.github/workflows/ci.yml	Installs Chromium and executes the browser suite after the existing locked npm installation and JavaScript tests.
package.json	Adds the browser-test script and the Turbo and Playwright development dependencies required by the new harness.
package-lock.json	Locks the newly introduced browser-testing dependencies and their transitive packages.

_{Reviews (1): Last reviewed commit: "test: run the refresh modules in a real ..." | Re-trigger Greptile}