test(react-query-devtools/ReactQueryDevtools{,Panel}): add tests for the full prop wiring matrix

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(<ReactQueryDevtools client={queryClient} initialIsOpen={true} />)
+
+    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(<ReactQueryDevtools client={queryClient} />)
+
+    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(<ReactQueryDevtools client={queryClient} errorTypes={errorTypes} />)
+
+    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(<ReactQueryDevtools client={queryClient} />)
+
+    expect(setErrorTypesMock).toHaveBeenCalledWith([])
+  })
+
+  it('should forward "theme" to the devtools instance', async () => {
+    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
+    const queryClient = new QueryClient()
+
+    render(<ReactQueryDevtools client={queryClient} theme="dark" />)
+
+    expect(setThemeMock).toHaveBeenCalledWith('dark')
+  })
+
+  it('should forward the resolved "QueryClient" via "setClient"', async () => {
+    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
+    const queryClient = new QueryClient()
+
+    render(<ReactQueryDevtools client={queryClient} />)
+
+    expect(setClientMock).toHaveBeenCalledWith(queryClient)
+  })
+
+  it('should forward "styleNonce" to the devtools constructor', async () => {
+    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
+    const queryClient = new QueryClient()
+
+    render(<ReactQueryDevtools client={queryClient} styleNonce="abc" />)
+
+    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(
+      <ReactQueryDevtools
+        client={queryClient}
+        shadowDOMTarget={shadowDOMTarget}
+      />,
+    )
+
+    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(
+      <ReactQueryDevtools client={queryClient} hideDisabledQueries={true} />,
+    )
+
+    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(<ReactQueryDevtools client={queryClient} />)
+    unmount()
+
+    expect(unmountMock).toHaveBeenCalled()
+  })
+
   it('should return null in non-development environments', async () => {
     vi.stubEnv('NODE_ENV', 'production')
     vi.resetModules()

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(<ReactQueryDevtoolsPanel client={queryClient} onClose={onClose} />)
+
+    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(<ReactQueryDevtoolsPanel client={queryClient} />)
+
+    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(
+      <ReactQueryDevtoolsPanel client={queryClient} errorTypes={errorTypes} />,
+    )
+
+    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(<ReactQueryDevtoolsPanel client={queryClient} />)
+
+    expect(setErrorTypesMock).toHaveBeenCalledWith([])
+  })
+
+  it('should forward "theme" to the devtools instance', async () => {
+    const { ReactQueryDevtoolsPanel } =
+      await import('../ReactQueryDevtoolsPanel')
+    const queryClient = new QueryClient()
+
+    render(<ReactQueryDevtoolsPanel client={queryClient} theme="dark" />)
+
+    expect(setThemeMock).toHaveBeenCalledWith('dark')
+  })
+
+  it('should forward the resolved "QueryClient" via "setClient"', async () => {
+    const { ReactQueryDevtoolsPanel } =
+      await import('../ReactQueryDevtoolsPanel')
+    const queryClient = new QueryClient()
+
+    render(<ReactQueryDevtoolsPanel client={queryClient} />)
+
+    expect(setClientMock).toHaveBeenCalledWith(queryClient)
+  })
+
+  it('should forward "styleNonce" to the devtools constructor', async () => {
+    const { ReactQueryDevtoolsPanel } =
+      await import('../ReactQueryDevtoolsPanel')
+    const queryClient = new QueryClient()
+
+    render(<ReactQueryDevtoolsPanel client={queryClient} styleNonce="abc" />)
+
+    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(
+      <ReactQueryDevtoolsPanel
+        client={queryClient}
+        shadowDOMTarget={shadowDOMTarget}
+      />,
+    )
+
+    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(
+      <ReactQueryDevtoolsPanel
+        client={queryClient}
+        hideDisabledQueries={true}
+      />,
+    )
+
+    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(
+      <ReactQueryDevtoolsPanel
+        client={queryClient}
+        style={{ width: '300px' }}
+      />,
+    )
+
+    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(
+      <ReactQueryDevtoolsPanel
+        client={queryClient}
+        style={{ width: '300px', height: '300px' }}
+      />,
+    )
+
+    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(<ReactQueryDevtoolsPanel client={queryClient} />)
+    unmount()
+
+    expect(unmountMock).toHaveBeenCalled()
+  })
+
   it('should return null in non-development environments', async () => {
     vi.stubEnv('NODE_ENV', 'production')
     vi.resetModules()