Skip to content

Commit e10e9f9

Browse files
sukvvonsukvvon
committed
test(react-query-devtools/ReactQueryDevtools{,Panel}): add tests for the full prop wiring matrix
1 parent 9d488a1 commit e10e9f9

2 files changed

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

0 commit comments

Comments
 (0)