Skip to content

Commit 01212de

Browse files
lachlancollinslachlancollins
authored
test(svelte-query): Refactor test logic (#7744)
* test(svelte-query): Simplify test logic * Improve createQueries tests
1 parent 5c50ca7 commit 01212de

File tree

32 files changed

+262
-205
lines changed

32 files changed

+262
-205
lines changed

‎examples/svelte/auto-refetching/src/routes/+page.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
transition:: {!$todos.isFetching ? 'all .3s ease' : 'none'};
5454
border-radius: 100%;
5555
transform: 'scale(2)"
56-
/>
56+
></span>
5757
</div>
5858
</label>
5959
<h2>Todo List</h2>

‎examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,13 @@
2121
return undefined
2222
},
2323
})
24-
25-
const { error }: { error: any } = $query
2624
</script>
2725

2826
{#if $query.isPending}
2927
Loading...
3028
{/if}
3129
{#if $query.error}
32-
<span>Error: {error.message}</span>
30+
<span>Error: {$query.error.message}</span>
3331
{/if}
3432
{#if $query.isSuccess}
3533
<div>

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@
33
import { sleep } from '../utils'
44
import type { Writable } from 'svelte/store'
55
6-
export let key: Array<string>
76
export let states: Writable<Array<string>>
87
9-
const state = createQuery({
10-
queryKey: key,
8+
const query = createQuery({
9+
queryKey: ['test'],
1110
queryFn: async () => {
1211
states.update((s) => [...s, 'fetching'])
1312
await sleep(10)
@@ -17,7 +16,5 @@
1716
})
1817
</script>
1918

20-
<div>
21-
<h1>{$state.data}</h1>
22-
<h2>fetchStatus: {$state.fetchStatus}</h2>
23-
</div>
19+
<div>{$query.data}</div>
20+
<div>fetchStatus: {$query.fetchStatus}</div>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,10 @@
77
88
export let queryClient: QueryClient
99
export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
10-
export let key: Array<string>
1110
export let onSuccess: () => Promise<void>
1211
export let states: Writable<Array<string>>
1312
</script>
1413

1514
<PersistQueryClientProvider client={queryClient} {persistOptions} {onSuccess}>
16-
<AwaitOnSuccess {key} {states} />
15+
<AwaitOnSuccess {states} />
1716
</PersistQueryClientProvider>

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@
44
import type { Writable } from 'svelte/store'
55
import type { StatusResult } from '../utils'
66
7-
export let key: Array<string>
87
export let states: Writable<Array<StatusResult<string>>>
98
export let fetched: Writable<boolean>
109
11-
const state = createQuery({
12-
queryKey: key,
10+
const query = createQuery({
11+
queryKey: ['test'],
1312
queryFn: async () => {
1413
fetched.set(true)
1514
await sleep(10)
@@ -19,10 +18,8 @@
1918
staleTime: Infinity,
2019
})
2120
22-
$: states.update((prev) => [...prev, $state])
21+
$: states.update((prev) => [...prev, $query])
2322
</script>
2423

25-
<div>
26-
<h1>data: {$state.data ?? 'null'}</h1>
27-
<h2>fetchStatus: {$state.fetchStatus}</h2>
28-
</div>
24+
<div>data: {$query.data ?? 'null'}</div>
25+
<div>fetchStatus: {$query.fetchStatus}</div>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,10 @@
88
99
export let queryClient: QueryClient
1010
export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
11-
export let key: Array<string>
1211
export let states: Writable<Array<StatusResult<string>>>
1312
export let fetched: Writable<boolean>
1413
</script>
1514

1615
<PersistQueryClientProvider client={queryClient} {persistOptions}>
17-
<FreshData {key} {states} {fetched} />
16+
<FreshData {states} {fetched} />
1817
</PersistQueryClientProvider>

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@
44
import type { Writable } from 'svelte/store'
55
import type { StatusResult } from '../utils'
66
7-
export let key: Array<string>
87
export let states: Writable<Array<StatusResult<string>>>
98
10-
const state = createQuery({
11-
queryKey: key,
9+
const query = createQuery({
10+
queryKey: ['test'],
1211
queryFn: async () => {
1312
await sleep(10)
1413
return 'fetched'
@@ -20,10 +19,8 @@
2019
initialDataUpdatedAt: 1,
2120
})
2221
23-
$: states.update((prev) => [...prev, $state])
22+
$: states.update((prev) => [...prev, $query])
2423
</script>
2524

26-
<div>
27-
<h1>{$state.data}</h1>
28-
<h2>fetchStatus: {$state.fetchStatus}</h2>
29-
</div>
25+
<div>{$query.data}</div>
26+
<div>fetchStatus: {$query.fetchStatus}</div>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,9 @@
88
99
export let queryClient: QueryClient
1010
export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
11-
export let key: Array<string>
1211
export let states: Writable<Array<StatusResult<string>>>
1312
</script>
1413

1514
<PersistQueryClientProvider client={queryClient} {persistOptions}>
16-
<InitialData {key} {states} />
15+
<InitialData {states} />
1716
</PersistQueryClientProvider>

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,14 @@
22
import { createQuery } from '@tanstack/svelte-query'
33
import { sleep } from '../utils'
44
5-
export let key: Array<string>
6-
7-
const state = createQuery({
8-
queryKey: key,
5+
const query = createQuery({
6+
queryKey: ['test'],
97
queryFn: async () => {
108
await sleep(10)
119
return 'fetched'
1210
},
1311
})
1412
</script>
1513

16-
<div>
17-
<h1>{$state.data}</h1>
18-
<h2>fetchStatus: {$state.fetchStatus}</h2>
19-
</div>
14+
<div>{$query.data}</div>
15+
<div>fetchStatus: {$query.fetchStatus}</div>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@
66
77
export let queryClient: QueryClient
88
export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
9-
export let key: Array<string>
109
export let onSuccess: () => void
1110
</script>
1211

1312
<PersistQueryClientProvider client={queryClient} {persistOptions} {onSuccess}>
14-
<OnSuccess {key} />
13+
<OnSuccess />
1514
</PersistQueryClientProvider>

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

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import InitialData from './InitialData/Provider.svelte'
99
import RemoveCache from './RemoveCache/Provider.svelte'
1010
import RestoreCache from './RestoreCache/Provider.svelte'
1111
import UseQueries from './UseQueries/Provider.svelte'
12-
import { createQueryClient, queryKey, sleep } from './utils'
12+
import { createQueryClient, sleep } from './utils'
1313

1414
import type {
1515
PersistedClient,
@@ -56,12 +56,11 @@ const createMockErrorPersister = (
5656

5757
describe('PersistQueryClientProvider', () => {
5858
test('restores cache from persister', async () => {
59-
const key = queryKey()
6059
const statesStore: Writable<Array<StatusResult<string>>> = writable([])
6160

6261
const queryClient = createQueryClient()
6362
await queryClient.prefetchQuery({
64-
queryKey: key,
63+
queryKey: ['test'],
6564
queryFn: () => Promise.resolve('hydrated'),
6665
})
6766

@@ -75,7 +74,6 @@ describe('PersistQueryClientProvider', () => {
7574
props: {
7675
queryClient,
7776
persistOptions: { persister },
78-
key,
7977
states: statesStore,
8078
},
8179
})
@@ -113,12 +111,11 @@ describe('PersistQueryClientProvider', () => {
113111
})
114112

115113
test('should also put useQueries into idle state', async () => {
116-
const key = queryKey()
117114
const statesStore: Writable<Array<StatusResult<string>>> = writable([])
118115

119116
const queryClient = createQueryClient()
120117
await queryClient.prefetchQuery({
121-
queryKey: key,
118+
queryKey: ['test'],
122119
queryFn: () => Promise.resolve('hydrated'),
123120
})
124121

@@ -132,7 +129,6 @@ describe('PersistQueryClientProvider', () => {
132129
props: {
133130
queryClient,
134131
persistOptions: { persister },
135-
key,
136132
states: statesStore,
137133
},
138134
})
@@ -171,12 +167,11 @@ describe('PersistQueryClientProvider', () => {
171167
})
172168

173169
test('should show initialData while restoring', async () => {
174-
const key = queryKey()
175170
const statesStore: Writable<Array<StatusResult<string>>> = writable([])
176171

177172
const queryClient = createQueryClient()
178173
await queryClient.prefetchQuery({
179-
queryKey: key,
174+
queryKey: ['test'],
180175
queryFn: () => Promise.resolve('hydrated'),
181176
})
182177

@@ -190,7 +185,6 @@ describe('PersistQueryClientProvider', () => {
190185
props: {
191186
queryClient,
192187
persistOptions: { persister },
193-
key,
194188
states: statesStore,
195189
},
196190
})
@@ -228,12 +222,11 @@ describe('PersistQueryClientProvider', () => {
228222
})
229223

230224
test('should not refetch after restoring when data is fresh', async () => {
231-
const key = queryKey()
232225
const statesStore: Writable<Array<StatusResult<string>>> = writable([])
233226

234227
const queryClient = createQueryClient()
235228
await queryClient.prefetchQuery({
236-
queryKey: key,
229+
queryKey: ['test'],
237230
queryFn: () => Promise.resolve('hydrated'),
238231
})
239232

@@ -249,7 +242,6 @@ describe('PersistQueryClientProvider', () => {
249242
props: {
250243
queryClient,
251244
persistOptions: { persister },
252-
key,
253245
states: statesStore,
254246
fetched,
255247
},
@@ -277,11 +269,9 @@ describe('PersistQueryClientProvider', () => {
277269
})
278270

279271
test('should call onSuccess after successful restoring', async () => {
280-
const key = queryKey()
281-
282272
const queryClient = createQueryClient()
283273
await queryClient.prefetchQuery({
284-
queryKey: key,
274+
queryKey: ['test'],
285275
queryFn: () => Promise.resolve('hydrated'),
286276
})
287277

@@ -297,7 +287,6 @@ describe('PersistQueryClientProvider', () => {
297287
props: {
298288
queryClient,
299289
persistOptions: { persister },
300-
key,
301290
onSuccess,
302291
},
303292
})
@@ -310,11 +299,9 @@ describe('PersistQueryClientProvider', () => {
310299
})
311300

312301
test('should await onSuccess after successful restoring', async () => {
313-
const key = queryKey()
314-
315302
const queryClient = createQueryClient()
316303
await queryClient.prefetchQuery({
317-
queryKey: key,
304+
queryKey: ['test'],
318305
queryFn: () => Promise.resolve('hydrated'),
319306
})
320307

@@ -330,7 +317,6 @@ describe('PersistQueryClientProvider', () => {
330317
props: {
331318
queryClient,
332319
persistOptions: { persister },
333-
key,
334320
states: statesStore,
335321
onSuccess: async () => {
336322
statesStore.update((s) => [...s, 'onSuccess'])
@@ -354,7 +340,6 @@ describe('PersistQueryClientProvider', () => {
354340
})
355341

356342
test('should remove cache after non-successful restoring', async () => {
357-
const key = queryKey()
358343
const consoleMock = vi.spyOn(console, 'error')
359344
const consoleWarn = vi
360345
.spyOn(console, 'warn')
@@ -367,7 +352,7 @@ describe('PersistQueryClientProvider', () => {
367352
const [error, persister] = createMockErrorPersister(removeClient)
368353

369354
const rendered = render(RemoveCache, {
370-
props: { queryClient, persistOptions: { persister }, key },
355+
props: { queryClient, persistOptions: { persister } },
371356
})
372357

373358
await waitFor(() => rendered.getByText('fetched'))

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@
66
77
export let queryClient: QueryClient
88
export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
9-
export let key: Array<string>
109
</script>
1110

1211
<PersistQueryClientProvider client={queryClient} {persistOptions}>
13-
<RemoveCache {key} />
12+
<RemoveCache />
1413
</PersistQueryClientProvider>

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

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,14 @@
22
import { createQuery } from '@tanstack/svelte-query'
33
import { sleep } from '../utils'
44
5-
export let key: Array<string>
6-
7-
const state = createQuery({
8-
queryKey: key,
5+
const query = createQuery({
6+
queryKey: ['test'],
97
queryFn: async () => {
108
await sleep(10)
119
return 'fetched'
1210
},
1311
})
1412
</script>
1513

16-
<div>
17-
<h1>{$state.data}</h1>
18-
<h2>fetchStatus: {$state.fetchStatus}</h2>
19-
</div>
14+
<div>{$query.data}</div>
15+
<div>fetchStatus: {$query.fetchStatus}</div>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,9 @@
88
99
export let queryClient: QueryClient
1010
export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
11-
export let key: Array<string>
1211
export let states: Writable<Array<StatusResult<string>>>
1312
</script>
1413

1514
<PersistQueryClientProvider client={queryClient} {persistOptions}>
16-
<RestoreCache {key} {states} />
15+
<RestoreCache {states} />
1716
</PersistQueryClientProvider>

0 commit comments

Comments
 (0)