test(web): settings tests run in a real browser

[juliusmarminge]

Part of moving web tests that render React onto the Vitest browser project (#20797), so they run in Chromium with the React Compiler on. This PR covers the components/settings group. It removes every react-test-renderer and renderToStaticMarkup use there and drops tests that only checked markup.

Converted tests mount real components with react-dom/client and drive them with userEvent (typing, keyboard, clicks) or real DOM pointer/input events. Mocks are built from the real module (vi.mock(import(...), async (original) => ({ ...(await original()), ... }))) and replace only data/RPC boundaries: atom commands, the environment and project lists, session grants, and the local API. The old tests stubbed real UI primitives (Input, Button, Popover, Tooltip, Menu, Select, settingsLayout); those stubs are gone.

Per file (paths under apps/web/src/components)

File	Result	Why
settings/colorPickers.test.tsx	converted → colorPickers.browser.test.tsx	Opens the real popover and drives the hue slider, saturation/brightness ranges and plane with keyboard and pointer events. Covers rAF batching, flush on release/cancel/unmount, debounce, and the grey-echo hue fix. The old version stubbed rAF, Popover and Tooltip.
settings/SecretInput.test.tsx	converted → SecretInput.browser.test.tsx	Types into the real password input. A configured secret survives an empty edit, a replacement commits on blur/Enter, and a draft survives a settings refresh.
settings/TelemetryExportSettings.test.tsx	converted → TelemetryExportSettings.browser.test.tsx	Types into the real fields and clicks Save. Once the user restores a field, it is not resent over another client's change. The test also checks the saved message.
settings/useProjectScriptSettings.test.tsx	converted → useProjectScriptSettings.browser.test.tsx	Hook behaviour (save and remove action shortcuts) now runs in the browser. Mocks spread from the real modules.
settings/settingsLayout.test.tsx	partly deleted, partly converted → settingsLayout.browser.test.tsx	Deleted the SettingsUnavailableGroup case, which only asserted class names. The scrollToSettingsTarget cases used to stub document/window with fakes. They now run against real elements: header scroll, focus, the pulse restarting and clearing on blur, reduced motion, and a missing target.
settings/ProjectIconPickerDialog.test.tsx	deleted static-markup test, replaced → ProjectIconPickerDialog.browser.test.tsx	The old test only checked markup order and attributes. The new one searches for and picks an icon, then saves it in the project's derived color. It also checks that a monogram with invalid letters can't be saved and a valid one can.
settings/ProjectSettingsPanel.test.tsx	converted → ProjectSettingsPanel.browser.test.tsx	All 10 permission cases run against the real panel inside a router and the app atom registry. Session grants flow through real atoms. Rename uses fill + Enter, removal uses real clicks, and a grant revoked mid-edit is covered. The old version replaced ~15 UI modules with string tags and called onBlur props directly.
settings/ProviderInstanceCard.test.ts	kept in node, rendering moved → ProviderInstanceCard.browser.test.tsx	The pure helpers (deriveProviderModelsForDisplay, the env-var helpers) stay in node. The two renderToStaticMarkup cases became browser tests: the email starts hidden, a click reveals it and another hides it, and a failed-probe message shows in both list and editor mode.
settings/IntegrationsSettings.test.tsx	converted / moved / partly deleted	The "no browser-profile scan on entering or revisiting settings" check is now IntegrationsSettings.browser.test.tsx and mounts the real panel. The device-setup guidance cases were pure logic, so they moved to node as device/DeviceSetup.test.ts. Deleted the "devices section after browser section" case, which only asserted markup order.
settings/settingsScopeNavigation.test.ts	kept	Pure router/search logic; no React rendering.

Totals over the 10 files: 1 deleted and replaced with a behaviour test (ProjectIconPickerDialog), 7 converted (settingsLayout and IntegrationsSettings also dropped their markup-only cases), 2 kept in node (ProviderInstanceCard.test.ts trimmed, settingsScopeNavigation.test.ts untouched). One new node file, device/DeviceSetup.test.ts, holds the logic tests moved out of IntegrationsSettings.

Notes

• No app code changed. No bugs found.
• The draft store is a boundary that can't be mocked from its original module: vi.mock(import("~/composerDraftStore"), …original…) hangs the browser test import (likely an import cycle). The panel test uses the real store and overrides one action with setState.
• Clicks inside ProjectIconPickerDialog use DOM .click() because browser tests load no app CSS, so the modal's inert backdrop covers the unstyled popup for Playwright pointer clicks.
• Local runs on a shared machine can fail with Port 63315 is already in use when another vitest browser run holds Vitest's default browser port. --api.port on the CLI doesn't reach the browser project's port. This doesn't affect CI.

Verified: vp test run --project browser on the 9 settings browser files (34 tests; colorPickers run 3×), vp test run --project unit on components/settings + components/device (597 tests), scoped vp lint, and the apps/web typecheck.

🤖 Generated with Claude Code

[macroscopeapp]

Approvability

Verdict: Approved at 7c5d603

Macroscope's review found this PR approvable — This PR only migrates settings coverage to real-browser test harnesses and removes obsolete renderer-based tests; all changed files are confined to ignored test paths. It does not change product behavior, defaults, production configuration, or static-analysis policy.

Notes:

• No code objects were reviewed. Approvability was decided on eligibility alone.

^{You can add or adjust custom eligibility rules. Learn more.}