test(svelte-query): Refactor test logic (#7744)

* test(svelte-query): Simplify test logic * Improve createQueries tests
TanStack · Jul 17, 2024 · 01212de · 01212de
1 parent 5c50ca7
commit 01212de
Show file tree

Hide file tree

Showing 32 changed files with 262 additions and 205 deletions.
diff --git a/examples/svelte/auto-refetching/src/routes/+page.svelte b/examples/svelte/auto-refetching/src/routes/+page.svelte
@@ -53,7 +53,7 @@
           transition:: {!$todos.isFetching ? 'all .3s ease' : 'none'};
           border-radius: 100%;
           transform: 'scale(2)"
-    />
+    ></span>
   </div>
 </label>
 <h2>Todo List</h2>

diff --git a/examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte b/examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte
@@ -21,15 +21,13 @@
       return undefined
     },
   })
-
-  const { error }: { error: any } = $query
 </script>
 
 {#if $query.isPending}
   Loading...
 {/if}
 {#if $query.error}
-  <span>Error: {error.message}</span>
+  <span>Error: {$query.error.message}</span>
 {/if}
 {#if $query.isSuccess}
   <div>

diff --git a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte
@@ -3,11 +3,10 @@
   import { sleep } from '../utils'
   import type { Writable } from 'svelte/store'
 
-  export let key: Array<string>
   export let states: Writable<Array<string>>
 
-  const state = createQuery({
-    queryKey: key,
+  const query = createQuery({
+    queryKey: ['test'],
     queryFn: async () => {
       states.update((s) => [...s, 'fetching'])
       await sleep(10)
@@ -17,7 +16,5 @@
   })
 </script>
 
-<div>
-  <h1>{$state.data}</h1>
-  <h2>fetchStatus: {$state.fetchStatus}</h2>
-</div>
+<div>{$query.data}</div>
+<div>fetchStatus: {$query.fetchStatus}</div>
diff --git a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte
@@ -7,11 +7,10 @@
 
   export let queryClient: QueryClient
   export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let key: Array<string>
   export let onSuccess: () => Promise<void>
   export let states: Writable<Array<string>>
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions} {onSuccess}>
-  <AwaitOnSuccess {key} {states} />
+  <AwaitOnSuccess {states} />
 </PersistQueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte b/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
@@ -4,12 +4,11 @@
   import type { Writable } from 'svelte/store'
   import type { StatusResult } from '../utils'
 
-  export let key: Array<string>
   export let states: Writable<Array<StatusResult<string>>>
   export let fetched: Writable<boolean>
 
-  const state = createQuery({
-    queryKey: key,
+  const query = createQuery({
+    queryKey: ['test'],
     queryFn: async () => {
       fetched.set(true)
       await sleep(10)
@@ -19,10 +18,8 @@
     staleTime: Infinity,
   })
 
-  $: states.update((prev) => [...prev, $state])
+  $: states.update((prev) => [...prev, $query])
 </script>
 
-<div>
-  <h1>data: {$state.data ?? 'null'}</h1>
-  <h2>fetchStatus: {$state.fetchStatus}</h2>
-</div>
+<div>data: {$query.data ?? 'null'}</div>
+<div>fetchStatus: {$query.fetchStatus}</div>
diff --git a/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte b/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte
@@ -8,11 +8,10 @@
 
   export let queryClient: QueryClient
   export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let key: Array<string>
   export let states: Writable<Array<StatusResult<string>>>
   export let fetched: Writable<boolean>
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
-  <FreshData {key} {states} {fetched} />
+  <FreshData {states} {fetched} />
 </PersistQueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte b/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte
@@ -4,11 +4,10 @@
   import type { Writable } from 'svelte/store'
   import type { StatusResult } from '../utils'
 
-  export let key: Array<string>
   export let states: Writable<Array<StatusResult<string>>>
 
-  const state = createQuery({
-    queryKey: key,
+  const query = createQuery({
+    queryKey: ['test'],
     queryFn: async () => {
       await sleep(10)
       return 'fetched'
@@ -20,10 +19,8 @@
     initialDataUpdatedAt: 1,
   })
 
-  $: states.update((prev) => [...prev, $state])
+  $: states.update((prev) => [...prev, $query])
 </script>
 
-<div>
-  <h1>{$state.data}</h1>
-  <h2>fetchStatus: {$state.fetchStatus}</h2>
-</div>
+<div>{$query.data}</div>
+<div>fetchStatus: {$query.fetchStatus}</div>
diff --git a/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte b/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte
@@ -8,10 +8,9 @@
 
   export let queryClient: QueryClient
   export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let key: Array<string>
   export let states: Writable<Array<StatusResult<string>>>
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
-  <InitialData {key} {states} />
+  <InitialData {states} />
 </PersistQueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte b/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte
@@ -2,18 +2,14 @@
   import { createQuery } from '@tanstack/svelte-query'
   import { sleep } from '../utils'
 
-  export let key: Array<string>
-
-  const state = createQuery({
-    queryKey: key,
+  const query = createQuery({
+    queryKey: ['test'],
     queryFn: async () => {
       await sleep(10)
       return 'fetched'
     },
   })
 </script>
 
-<div>
-  <h1>{$state.data}</h1>
-  <h2>fetchStatus: {$state.fetchStatus}</h2>
-</div>
+<div>{$query.data}</div>
+<div>fetchStatus: {$query.fetchStatus}</div>
diff --git a/packages/svelte-query-persist-client/tests/OnSuccess/Provider.svelte b/packages/svelte-query-persist-client/tests/OnSuccess/Provider.svelte
@@ -6,10 +6,9 @@
 
   export let queryClient: QueryClient
   export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let key: Array<string>
   export let onSuccess: () => void
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions} {onSuccess}>
-  <OnSuccess {key} />
+  <OnSuccess />
 </PersistQueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.ts b/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.ts
@@ -9,7 +9,7 @@ import InitialData from './InitialData/Provider.svelte'
 import RemoveCache from './RemoveCache/Provider.svelte'
 import RestoreCache from './RestoreCache/Provider.svelte'
 import UseQueries from './UseQueries/Provider.svelte'
-import { createQueryClient, queryKey, sleep } from './utils'
+import { createQueryClient, sleep } from './utils'
 
 import type {
   PersistedClient,
@@ -56,12 +56,11 @@ const createMockErrorPersister = (
 
 describe('PersistQueryClientProvider', () => {
   test('restores cache from persister', async () => {
-    const key = queryKey()
     const statesStore: Writable<Array<StatusResult<string>>> = writable([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
-      queryKey: key,
+      queryKey: ['test'],
       queryFn: () => Promise.resolve('hydrated'),
     })
 
@@ -75,7 +74,6 @@ describe('PersistQueryClientProvider', () => {
       props: {
         queryClient,
         persistOptions: { persister },
-        key,
         states: statesStore,
       },
     })
@@ -113,12 +111,11 @@ describe('PersistQueryClientProvider', () => {
   })
 
   test('should also put useQueries into idle state', async () => {
-    const key = queryKey()
     const statesStore: Writable<Array<StatusResult<string>>> = writable([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
-      queryKey: key,
+      queryKey: ['test'],
       queryFn: () => Promise.resolve('hydrated'),
     })
 
@@ -132,7 +129,6 @@ describe('PersistQueryClientProvider', () => {
       props: {
         queryClient,
         persistOptions: { persister },
-        key,
         states: statesStore,
       },
     })
@@ -171,12 +167,11 @@ describe('PersistQueryClientProvider', () => {
   })
 
   test('should show initialData while restoring', async () => {
-    const key = queryKey()
     const statesStore: Writable<Array<StatusResult<string>>> = writable([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
-      queryKey: key,
+      queryKey: ['test'],
       queryFn: () => Promise.resolve('hydrated'),
     })
 
@@ -190,7 +185,6 @@ describe('PersistQueryClientProvider', () => {
       props: {
         queryClient,
         persistOptions: { persister },
-        key,
         states: statesStore,
       },
     })
@@ -228,12 +222,11 @@ describe('PersistQueryClientProvider', () => {
   })
 
   test('should not refetch after restoring when data is fresh', async () => {
-    const key = queryKey()
     const statesStore: Writable<Array<StatusResult<string>>> = writable([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
-      queryKey: key,
+      queryKey: ['test'],
       queryFn: () => Promise.resolve('hydrated'),
     })
 
@@ -249,7 +242,6 @@ describe('PersistQueryClientProvider', () => {
       props: {
         queryClient,
         persistOptions: { persister },
-        key,
         states: statesStore,
         fetched,
       },
@@ -277,11 +269,9 @@ describe('PersistQueryClientProvider', () => {
   })
 
   test('should call onSuccess after successful restoring', async () => {
-    const key = queryKey()
-
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
-      queryKey: key,
+      queryKey: ['test'],
       queryFn: () => Promise.resolve('hydrated'),
     })
 
@@ -297,7 +287,6 @@ describe('PersistQueryClientProvider', () => {
       props: {
         queryClient,
         persistOptions: { persister },
-        key,
         onSuccess,
       },
     })
@@ -310,11 +299,9 @@ describe('PersistQueryClientProvider', () => {
   })
 
   test('should await onSuccess after successful restoring', async () => {
-    const key = queryKey()
-
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
-      queryKey: key,
+      queryKey: ['test'],
       queryFn: () => Promise.resolve('hydrated'),
     })
 
@@ -330,7 +317,6 @@ describe('PersistQueryClientProvider', () => {
       props: {
         queryClient,
         persistOptions: { persister },
-        key,
         states: statesStore,
         onSuccess: async () => {
           statesStore.update((s) => [...s, 'onSuccess'])
@@ -354,7 +340,6 @@ describe('PersistQueryClientProvider', () => {
   })
 
   test('should remove cache after non-successful restoring', async () => {
-    const key = queryKey()
     const consoleMock = vi.spyOn(console, 'error')
     const consoleWarn = vi
       .spyOn(console, 'warn')
@@ -367,7 +352,7 @@ describe('PersistQueryClientProvider', () => {
     const [error, persister] = createMockErrorPersister(removeClient)
 
     const rendered = render(RemoveCache, {
-      props: { queryClient, persistOptions: { persister }, key },
+      props: { queryClient, persistOptions: { persister } },
     })
 
     await waitFor(() => rendered.getByText('fetched'))

diff --git a/packages/svelte-query-persist-client/tests/RemoveCache/Provider.svelte b/packages/svelte-query-persist-client/tests/RemoveCache/Provider.svelte
@@ -6,9 +6,8 @@
 
   export let queryClient: QueryClient
   export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let key: Array<string>
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
-  <RemoveCache {key} />
+  <RemoveCache />
 </PersistQueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte b/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte
@@ -2,18 +2,14 @@
   import { createQuery } from '@tanstack/svelte-query'
   import { sleep } from '../utils'
 
-  export let key: Array<string>
-
-  const state = createQuery({
-    queryKey: key,
+  const query = createQuery({
+    queryKey: ['test'],
     queryFn: async () => {
       await sleep(10)
       return 'fetched'
     },
   })
 </script>
 
-<div>
-  <h1>{$state.data}</h1>
-  <h2>fetchStatus: {$state.fetchStatus}</h2>
-</div>
+<div>{$query.data}</div>
+<div>fetchStatus: {$query.fetchStatus}</div>
diff --git a/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte b/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte
@@ -8,10 +8,9 @@
 
   export let queryClient: QueryClient
   export let persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
-  export let key: Array<string>
   export let states: Writable<Array<StatusResult<string>>>
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
-  <RestoreCache {key} {states} />
+  <RestoreCache {states} />
 </PersistQueryClientProvider>