Conversation
… 'TANSTACK' logo is clicked
Contributor
📝 WalkthroughWalkthroughThis PR adds a test suite that verifies clicking the TanStack logo control closes and removes the devtools panel from the DOM. ChangesLogo Close Test Suite
Possibly related PRs
Suggested labels
Poem
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes 🚥 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 e81505d
☁️ 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 📦
|
![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: 1
🤖 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__/Devtools.test.tsx`:
- Around line 1093-1103: The test currently clicks the logo via fireEvent on the
element found by getByLabelText('Close Tanstack query devtools') and checks the
panel is removed; extend this to also assert that localStorage now stores
'false' for the 'open' key (verify localStorage.getItem('open') === 'false' or
that the mock setItem was called with ('open','false')), and then assert the
open-button is rendered again (query/getByLabelText for the open button label
used elsewhere, e.g. 'Open Tanstack query devtools') to match the existing
close-button tests; update the test after the fireEvent.click in the describe
block around renderDevtools to include these two assertions.
🪄 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: a55bfea2-188b-444a-b470-c713a3c22b02
📒 Files selected for processing (1)
packages/query-devtools/src/__tests__/Devtools.test.tsx
Comment on lines
+1093
to
+1103
| describe('logo close', () => { | ||
| it('should hide the panel when the TanStack logo is clicked', () => { | ||
| const rendered = renderDevtools({ initialIsOpen: true }) | ||
|
|
||
| fireEvent.click(rendered.getByLabelText('Close Tanstack query devtools')) | ||
|
|
||
| expect( | ||
| rendered.queryByLabelText('Tanstack query devtools'), | ||
| ).not.toBeInTheDocument() | ||
| }) | ||
| }) |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win
Add assertions for localStorage persistence and open button re-rendering.
The test verifies the panel is hidden, but the PR objectives mention that clicking the logo "triggers setLocalStore('open', 'false')". For completeness and consistency with the existing close button tests (lines 228-234 and 210-218), also verify:
- localStorage persists
'false'(matches PR objective) - The open button re-appears after closing
✨ Proposed enhancement to match existing close button test coverage
describe('logo close', () => {
it('should hide the panel when the TanStack logo is clicked', () => {
const rendered = renderDevtools({ initialIsOpen: true })
fireEvent.click(rendered.getByLabelText('Close Tanstack query devtools'))
expect(
rendered.queryByLabelText('Tanstack query devtools'),
).not.toBeInTheDocument()
+ expect(
+ rendered.getByLabelText('Open Tanstack query devtools'),
+ ).toBeInTheDocument()
+ expect(localStorage.getItem('TanstackQueryDevtools.open')).toBe('false')
})
})📝 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
| describe('logo close', () => { | |
| it('should hide the panel when the TanStack logo is clicked', () => { | |
| const rendered = renderDevtools({ initialIsOpen: true }) | |
| fireEvent.click(rendered.getByLabelText('Close Tanstack query devtools')) | |
| expect( | |
| rendered.queryByLabelText('Tanstack query devtools'), | |
| ).not.toBeInTheDocument() | |
| }) | |
| }) | |
| describe('logo close', () => { | |
| it('should hide the panel when the TanStack logo is clicked', () => { | |
| const rendered = renderDevtools({ initialIsOpen: true }) | |
| fireEvent.click(rendered.getByLabelText('Close Tanstack query devtools')) | |
| expect( | |
| rendered.queryByLabelText('Tanstack query devtools'), | |
| ).not.toBeInTheDocument() | |
| expect( | |
| rendered.getByLabelText('Open Tanstack query devtools'), | |
| ).toBeInTheDocument() | |
| expect(localStorage.getItem('TanstackQueryDevtools.open')).toBe('false') | |
| }) | |
| }) |
🤖 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__/Devtools.test.tsx` around lines 1093 -
1103, The test currently clicks the logo via fireEvent on the element found by
getByLabelText('Close Tanstack query devtools') and checks the panel is removed;
extend this to also assert that localStorage now stores 'false' for the 'open'
key (verify localStorage.getItem('open') === 'false' or that the mock setItem
was called with ('open','false')), and then assert the open-button is rendered
again (query/getByLabelText for the open button label used elsewhere, e.g. 'Open
Tanstack query devtools') to match the existing close-button tests; update the
test after the fireEvent.click in the describe block around renderDevtools to
include these two assertions.
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
Adds a test for
Devtools.tsxcovering:should hide the panel when the TanStack logo is clickedThe TanStack logo doubles as a close button and triggers
setLocalStore('open', 'false')when no PiP window or panel-only mode is active.✅ Checklist
pnpm run test:pr.🚀 Release Impact
Summary by CodeRabbit