From e3ebf3f2424b00e8fe96ee590c0835a92a57283c Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Wed, 20 May 2026 10:12:36 +0900 Subject: [PATCH 1/2] test(query-devtools/Explorer): add test for independently toggling two pages (#10737) --- .../src/__tests__/Explorer.test.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/query-devtools/src/__tests__/Explorer.test.tsx b/packages/query-devtools/src/__tests__/Explorer.test.tsx index fb94f5695e..d3424cd28f 100644 --- a/packages/query-devtools/src/__tests__/Explorer.test.tsx +++ b/packages/query-devtools/src/__tests__/Explorer.test.tsx @@ -357,6 +357,25 @@ describe('Explorer', () => { expect(rendered.getByText('0:')).toBeInTheDocument() expect(rendered.getByText('"item-0"')).toBeInTheDocument() }) + + it('should independently toggle two pages when their headers are clicked', () => { + const rendered = renderExplorer({ + label: 'big', + value: Array.from({ length: 200 }, (_, i) => `item-${i}`), + }) + + fireEvent.click(rendered.getByRole('button', { expanded: false })) + fireEvent.click(rendered.getByText('[0...99]')) + fireEvent.click(rendered.getByText('[100...199]')) + + expect(rendered.getByText('"item-0"')).toBeInTheDocument() + expect(rendered.getByText('"item-100"')).toBeInTheDocument() + + fireEvent.click(rendered.getByText('[0...99]')) + + expect(rendered.queryByText('"item-0"')).toBeNull() + expect(rendered.getByText('"item-100"')).toBeInTheDocument() + }) }) describe('inline edit', () => { From 48b7d660fa7a8c6f52ea8efd4958d10db9db30bf Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Wed, 20 May 2026 10:38:47 +0900 Subject: [PATCH 2/2] test(query-devtools/Explorer): add tests for resetting 'CopyButton' state after success and failure (#10738) --- .../src/__tests__/Explorer.test.tsx | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/packages/query-devtools/src/__tests__/Explorer.test.tsx b/packages/query-devtools/src/__tests__/Explorer.test.tsx index d3424cd28f..accb25f436 100644 --- a/packages/query-devtools/src/__tests__/Explorer.test.tsx +++ b/packages/query-devtools/src/__tests__/Explorer.test.tsx @@ -232,6 +232,63 @@ describe('Explorer', () => { ) }) + it('should reset the copy button to the idle state 1500ms after a successful copy', async () => { + const writeText = vi.fn().mockResolvedValue(undefined) + vi.stubGlobal('navigator', { clipboard: { writeText } }) + 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('Object copied to clipboard'), + ).toBeInTheDocument() + + await vi.advanceTimersByTimeAsync(1500) + + expect( + rendered.getByLabelText('Copy object to clipboard'), + ).toBeInTheDocument() + }) + + it('should reset the copy button to the idle state 1500ms after a failed copy', async () => { + const writeText = vi.fn().mockRejectedValue(new Error('denied')) + vi.stubGlobal('navigator', { clipboard: { writeText } }) + 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() + + await vi.advanceTimersByTimeAsync(1500) + + expect( + rendered.getByLabelText('Copy object to clipboard'), + ).toBeInTheDocument() + }) + it('should clear array items via "setQueryData" when the clear-array button is clicked', () => { queryClient.setQueryData(['data'], ['a', 'b', 'c'])