Merge branch 'main' into test/svelte-query-createQuery-simplify-queryFn-replace-queryByText-getByText

Author: manudeli

examples/react/suspense/src/components/Project.tsx

@@ -22,13 +22,11 @@ export default function Project({
       <h1>
         {activeProject} {isFetching ? <Spinner /> : null}
       </h1>
-      {data ? (
-        <div>
-          <p>forks: {data.forks_count}</p>
-          <p>stars: {data.stargazers_count}</p>
-          <p>watchers: {data.watchers_count}</p>
-        </div>
-      ) : null}
+      <div>
+        <p>forks: {data.forks_count}</p>
+        <p>stars: {data.stargazers_count}</p>
+        <p>watchers: {data.watchers_count}</p>
+      </div>
       <br />
       <br />
     </div>

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

@@ -3,6 +3,7 @@
   import { createInfiniteQuery } from '../../src/index.js'
   import type { QueryObserverResult } from '@tanstack/query-core'
   import type { Writable } from 'svelte/store'
+  import { sleep } from '@tanstack/query-test-utils'
 
   export let states: Writable<Array<QueryObserverResult>>
 
@@ -11,7 +12,7 @@
   const query = createInfiniteQuery(
     {
       queryKey: ['test'],
-      queryFn: ({ pageParam }) => Number(pageParam),
+      queryFn: ({ pageParam }) => sleep(10).then(() => pageParam),
       getNextPageParam: (lastPage) => lastPage + 1,
       initialPageParam: 0,
     },

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

@@ -3,6 +3,7 @@
   import { createInfiniteQuery } from '../../src/index.js'
   import type { QueryObserverResult } from '@tanstack/query-core'
   import type { Writable } from 'svelte/store'
+  import { sleep } from '@tanstack/query-test-utils'
 
   export let states: Writable<Array<QueryObserverResult>>
 
@@ -11,7 +12,7 @@
   const query = createInfiniteQuery(
     {
       queryKey: ['test'],
-      queryFn: () => Promise.resolve({ count: 1 }),
+      queryFn: () => sleep(10).then(() => ({ count: 1 })),
       select: (data) => ({
         pages: data.pages.map((x) => `count: ${x.count}`),
         pageParams: data.pageParams,

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

@@ -24,13 +24,12 @@ describe('createInfiniteQuery', () => {
       },
     })
 
-    await vi.advanceTimersByTimeAsync(0)
-    expect(rendered.queryByText('Status: success')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(11)
+    expect(rendered.getByText('Status: success')).toBeInTheDocument()
 
     const states = get(statesStore)
 
     expect(states).toHaveLength(2)
-
     expect(states[0]).toEqual({
       data: undefined,
       dataUpdatedAt: 0,
@@ -67,7 +66,6 @@ describe('createInfiniteQuery', () => {
       fetchStatus: 'fetching',
       promise: expect.any(Promise),
     })
-
     expect(states[1]).toEqual({
       data: { pages: [0], pageParams: [0] },
       dataUpdatedAt: expect.any(Number),
@@ -115,18 +113,16 @@ describe('createInfiniteQuery', () => {
       },
     })
 
-    await vi.advanceTimersByTimeAsync(0)
-    expect(rendered.queryByText('count: 1')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(11)
+    expect(rendered.getByText('count: 1')).toBeInTheDocument()
 
     const states = get(statesStore)
 
     expect(states).toHaveLength(2)
-
     expect(states[0]).toMatchObject({
       data: undefined,
       isSuccess: false,
     })
-
     expect(states[1]).toMatchObject({
       data: { pages: ['count: 1'] },
       isSuccess: true,

packages/svelte-query/tests/createMutation/OnSuccessExample.svelte

@@ -2,6 +2,7 @@
   import { writable } from 'svelte/store'
   import { QueryClient } from '@tanstack/query-core'
   import { createMutation, setQueryClientContext } from '../../src/index.js'
+  import { sleep } from '@tanstack/query-test-utils'
 
   export let onSuccessMock: any
   export let onSettledMock: any
@@ -12,7 +13,7 @@
   setQueryClientContext(queryClient)
 
   const mutation = createMutation({
-    mutationFn: (vars: { count: number }) => Promise.resolve(vars.count),
+    mutationFn: (vars: { count: number }) => sleep(10).then(() => vars.count),
     onSuccess: (data) => {
       onSuccessMock(data)
     },

packages/svelte-query/tests/createMutation/ResetExample.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">
   import { QueryClient } from '@tanstack/query-core'
   import { createMutation, setQueryClientContext } from '../../src/index.js'
+  import { sleep } from '@tanstack/query-test-utils'
 
   const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
   const mutation = createMutation({
-    mutationFn: () => {
-      const err = new Error('Expected mock error')
-      err.stack = ''
-      return Promise.reject(err)
-    },
+    mutationFn: () =>
+      sleep(10).then(() => Promise.reject(new Error('Expected mock error'))),
   })
 </script>
 

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

@@ -20,14 +20,12 @@ describe('createMutation', () => {
     expect(rendered.queryByText('Error: undefined')).toBeInTheDocument()
 
     fireEvent.click(rendered.getByRole('button', { name: /Mutate/i }))
-    await vi.advanceTimersByTimeAsync(0)
-    expect(
-      rendered.queryByText('Error: Expected mock error'),
-    ).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(11)
+    expect(rendered.getByText('Error: Expected mock error')).toBeInTheDocument()
 
     fireEvent.click(rendered.getByRole('button', { name: /Reset/i }))
-    await vi.advanceTimersByTimeAsync(0)
-    expect(rendered.queryByText('Error: undefined')).toBeInTheDocument()
+    await vi.advanceTimersByTimeAsync(11)
+    expect(rendered.getByText('Error: undefined')).toBeInTheDocument()
   })
 
   test('Able to call `onSuccess` and `onSettled` after each successful mutate', async () => {
@@ -46,7 +44,7 @@ describe('createMutation', () => {
     fireEvent.click(rendered.getByRole('button', { name: /Mutate/i }))
     fireEvent.click(rendered.getByRole('button', { name: /Mutate/i }))
     fireEvent.click(rendered.getByRole('button', { name: /Mutate/i }))
-    await vi.advanceTimersByTimeAsync(0)
+    await vi.advanceTimersByTimeAsync(11)
     expect(rendered.queryByText('Count: 3')).toBeInTheDocument()
 
     expect(onSuccessMock).toHaveBeenCalledTimes(3)
@@ -67,14 +65,11 @@ describe('createMutation', () => {
 
     const mutationFn = vi.fn<(value: Value) => Promise<Value>>()
 
-    mutationFn.mockImplementationOnce(() => {
-      return Promise.reject(`Expected mock error`)
-    })
+    mutationFn.mockImplementationOnce(() =>
+      sleep(20).then(() => Promise.reject(`Expected mock error`)),
+    )
 
-    mutationFn.mockImplementation(async (value) => {
-      await sleep(5)
-      return Promise.resolve(value)
-    })
+    mutationFn.mockImplementation((value) => sleep(10).then(() => value))
 
     const rendered = render(FailureExample, {
       props: {
@@ -86,7 +81,7 @@ describe('createMutation', () => {
 
     fireEvent.click(rendered.getByRole('button', { name: /Mutate/i }))
     expect(rendered.getByText('Data: undefined')).toBeInTheDocument()
-    await vi.advanceTimersByTimeAsync(0)
+    await vi.advanceTimersByTimeAsync(21)
     expect(rendered.getByText('Status: error')).toBeInTheDocument()
     expect(rendered.getByText('Failure Count: 1')).toBeInTheDocument()
     expect(
@@ -96,7 +91,7 @@ describe('createMutation', () => {
     fireEvent.click(rendered.getByRole('button', { name: /Mutate/i }))
     await vi.advanceTimersByTimeAsync(0)
     expect(rendered.getByText('Status: pending')).toBeInTheDocument()
-    await vi.advanceTimersByTimeAsync(6)
+    await vi.advanceTimersByTimeAsync(11)
     expect(rendered.getByText('Status: success')).toBeInTheDocument()
     expect(rendered.getByText('Data: 2')).toBeInTheDocument()
     expect(rendered.getByText('Failure Count: 0')).toBeInTheDocument()

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

@@ -28,9 +28,5 @@
   {JSON.stringify(statuses)}
 </div>
 
-<button data-testid="success" on:click={() => $successMutation.mutate()}>
-  Click
-</button>
-<button data-testid="error" on:click={() => $errorMutation.mutate()}>
-  Click
-</button>
+<button on:click={() => $successMutation.mutate()}>success</button>
+<button on:click={() => $errorMutation.mutate()}>error</button>

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

@@ -1,5 +1,6 @@
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
 import { fireEvent, render } from '@testing-library/svelte'
+import { sleep } from '@tanstack/query-test-utils'
 import BaseExample from './BaseExample.svelte'
 
 describe('useMutationState', () => {
@@ -12,105 +13,104 @@ describe('useMutationState', () => {
   })
 
   test('Run few mutation functions and check from useMutationState', async () => {
-    const successMutationFn = vi.fn()
-    const errorMutationFn = vi.fn().mockImplementation(() => {
-      throw 'error'
-    })
+    const successMutationFn = vi.fn(() => sleep(10).then(() => 'data'))
+    const errorMutationFn = vi
+      .fn()
+      .mockImplementation(() =>
+        sleep(20).then(() => Promise.reject(new Error('error'))),
+      )
 
     const rendered = render(BaseExample, {
       props: {
         successMutationOpts: {
           mutationKey: ['success'],
           mutationFn: successMutationFn,
         },
-
         errorMutationOpts: {
           mutationKey: ['error'],
           mutationFn: errorMutationFn,
         },
       },
     })
 
-    fireEvent.click(rendered.getByTestId('success'))
-    await vi.advanceTimersByTimeAsync(0)
+    fireEvent.click(rendered.getByText('success'))
+    await vi.advanceTimersByTimeAsync(11)
     expect(successMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByTestId('result').innerHTML).toEqual('["success"]')
+    expect(rendered.getByText('["success"]')).toBeInTheDocument()
 
-    fireEvent.click(rendered.getByTestId('error'))
-    await vi.advanceTimersByTimeAsync(0)
+    fireEvent.click(rendered.getByText('error'))
+    await vi.advanceTimersByTimeAsync(21)
     expect(errorMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByTestId('result').innerHTML).toEqual(
-      '["success","error"]',
-    )
+    expect(rendered.getByText('["success","error"]')).toBeInTheDocument()
   })
 
   test('Can select specific type of mutation ( i.e: error only )', async () => {
-    const successMutationFn = vi.fn()
-    const errorMutationFn = vi.fn().mockImplementation(() => {
-      throw 'error'
-    })
+    const successMutationFn = vi.fn(() => sleep(10).then(() => 'data'))
+    const errorMutationFn = vi
+      .fn()
+      .mockImplementation(() =>
+        sleep(20).then(() => Promise.reject(new Error('error'))),
+      )
 
     const rendered = render(BaseExample, {
       props: {
         successMutationOpts: {
           mutationKey: ['success'],
           mutationFn: successMutationFn,
         },
-
         errorMutationOpts: {
           mutationKey: ['error'],
           mutationFn: errorMutationFn,
         },
-
         mutationStateOpts: {
           filters: { status: 'error' },
         },
       },
     })
 
-    fireEvent.click(rendered.getByTestId('success'))
-    await vi.advanceTimersByTimeAsync(0)
+    fireEvent.click(rendered.getByText('success'))
+    await vi.advanceTimersByTimeAsync(11)
     expect(successMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByTestId('result').innerHTML).toEqual('[]')
+    expect(rendered.getByText('[]')).toBeInTheDocument()
 
-    fireEvent.click(rendered.getByTestId('error'))
-    await vi.advanceTimersByTimeAsync(0)
+    fireEvent.click(rendered.getByText('error'))
+    await vi.advanceTimersByTimeAsync(21)
     expect(errorMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByTestId('result').innerHTML).toEqual('["error"]')
+    expect(rendered.getByText('["error"]')).toBeInTheDocument()
   })
 
   test('Can select specific mutation using mutation key', async () => {
-    const successMutationFn = vi.fn()
-    const errorMutationFn = vi.fn().mockImplementation(() => {
-      throw 'error'
-    })
+    const successMutationFn = vi.fn(() => sleep(10).then(() => 'data'))
+    const errorMutationFn = vi
+      .fn()
+      .mockImplementation(() =>
+        sleep(20).then(() => Promise.reject(new Error('error'))),
+      )
 
     const rendered = render(BaseExample, {
       props: {
         successMutationOpts: {
           mutationKey: ['success'],
           mutationFn: successMutationFn,
         },
-
         errorMutationOpts: {
           mutationKey: ['error'],
           mutationFn: errorMutationFn,
         },
-
         mutationStateOpts: {
           filters: { mutationKey: ['success'] },
         },
       },
     })
 
-    fireEvent.click(rendered.getByTestId('success'))
-    await vi.advanceTimersByTimeAsync(0)
+    fireEvent.click(rendered.getByText('success'))
+    await vi.advanceTimersByTimeAsync(11)
     expect(successMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByTestId('result').innerHTML).toEqual('["success"]')
+    expect(rendered.getByText('["success"]')).toBeInTheDocument()
 
-    fireEvent.click(rendered.getByTestId('error'))
-    await vi.advanceTimersByTimeAsync(0)
+    fireEvent.click(rendered.getByText('error'))
+    await vi.advanceTimersByTimeAsync(21)
     expect(errorMutationFn).toHaveBeenCalledTimes(1)
-    expect(rendered.getByTestId('result').innerHTML).toEqual('["success"]')
+    expect(rendered.getByText('["success"]')).toBeInTheDocument()
   })
 })