From c0926c94faba27444288294a849c1f60b56f9df1 Mon Sep 17 00:00:00 2001 From: Wonsuk Choi Date: Mon, 1 Jun 2026 10:24:39 +0900 Subject: [PATCH 1/2] test(preact-query-devtools/PreactQueryDevtools{,Panel}): add tests for the full prop wiring matrix --- .../__tests__/PreactQueryDevtools.test.tsx | 114 +++++++++++- .../PreactQueryDevtoolsPanel.test.tsx | 173 +++++++++++++++++- 2 files changed, 285 insertions(+), 2 deletions(-) diff --git a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx index 97de126fc51..1e91ab62aad 100644 --- a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx +++ b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx @@ -1,7 +1,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest' import { render } from '@testing-library/preact' import { QueryClient, QueryClientProvider } from '@tanstack/preact-query' -import type { TanstackQueryDevtools } from '@tanstack/query-devtools' +import { TanstackQueryDevtools } from '@tanstack/query-devtools' const mountMock = vi.fn() const unmountMock = vi.fn() @@ -82,6 +82,118 @@ describe('PreactQueryDevtools', () => { expect(setPositionMock).toHaveBeenCalledWith('left') }) + it('should forward "initialIsOpen" to the devtools instance', async () => { + const { PreactQueryDevtools } = await import('../PreactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setInitialIsOpenMock).toHaveBeenCalledWith(true) + }) + + it('should default "initialIsOpen" to "false" when the prop is omitted', async () => { + const { PreactQueryDevtools } = await import('../PreactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setInitialIsOpenMock).toHaveBeenCalledWith(false) + }) + + it('should forward "errorTypes" to the devtools instance', async () => { + const { PreactQueryDevtools } = await import('../PreactQueryDevtools') + const queryClient = new QueryClient() + const errorTypes = [ + { name: 'Network', initializer: () => new Error('Network') }, + ] + + render( + , + ) + + expect(setErrorTypesMock).toHaveBeenCalledWith(errorTypes) + }) + + it('should default "errorTypes" to an empty array when the prop is omitted', async () => { + const { PreactQueryDevtools } = await import('../PreactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setErrorTypesMock).toHaveBeenCalledWith([]) + }) + + it('should forward "theme" to the devtools instance', async () => { + const { PreactQueryDevtools } = await import('../PreactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setThemeMock).toHaveBeenCalledWith('dark') + }) + + it('should forward the resolved "QueryClient" via "setClient"', async () => { + const { PreactQueryDevtools } = await import('../PreactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setClientMock).toHaveBeenCalledWith(queryClient) + }) + + it('should forward "styleNonce" to the devtools constructor', async () => { + const { PreactQueryDevtools } = await import('../PreactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(TanstackQueryDevtools).toHaveBeenCalledWith( + expect.objectContaining({ styleNonce: 'abc' }), + ) + }) + + it('should forward "shadowDOMTarget" to the devtools constructor', async () => { + const { PreactQueryDevtools } = await import('../PreactQueryDevtools') + const queryClient = new QueryClient() + const shadowDOMTarget = document + .createElement('div') + .attachShadow({ mode: 'open' }) + + render( + , + ) + + expect(TanstackQueryDevtools).toHaveBeenCalledWith( + expect.objectContaining({ shadowDOMTarget }), + ) + }) + + it('should forward "hideDisabledQueries" to the devtools constructor', async () => { + const { PreactQueryDevtools } = await import('../PreactQueryDevtools') + const queryClient = new QueryClient() + + render( + , + ) + + expect(TanstackQueryDevtools).toHaveBeenCalledWith( + expect.objectContaining({ hideDisabledQueries: true }), + ) + }) + + it('should call "unmount" on the devtools instance when the component unmounts', async () => { + const { PreactQueryDevtools } = await import('../PreactQueryDevtools') + const queryClient = new QueryClient() + + const { unmount } = render() + unmount() + + expect(unmountMock).toHaveBeenCalled() + }) + it('should return null in non-development environments', async () => { vi.stubEnv('NODE_ENV', 'production') vi.resetModules() diff --git a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx index cc03560a367..2fa6a68db53 100644 --- a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx +++ b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx @@ -1,7 +1,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest' import { render } from '@testing-library/preact' import { QueryClient, QueryClientProvider } from '@tanstack/preact-query' -import type { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools' +import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools' const mountMock = vi.fn() const unmountMock = vi.fn() @@ -63,6 +63,177 @@ describe('PreactQueryDevtoolsPanel', () => { expect(mountMock).toHaveBeenCalled() }) + it('should forward "onClose" to the devtools instance', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + const queryClient = new QueryClient() + const onClose = vi.fn() + + render( + , + ) + + expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function)) + }) + + it('should default "onClose" to a no-op function when the prop is omitted', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render() + + expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function)) + }) + + it('should forward "errorTypes" to the devtools instance', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + const queryClient = new QueryClient() + const errorTypes = [ + { name: 'Network', initializer: () => new Error('Network') }, + ] + + render( + , + ) + + expect(setErrorTypesMock).toHaveBeenCalledWith(errorTypes) + }) + + it('should default "errorTypes" to an empty array when the prop is omitted', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render() + + expect(setErrorTypesMock).toHaveBeenCalledWith([]) + }) + + it('should forward "theme" to the devtools instance', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render() + + expect(setThemeMock).toHaveBeenCalledWith('dark') + }) + + it('should forward the resolved "QueryClient" via "setClient"', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render() + + expect(setClientMock).toHaveBeenCalledWith(queryClient) + }) + + it('should forward "styleNonce" to the devtools constructor', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render( + , + ) + + expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith( + expect.objectContaining({ styleNonce: 'abc' }), + ) + }) + + it('should forward "shadowDOMTarget" to the devtools constructor', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + const queryClient = new QueryClient() + const shadowDOMTarget = document + .createElement('div') + .attachShadow({ mode: 'open' }) + + render( + , + ) + + expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith( + expect.objectContaining({ shadowDOMTarget }), + ) + }) + + it('should forward "hideDisabledQueries" to the devtools constructor', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render( + , + ) + + expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith( + expect.objectContaining({ hideDisabledQueries: true }), + ) + }) + + it('should preserve the default container height when "style" omits "height"', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + const { container } = render( + , + ) + + expect(container.querySelector('.tsqd-parent-container')).toHaveStyle({ + height: '500px', + width: '300px', + }) + }) + + it('should let "style" override the default container height on the rendered element', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + const { container } = render( + , + ) + + expect(container.querySelector('.tsqd-parent-container')).toHaveStyle({ + height: '300px', + width: '300px', + }) + }) + + it('should call "unmount" on the devtools instance when the component unmounts', async () => { + const { PreactQueryDevtoolsPanel } = + await import('../PreactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + const { unmount } = render( + , + ) + unmount() + + expect(unmountMock).toHaveBeenCalled() + }) + it('should return null in non-development environments', async () => { vi.stubEnv('NODE_ENV', 'production') vi.resetModules() From 8d40ef490b2de5f74bfe2c7681023c4b4e3dd3bd Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 1 Jun 2026 01:26:04 +0000 Subject: [PATCH 2/2] ci: apply automated fixes --- .../src/__tests__/PreactQueryDevtools.test.tsx | 4 +--- .../src/__tests__/PreactQueryDevtoolsPanel.test.tsx | 13 +++---------- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx index 1e91ab62aad..cdbd85021d6 100644 --- a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx +++ b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx @@ -107,9 +107,7 @@ describe('PreactQueryDevtools', () => { { name: 'Network', initializer: () => new Error('Network') }, ] - render( - , - ) + render() expect(setErrorTypesMock).toHaveBeenCalledWith(errorTypes) }) diff --git a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx index 2fa6a68db53..1d54b36bb60 100644 --- a/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx +++ b/packages/preact-query-devtools/src/__tests__/PreactQueryDevtoolsPanel.test.tsx @@ -69,9 +69,7 @@ describe('PreactQueryDevtoolsPanel', () => { const queryClient = new QueryClient() const onClose = vi.fn() - render( - , - ) + render() expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function)) }) @@ -95,10 +93,7 @@ describe('PreactQueryDevtoolsPanel', () => { ] render( - , + , ) expect(setErrorTypesMock).toHaveBeenCalledWith(errorTypes) @@ -139,9 +134,7 @@ describe('PreactQueryDevtoolsPanel', () => { await import('../PreactQueryDevtoolsPanel') const queryClient = new QueryClient() - render( - , - ) + render() expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith( expect.objectContaining({ styleNonce: 'abc' }),