From 615d81d4ab759c875623fe866e22fa7cf94fe327 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Mon, 11 May 2026 00:34:47 +0900 Subject: [PATCH 1/4] test(query-devtools/Devtools): add tests for query details panel and query actions --- .../src/__tests__/Devtools.test.tsx | 115 ++++++++++++++++++ 1 file changed, 115 insertions(+) diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx index f1254d80c3..3f42910c7a 100644 --- a/packages/query-devtools/src/__tests__/Devtools.test.tsx +++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx @@ -469,4 +469,119 @@ describe('Devtools', () => { expect(rendered.queryByRole('tooltip')).not.toBeInTheDocument() }) }) + + describe('query details', () => { + it('should open the query details panel when a query row is clicked', () => { + queryClient.setQueryData(['posts'], [{ id: 1 }]) + const rendered = renderDevtools({ initialIsOpen: true }) + + fireEvent.click(rendered.getByLabelText(/Query key \["posts"\]/)) + + expect(rendered.getByText('Query Details')).toBeInTheDocument() + }) + + it('should close the query details panel when the same row is clicked again', () => { + queryClient.setQueryData(['details-toggle'], [{ id: 1 }]) + const rendered = renderDevtools({ initialIsOpen: true }) + + const row = rendered.getByLabelText(/Query key \["details-toggle"\]/) + fireEvent.click(row) + fireEvent.click(row) + + expect(rendered.queryByText('Query Details')).not.toBeInTheDocument() + }) + }) + + describe('query actions', () => { + it('should remove the query when the "Remove" button is clicked', () => { + queryClient.setQueryData(['action-remove'], [{ id: 1 }]) + const rendered = renderDevtools({ initialIsOpen: true }) + + fireEvent.click( + rendered.getByLabelText(/Query key \["action-remove"\]/), + ) + fireEvent.click(rendered.getByText('Remove')) + + expect( + rendered.queryByLabelText(/Query key \["action-remove"\]/), + ).not.toBeInTheDocument() + }) + + it('should reset the query when the "Reset" button is clicked', () => { + queryClient.setQueryData(['action-reset'], [{ id: 1 }]) + const rendered = renderDevtools({ initialIsOpen: true }) + + fireEvent.click( + rendered.getByLabelText(/Query key \["action-reset"\]/), + ) + fireEvent.click(rendered.getByText('Reset')) + + expect(queryClient.getQueryData(['action-reset'])).toBeUndefined() + }) + + it('should invalidate the query when the "Invalidate" button is clicked', () => { + queryClient.setQueryData(['action-invalidate'], [{ id: 1 }]) + const rendered = renderDevtools({ initialIsOpen: true }) + + fireEvent.click( + rendered.getByLabelText(/Query key \["action-invalidate"\]/), + ) + fireEvent.click(rendered.getByText('Invalidate')) + + expect( + queryClient.getQueryState(['action-invalidate'])?.isInvalidated, + ).toBe(true) + }) + + it('should dispatch a "REFETCH" event when "Refetch" is clicked', () => { + queryClient.setQueryData(['action-refetch'], [{ id: 1 }]) + const rendered = renderDevtools({ initialIsOpen: true }) + + const listener = vi.fn() + window.addEventListener('@tanstack/query-devtools-event', listener) + + try { + fireEvent.click( + rendered.getByLabelText(/Query key \["action-refetch"\]/), + ) + fireEvent.click(rendered.getByText('Refetch')) + + const dispatched = listener.mock.calls.some( + ([e]) => (e as CustomEvent).detail.type === 'REFETCH', + ) + expect(dispatched).toBe(true) + } finally { + window.removeEventListener( + '@tanstack/query-devtools-event', + listener, + ) + } + }) + + it('should set the query status to "error" when "Trigger Error" is clicked', () => { + queryClient.setQueryData(['action-error'], [{ id: 1 }]) + const rendered = renderDevtools({ initialIsOpen: true }) + + fireEvent.click(rendered.getByLabelText(/Query key \["action-error"\]/)) + fireEvent.click(rendered.getByText('Trigger Error')) + + expect(queryClient.getQueryState(['action-error'])?.status).toBe('error') + }) + + it('should restore the query status when "Restore Error" is clicked after "Trigger Error"', () => { + queryClient.setQueryData(['action-restore-error'], [{ id: 1 }]) + const rendered = renderDevtools({ initialIsOpen: true }) + + fireEvent.click( + rendered.getByLabelText(/Query key \["action-restore-error"\]/), + ) + fireEvent.click(rendered.getByText('Trigger Error')) + fireEvent.click(rendered.getByText('Restore Error')) + + expect( + queryClient.getQueryState(['action-restore-error'])?.status, + ).not.toBe('error') + }) + + }) }) From 4925096fec476f4e40b810cf716d761215fa2bbc Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 10 May 2026 15:36:08 +0000 Subject: [PATCH 2/4] ci: apply automated fixes --- .../query-devtools/src/__tests__/Devtools.test.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx index 3f42910c7a..f3131cd483 100644 --- a/packages/query-devtools/src/__tests__/Devtools.test.tsx +++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx @@ -497,9 +497,7 @@ describe('Devtools', () => { queryClient.setQueryData(['action-remove'], [{ id: 1 }]) const rendered = renderDevtools({ initialIsOpen: true }) - fireEvent.click( - rendered.getByLabelText(/Query key \["action-remove"\]/), - ) + fireEvent.click(rendered.getByLabelText(/Query key \["action-remove"\]/)) fireEvent.click(rendered.getByText('Remove')) expect( @@ -511,9 +509,7 @@ describe('Devtools', () => { queryClient.setQueryData(['action-reset'], [{ id: 1 }]) const rendered = renderDevtools({ initialIsOpen: true }) - fireEvent.click( - rendered.getByLabelText(/Query key \["action-reset"\]/), - ) + fireEvent.click(rendered.getByLabelText(/Query key \["action-reset"\]/)) fireEvent.click(rendered.getByText('Reset')) expect(queryClient.getQueryData(['action-reset'])).toBeUndefined() @@ -551,10 +547,7 @@ describe('Devtools', () => { ) expect(dispatched).toBe(true) } finally { - window.removeEventListener( - '@tanstack/query-devtools-event', - listener, - ) + window.removeEventListener('@tanstack/query-devtools-event', listener) } }) @@ -582,6 +575,5 @@ describe('Devtools', () => { queryClient.getQueryState(['action-restore-error'])?.status, ).not.toBe('error') }) - }) }) From e0abc32a9b7ca4e7f1533d057da94c9ba7d6f547 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Mon, 11 May 2026 00:40:36 +0900 Subject: [PATCH 3/4] test(query-devtools/Devtools): re-query row before second click and assert exact 'pending' status after 'Restore Error' --- .../query-devtools/src/__tests__/Devtools.test.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx index f3131cd483..d127a04ca1 100644 --- a/packages/query-devtools/src/__tests__/Devtools.test.tsx +++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx @@ -484,9 +484,12 @@ describe('Devtools', () => { queryClient.setQueryData(['details-toggle'], [{ id: 1 }]) const rendered = renderDevtools({ initialIsOpen: true }) - const row = rendered.getByLabelText(/Query key \["details-toggle"\]/) - fireEvent.click(row) - fireEvent.click(row) + fireEvent.click( + rendered.getByLabelText(/Query key \["details-toggle"\]/), + ) + fireEvent.click( + rendered.getByLabelText(/Query key \["details-toggle"\]/), + ) expect(rendered.queryByText('Query Details')).not.toBeInTheDocument() }) @@ -573,7 +576,7 @@ describe('Devtools', () => { expect( queryClient.getQueryState(['action-restore-error'])?.status, - ).not.toBe('error') + ).toBe('pending') }) }) }) From e7b6206973854ecb8415c527ebce485d0284079b Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 10 May 2026 15:42:28 +0000 Subject: [PATCH 4/4] ci: apply automated fixes --- .../query-devtools/src/__tests__/Devtools.test.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/query-devtools/src/__tests__/Devtools.test.tsx b/packages/query-devtools/src/__tests__/Devtools.test.tsx index d127a04ca1..1be852b2dd 100644 --- a/packages/query-devtools/src/__tests__/Devtools.test.tsx +++ b/packages/query-devtools/src/__tests__/Devtools.test.tsx @@ -484,12 +484,8 @@ describe('Devtools', () => { queryClient.setQueryData(['details-toggle'], [{ id: 1 }]) const rendered = renderDevtools({ initialIsOpen: true }) - fireEvent.click( - rendered.getByLabelText(/Query key \["details-toggle"\]/), - ) - fireEvent.click( - rendered.getByLabelText(/Query key \["details-toggle"\]/), - ) + fireEvent.click(rendered.getByLabelText(/Query key \["details-toggle"\]/)) + fireEvent.click(rendered.getByLabelText(/Query key \["details-toggle"\]/)) expect(rendered.queryByText('Query Details')).not.toBeInTheDocument() }) @@ -574,9 +570,9 @@ describe('Devtools', () => { fireEvent.click(rendered.getByText('Trigger Error')) fireEvent.click(rendered.getByText('Restore Error')) - expect( - queryClient.getQueryState(['action-restore-error'])?.status, - ).toBe('pending') + expect(queryClient.getQueryState(['action-restore-error'])?.status).toBe( + 'pending', + ) }) }) })