test(query-devtools/DevtoolsPanelComponent): add tests for rendering without throwing, panel-only mode, and 'onClose' prop#10680
Merged
Conversation
Contributor
📝 WalkthroughWalkthroughAdds a Vitest test file for DevtoolsPanelComponent that mocks modules, stubs browser globals and ResizeObserver, sets up/tears down a QueryClient per test, and includes render, panel-only absence, and onClose behavior tests. ChangesDevtoolsPanelComponent Test Suite
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
|
View your CI Pipeline Execution ↗ for commit 537f542
☁️ Nx Cloud last updated this comment at |
Contributor
🚀 Changeset Version PreviewNo changeset entries found. Merging this PR will not cause a version bump for any packages. |
Contributor
size-limit report 📦
|
sukvvon
force-pushed
the
test/query-devtools-devtools-panel-component
branch
from
537f542 to
bb91f7f
Compare
sukvvon
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/query-devtools/src/__tests__/DevtoolsPanelComponent.test.tsx (1)
71-75: 💤 Low valueOptional: Remove redundant storage clear.
Line 73 manually clears
storage, but this is unnecessary because:
- Line 72 already unstubs all globals (removing the localStorage stub)
- The next
beforeEachcreates a freshstorageobject- The manual clear provides no additional cleanup benefit
♻️ Optional cleanup simplification
afterEach(() => { vi.unstubAllGlobals() - Object.keys(storage).forEach((key) => delete storage[key]) queryClient.clear() })🤖 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 `@packages/query-devtools/src/__tests__/DevtoolsPanelComponent.test.tsx` around lines 71 - 75, The afterEach cleanup contains a redundant manual clear of the test storage: remove the Object.keys(storage).forEach((key) => delete storage[key]) line because vi.unstubAllGlobals() already removes the localStorage stub and the next beforeEach recreates storage; keep vi.unstubAllGlobals() and queryClient.clear() in the afterEach to preserve necessary teardown for the tests referencing storage and queryClient.
🤖 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.
Nitpick comments:
In `@packages/query-devtools/src/__tests__/DevtoolsPanelComponent.test.tsx`:
- Around line 71-75: The afterEach cleanup contains a redundant manual clear of
the test storage: remove the Object.keys(storage).forEach((key) => delete
storage[key]) line because vi.unstubAllGlobals() already removes the
localStorage stub and the next beforeEach recreates storage; keep
vi.unstubAllGlobals() and queryClient.clear() in the afterEach to preserve
necessary teardown for the tests referencing storage and queryClient.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: a5bf482c-d009-4ab0-879a-de86b2655f22
📒 Files selected for processing (1)
packages/query-devtools/src/__tests__/DevtoolsPanelComponent.test.tsx
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 `@packages/query-devtools/src/__tests__/DevtoolsPanelComponent.test.tsx`:
- Around line 77-88: The test for DevtoolsPanelComponent currently only verifies
rendering and onClose behavior but doesn't assert that the "open devtools"
button is absent in panel-only mode; update the test in
DevtoolsPanelComponent.test.tsx (the it block that renders
<DevtoolsPanelComponent ... />) to explicitly query for the open-button (e.g.,
by its visible text "Open devtools" or its accessible role/label) using the
renderer's queryByText/queryByRole and assert that it is not present (null /
notInTheDocument) after render to ensure panel-only mode hides that button.
- Around line 68-75: The test mutates document.documentElement.style.fontSize in
the setup but never restores it, which can leak into other tests; fix by
capturing the original font-size (e.g., const originalRootFontSize =
document.documentElement.style.fontSize) in the beforeEach where
document.documentElement.style.fontSize = '16px' is set and then restore it in
the afterEach (alongside vi.unstubAllGlobals()/storage
cleanup/queryClient.clear()) by reassigning
document.documentElement.style.fontSize = originalRootFontSize so the global DOM
style is returned to its previous state after each test.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 113da576-ad99-4802-a3d3-364e2d786169
📒 Files selected for processing (1)
packages/query-devtools/src/__tests__/DevtoolsPanelComponent.test.tsx
sukvvon
force-pushed
the
test/query-devtools-devtools-panel-component
branch
from
bb91f7f to
efa4a07
Compare
sukvvon
changed the title
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/query-devtools/src/__tests__/DevtoolsPanelComponent.test.tsx (1)
120-123: ⚡ Quick winStrengthen close-handler assertion to catch duplicate emissions.
At Line 122,
toHaveBeenCalled()passes even if one click triggers multiple callbacks. Prefer an exact count.Proposed tweak
- expect(onClose).toHaveBeenCalled() + expect(onClose).toHaveBeenCalledTimes(1)🤖 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 `@packages/query-devtools/src/__tests__/DevtoolsPanelComponent.test.tsx` around lines 120 - 123, The test currently uses a loose assertion expect(onClose).toHaveBeenCalled() which won't catch duplicate emissions from the click; update the assertion in DevtoolsPanelComponent.test.tsx to assert the exact call count for the onClose mock (use expect(onClose).toHaveBeenCalledTimes(1)) and, to be safer, assert it was not called before the click (expect(onClose).not.toHaveBeenCalled()) so a single click must produce exactly one invocation.
🤖 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.
Nitpick comments:
In `@packages/query-devtools/src/__tests__/DevtoolsPanelComponent.test.tsx`:
- Around line 120-123: The test currently uses a loose assertion
expect(onClose).toHaveBeenCalled() which won't catch duplicate emissions from
the click; update the assertion in DevtoolsPanelComponent.test.tsx to assert the
exact call count for the onClose mock (use
expect(onClose).toHaveBeenCalledTimes(1)) and, to be safer, assert it was not
called before the click (expect(onClose).not.toHaveBeenCalled()) so a single
click must produce exactly one invocation.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8d903886-69dc-46ad-8c75-06914f5045d6
📒 Files selected for processing (1)
packages/query-devtools/src/__tests__/DevtoolsPanelComponent.test.tsx
sukvvon
force-pushed
the
test/query-devtools-devtools-panel-component
branch
from
efa4a07 to
587be3e
Compare
…without throwing, panel-only mode, and 'onClose' prop
sukvvon
force-pushed
the
test/query-devtools-devtools-panel-component
branch
from
587be3e to
4218586
Compare
sukvvon
changed the title
4 tasks
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.
🎯 Changes
Add tests for
DevtoolsPanelComponent, the lightweight wrapper used byTanstackQueryDevtoolsPanelto render the devtools as a panel-only mode.onCloseprop is invoked when the close button is clicked.Reuses the same mocks and stubs as
DevtoolsComponent.test.tsx:solid-transition-groupmock to bypass a transitive@solid-primitives/transition-groupexportsfield that Vite cannot resolve.goobermock to avoid heavy css template compilation on each mount.localStorage,matchMedia,ResizeObserverstubs.✅ Checklist
🚀 Release Impact
Summary by CodeRabbit