Skip to content

test(query-devtools/Devtools): add test for hiding the panel when the 'TANSTACK' logo is clicked #10693

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sukvvon merged 1 commit into from
May 11, 2026
+12 −0
Merged

test(query-devtools/Devtools): add test for hiding the panel when the 'TANSTACK' logo is clicked #10693

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions packages/query-devtools/src/__tests__/Devtools.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1089,4 +1089,16 @@ describe('Devtools', () => {
).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()
})
})
Comment on lines +1093 to +1103
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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:

  1. localStorage persists 'false' (matches PR objective)
  2. 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.

})
Loading