Simplify tracking test states

zhihengGet · Jul 17, 2024 · cae27db · cae27db
1 parent 3da88ba
commit cae27db
Show file tree

Hide file tree

Showing 26 changed files with 127 additions and 142 deletions.
diff --git a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils'
+  import { sleep } from '../utils.svelte'
 
-  let { key, states = $bindable() }: { key: string[]; states: string[] } =
-    $props()
+  let { key, states }: { key: Array<string>; states: Array<string> } = $props()
 
   const state = createQuery({
     queryKey: key,

diff --git a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/Provider.svelte
@@ -12,15 +12,9 @@
     states: Array<string>
   }
 
-  let {
-    queryClient,
-    persistOptions,
-    key,
-    onSuccess,
-    states = $bindable(),
-  }: Props = $props()
+  let { queryClient, persistOptions, key, onSuccess, states }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions} {onSuccess}>
-  <AwaitOnSuccess {key} bind:states />
+  <AwaitOnSuccess {key} {states} />
 </PersistQueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte b/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
@@ -1,33 +1,30 @@
 <script lang="ts">
   import { untrack } from 'svelte'
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils'
-  import type { StatusResult } from '../utils'
+  import { sleep } from '../utils.svelte'
+  import type { StatusResult } from '../utils.svelte'
 
   let {
     key,
-    states = $bindable(),
+    states,
   }: {
     key: Array<string>
-    states: Array<StatusResult<string>>
+    states: { value: Array<StatusResult<string>> }
     fetched: boolean
   } = $props()
 
   const query = createQuery({
     queryKey: key,
     queryFn: async () => {
-      states.push('fetched')
+      states.value.push('fetched')
       await sleep(10)
       return 'fetched'
     },
 
     staleTime: Infinity,
   })
   $effect(() => {
-    JSON.stringify(query.data)
-    untrack(() => {
-      states.push($state.snapshot(query))
-    })
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>
 

diff --git a/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte b/packages/svelte-query-persist-client/tests/FreshData/Provider.svelte
@@ -3,13 +3,13 @@
   import FreshData from './FreshData.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { StatusResult } from '../utils'
+  import type { StatusResult } from '../utils.svelte'
 
   interface Props {
     queryClient: QueryClient
     persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
     key: Array<string>
-    states: Array<StatusResult<string>>
+    states: { value: Array<StatusResult<string>> }
     fetched: boolean
   }
 

diff --git a/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte b/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import { untrack } from 'svelte'
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils'
-  import type { StatusResult } from '../utils'
+  import { sleep } from '../utils.svelte'
+  import type { StatusResult } from '../utils.svelte'
 
   let {
     key,
-    states = $bindable(),
+    states,
   }: {
     key: Array<string>
-    states: Array<StatusResult<string>>
+    states: { value: Array<StatusResult<string>> }
   } = $props()
 
   const query = createQuery({
@@ -26,10 +26,7 @@
   })
 
   $effect(() => {
-    JSON.stringify(query)
-    untrack(() => {
-      states.push($state.snapshot(query))
-    })
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>
 

diff --git a/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte b/packages/svelte-query-persist-client/tests/InitialData/Provider.svelte
@@ -3,23 +3,18 @@
   import InitialData from './InitialData.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { StatusResult } from '../utils'
+  import type { StatusResult } from '../utils.svelte'
 
   interface Props {
     queryClient: QueryClient
     persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
     key: Array<string>
-    states: Array<StatusResult<string>>
+    states: { value: Array<StatusResult<string>> }
   }
 
-  let {
-    queryClient,
-    persistOptions,
-    key,
-    states = $bindable(),
-  }: Props = $props()
+  let { queryClient, persistOptions, key, states }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
-  <InitialData {key} bind:states />
+  <InitialData {key} {states} />
 </PersistQueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte b/packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils'
+  import { sleep } from '../utils.svelte'
 
   interface Props {
     key: Array<string>

diff --git a/...PersistQueryClientProvider.test.svelte.ts → ...PersistQueryClientProvider.svelte.test.ts b/...PersistQueryClientProvider.test.svelte.ts → ...PersistQueryClientProvider.svelte.test.ts
@@ -8,13 +8,13 @@ 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, queryKey, ref, sleep } from './utils.svelte'
 
 import type {
   PersistedClient,
   Persister,
 } from '@tanstack/query-persist-client-core'
-import type { StatusResult } from './utils'
+import type { StatusResult } from './utils.svelte'
 
 const createMockPersister = (): Persister => {
   let storedState: PersistedClient | undefined
@@ -55,7 +55,7 @@ const createMockErrorPersister = (
 describe('PersistQueryClientProvider', () => {
   test('restores cache from persister', async () => {
     const key = queryKey()
-    const states: Array<StatusResult<string>> = $state([])
+    let states = ref<Array<StatusResult<string>>>([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -82,21 +82,21 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    expect(states).toHaveLength(3)
+    expect(states.value).toHaveLength(3)
 
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       status: 'pending',
       fetchStatus: 'idle',
       data: undefined,
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
     })
 
-    expect(states[2]).toMatchObject({
+    expect(states.value[2]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
@@ -111,7 +111,7 @@ describe('PersistQueryClientProvider', () => {
 
   test('should also put useQueries into idle state', async () => {
     const key = queryKey()
-    const states: Array<StatusResult<string>> = $state([])
+    let states = ref<Array<StatusResult<string>>>([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -138,21 +138,21 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    expect(states).toHaveLength(3)
+    expect(states.value).toHaveLength(3)
 
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       status: 'pending',
       fetchStatus: 'idle',
       data: undefined,
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
     })
 
-    expect(states[2]).toMatchObject({
+    expect(states.value[2]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
@@ -161,7 +161,7 @@ describe('PersistQueryClientProvider', () => {
 
   test('should show initialData while restoring', async () => {
     const key = queryKey()
-    const states: Array<StatusResult<string>> = $state([])
+    let states = ref<Array<StatusResult<string>>>([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -188,15 +188,15 @@ describe('PersistQueryClientProvider', () => {
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    expect(states).toHaveLength(3)
+    expect(states.value).toHaveLength(3)
 
-    expect(states[0]).toMatchObject({
+    expect(states.value[0]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'initial',
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
@@ -208,7 +208,7 @@ describe('PersistQueryClientProvider', () => {
       data: 'hydrated',
     }) */
 
-    expect(states[2]).toMatchObject({
+    expect(states.value[2]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
@@ -217,7 +217,7 @@ describe('PersistQueryClientProvider', () => {
 
   test('should not refetch after restoring when data is fresh', async () => {
     const key = queryKey()
-    const states: Array<StatusResult<string>> = $state([])
+    let states = ref<Array<StatusResult<string>>>([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -248,15 +248,15 @@ describe('PersistQueryClientProvider', () => {
 
     expect(fetched).toBe(false)
 
-    expect(states).toHaveLength(2)
-    console.log('statesa', states)
-    expect(states[0]).toMatchObject({
+    expect(states.value).toHaveLength(2)
+
+    expect(states.value[0]).toMatchObject({
       status: 'pending',
       fetchStatus: 'idle',
       data: undefined,
     })
 
-    expect(states[1]).toMatchObject({
+    expect(states.value[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'hydrated',

diff --git a/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte b/packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils'
+  import { sleep } from '../utils.svelte'
 
   interface Props {
     key: Array<string>

diff --git a/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte b/packages/svelte-query-persist-client/tests/RestoreCache/Provider.svelte
@@ -3,23 +3,18 @@
   import RestoreCache from './RestoreCache.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
-  import type { StatusResult } from '../utils'
+  import type { StatusResult } from '../utils.svelte'
 
   interface Props {
     queryClient: QueryClient
     persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
     key: Array<string>
-    states: Array<StatusResult<string>>
+    states: { value: Array<StatusResult<string>> }
   }
 
-  let {
-    queryClient,
-    persistOptions,
-    key,
-    states = $bindable(),
-  }: Props = $props()
+  let { queryClient, persistOptions, key, states }: Props = $props()
 </script>
 
 <PersistQueryClientProvider client={queryClient} {persistOptions}>
-  <RestoreCache {key} bind:states />
+  <RestoreCache {key} {states} />
 </PersistQueryClientProvider>
diff --git a/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte b/packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
   import { untrack } from 'svelte'
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils'
-  import type { StatusResult } from '../utils'
+  import { sleep } from '../utils.svelte'
+  import type { StatusResult } from '../utils.svelte'
 
   let {
     key,
-    states = $bindable(),
+    states,
   }: {
     key: Array<string>
-    states: Array<StatusResult<string>>
+    states: { value: Array<StatusResult<string>> }
   } = $props()
 
-  const ss = createQuery({
+  const query = createQuery({
     queryKey: key,
     queryFn: async () => {
       await sleep(10)
@@ -21,15 +21,11 @@
   })
 
   $effect(() => {
-    console.log('initial data', ss)
-    JSON.stringify(ss)
-    untrack(() => {
-      states.push($state.snapshot(ss))
-    })
+    states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>
 
 <div>
-  <h1>{ss.data}</h1>
-  <h2>fetchStatus: {ss.fetchStatus}</h2>
+  <h1>{query.data}</h1>
+  <h2>fetchStatus: {query.fetchStatus}</h2>
 </div>