Skip to content

Commit 2d27c4e

Browse files
sukvvonautofix-ci[bot]
sukvvon
and
autofix-ci[bot]
authored
test(react-query-devtools/ReactQueryDevtools{,Panel}): add tests for the full prop wiring matrix (#10851)
* test(react-query-devtools/ReactQueryDevtools{,Panel}): add tests for the full prop wiring matrix * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 9d488a1 commit 2d27c4e

2 files changed

Lines changed: 274 additions & 2 deletions

File tree

‎packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx‎

Lines changed: 111 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { beforeEach, describe, expect, it, vi } from 'vitest'
22
import { render } from '@testing-library/react'
33
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
4-
import type { TanstackQueryDevtools } from '@tanstack/query-devtools'
4+
import { TanstackQueryDevtools } from '@tanstack/query-devtools'
55

66
const mountMock = vi.fn()
77
const unmountMock = vi.fn()
@@ -82,6 +82,116 @@ describe('ReactQueryDevtools', () => {
8282
expect(setPositionMock).toHaveBeenCalledWith('left')
8383
})
8484

85+
it('should forward "initialIsOpen" to the devtools instance', async () => {
86+
const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
87+
const queryClient = new QueryClient()
88+
89+
render(<ReactQueryDevtools client={queryClient} initialIsOpen={true} />)
90+
91+
expect(setInitialIsOpenMock).toHaveBeenCalledWith(true)
92+
})
93+
94+
it('should default "initialIsOpen" to "false" when the prop is omitted', async () => {
95+
const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
96+
const queryClient = new QueryClient()
97+
98+
render(<ReactQueryDevtools client={queryClient} />)
99+
100+
expect(setInitialIsOpenMock).toHaveBeenCalledWith(false)
101+
})
102+
103+
it('should forward "errorTypes" to the devtools instance', async () => {
104+
const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
105+
const queryClient = new QueryClient()
106+
const errorTypes = [
107+
{ name: 'Network', initializer: () => new Error('Network') },
108+
]
109+
110+
render(<ReactQueryDevtools client={queryClient} errorTypes={errorTypes} />)
111+
112+
expect(setErrorTypesMock).toHaveBeenCalledWith(errorTypes)
113+
})
114+
115+
it('should default "errorTypes" to an empty array when the prop is omitted', async () => {
116+
const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
117+
const queryClient = new QueryClient()
118+
119+
render(<ReactQueryDevtools client={queryClient} />)
120+
121+
expect(setErrorTypesMock).toHaveBeenCalledWith([])
122+
})
123+
124+
it('should forward "theme" to the devtools instance', async () => {
125+
const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
126+
const queryClient = new QueryClient()
127+
128+
render(<ReactQueryDevtools client={queryClient} theme="dark" />)
129+
130+
expect(setThemeMock).toHaveBeenCalledWith('dark')
131+
})
132+
133+
it('should forward the resolved "QueryClient" via "setClient"', async () => {
134+
const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
135+
const queryClient = new QueryClient()
136+
137+
render(<ReactQueryDevtools client={queryClient} />)
138+
139+
expect(setClientMock).toHaveBeenCalledWith(queryClient)
140+
})
141+
142+
it('should forward "styleNonce" to the devtools constructor', async () => {
143+
const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
144+
const queryClient = new QueryClient()
145+
146+
render(<ReactQueryDevtools client={queryClient} styleNonce="abc" />)
147+
148+
expect(TanstackQueryDevtools).toHaveBeenCalledWith(
149+
expect.objectContaining({ styleNonce: 'abc' }),
150+
)
151+
})
152+
153+
it('should forward "shadowDOMTarget" to the devtools constructor', async () => {
154+
const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
155+
const queryClient = new QueryClient()
156+
const shadowDOMTarget = document
157+
.createElement('div')
158+
.attachShadow({ mode: 'open' })
159+
160+
render(
161+
<ReactQueryDevtools
162+
client={queryClient}
163+
shadowDOMTarget={shadowDOMTarget}
164+
/>,
165+
)
166+
167+
expect(TanstackQueryDevtools).toHaveBeenCalledWith(
168+
expect.objectContaining({ shadowDOMTarget }),
169+
)
170+
})
171+
172+
it('should forward "hideDisabledQueries" to the devtools constructor', async () => {
173+
const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
174+
const queryClient = new QueryClient()
175+
176+
render(
177+
<ReactQueryDevtools client={queryClient} hideDisabledQueries={true} />,
178+
)
179+
180+
expect(TanstackQueryDevtools).toHaveBeenCalledWith(
181+
expect.objectContaining({ hideDisabledQueries: true }),
182+
)
183+
})
184+
185+
it('should call "unmount" on the devtools instance when the component unmounts', async () => {
186+
const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
187+
const queryClient = new QueryClient()
188+
189+
const { unmount } = render(<ReactQueryDevtools client={queryClient} />)
190+
unmount()
191+
192+
expect(unmountMock).toHaveBeenCalled()
193+
})
194+
85195
it('should return null in non-development environments', async () => {
86196
vi.stubEnv('NODE_ENV', 'production')
87197
vi.resetModules()

‎packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx‎

Lines changed: 163 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { beforeEach, describe, expect, it, vi } from 'vitest'
22
import { render } from '@testing-library/react'
33
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
4-
import type { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
4+
import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
55

66
const mountMock = vi.fn()
77
const unmountMock = vi.fn()
@@ -63,6 +63,168 @@ describe('ReactQueryDevtoolsPanel', () => {
6363
expect(mountMock).toHaveBeenCalled()
6464
})
6565

66+
it('should forward "onClose" to the devtools instance', async () => {
67+
const { ReactQueryDevtoolsPanel } =
68+
await import('../ReactQueryDevtoolsPanel')
69+
const queryClient = new QueryClient()
70+
const onClose = vi.fn()
71+
72+
render(<ReactQueryDevtoolsPanel client={queryClient} onClose={onClose} />)
73+
74+
expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function))
75+
})
76+
77+
it('should default "onClose" to a no-op function when the prop is omitted', async () => {
78+
const { ReactQueryDevtoolsPanel } =
79+
await import('../ReactQueryDevtoolsPanel')
80+
const queryClient = new QueryClient()
81+
82+
render(<ReactQueryDevtoolsPanel client={queryClient} />)
83+
84+
expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function))
85+
})
86+
87+
it('should forward "errorTypes" to the devtools instance', async () => {
88+
const { ReactQueryDevtoolsPanel } =
89+
await import('../ReactQueryDevtoolsPanel')
90+
const queryClient = new QueryClient()
91+
const errorTypes = [
92+
{ name: 'Network', initializer: () => new Error('Network') },
93+
]
94+
95+
render(
96+
<ReactQueryDevtoolsPanel client={queryClient} errorTypes={errorTypes} />,
97+
)
98+
99+
expect(setErrorTypesMock).toHaveBeenCalledWith(errorTypes)
100+
})
101+
102+
it('should default "errorTypes" to an empty array when the prop is omitted', async () => {
103+
const { ReactQueryDevtoolsPanel } =
104+
await import('../ReactQueryDevtoolsPanel')
105+
const queryClient = new QueryClient()
106+
107+
render(<ReactQueryDevtoolsPanel client={queryClient} />)
108+
109+
expect(setErrorTypesMock).toHaveBeenCalledWith([])
110+
})
111+
112+
it('should forward "theme" to the devtools instance', async () => {
113+
const { ReactQueryDevtoolsPanel } =
114+
await import('../ReactQueryDevtoolsPanel')
115+
const queryClient = new QueryClient()
116+
117+
render(<ReactQueryDevtoolsPanel client={queryClient} theme="dark" />)
118+
119+
expect(setThemeMock).toHaveBeenCalledWith('dark')
120+
})
121+
122+
it('should forward the resolved "QueryClient" via "setClient"', async () => {
123+
const { ReactQueryDevtoolsPanel } =
124+
await import('../ReactQueryDevtoolsPanel')
125+
const queryClient = new QueryClient()
126+
127+
render(<ReactQueryDevtoolsPanel client={queryClient} />)
128+
129+
expect(setClientMock).toHaveBeenCalledWith(queryClient)
130+
})
131+
132+
it('should forward "styleNonce" to the devtools constructor', async () => {
133+
const { ReactQueryDevtoolsPanel } =
134+
await import('../ReactQueryDevtoolsPanel')
135+
const queryClient = new QueryClient()
136+
137+
render(<ReactQueryDevtoolsPanel client={queryClient} styleNonce="abc" />)
138+
139+
expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith(
140+
expect.objectContaining({ styleNonce: 'abc' }),
141+
)
142+
})
143+
144+
it('should forward "shadowDOMTarget" to the devtools constructor', async () => {
145+
const { ReactQueryDevtoolsPanel } =
146+
await import('../ReactQueryDevtoolsPanel')
147+
const queryClient = new QueryClient()
148+
const shadowDOMTarget = document
149+
.createElement('div')
150+
.attachShadow({ mode: 'open' })
151+
152+
render(
153+
<ReactQueryDevtoolsPanel
154+
client={queryClient}
155+
shadowDOMTarget={shadowDOMTarget}
156+
/>,
157+
)
158+
159+
expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith(
160+
expect.objectContaining({ shadowDOMTarget }),
161+
)
162+
})
163+
164+
it('should forward "hideDisabledQueries" to the devtools constructor', async () => {
165+
const { ReactQueryDevtoolsPanel } =
166+
await import('../ReactQueryDevtoolsPanel')
167+
const queryClient = new QueryClient()
168+
169+
render(
170+
<ReactQueryDevtoolsPanel
171+
client={queryClient}
172+
hideDisabledQueries={true}
173+
/>,
174+
)
175+
176+
expect(TanstackQueryDevtoolsPanel).toHaveBeenCalledWith(
177+
expect.objectContaining({ hideDisabledQueries: true }),
178+
)
179+
})
180+
181+
it('should preserve the default container height when "style" omits "height"', async () => {
182+
const { ReactQueryDevtoolsPanel } =
183+
await import('../ReactQueryDevtoolsPanel')
184+
const queryClient = new QueryClient()
185+
186+
const { container } = render(
187+
<ReactQueryDevtoolsPanel
188+
client={queryClient}
189+
style={{ width: '300px' }}
190+
/>,
191+
)
192+
193+
expect(container.querySelector('.tsqd-parent-container')).toHaveStyle({
194+
height: '500px',
195+
width: '300px',
196+
})
197+
})
198+
199+
it('should let "style" override the default container height on the rendered element', async () => {
200+
const { ReactQueryDevtoolsPanel } =
201+
await import('../ReactQueryDevtoolsPanel')
202+
const queryClient = new QueryClient()
203+
204+
const { container } = render(
205+
<ReactQueryDevtoolsPanel
206+
client={queryClient}
207+
style={{ width: '300px', height: '300px' }}
208+
/>,
209+
)
210+
211+
expect(container.querySelector('.tsqd-parent-container')).toHaveStyle({
212+
height: '300px',
213+
width: '300px',
214+
})
215+
})
216+
217+
it('should call "unmount" on the devtools instance when the component unmounts', async () => {
218+
const { ReactQueryDevtoolsPanel } =
219+
await import('../ReactQueryDevtoolsPanel')
220+
const queryClient = new QueryClient()
221+
222+
const { unmount } = render(<ReactQueryDevtoolsPanel client={queryClient} />)
223+
unmount()
224+
225+
expect(unmountMock).toHaveBeenCalled()
226+
})
227+
66228
it('should return null in non-development environments', async () => {
67229
vi.stubEnv('NODE_ENV', 'production')
68230
vi.resetModules()

0 commit comments

Comments
 (0)