tests(svelte-query): Reorganise for multiple components per test (#7654)

* Move tests

* Add useIsFetching test, disabled createQuery test

* Add QueryCacheProvider test

packages/svelte-query/tests/QueryClientProvider/ChildComponent.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { createQuery } from '../../src/createQuery'
+  import { sleep } from '../utils'
+
+  const query = createQuery({
+    queryKey: ['hello'],
+    queryFn: async () => {
+      await sleep(10)
+      return 'test'
+    },
+  })
+</script>
+
+<div>{$query.data}</div>

packages/svelte-query/tests/QueryClientProvider/ParentComponent.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { QueryClient } from '@tanstack/query-core'
+  import QueryClientProvider from '../../src/QueryClientProvider.svelte'
+  import ChildComponent from './ChildComponent.svelte'
+  import type { QueryCache } from '@tanstack/query-core'
+
+  export let queryCache: QueryCache
+
+  const queryClient = new QueryClient({ queryCache })
+</script>
+
+<QueryClientProvider client={queryClient}>
+  <ChildComponent />
+</QueryClientProvider>

packages/svelte-query/tests/QueryClientProvider/QueryClientProvider.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, test } from 'vitest'
+import { render, waitFor } from '@testing-library/svelte'
+import { QueryCache } from '@tanstack/query-core'
+import ParentComponent from './ParentComponent.svelte'
+
+describe('QueryClientProvider', () => {
+  test('Sets a specific cache for all queries to use', async () => {
+    const queryCache = new QueryCache()
+
+    const rendered = render(ParentComponent, {
+      props: {
+        queryCache: queryCache,
+      },
+    })
+
+    await waitFor(() => rendered.getByText('test'))
+
+    expect(queryCache.find({ queryKey: ['hello'] })).toBeDefined()
+  })
+})

packages/svelte-query/tests/context.test.ts → packages/svelte-query/tests/context/context.test.ts

@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest'
-import { getIsRestoringContext } from '../src/context'
+import { getIsRestoringContext } from '../../src/context'
 
 describe('getIsRestoringContext', () => {
-  it('Should not throw when called outside of a component', async () => {
+  it('Should not throw when called outside of a component', () => {
     expect(() => getIsRestoringContext()).to.not.throw()
   })
 })

packages/svelte-query/tests/CreateMutation.svelte → packages/svelte-query/tests/createMutation/BaseExample.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { QueryClient } from '@tanstack/query-core'
-  import { setQueryClientContext } from '../src/context'
-  import { createMutation } from '../src/createMutation'
-  import type { CreateMutationOptions } from '../src/types'
+  import { setQueryClientContext } from '../../src/context'
+  import { createMutation } from '../../src/createMutation'
+  import type { CreateMutationOptions } from '../../src/types'
 
   export let options: CreateMutationOptions
 

packages/svelte-query/tests/createMutation.test.ts → packages/svelte-query/tests/createMutation/createMutation.test.ts

@@ -1,12 +1,12 @@
 import { describe, expect, it, vi } from 'vitest'
 import { fireEvent, render, waitFor } from '@testing-library/svelte'
-import CreateMutation from './CreateMutation.svelte'
+import BaseExample from './BaseExample.svelte'
 
 describe('createMutation', () => {
   it('Call mutate and check function runs', async () => {
     const mutationFn = vi.fn()
 
-    const rendered = render(CreateMutation, {
+    const rendered = render(BaseExample, {
       props: {
         options: {
           mutationFn,

packages/svelte-query/tests/CreateQueries.svelte → packages/svelte-query/tests/createQueries/BaseExample.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { createQueries } from '../src/createQueries'
+  import { createQueries } from '../../src/createQueries'
   import type { QueryClient } from '@tanstack/query-core'
-  import type { QueriesOptions, QueriesResults } from '../src/createQueries'
+  import type { QueriesOptions, QueriesResults } from '../../src/createQueries'
 
   export let options: {
     queries: [...QueriesOptions<any>]

packages/svelte-query/tests/createQueries.test.ts → packages/svelte-query/tests/createQueries/createQueries.test.ts

@@ -1,12 +1,12 @@
 import { describe, expect, it } from 'vitest'
 import { render, waitFor } from '@testing-library/svelte'
 import { QueryClient } from '@tanstack/query-core'
-import CreateQueries from './CreateQueries.svelte'
-import { sleep } from './utils'
+import { sleep } from '../utils'
+import BaseExample from './BaseExample.svelte'
 
 describe('createQueries', () => {
   it('Render and wait for success', async () => {
-    const rendered = render(CreateQueries, {
+    const rendered = render(BaseExample, {
       props: {
         options: {
           queries: [
@@ -44,7 +44,7 @@ describe('createQueries', () => {
   it('should combine queries', async () => {
     const ids = [1, 2, 3]
 
-    const rendered = render(CreateQueries, {
+    const rendered = render(BaseExample, {
       props: {
         options: {
           queries: ids.map((id) => ({

packages/svelte-query/tests/CreateQuery.svelte → packages/svelte-query/tests/createQuery/BaseExample.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { createQuery } from '../src/createQuery'
+  import { createQuery } from '../../src/createQuery'
   import type { QueryClient } from '@tanstack/query-core'
-  import type { CreateQueryOptions, StoreOrVal } from '../src/types'
+  import type { CreateQueryOptions, StoreOrVal } from '../../src/types'
 
   export let options: StoreOrVal<CreateQueryOptions<any>>
   export let queryClient: QueryClient

packages/svelte-query/tests/createQuery/DisabledExample.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { QueryClient } from '@tanstack/query-core'
+  import { derived, writable } from 'svelte/store'
+  import { createQuery } from '../../src/createQuery'
+  import { queryKey, sleep } from '../utils'
+
+  const queryClient = new QueryClient()
+  const key = queryKey()
+  const count = writable(0)
+
+  const options = derived(count, ($count) => ({
+    queryKey: [key, $count],
+    queryFn: async () => {
+      await sleep(5)
+      return $count
+    },
+    enabled: $count === 0,
+  }))
+
+  const query = createQuery(options, queryClient)
+</script>
+
+<button on:click={() => ($count += 1)}>Increment</button>
+<div>Data: {$query.data ?? 'undefined'}</div>
+<div>Count: {$count}</div>

packages/svelte-query/tests/createQuery.test.ts → packages/svelte-query/tests/createQuery/createQuery.test.ts

@@ -1,13 +1,14 @@
 import { describe, expect, test } from 'vitest'
-import { render, waitFor } from '@testing-library/svelte'
+import { fireEvent, render, waitFor } from '@testing-library/svelte'
 import { derived, writable } from 'svelte/store'
 import { QueryClient } from '@tanstack/query-core'
-import CreateQuery from './CreateQuery.svelte'
-import { sleep } from './utils'
+import { sleep } from '../utils'
+import BaseExample from './BaseExample.svelte'
+import DisabledExample from './DisabledExample.svelte'
 
 describe('createQuery', () => {
   test('Render and wait for success', async () => {
-    const rendered = render(CreateQuery, {
+    const rendered = render(BaseExample, {
       props: {
         options: {
           queryKey: ['test'],
@@ -38,7 +39,7 @@ describe('createQuery', () => {
       },
     })
 
-    const rendered = render(CreateQuery, {
+    const rendered = render(BaseExample, {
       props: {
         options: optionsStore,
         queryClient: new QueryClient(),
@@ -61,7 +62,7 @@ describe('createQuery', () => {
       },
     }))
 
-    const rendered = render(CreateQuery, {
+    const rendered = render(BaseExample, {
       props: {
         options: derivedStore,
         queryClient: new QueryClient(),
@@ -84,7 +85,7 @@ describe('createQuery', () => {
       },
     }))
 
-    const rendered = render(CreateQuery, {
+    const rendered = render(BaseExample, {
       props: {
         options: derivedStore,
         queryClient: new QueryClient({
@@ -125,7 +126,7 @@ describe('createQuery', () => {
       placeholderData: (previousData: string) => previousData,
     }))
 
-    const rendered = render(CreateQuery, {
+    const rendered = render(BaseExample, {
       props: {
         options: derivedStore,
         queryClient: new QueryClient(),
@@ -154,4 +155,17 @@ describe('createQuery', () => {
       expect(rendered.queryByText('Success 2')).toBeInTheDocument()
     })
   })
+
+  test('Should not fetch when switching to a disabled query', async () => {
+    const rendered = render(DisabledExample)
+
+    await waitFor(() => rendered.getByText('Data: 0'))
+
+    fireEvent.click(rendered.getByRole('button', { name: /Increment/i }))
+
+    await waitFor(() => {
+      rendered.getByText('Count: 1')
+      rendered.getByText('Data: undefined')
+    })
+  })
 })

packages/svelte-query/tests/queryOptions.test.ts → packages/svelte-query/tests/queryOptions/queryOptions.test.ts

@@ -1,6 +1,6 @@
 import { QueryClient, dataTagSymbol, skipToken } from '@tanstack/query-core'
 import { describe, expectTypeOf, it } from 'vitest'
-import { queryOptions } from '../src/queryOptions'
+import { queryOptions } from '../../src/queryOptions'
 
 describe('queryOptions', () => {
   it('should not allow excess properties', () => {

packages/svelte-query/tests/useIsFetching/BaseExample.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { QueryClient } from '@tanstack/query-core'
+  import { derived, writable } from 'svelte/store'
+  import { createQuery } from '../../src/createQuery'
+  import { useIsFetching } from '../../src/useIsFetching'
+  import { queryKey, sleep } from '../utils'
+
+  const queryClient = new QueryClient()
+  const key = queryKey()
+  const ready = writable(false)
+
+  const isFetching = useIsFetching(undefined, queryClient)
+
+  const options = derived(ready, ($ready) => ({
+    queryKey: [key],
+    queryFn: async () => {
+      await sleep(50)
+      return 'test'
+    },
+    enabled: $ready,
+  }))
+
+  const query = createQuery(options, queryClient)
+
+  $: console.log($isFetching)
+</script>
+
+<button on:click={() => ($ready = true)}>setReady</button>
+<div>isFetching: {$isFetching}</div>
+
+{#if $query.isSuccess}
+  {$query.data}
+{/if}

packages/svelte-query/tests/useIsFetching/useIsFetching.test.ts

@@ -0,0 +1,14 @@
+import { describe, test } from 'vitest'
+import { fireEvent, render } from '@testing-library/svelte'
+import BaseExample from './BaseExample.svelte'
+
+describe('useIsFetching', () => {
+  test('should update as queries start and stop fetching', async () => {
+    const rendered = render(BaseExample)
+
+    await rendered.findByText('isFetching: 0')
+    fireEvent.click(rendered.getByRole('button', { name: /setReady/i }))
+    await rendered.findByText('isFetching: 1')
+    await rendered.findByText('isFetching: 0')
+  })
+})

packages/svelte-query/tests/UseMutationState.svelte → packages/svelte-query/tests/useMutationState/BaseExample.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import { QueryClient } from '@tanstack/query-core'
-  import { setQueryClientContext } from '../src/context'
-  import { createMutation } from '../src/createMutation'
-  import { useMutationState } from '../src/useMutationState'
+  import { setQueryClientContext } from '../../src/context'
+  import { createMutation } from '../../src/createMutation'
+  import { useMutationState } from '../../src/useMutationState'
   import type {
     CreateMutationOptions,
     MutationStateOptions,
-  } from '../src/types'
+  } from '../../src/types'
 
   export let successMutationOpts: CreateMutationOptions
   export let errorMutationOpts: CreateMutationOptions

packages/svelte-query/tests/useMutationState.test.ts → packages/svelte-query/tests/useMutationState/useMutationState.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest'
 import { fireEvent, render, waitFor } from '@testing-library/svelte'
-import UseMutationState from './UseMutationState.svelte'
+import BaseExample from './BaseExample.svelte'
 
 describe('useMutationState', () => {
   it('run few mutation functions and check from useMutationState ', async () => {
@@ -10,7 +10,7 @@ describe('useMutationState', () => {
       throw 'error'
     })
 
-    const rendered = render(UseMutationState, {
+    const rendered = render(BaseExample, {
       props: {
         successMutationOpts: {
           mutationKey: ['success'],
@@ -47,7 +47,7 @@ describe('useMutationState', () => {
       throw 'error'
     })
 
-    const rendered = render(UseMutationState, {
+    const rendered = render(BaseExample, {
       props: {
         successMutationOpts: {
           mutationKey: ['success'],
@@ -86,7 +86,7 @@ describe('useMutationState', () => {
       throw 'error'
     })
 
-    const rendered = render(UseMutationState, {
+    const rendered = render(BaseExample, {
       props: {
         successMutationOpts: {
           mutationKey: ['success'],

packages/svelte-query/tests/utils.ts

@@ -3,3 +3,10 @@ export function sleep(timeout: number): Promise<void> {
     setTimeout(resolve, timeout)
   })
 }
+
+let queryKeyCount = 0
+
+export function queryKey(): string {
+  queryKeyCount += 1
+  return `query_${queryKeyCount}`
+}