test(svelte-query): Check query states (#7741)

* chore(svelte-query-persist-client): Use store subscribe shortcut * Use statesStore logic in svelte-query * Use toHaveLength * Stricter types
TanStack · Jul 16, 2024 · 38e5c4b · 38e5c4b
1 parent 28af03f
commit 38e5c4b
Show file tree

Hide file tree

Showing 12 changed files with 327 additions and 172 deletions.
diff --git a/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte b/packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { get } from 'svelte/store'
   import { sleep } from '../utils'
   import type { Writable } from 'svelte/store'
 
@@ -16,16 +15,9 @@
       return 'fetched'
     },
   })
-
-  let data = get(state).data
-  let fetchStatus = get(state).fetchStatus
-  state.subscribe((s) => {
-    data = s.data
-    fetchStatus = s.fetchStatus
-  })
 </script>
 
 <div>
-  <h1>{data}</h1>
-  <h2>fetchStatus: {fetchStatus}</h2>
+  <h1>{$state.data}</h1>
+  <h2>fetchStatus: {$state.fetchStatus}</h2>
 </div>
diff --git a/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte b/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { get } from 'svelte/store'
   import { sleep } from '../utils'
   import type { Writable } from 'svelte/store'
   import type { StatusResult } from '../utils'
@@ -20,19 +19,10 @@
     staleTime: Infinity,
   })
 
-  let data = get(state).data
-  let fetchStatus = get(state).fetchStatus
-  state.subscribe((s) => {
-    states.update((prev) => [
-      ...prev,
-      { status: s.status, data: s.data, fetchStatus: s.fetchStatus },
-    ])
-    data = s.data
-    fetchStatus = s.fetchStatus
-  })
+  $: states.update((prev) => [...prev, $state])
 </script>
 
 <div>
-  <h1>data: {data ?? 'null'}</h1>
-  <h2>fetchStatus: {fetchStatus}</h2>
+  <h1>data: {$state.data ?? 'null'}</h1>
+  <h2>fetchStatus: {$state.fetchStatus}</h2>
 </div>
diff --git a/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte b/packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { get } from 'svelte/store'
   import { sleep } from '../utils'
   import type { Writable } from 'svelte/store'
   import type { StatusResult } from '../utils'
@@ -21,19 +20,10 @@
     initialDataUpdatedAt: 1,
   })
 
-  let data = get(state).data
-  let fetchStatus = get(state).fetchStatus
-  state.subscribe((s) => {
-    states.update((prev) => [
-      ...prev,
-      { status: s.status, data: s.data, fetchStatus: s.fetchStatus },
-    ])
-    data = s.data
-    fetchStatus = s.fetchStatus
-  })
+  $: states.update((prev) => [...prev, $state])
 </script>
 
 <div>
-  <h1>{data}</h1>
-  <h2>fetchStatus: {fetchStatus}</h2>
+  <h1>{$state.data}</h1>
+  <h2>fetchStatus: {$state.fetchStatus}</h2>
 </div>
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,5 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { get } from 'svelte/store'
   import { sleep } from '../utils'
 
   export let key: Array<string>
@@ -12,16 +11,9 @@
       return 'fetched'
     },
   })
-
-  let data = get(state).data
-  let fetchStatus = get(state).fetchStatus
-  state.subscribe((s) => {
-    data = s.data
-    fetchStatus = s.fetchStatus
-  })
 </script>
 
 <div>
-  <h1>{data}</h1>
-  <h2>fetchStatus: {fetchStatus}</h2>
+  <h1>{$state.data}</h1>
+  <h2>fetchStatus: {$state.fetchStatus}</h2>
 </div>
diff --git a/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.ts b/packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.ts
@@ -57,7 +57,7 @@ const createMockErrorPersister = (
 describe('PersistQueryClientProvider', () => {
   test('restores cache from persister', async () => {
     const key = queryKey()
-    const states: Writable<Array<StatusResult<string>>> = writable([])
+    const statesStore: Writable<Array<StatusResult<string>>> = writable([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -76,36 +76,36 @@ describe('PersistQueryClientProvider', () => {
         queryClient,
         persistOptions: { persister },
         key,
-        states,
+        states: statesStore,
       },
     })
 
     await waitFor(() => rendered.getByText('fetchStatus: idle'))
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    const states_ = get(states)
-    expect(states_).toHaveLength(4)
+    const states = get(statesStore)
+    expect(states).toHaveLength(4)
 
-    expect(states_[0]).toMatchObject({
+    expect(states[0]).toMatchObject({
       status: 'pending',
       fetchStatus: 'idle',
       data: undefined,
     })
 
-    expect(states_[1]).toMatchObject({
+    expect(states[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
     })
 
-    expect(states_[2]).toMatchObject({
+    expect(states[2]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
     })
 
-    expect(states_[3]).toMatchObject({
+    expect(states[3]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
@@ -114,7 +114,7 @@ describe('PersistQueryClientProvider', () => {
 
   test('should also put useQueries into idle state', async () => {
     const key = queryKey()
-    const states: Writable<Array<StatusResult<string>>> = writable([])
+    const statesStore: Writable<Array<StatusResult<string>>> = writable([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -133,37 +133,37 @@ describe('PersistQueryClientProvider', () => {
         queryClient,
         persistOptions: { persister },
         key,
-        states,
+        states: statesStore,
       },
     })
 
     await waitFor(() => rendered.getByText('fetchStatus: idle'))
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    const states_ = get(states)
+    const states = get(statesStore)
 
-    expect(states_).toHaveLength(4)
+    expect(states).toHaveLength(4)
 
-    expect(states_[0]).toMatchObject({
+    expect(states[0]).toMatchObject({
       status: 'pending',
       fetchStatus: 'idle',
       data: undefined,
     })
 
-    expect(states_[1]).toMatchObject({
+    expect(states[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
     })
 
-    expect(states_[2]).toMatchObject({
+    expect(states[2]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
     })
 
-    expect(states_[3]).toMatchObject({
+    expect(states[3]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
@@ -172,7 +172,7 @@ describe('PersistQueryClientProvider', () => {
 
   test('should show initialData while restoring', async () => {
     const key = queryKey()
-    const states: Writable<Array<StatusResult<string>>> = writable([])
+    const statesStore: Writable<Array<StatusResult<string>>> = writable([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -191,36 +191,36 @@ describe('PersistQueryClientProvider', () => {
         queryClient,
         persistOptions: { persister },
         key,
-        states,
+        states: statesStore,
       },
     })
 
     await waitFor(() => rendered.getByText('initial'))
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
 
-    const states_ = get(states)
-    expect(states_).toHaveLength(4)
+    const states = get(statesStore)
+    expect(states).toHaveLength(4)
 
-    expect(states_[0]).toMatchObject({
+    expect(states[0]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'initial',
     })
 
-    expect(states_[1]).toMatchObject({
+    expect(states[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
     })
 
-    expect(states_[2]).toMatchObject({
+    expect(states[2]).toMatchObject({
       status: 'success',
       fetchStatus: 'fetching',
       data: 'hydrated',
     })
 
-    expect(states_[3]).toMatchObject({
+    expect(states[3]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'fetched',
@@ -229,7 +229,7 @@ describe('PersistQueryClientProvider', () => {
 
   test('should not refetch after restoring when data is fresh', async () => {
     const key = queryKey()
-    const states: Writable<Array<StatusResult<string>>> = writable([])
+    const statesStore: Writable<Array<StatusResult<string>>> = writable([])
 
     const queryClient = createQueryClient()
     await queryClient.prefetchQuery({
@@ -250,26 +250,26 @@ describe('PersistQueryClientProvider', () => {
         queryClient,
         persistOptions: { persister },
         key,
-        states,
+        states: statesStore,
         fetched,
       },
     })
 
     await waitFor(() => rendered.getByText('data: null'))
     await waitFor(() => rendered.getByText('data: hydrated'))
 
-    const states_ = get(states)
-    expect(states_).toHaveLength(2)
+    const states = get(statesStore)
+    expect(states).toHaveLength(2)
 
     expect(get(fetched)).toBe(false)
 
-    expect(states_[0]).toMatchObject({
+    expect(states[0]).toMatchObject({
       status: 'pending',
       fetchStatus: 'idle',
       data: undefined,
     })
 
-    expect(states_[1]).toMatchObject({
+    expect(states[1]).toMatchObject({
       status: 'success',
       fetchStatus: 'idle',
       data: 'hydrated',
@@ -324,25 +324,28 @@ describe('PersistQueryClientProvider', () => {
 
     queryClient.clear()
 
-    const states: Writable<Array<string>> = writable([])
+    const statesStore: Writable<Array<string>> = writable([])
 
     const rendered = render(AwaitOnSuccess, {
       props: {
         queryClient,
         persistOptions: { persister },
         key,
-        states,
+        states: statesStore,
         onSuccess: async () => {
-          states.update((s) => [...s, 'onSuccess'])
+          statesStore.update((s) => [...s, 'onSuccess'])
           await sleep(20)
-          states.update((s) => [...s, 'onSuccess done'])
+          statesStore.update((s) => [...s, 'onSuccess done'])
         },
       },
     })
 
     await waitFor(() => rendered.getByText('hydrated'))
     await waitFor(() => rendered.getByText('fetched'))
-    expect(get(states)).toEqual([
+
+    const states = get(statesStore)
+
+    expect(states).toEqual([
       'onSuccess',
       'onSuccess done',
       'fetching',

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,5 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { get } from 'svelte/store'
   import { sleep } from '../utils'
 
   export let key: Array<string>
@@ -12,16 +11,9 @@
       return 'fetched'
     },
   })
-
-  let data = get(state).data
-  let fetchStatus = get(state).fetchStatus
-  state.subscribe((s) => {
-    data = s.data
-    fetchStatus = s.fetchStatus
-  })
 </script>
 
 <div>
-  <h1>{data}</h1>
-  <h2>fetchStatus: {fetchStatus}</h2>
+  <h1>{$state.data}</h1>
+  <h2>fetchStatus: {$state.fetchStatus}</h2>
 </div>