Skip to content

Commit e63673b

Browse files
sukvvonsukvvon
authored
test(svelte-query-persist-client/PersistQueryClientProvider): switch to fake timers, replace 'waitFor' with 'advanceTimersByTimeAsync', and use 'sleep().then()' pattern (#9900)
* test(svelte-query-persist-client/PersistQueryClientProvider): switch to fake timers, replace 'waitFor' with 'advanceTimersByTimeAsync', and use 'sleep().then()' pattern * test(svelte-query-persist-client/PersistQueryClientProvider): replace 'setQueryDefaults' with 'onFetch' callback in FreshData * refactor(svelte-query-persist-client/FreshData): convert complex 'then' callback to async/await pattern
1 parent 968fb43 commit e63673b

File tree

9 files changed

+102
-58
lines changed

9 files changed

+102
-58
lines changed

‎packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
queryKey: ['test'],
1010
queryFn: async () => {
1111
states.current.push('fetching')
12-
await sleep(5)
12+
await sleep(10)
1313
states.current.push('fetched')
1414
return 'fetched'
1515
},

‎packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
<script lang="ts">
22
import { createQuery } from '@tanstack/svelte-query'
3+
import { sleep } from '@tanstack/query-test-utils'
34
import type { StatelessRef, StatusResult } from '../utils.svelte.js'
45
56
let {
67
states,
8+
onFetch,
79
}: {
810
states: StatelessRef<Array<StatusResult<string>>>
11+
onFetch: () => void
912
} = $props()
1013
1114
const query = createQuery(() => ({
1215
queryKey: ['test'],
13-
queryFn: () => Promise.resolve('fetched'),
14-
16+
queryFn: async () => {
17+
await sleep(10)
18+
onFetch()
19+
return 'fetched'
20+
},
1521
staleTime: Infinity,
1622
}))
1723
@@ -22,5 +28,5 @@
2228
})
2329
</script>
2430

25-
<div>data: {query.data ?? 'undefined'}</div>
31+
<div>data: {query.data ?? 'null'}</div>
2632
<div>fetchStatus: {query.fetchStatus}</div>

‎packages/svelte-query-persist-client/tests/FreshData/Provider.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@
99
queryClient: QueryClient
1010
persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
1111
states: StatelessRef<Array<StatusResult<string>>>
12+
onFetch: () => void
1213
}
1314
14-
let { queryClient, persistOptions, states }: Props = $props()
15+
let { queryClient, persistOptions, states, onFetch }: Props = $props()
1516
</script>
1617

1718
<PersistQueryClientProvider client={queryClient} {persistOptions}>
18-
<FreshData {states} />
19+
<FreshData {states} {onFetch} />
1920
</PersistQueryClientProvider>

‎packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,7 @@
88
99
const query = createQuery(() => ({
1010
queryKey: ['test'],
11-
queryFn: async () => {
12-
await sleep(5)
13-
return 'fetched'
14-
},
15-
11+
queryFn: () => sleep(10).then(() => 'fetched'),
1612
initialData: 'initial',
1713
// make sure that initial data is older than the hydration data
1814
// otherwise initialData would be newer and takes precedence

‎packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script lang="ts">
22
import { createQuery } from '@tanstack/svelte-query'
3+
import { sleep } from '@tanstack/query-test-utils'
34
45
const query = createQuery(() => ({
56
queryKey: ['test'],
6-
queryFn: () => Promise.resolve('fetched'),
7+
queryFn: () => sleep(10).then(() => 'fetched'),
78
}))
89
</script>
910

‎packages/svelte-query-persist-client/tests/PersistQueryClientProvider.svelte.test.ts‎

Lines changed: 80 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { render, waitFor } from '@testing-library/svelte'
2-
import { describe, expect, test, vi } from 'vitest'
1+
import { render } from '@testing-library/svelte'
2+
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
33
import { QueryClient } from '@tanstack/svelte-query'
44
import { persistQueryClientSave } from '@tanstack/query-persist-client-core'
55
import { sleep } from '@tanstack/query-test-utils'
@@ -17,6 +17,14 @@ import type {
1717
} from '@tanstack/query-persist-client-core'
1818
import type { StatusResult } from './utils.svelte.js'
1919

20+
beforeEach(() => {
21+
vi.useFakeTimers()
22+
})
23+
24+
afterEach(() => {
25+
vi.useRealTimers()
26+
})
27+
2028
const createMockPersister = (): Persister => {
2129
let storedState: PersistedClient | undefined
2230

@@ -25,7 +33,7 @@ const createMockPersister = (): Persister => {
2533
storedState = persistClient
2634
},
2735
async restoreClient() {
28-
return Promise.resolve(storedState)
36+
return sleep(10).then(() => storedState)
2937
},
3038
removeClient() {
3139
storedState = undefined
@@ -44,7 +52,7 @@ const createMockErrorPersister = (
4452
// noop
4553
},
4654
async restoreClient() {
47-
return Promise.reject(error)
55+
return sleep(10).then(() => Promise.reject(error))
4856
},
4957
removeClient,
5058
},
@@ -56,14 +64,16 @@ describe('PersistQueryClientProvider', () => {
5664
const states = new StatelessRef<Array<StatusResult<string>>>([])
5765

5866
const queryClient = new QueryClient()
59-
await queryClient.prefetchQuery({
67+
queryClient.prefetchQuery({
6068
queryKey: ['test'],
61-
queryFn: () => Promise.resolve('hydrated'),
69+
queryFn: () => sleep(10).then(() => 'hydrated'),
6270
})
71+
await vi.advanceTimersByTimeAsync(10)
6372

6473
const persister = createMockPersister()
6574

66-
await persistQueryClientSave({ queryClient, persister })
75+
persistQueryClientSave({ queryClient, persister })
76+
await vi.advanceTimersByTimeAsync(0)
6777

6878
queryClient.clear()
6979

@@ -75,9 +85,11 @@ describe('PersistQueryClientProvider', () => {
7585
},
7686
})
7787

78-
await waitFor(() => rendered.getByText('fetchStatus: idle'))
79-
await waitFor(() => rendered.getByText('hydrated'))
80-
await waitFor(() => rendered.getByText('fetched'))
88+
expect(rendered.getByText('fetchStatus: idle')).toBeInTheDocument()
89+
await vi.advanceTimersByTimeAsync(10)
90+
expect(rendered.getByText('hydrated')).toBeInTheDocument()
91+
await vi.advanceTimersByTimeAsync(10)
92+
expect(rendered.getByText('fetched')).toBeInTheDocument()
8193

8294
expect(states.current).toHaveLength(3)
8395

@@ -104,14 +116,16 @@ describe('PersistQueryClientProvider', () => {
104116
const states = new StatelessRef<Array<StatusResult<string>>>([])
105117

106118
const queryClient = new QueryClient()
107-
await queryClient.prefetchQuery({
119+
queryClient.prefetchQuery({
108120
queryKey: ['test'],
109-
queryFn: () => Promise.resolve('hydrated'),
121+
queryFn: () => sleep(10).then(() => 'hydrated'),
110122
})
123+
await vi.advanceTimersByTimeAsync(10)
111124

112125
const persister = createMockPersister()
113126

114-
await persistQueryClientSave({ queryClient, persister })
127+
persistQueryClientSave({ queryClient, persister })
128+
await vi.advanceTimersByTimeAsync(0)
115129

116130
queryClient.clear()
117131

@@ -123,9 +137,11 @@ describe('PersistQueryClientProvider', () => {
123137
},
124138
})
125139

126-
await waitFor(() => rendered.getByText('fetchStatus: idle'))
127-
await waitFor(() => rendered.getByText('hydrated'))
128-
await waitFor(() => rendered.getByText('fetched'))
140+
expect(rendered.getByText('fetchStatus: idle')).toBeInTheDocument()
141+
await vi.advanceTimersByTimeAsync(10)
142+
expect(rendered.getByText('hydrated')).toBeInTheDocument()
143+
await vi.advanceTimersByTimeAsync(10)
144+
expect(rendered.getByText('fetched')).toBeInTheDocument()
129145

130146
expect(states.current).toHaveLength(3)
131147

@@ -152,14 +168,16 @@ describe('PersistQueryClientProvider', () => {
152168
const states = new StatelessRef<Array<StatusResult<string>>>([])
153169

154170
const queryClient = new QueryClient()
155-
await queryClient.prefetchQuery({
171+
queryClient.prefetchQuery({
156172
queryKey: ['test'],
157-
queryFn: () => Promise.resolve('hydrated'),
173+
queryFn: () => sleep(10).then(() => 'hydrated'),
158174
})
175+
await vi.advanceTimersByTimeAsync(10)
159176

160177
const persister = createMockPersister()
161178

162-
await persistQueryClientSave({ queryClient, persister })
179+
persistQueryClientSave({ queryClient, persister })
180+
await vi.advanceTimersByTimeAsync(0)
163181

164182
queryClient.clear()
165183

@@ -171,9 +189,11 @@ describe('PersistQueryClientProvider', () => {
171189
},
172190
})
173191

174-
await waitFor(() => rendered.getByText('initial'))
175-
await waitFor(() => rendered.getByText('hydrated'))
176-
await waitFor(() => rendered.getByText('fetched'))
192+
expect(rendered.getByText('initial')).toBeInTheDocument()
193+
await vi.advanceTimersByTimeAsync(10)
194+
expect(rendered.getByText('hydrated')).toBeInTheDocument()
195+
await vi.advanceTimersByTimeAsync(10)
196+
expect(rendered.getByText('fetched')).toBeInTheDocument()
177197

178198
expect(states.current).toHaveLength(3)
179199

@@ -200,35 +220,42 @@ describe('PersistQueryClientProvider', () => {
200220
const states = new StatelessRef<Array<StatusResult<string>>>([])
201221

202222
const queryClient = new QueryClient()
203-
await queryClient.prefetchQuery({
223+
queryClient.prefetchQuery({
204224
queryKey: ['test'],
205-
queryFn: () => Promise.resolve('hydrated'),
225+
queryFn: () => sleep(10).then(() => 'hydrated'),
206226
})
227+
await vi.advanceTimersByTimeAsync(10)
207228

208229
const persister = createMockPersister()
209230

210-
await persistQueryClientSave({ queryClient, persister })
231+
persistQueryClientSave({ queryClient, persister })
232+
await vi.advanceTimersByTimeAsync(0)
211233

212234
queryClient.clear()
213235

236+
let fetched = false
237+
214238
const rendered = render(FreshData, {
215239
props: {
216240
queryClient,
217241
persistOptions: { persister },
218242
states,
243+
onFetch: () => {
244+
fetched = true
245+
},
219246
},
220247
})
221248

222-
await waitFor(() => rendered.getByText('data: undefined'))
223-
await waitFor(() => rendered.getByText('data: hydrated'))
224-
await expect(
225-
waitFor(() => rendered.getByText('data: fetched'), {
226-
timeout: 100,
227-
}),
228-
).rejects.toThrowError()
249+
expect(rendered.getByText('data: null')).toBeInTheDocument()
250+
await vi.advanceTimersByTimeAsync(10)
251+
expect(rendered.getByText('data: hydrated')).toBeInTheDocument()
252+
await vi.advanceTimersByTimeAsync(10)
253+
expect(rendered.getByText('data: hydrated')).toBeInTheDocument()
229254

230255
expect(states.current).toHaveLength(2)
231256

257+
expect(fetched).toBe(false)
258+
232259
expect(states.current[0]).toMatchObject({
233260
status: 'pending',
234261
fetchStatus: 'idle',
@@ -244,14 +271,16 @@ describe('PersistQueryClientProvider', () => {
244271

245272
test('should call onSuccess after successful restoring', async () => {
246273
const queryClient = new QueryClient()
247-
await queryClient.prefetchQuery({
274+
queryClient.prefetchQuery({
248275
queryKey: ['test'],
249-
queryFn: () => Promise.resolve('hydrated'),
276+
queryFn: () => sleep(10).then(() => 'hydrated'),
250277
})
278+
await vi.advanceTimersByTimeAsync(10)
251279

252280
const persister = createMockPersister()
253281

254-
await persistQueryClientSave({ queryClient, persister })
282+
persistQueryClientSave({ queryClient, persister })
283+
await vi.advanceTimersByTimeAsync(0)
255284

256285
queryClient.clear()
257286

@@ -266,21 +295,25 @@ describe('PersistQueryClientProvider', () => {
266295
})
267296

268297
expect(onSuccess).toHaveBeenCalledTimes(0)
269-
await waitFor(() => rendered.getByText('hydrated'))
298+
await vi.advanceTimersByTimeAsync(10)
299+
expect(rendered.getByText('hydrated')).toBeInTheDocument()
270300
expect(onSuccess).toHaveBeenCalledTimes(1)
271-
await waitFor(() => rendered.getByText('fetched'))
301+
await vi.advanceTimersByTimeAsync(10)
302+
expect(rendered.getByText('fetched')).toBeInTheDocument()
272303
})
273304

274305
test('should await onSuccess after successful restoring', async () => {
275306
const queryClient = new QueryClient()
276-
await queryClient.prefetchQuery({
307+
queryClient.prefetchQuery({
277308
queryKey: ['test'],
278-
queryFn: () => Promise.resolve('hydrated'),
309+
queryFn: () => sleep(10).then(() => 'hydrated'),
279310
})
311+
await vi.advanceTimersByTimeAsync(10)
280312

281313
const persister = createMockPersister()
282314

283-
await persistQueryClientSave({ queryClient, persister })
315+
persistQueryClientSave({ queryClient, persister })
316+
await vi.advanceTimersByTimeAsync(0)
284317

285318
queryClient.clear()
286319

@@ -299,8 +332,10 @@ describe('PersistQueryClientProvider', () => {
299332
},
300333
})
301334

302-
await waitFor(() => rendered.getByText('hydrated'))
303-
await waitFor(() => rendered.getByText('fetched'))
335+
await vi.advanceTimersByTimeAsync(15)
336+
expect(rendered.getByText('hydrated')).toBeInTheDocument()
337+
await vi.advanceTimersByTimeAsync(10)
338+
expect(rendered.getByText('fetched')).toBeInTheDocument()
304339

305340
expect(states.current).toEqual([
306341
'onSuccess',
@@ -329,7 +364,9 @@ describe('PersistQueryClientProvider', () => {
329364
props: { queryClient, persistOptions: { persister }, onError, onSuccess },
330365
})
331366

332-
await waitFor(() => rendered.getByText('fetched'))
367+
await vi.advanceTimersByTimeAsync(10)
368+
await vi.advanceTimersByTimeAsync(10)
369+
expect(rendered.getByText('fetched')).toBeInTheDocument()
333370
expect(removeClient).toHaveBeenCalledTimes(1)
334371
expect(onSuccess).toHaveBeenCalledTimes(0)
335372
expect(onError).toHaveBeenCalledTimes(1)

‎packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script lang="ts">
22
import { createQuery } from '@tanstack/svelte-query'
3+
import { sleep } from '@tanstack/query-test-utils'
34
45
const query = createQuery(() => ({
56
queryKey: ['test'],
6-
queryFn: () => Promise.resolve('fetched'),
7+
queryFn: () => sleep(10).then(() => 'fetched'),
78
}))
89
</script>
910

‎packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<script lang="ts">
22
import { createQuery } from '@tanstack/svelte-query'
3+
import { sleep } from '@tanstack/query-test-utils'
34
import type { StatelessRef, StatusResult } from '../utils.svelte.js'
45
56
let { states }: { states: StatelessRef<Array<StatusResult<string>>> } =
67
$props()
78
89
const query = createQuery(() => ({
910
queryKey: ['test'],
10-
queryFn: async () => Promise.resolve('fetched'),
11+
queryFn: () => sleep(10).then(() => 'fetched'),
1112
}))
1213
1314
$effect(() => {

‎packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts">
22
import { createQueries } from '@tanstack/svelte-query'
3+
import { sleep } from '@tanstack/query-test-utils'
34
import type { StatelessRef, StatusResult } from '../utils.svelte.js'
45
56
let { states }: { states: StatelessRef<Array<StatusResult<string>>> } =
@@ -9,7 +10,7 @@
910
queries: [
1011
{
1112
queryKey: ['test'],
12-
queryFn: () => Promise.resolve('fetched'),
13+
queryFn: () => sleep(10).then(() => 'fetched'),
1314
},
1415
],
1516
}))

0 commit comments

Comments
 (0)