test(devtools): make e2e behaviour-driven and leaner - #1045
Merged
Conversation
The host API's open/close/navigate wrote to ctx.panel.store.value.open, treating the dock panel store as a Vue ref. Vite DevTools exposes it as a plain object with an open boolean, so the panel never actually opened or closed through the public __NUXT_DEVTOOLS_HOST__.devtools API.
Drive the DevTools panel through the public host API (devtools.open / devtools.navigate) instead of poking Vite DevTools' internal panel and dock state, and assert what the user sees rather than the dock registry's entry shapes. The old shape assertions (category/frameId/subTabs/visibility) were what kept breaking CI whenever the dock plumbing was refactored. - Fold iframe/nuxt-group/playground-empty specs into a behavioural devtools spec plus a dedicated spa (ssr:false) regression spec. - Trim data-inspector/code-server to their observable contracts. - Scope playground-independent dev specs to the empty playground so they stop running four times over, and limit built (preview) mode to the two distinct render targets (empty + spa).
Deploying nuxt-devtools with
|
| Latest commit: |
78c26fb
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d55dfa27.nuxt-devtools.pages.dev |
| Branch Preview URL: | https://early-knives-dig.nuxt-devtools.pages.dev |
Contributor
📝 WalkthroughWalkthroughThe change updates DevTools panel state access and migrates E2E fixtures to public host APIs. Playwright now separates built and development playground modes, adjusts retries, and builds only selected playgrounds. E2E coverage is revised for Code Server, Data Inspector, DevTools, SPA rendering, tab navigation, and built-in components, while several overlapping specs are removed or narrowed. Estimated code review effort: 4 (Complex) | ~45 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@tests/e2e/specs/code-server.spec.ts`:
- Around line 20-24: Update the Code Server opening step in the e2e test to
select the visible dock entry through the page UI rather than calling
__VITE_DEVTOOLS_CLIENT_CONTEXT__.docks.switchEntry via page.evaluate. Use the
dock entry’s user-facing selector or label and preserve the existing
CODE_SERVER_DOCK_ID target.
In `@tests/e2e/specs/playground-loads.spec.ts`:
- Around line 3-5: Update the coverage comment above the playground boot/render
sanity check to reflect the configured project matrix: it runs for every project
in dev, while built mode runs only for empty and spa; do not imply built tab-seo
coverage.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: f40fdf0f-a59f-4f95-8815-ad09087be0bf
📒 Files selected for processing (13)
package.jsonpackages/devtools/src/runtime/plugins/view/client.tstests/e2e/fixtures/devtools.tstests/e2e/playwright.config.tstests/e2e/specs/code-server.spec.tstests/e2e/specs/data-inspector.spec.tstests/e2e/specs/devtools.spec.tstests/e2e/specs/iframe.spec.tstests/e2e/specs/nuxt-group.spec.tstests/e2e/specs/playground-empty.spec.tstests/e2e/specs/playground-loads.spec.tstests/e2e/specs/spa.spec.tstests/e2e/specs/tabs.spec.ts
💤 Files with no reviewable changes (3)
- tests/e2e/specs/nuxt-group.spec.ts
- tests/e2e/specs/playground-empty.spec.ts
- tests/e2e/specs/iframe.spec.ts
Comment on lines
+20
to
24
| // Open the Code Server member the way a user would. | ||
| await page.evaluate(async (id) => { | ||
| const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__ | ||
| await ctx.docks.switchEntry(id) | ||
| }, CODE_SERVER_DOCK_ID) |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Open Code Server through the dock UI, not its internal registry.
This directly drives __VITE_DEVTOOLS_CLIENT_CONTEXT__.docks.switchEntry, so the test can pass while the user cannot select the Code Server dock. Select the visible dock entry instead.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@tests/e2e/specs/code-server.spec.ts` around lines 20 - 24, Update the Code
Server opening step in the e2e test to select the visible dock entry through the
page UI rather than calling __VITE_DEVTOOLS_CLIENT_CONTEXT__.docks.switchEntry
via page.evaluate. Use the dock entry’s user-facing selector or label and
preserve the existing CODE_SERVER_DOCK_ID target.
Comment on lines
+3
to
+5
| // Runs for every project (both dev and built) — a sanity check that the | ||
| // playground itself boots and renders. In built mode this is the only thing we | ||
| // verify, since Nuxt DevTools only attaches in dev. |
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Align the coverage comment with the configured project matrix.
The test runs for all playgrounds in dev, but built mode is limited to empty and spa; removing the tab-seo skip does not add tab-seo:built coverage. Update the comment to describe the actual configured scope.
Proposed wording
-// Runs for every project (both dev and built) — a sanity check that the
-// playground itself boots and renders. In built mode this is the only thing we
-// verify, since Nuxt DevTools only attaches in dev.
+// Runs for every configured project: all playgrounds in dev, and `empty`/`spa`
+// in built mode. In built mode this is the only thing we verify, since Nuxt
+// DevTools only attaches in dev.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| // Runs for every project (both dev and built) — a sanity check that the | |
| // playground itself boots and renders. In built mode this is the only thing we | |
| // verify, since Nuxt DevTools only attaches in dev. | |
| // Runs for every configured project: all playgrounds in dev, and `empty`/`spa` | |
| // in built mode. In built mode this is the only thing we verify, since Nuxt | |
| // DevTools only attaches in dev. |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@tests/e2e/specs/playground-loads.spec.ts` around lines 3 - 5, Update the
coverage comment above the playground boot/render sanity check to reflect the
configured project matrix: it runs for every project in dev, while built mode
runs only for empty and spa; do not imply built tab-seo coverage.
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
2 participants
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.
What & why
The Playwright e2e suite asserted Vite DevTools' internal dock-registry entry shapes (
type/category/groupId/frameId/subTabs/visibility) and drove the panel by mutating that internal state directly. Those assertions are what kept breaking thee2eworkflow whenever the dock plumbing was refactored (most recently thevisibility: 'false'assertion). The suite also ran every playground-independent test once per playground, and produced a full production build of four playgrounds just to check a page renders.This reworks the suite to test high-level behaviour, makes it more robust, and makes it leaner.
Behaviour-driven
__NUXT_DEVTOOLS_HOST__.devtools.open()/.navigate()), the same surface the keyboard shortcut uses — no reaching into Vite DevTools' panel/dock internals.iframe/nuxt-group/playground-emptyspecs are folded into a behaviouraldevtoolsspec plus a dedicatedspa(ssr:false) dock-regression spec.Fixing the public API
Driving the public API surfaced a real bug:
devtools.open/close/navigatewrote toctx.panel.store.value.open, treating the dock panel store as a Vue ref, but Vite DevTools exposes it as a plain object — so the panel never opened through the public API. Fixed in a separate commit.Leaner
empty) instead of four times over.empty+spa); the prebuild no longer produces four production builds.Local runs: dev suite 20 passing, built suite 2 passing, plus lint / typecheck / unit all green.
This PR was created with the help of an agent.