Skip to content

test(query-devtools/Explorer): add test for 'CopyButton' error state on clipboard failure #10734

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 19, 2026
+31 −0
Merged

test(query-devtools/Explorer): add test for 'CopyButton' error state on clipboard failure #10734

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
31 changes: 31 additions & 0 deletions packages/query-devtools/src/__tests__/Explorer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,12 @@ describe('Explorer', () => {
let queryClient: QueryClient

beforeEach(() => {
vi.useFakeTimers()
queryClient = new QueryClient()
})

afterEach(() => {
vi.useRealTimers()
queryClient.clear()
})
Comment on lines 26 to 29
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 19, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Harden teardown to avoid cross-test mock/global leakage (Line 27).

With fake timers enabled globally and new per-test spies/stubs, teardown should also restore mocks/globals; otherwise console.error and navigator stubs can bleed into later tests.

Suggested patch 
   afterEach(() => {
     vi.useRealTimers()
+    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
     queryClient.clear()
   })
📝 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
afterEach(() => {
vi.useRealTimers()
queryClient.clear()
})
afterEach(() => {
vi.useRealTimers()
vi.restoreAllMocks()
vi.unstubAllGlobals()
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__/Explorer.test.tsx` around lines 26 -
29, The afterEach teardown currently calls vi.useRealTimers() and
queryClient.clear() but does not restore mocks or any replaced globals, which
lets per-test stubs like console.error and navigator leak; update the afterEach
(the same block containing vi.useRealTimers() and queryClient.clear()) to call
vi.restoreAllMocks() and vi.resetAllMocks() to restore spies/stubs and mocks,
and if tests replace navigator directly ensure you restore the original
navigator (e.g., save originalNavigator in beforeEach and reassign it in
afterEach or delete the stubbed global navigator) so console.error and navigator
stubs do not persist across tests.


Expand Down Expand Up @@ -201,6 +203,35 @@ describe('Explorer', () => {
})
})

it('should switch the copy button to an error state when clipboard write fails', async () => {
const writeText = vi.fn().mockRejectedValue(new Error('denied'))
vi.stubGlobal('navigator', { clipboard: { writeText } })
const consoleError = vi
.spyOn(console, 'error')
.mockImplementation(() => {})
queryClient.setQueryData(['data'], { name: 'Anna' })

const rendered = renderExplorer({
label: 'data',
value: { name: 'Anna' },
editable: true,
activeQuery: queryClient
.getQueryCache()
.find({ queryKey: ['data'] }) as Query,
})

fireEvent.click(rendered.getByLabelText('Copy object to clipboard'))
await vi.advanceTimersByTimeAsync(0)

expect(
rendered.getByLabelText('Error copying object to clipboard'),
).toBeInTheDocument()
expect(consoleError).toHaveBeenCalledWith(
'Failed to copy: ',
expect.any(Error),
)
})

it('should clear array items via "setQueryData" when the clear-array button is clicked', () => {
queryClient.setQueryData(['data'], ['a', 'b', 'c'])

Expand Down
Loading