tests(svelte-query): Increase test coverage (#7659)

* tests(svelte-query): Add createInfiniteQuery, useIsMutating

* Add infiniteQueryOptions, update context

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

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { getQueryClientContext } from '../../src/context'
+
+  getQueryClientContext()
+</script>

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

@@ -1,8 +1,18 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, test } from 'vitest'
+import { render } from '@testing-library/svelte'
 import { getIsRestoringContext } from '../../src/context'
+import BaseExample from './BaseExample.svelte'
+
+describe('getQueryClientContext', () => {
+  test('Throw when called without a client in context', () => {
+    expect(() => render(BaseExample)).toThrowError(
+      'No QueryClient was found in Svelte context. Did you forget to wrap your component with QueryClientProvider?',
+    )
+  })
+})
 
 describe('getIsRestoringContext', () => {
-  it('Should not throw when called outside of a component', () => {
-    expect(() => getIsRestoringContext()).to.not.throw()
+  test('Do not throw when called outside of a component', () => {
+    expect(() => getIsRestoringContext()).not.toThrowError()
   })
 })

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { QueryClient } from '@tanstack/query-core'
+  import { createInfiniteQuery } from '../../src/createInfiniteQuery'
+
+  const queryClient = new QueryClient()
+
+  const query = createInfiniteQuery(
+    {
+      queryKey: ['test'],
+      queryFn: ({ pageParam }) => Number(pageParam),
+      getNextPageParam: (lastPage) => lastPage + 1,
+      initialPageParam: 0,
+    },
+    queryClient,
+  )
+</script>
+
+<div>Data: {JSON.stringify($query.data)}</div>
+<div>Status: {$query.status}</div>

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

@@ -0,0 +1,19 @@
+import { describe, test } from 'vitest'
+import { render } from '@testing-library/svelte'
+
+import { sleep } from '../utils'
+import BaseExample from './BaseExample.svelte'
+
+describe('createQuery', () => {
+  test('Render and wait for success', async () => {
+    const rendered = render(BaseExample)
+
+    await rendered.findByText('Data: undefined')
+    await rendered.findByText('Status: pending')
+
+    await sleep(20)
+
+    await rendered.findByText('Data: {"pages":[0],"pageParams":[0]}')
+    await rendered.findByText('Status: success')
+  })
+})

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { describe, expectTypeOf, test } from 'vitest'
+import { type InfiniteData } from '@tanstack/query-core'
+import { infiniteQueryOptions } from '../../src/infiniteQueryOptions'
+
+describe('queryOptions', () => {
+  test('Should not allow excess properties', () => {
+    infiniteQueryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve('data'),
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+      // @ts-expect-error this is a good error, because stallTime does not exist!
+      stallTime: 1000,
+    })
+  })
+  test('Should infer types for callbacks', () => {
+    infiniteQueryOptions({
+      queryKey: ['key'],
+      queryFn: () => Promise.resolve('data'),
+      staleTime: 1000,
+      getNextPageParam: () => 1,
+      initialPageParam: 1,
+      select: (data) => {
+        expectTypeOf(data).toEqualTypeOf<InfiniteData<string, number>>()
+      },
+    })
+  })
+})

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

@@ -1,9 +1,9 @@
 import { QueryClient, dataTagSymbol, skipToken } from '@tanstack/query-core'
-import { describe, expectTypeOf, it } from 'vitest'
+import { describe, expectTypeOf, test } from 'vitest'
 import { queryOptions } from '../../src/queryOptions'
 
 describe('queryOptions', () => {
-  it('should not allow excess properties', () => {
+  test('Should not allow excess properties', () => {
     queryOptions({
       queryKey: ['key'],
       queryFn: () => Promise.resolve(5),
@@ -12,7 +12,7 @@ describe('queryOptions', () => {
     })
   })
 
-  it('should infer types for callbacks', () => {
+  test('Should infer types for callbacks', () => {
     queryOptions({
       queryKey: ['key'],
       queryFn: () => Promise.resolve(5),
@@ -23,7 +23,7 @@ describe('queryOptions', () => {
     })
   })
 
-  it('should work when passed to fetchQuery', async () => {
+  test('Should work when passed to fetchQuery', async () => {
     const options = queryOptions({
       queryKey: ['key'],
       queryFn: () => Promise.resolve(5),
@@ -33,7 +33,7 @@ describe('queryOptions', () => {
     expectTypeOf(data).toEqualTypeOf<number>()
   })
 
-  it('should tag the queryKey with the result type of the QueryFn', () => {
+  test('Should tag the queryKey with the result type of the QueryFn', () => {
     const { queryKey } = queryOptions({
       queryKey: ['key'],
       queryFn: () => Promise.resolve(5),
@@ -42,7 +42,7 @@ describe('queryOptions', () => {
     expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<number>()
   })
 
-  it('should tag the queryKey even if no promise is returned', () => {
+  test('Should tag the queryKey even if no promise is returned', () => {
     const { queryKey } = queryOptions({
       queryKey: ['key'],
       queryFn: () => 5,
@@ -51,15 +51,15 @@ describe('queryOptions', () => {
     expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<number>()
   })
 
-  it('should tag the queryKey with unknown if there is no queryFn', () => {
+  test('Should tag the queryKey with unknown if there is no queryFn', () => {
     const { queryKey } = queryOptions({
       queryKey: ['key'],
     })
 
     expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<unknown>()
   })
 
-  it('should tag the queryKey with the result type of the QueryFn if select is used', () => {
+  test('Should tag the queryKey with the result type of the QueryFn if select is used', () => {
     const { queryKey } = queryOptions({
       queryKey: ['key'],
       queryFn: () => Promise.resolve(5),
@@ -69,7 +69,7 @@ describe('queryOptions', () => {
     expectTypeOf(queryKey[dataTagSymbol]).toEqualTypeOf<number>()
   })
 
-  it('should return the proper type when passed to getQueryData', () => {
+  test('Should return the proper type when passed to getQueryData', () => {
     const { queryKey } = queryOptions({
       queryKey: ['key'],
       queryFn: () => Promise.resolve(5),
@@ -80,7 +80,7 @@ describe('queryOptions', () => {
     expectTypeOf(data).toEqualTypeOf<number | undefined>()
   })
 
-  it('should return the proper type when passed to getQueryState', () => {
+  test('Should return the proper type when passed to getQueryState', () => {
     const { queryKey } = queryOptions({
       queryKey: ['key'],
       queryFn: () => Promise.resolve(5),
@@ -91,7 +91,7 @@ describe('queryOptions', () => {
     expectTypeOf(state?.data).toEqualTypeOf<number | undefined>()
   })
 
-  it('should properly type updaterFn when passed to setQueryData', () => {
+  test('Should properly type updaterFn when passed to setQueryData', () => {
     const { queryKey } = queryOptions({
       queryKey: ['key'],
       queryFn: () => Promise.resolve(5),
@@ -105,7 +105,7 @@ describe('queryOptions', () => {
     expectTypeOf(data).toEqualTypeOf<number | undefined>()
   })
 
-  it('should properly type value when passed to setQueryData', () => {
+  test('Should properly type value when passed to setQueryData', () => {
     const { queryKey } = queryOptions({
       queryKey: ['key'],
       queryFn: () => Promise.resolve(5),
@@ -122,7 +122,7 @@ describe('queryOptions', () => {
     expectTypeOf(data).toEqualTypeOf<number | undefined>()
   })
 
-  it('should infer even if there is a conditional skipToken', () => {
+  test('Should infer even if there is a conditional skipToken', () => {
     const options = queryOptions({
       queryKey: ['key'],
       queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5),
@@ -133,7 +133,7 @@ describe('queryOptions', () => {
     expectTypeOf(data).toEqualTypeOf<number | undefined>()
   })
 
-  it('should infer to unknown if we disable a query with just a skipToken', () => {
+  test('Should infer to unknown if we disable a query with just a skipToken', () => {
     const options = queryOptions({
       queryKey: ['key'],
       queryFn: skipToken,

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

@@ -14,15 +14,13 @@
   const options = derived(ready, ($ready) => ({
     queryKey: [key],
     queryFn: async () => {
-      await sleep(50)
+      await sleep(20)
       return 'test'
     },
     enabled: $ready,
   }))
 
   const query = createQuery(options, queryClient)
-
-  $: console.log($isFetching)
 </script>
 
 <button on:click={() => ($ready = true)}>setReady</button>

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { QueryClient } from '@tanstack/query-core'
+  import { createMutation } from '../../src/createMutation'
+  import { sleep } from '../utils'
+  import { useIsMutating } from '../../src/useIsMutating'
+
+  const queryClient = new QueryClient()
+  const isMutating = useIsMutating(undefined, queryClient)
+
+  const mutation = createMutation(
+    {
+      mutationKey: ['mutation1'],
+      mutationFn: async () => {
+        await sleep(20)
+        return 'data'
+      },
+    },
+    queryClient,
+  )
+</script>
+
+<button on:click={() => $mutation.mutate()}>Trigger</button>
+
+<div>isMutating: {$isMutating}</div>

packages/svelte-query/tests/useIsMutating/useIsMutating.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('isMutating: 0')
+    fireEvent.click(rendered.getByRole('button', { name: /Trigger/i }))
+    await rendered.findByText('isMutating: 1')
+    await rendered.findByText('isMutating: 0')
+  })
+})

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

@@ -1,9 +1,9 @@
-import { describe, expect, it, vi } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
 import { fireEvent, render, waitFor } from '@testing-library/svelte'
 import BaseExample from './BaseExample.svelte'
 
 describe('useMutationState', () => {
-  it('run few mutation functions and check from useMutationState ', async () => {
+  test('Run few mutation functions and check from useMutationState ', async () => {
     const successMutationFn = vi.fn()
 
     const errorMutationFn = vi.fn().mockImplementation(() => {
@@ -41,7 +41,7 @@ describe('useMutationState', () => {
     })
   })
 
-  it('can select specific type of mutation ( i.e: error only )', async () => {
+  test('Can select specific type of mutation ( i.e: error only )', async () => {
     const successMutationFn = vi.fn()
     const errorMutationFn = vi.fn().mockImplementation(() => {
       throw 'error'
@@ -80,7 +80,7 @@ describe('useMutationState', () => {
     })
   })
 
-  it('can select specific mutation using mutation key', async () => {
+  test('Can select specific mutation using mutation key', async () => {
     const successMutationFn = vi.fn()
     const errorMutationFn = vi.fn().mockImplementation(() => {
       throw 'error'