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

* test(svelte-query): Simplify test logic

* Improve createQueries tests

Author: lachlancollins

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>