Skip to content

Commit 830acac

Browse files
sukvvonsukvvon
committed
test(svelte-query-persist-client/PersistQueryClientProvider): switch to fake timers, replace 'waitFor' with 'advanceTimersByTimeAsync', and use 'sleep().then()' pattern
1 parent c9bc600 commit 830acac

File tree

8 files changed

+97
-56
lines changed

8 files changed

+97
-56
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: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@
1010
1111
const query = createQuery(() => ({
1212
queryKey: ['test'],
13-
queryFn: () => Promise.resolve('fetched'),
14-
13+
// queryFn is provided by queryClient.setQueryDefaults in test
1514
staleTime: Infinity,
1615
}))
1716
@@ -22,5 +21,5 @@
2221
})
2322
</script>
2423

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

‎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: 85 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,17 +220,29 @@ 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+
238+
queryClient.setQueryDefaults(['test'], {
239+
queryFn: () =>
240+
sleep(10).then(() => {
241+
fetched = true
242+
return 'fetched'
243+
}),
244+
})
245+
214246
const rendered = render(FreshData, {
215247
props: {
216248
queryClient,
@@ -219,16 +251,16 @@ describe('PersistQueryClientProvider', () => {
219251
},
220252
})
221253

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()
254+
expect(rendered.getByText('data: null')).toBeInTheDocument()
255+
await vi.advanceTimersByTimeAsync(10)
256+
expect(rendered.getByText('data: hydrated')).toBeInTheDocument()
257+
await vi.advanceTimersByTimeAsync(10)
258+
expect(rendered.getByText('data: hydrated')).toBeInTheDocument()
229259

230260
expect(states.current).toHaveLength(2)
231261

262+
expect(fetched).toBe(false)
263+
232264
expect(states.current[0]).toMatchObject({
233265
status: 'pending',
234266
fetchStatus: 'idle',
@@ -244,14 +276,16 @@ describe('PersistQueryClientProvider', () => {
244276

245277
test('should call onSuccess after successful restoring', async () => {
246278
const queryClient = new QueryClient()
247-
await queryClient.prefetchQuery({
279+
queryClient.prefetchQuery({
248280
queryKey: ['test'],
249-
queryFn: () => Promise.resolve('hydrated'),
281+
queryFn: () => sleep(10).then(() => 'hydrated'),
250282
})
283+
await vi.advanceTimersByTimeAsync(10)
251284

252285
const persister = createMockPersister()
253286

254-
await persistQueryClientSave({ queryClient, persister })
287+
persistQueryClientSave({ queryClient, persister })
288+
await vi.advanceTimersByTimeAsync(0)
255289

256290
queryClient.clear()
257291

@@ -266,21 +300,25 @@ describe('PersistQueryClientProvider', () => {
266300
})
267301

268302
expect(onSuccess).toHaveBeenCalledTimes(0)
269-
await waitFor(() => rendered.getByText('hydrated'))
303+
await vi.advanceTimersByTimeAsync(10)
304+
expect(rendered.getByText('hydrated')).toBeInTheDocument()
270305
expect(onSuccess).toHaveBeenCalledTimes(1)
271-
await waitFor(() => rendered.getByText('fetched'))
306+
await vi.advanceTimersByTimeAsync(10)
307+
expect(rendered.getByText('fetched')).toBeInTheDocument()
272308
})
273309

274310
test('should await onSuccess after successful restoring', async () => {
275311
const queryClient = new QueryClient()
276-
await queryClient.prefetchQuery({
312+
queryClient.prefetchQuery({
277313
queryKey: ['test'],
278-
queryFn: () => Promise.resolve('hydrated'),
314+
queryFn: () => sleep(10).then(() => 'hydrated'),
279315
})
316+
await vi.advanceTimersByTimeAsync(10)
280317

281318
const persister = createMockPersister()
282319

283-
await persistQueryClientSave({ queryClient, persister })
320+
persistQueryClientSave({ queryClient, persister })
321+
await vi.advanceTimersByTimeAsync(0)
284322

285323
queryClient.clear()
286324

@@ -299,8 +337,10 @@ describe('PersistQueryClientProvider', () => {
299337
},
300338
})
301339

302-
await waitFor(() => rendered.getByText('hydrated'))
303-
await waitFor(() => rendered.getByText('fetched'))
340+
await vi.advanceTimersByTimeAsync(15)
341+
expect(rendered.getByText('hydrated')).toBeInTheDocument()
342+
await vi.advanceTimersByTimeAsync(10)
343+
expect(rendered.getByText('fetched')).toBeInTheDocument()
304344

305345
expect(states.current).toEqual([
306346
'onSuccess',
@@ -329,7 +369,9 @@ describe('PersistQueryClientProvider', () => {
329369
props: { queryClient, persistOptions: { persister }, onError, onSuccess },
330370
})
331371

332-
await waitFor(() => rendered.getByText('fetched'))
372+
await vi.advanceTimersByTimeAsync(10)
373+
await vi.advanceTimersByTimeAsync(10)
374+
expect(rendered.getByText('fetched')).toBeInTheDocument()
333375
expect(removeClient).toHaveBeenCalledTimes(1)
334376
expect(onSuccess).toHaveBeenCalledTimes(0)
335377
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)