test(ui): computed-style smoke test — assert rendered DOM layout catches #2517-class regressions (#2519)#2532
Merged
alexey-pelykh merged 1 commit intomainfrom Apr 24, 2026
Conversation
…hes #2517-class regressions (#2519) Extends app.smoke.test.ts (#2495/#2496) with a browser-mode smoke suite that mounts <remoteclaw-app> into a desktop viewport (1280x720 via page.viewport() from vitest/browser), waits for layout (updateComplete + double rAF), and asserts getBoundingClientRect dimensions on .sidebar / .topbar-status / .nav-section / section.chat — catching the #2517 regression class where production class renders but structural wrappers are missing, so the sidebar lands in the wrong grid cell and nav content escapes the visible area. Scope: - ui/src/ui/app.computed-style.test.ts — 4 tests, ~2.1s runtime, uses mountApp helper + explicit ../styles.css import (matches navigation.browser.test.ts pattern) - .github/workflows/ci.yml — new test-ui-smoke job, installs Chromium via "pnpm --dir ui exec playwright install --with-deps chromium", runs pnpm test:ui:smoke; wired into CI aggregator needs - package.json — root test:ui:smoke script runs the two smoke suites - CLAUDE.md — new "Browser-mode smoke tests" subsection under § Testing documenting the lane and its scope discipline AC #4 verified empirically: removing the .shell-nav / .sidebar-shell / .sidebar-nav wrapper hierarchy makes the sidebar-fits-viewport test fail ("expected 52 to be greater than 300") and the nav-section header position test fail ("expected 90.31 to be less than or equal to 53.31"). The test-ui-smoke CI lane is scoped to the two sync-regression suites only — the broader pnpm test:ui has unrelated pre-existing failures (cron.test.ts / sessions.test.ts / etc.) that are out of scope. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ui/src/ui/app.computed-style.test.ts— browser-mode smoke suite that mounts<remoteclaw-app>at a desktop viewport (1280×720), waits for layout, and assertsgetBoundingClientRecton.sidebar/.topbar-status/.nav-section/section.chat. Catches the fix(ui): restore shell-nav + sidebar-shell wrappers — sidebar layout broken after #2501 migration #2517 regression class (production class renders but structural wrappers are missing → sidebar lands in the wrong grid cell → nav content escapes visible area).test-ui-smokeCI job (scoped to the two sync-regression smoke suites) +pnpm test:ui:smokeroot script + CLAUDE.md§ Testing → Browser-mode smoke tests.app.smoke.test.ts(test(ui): add smoke test instantiating RemoteClawApp and asserting required host-interface fields #2495 / audit(ui): missing field initializers across PollingHost/ChatHost/SettingsHost/ScrollHost/CompactionHost on RemoteClawApp #2496): the class-instance suite proves fields are initialized; the computed-style suite proves they end up positioned correctly.Closes #2519.
Acceptance criteria
ui/src/ui/app.computed-style.test.tspnpm test:ui:smokescript (the AC's "or a dedicatedpnpm test:browser" alternative — root-level script, CI job uses same).shell-nav/.sidebar-shell/.sidebar-navwrapper hierarchy producesexpected 52 to be greater than 300(sidebar) ANDexpected 90.31 to be less than or equal to 53.31(nav-section header position). Double-barrel regression catch.test-ui-smokejob, installs Chromium viapnpm --dir ui exec playwright install --with-deps chromium, wired intoCIaggregatorneeds§ Testing → Browser-mode smoke testssubsection + CI section entryDesign notes
@media max-width: 1100pxand hides the sidebar. The suite forcespage.viewport(1280, 720)inbeforeAllviavitest/browser.../styles.cssimport. Matchesnavigation.browser.test.ts. Without it, CSS grid doesn't apply and assertions are meaningless.mountApphelper rather than the issue's literaldocument.createElement+innerHTML— consistent withchat-markdown.browser.test.ts/navigation.browser.test.tsand benefits fromregisterAppMountHookscleanup.Scope discipline
The
test-ui-smokeCI lane runs onlyapp.smoke.test.ts+app.computed-style.test.ts. The broaderpnpm test:uihas unrelated pre-existing failures (cron.test.ts,sessions.test.ts,verbose=fullselector tests) that are out of scope for #2519 — documented in CLAUDE.md.Test plan
pnpm test:ui:smoke→ 2 suites, 12 tests, pass in ~2.6spnpm check→ format + typecheck + lint + CSS class drift audit passtest-ui-smokejob green on this PRCIaggregator green on this PR🤖 Generated with Claude Code