diff --git a/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx b/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx index 76ad5c4f51..a869ef1fd0 100644 --- a/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx +++ b/packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx @@ -1,7 +1,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest' import { render } from '@testing-library/react' import { QueryClient, QueryClientProvider } from '@tanstack/react-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,116 @@ describe('ReactQueryDevtools', () => { expect(setPositionMock).toHaveBeenCalledWith('left') }) + it('should forward "initialIsOpen" to the devtools instance', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setInitialIsOpenMock).toHaveBeenCalledWith(true) + }) + + it('should default "initialIsOpen" to "false" when the prop is omitted', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setInitialIsOpenMock).toHaveBeenCalledWith(false) + }) + + it('should forward "errorTypes" to the devtools instance', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + 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 { ReactQueryDevtools } = await import('../ReactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setErrorTypesMock).toHaveBeenCalledWith([]) + }) + + it('should forward "theme" to the devtools instance', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setThemeMock).toHaveBeenCalledWith('dark') + }) + + it('should forward the resolved "QueryClient" via "setClient"', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(setClientMock).toHaveBeenCalledWith(queryClient) + }) + + it('should forward "styleNonce" to the devtools constructor', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + const queryClient = new QueryClient() + + render() + + expect(TanstackQueryDevtools).toHaveBeenCalledWith( + expect.objectContaining({ styleNonce: 'abc' }), + ) + }) + + it('should forward "shadowDOMTarget" to the devtools constructor', async () => { + const { ReactQueryDevtools } = await import('../ReactQueryDevtools') + 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 { ReactQueryDevtools } = await import('../ReactQueryDevtools') + 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 { ReactQueryDevtools } = await import('../ReactQueryDevtools') + 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/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx b/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx index 4beb7d99c0..779498826d 100644 --- a/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx +++ b/packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx @@ -1,7 +1,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest' import { render } from '@testing-library/react' import { QueryClient, QueryClientProvider } from '@tanstack/react-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,168 @@ describe('ReactQueryDevtoolsPanel', () => { expect(mountMock).toHaveBeenCalled() }) + it('should forward "onClose" to the devtools instance', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + 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 { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render() + + expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function)) + }) + + it('should forward "errorTypes" to the devtools instance', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + 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 { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render() + + expect(setErrorTypesMock).toHaveBeenCalledWith([]) + }) + + it('should forward "theme" to the devtools instance', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render() + + expect(setThemeMock).toHaveBeenCalledWith('dark') + }) + + it('should forward the resolved "QueryClient" via "setClient"', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render() + + expect(setClientMock).toHaveBeenCalledWith(queryClient) + }) + + it('should forward "styleNonce" to the devtools constructor', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + const queryClient = new QueryClient() + + render() + + expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith( + expect.objectContaining({ styleNonce: 'abc' }), + ) + }) + + it('should forward "shadowDOMTarget" to the devtools constructor', async () => { + const { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + 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 { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + 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 { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + 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 { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + 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 { ReactQueryDevtoolsPanel } = + await import('../ReactQueryDevtoolsPanel') + 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()