> = writable([])
+
+ const rendered = render(BaseExample, {
+ props: {
+ states: statesStore,
+ },
+ })
+
+ await waitFor(() => {
+ expect(rendered.queryByText('Status: success')).toBeInTheDocument()
+ })
-describe('createQuery', () => {
- test('Render and wait for success', async () => {
- const rendered = render(BaseExample)
+ const states = get(statesStore)
- await rendered.findByText('Data: undefined')
- await rendered.findByText('Status: pending')
+ expect(states).toHaveLength(2)
- await sleep(20)
+ expect(states[0]).toEqual({
+ data: undefined,
+ dataUpdatedAt: 0,
+ error: null,
+ errorUpdatedAt: 0,
+ failureCount: 0,
+ failureReason: null,
+ errorUpdateCount: 0,
+ fetchNextPage: expect.any(Function),
+ fetchPreviousPage: expect.any(Function),
+ hasNextPage: false,
+ hasPreviousPage: false,
+ isError: false,
+ isFetched: false,
+ isFetchedAfterMount: false,
+ isFetching: true,
+ isPaused: false,
+ isFetchNextPageError: false,
+ isFetchingNextPage: false,
+ isFetchPreviousPageError: false,
+ isFetchingPreviousPage: false,
+ isLoading: true,
+ isPending: true,
+ isInitialLoading: true,
+ isLoadingError: false,
+ isPlaceholderData: false,
+ isRefetchError: false,
+ isRefetching: false,
+ isStale: true,
+ isSuccess: false,
+ refetch: expect.any(Function),
+ status: 'pending',
+ fetchStatus: 'fetching',
+ })
- await rendered.findByText('Data: {"pages":[0],"pageParams":[0]}')
- await rendered.findByText('Status: success')
+ expect(states[1]).toEqual({
+ data: { pages: [0], pageParams: [0] },
+ dataUpdatedAt: expect.any(Number),
+ error: null,
+ errorUpdatedAt: 0,
+ failureCount: 0,
+ failureReason: null,
+ errorUpdateCount: 0,
+ fetchNextPage: expect.any(Function),
+ fetchPreviousPage: expect.any(Function),
+ hasNextPage: true,
+ hasPreviousPage: false,
+ isError: false,
+ isFetched: true,
+ isFetchedAfterMount: true,
+ isFetching: false,
+ isPaused: false,
+ isFetchNextPageError: false,
+ isFetchingNextPage: false,
+ isFetchPreviousPageError: false,
+ isFetchingPreviousPage: false,
+ isLoading: false,
+ isPending: false,
+ isInitialLoading: false,
+ isLoadingError: false,
+ isPlaceholderData: false,
+ isRefetchError: false,
+ isRefetching: false,
+ isStale: true,
+ isSuccess: true,
+ refetch: expect.any(Function),
+ status: 'success',
+ fetchStatus: 'idle',
+ })
})
})
diff --git a/packages/svelte-query/tests/createQueries/BaseExample.svelte b/packages/svelte-query/tests/createQueries/BaseExample.svelte
index 6401f34b10..7f285fbb18 100644
--- a/packages/svelte-query/tests/createQueries/BaseExample.svelte
+++ b/packages/svelte-query/tests/createQueries/BaseExample.svelte
@@ -1,27 +1,17 @@
-{#if Array.isArray($queries)}
- {#each $queries as query, index}
- {#if query.isPending}
- Loading {index + 1}
- {:else if query.isSuccess}
- {query.data}
- {/if}
- {/each}
-{:else if $queries.isPending}
- Loading
-{:else if $queries.isSuccess}
- {$queries.data}
-{/if}
+{#each $queries as query, index}
+ Status {index + 1}: {query.status}
+ Data {index + 1}: {query.data}
+{/each}
diff --git a/packages/svelte-query/tests/createQueries/CombineExample.svelte b/packages/svelte-query/tests/createQueries/CombineExample.svelte
new file mode 100644
index 0000000000..a37b266db1
--- /dev/null
+++ b/packages/svelte-query/tests/createQueries/CombineExample.svelte
@@ -0,0 +1,32 @@
+
+
+isPending: {$queries.isPending}
+Data: {$queries.data ?? 'undefined'}
diff --git a/packages/svelte-query/tests/createQueries/createQueries.test.ts b/packages/svelte-query/tests/createQueries/createQueries.test.ts
index b5f5a59cd5..91a6f8da3b 100644
--- a/packages/svelte-query/tests/createQueries/createQueries.test.ts
+++ b/packages/svelte-query/tests/createQueries/createQueries.test.ts
@@ -3,6 +3,7 @@ import { render, waitFor } from '@testing-library/svelte'
import { QueryClient } from '@tanstack/query-core'
import { sleep } from '../utils'
import BaseExample from './BaseExample.svelte'
+import CombineExample from './CombineExample.svelte'
describe('createQueries', () => {
test('Render and wait for success', async () => {
@@ -13,14 +14,14 @@ describe('createQueries', () => {
{
queryKey: ['key-1'],
queryFn: async () => {
- await sleep(10)
+ await sleep(5)
return 'Success 1'
},
},
{
queryKey: ['key-2'],
queryFn: async () => {
- await sleep(10)
+ await sleep(5)
return 'Success 2'
},
},
@@ -31,47 +32,29 @@ describe('createQueries', () => {
})
await waitFor(() => {
- expect(rendered.getByText('Loading 1')).toBeInTheDocument()
- expect(rendered.getByText('Loading 2')).toBeInTheDocument()
+ expect(rendered.getByText('Status 1: pending')).toBeInTheDocument()
+ expect(rendered.getByText('Status 2: pending')).toBeInTheDocument()
})
await waitFor(() => {
- expect(rendered.getByText('Success 1')).toBeInTheDocument()
- expect(rendered.getByText('Success 2')).toBeInTheDocument()
+ expect(rendered.getByText('Status 1: success')).toBeInTheDocument()
+ expect(rendered.getByText('Status 2: success')).toBeInTheDocument()
})
})
test('Combine queries', async () => {
- const ids = [1, 2, 3]
-
- const rendered = render(BaseExample, {
+ const rendered = render(CombineExample, {
props: {
- options: {
- queries: ids.map((id) => ({
- queryKey: [id],
- queryFn: async () => {
- await sleep(10)
- return id
- },
- })),
- combine: (results) => {
- return {
- isPending: results.some((result) => result.isPending),
- isSuccess: results.every((result) => result.isSuccess),
- data: results.map((res) => res.data).join(','),
- }
- },
- },
queryClient: new QueryClient(),
},
})
await waitFor(() => {
- expect(rendered.getByText('Loading')).toBeInTheDocument()
+ expect(rendered.getByText('isPending: true')).toBeInTheDocument()
})
await waitFor(() => {
- expect(rendered.getByText('1,2,3')).toBeInTheDocument()
+ expect(rendered.getByText('Data: 1,2,3')).toBeInTheDocument()
})
})
})
diff --git a/packages/svelte-query/tests/createQuery/BaseExample.svelte b/packages/svelte-query/tests/createQuery/BaseExample.svelte
index ede107bcdd..ce196f4783 100644
--- a/packages/svelte-query/tests/createQuery/BaseExample.svelte
+++ b/packages/svelte-query/tests/createQuery/BaseExample.svelte
@@ -15,11 +15,4 @@
Status: {$query.status}
Failure Count: {$query.failureCount}
-
-{#if $query.isPending}
- Loading
-{:else if $query.isError}
- Error
-{:else if $query.isSuccess}
- {$query.data}
-{/if}
+Data: {$query.data ?? 'undefined'}
diff --git a/packages/svelte-query/tests/createQuery/DisabledExample.svelte b/packages/svelte-query/tests/createQuery/DisabledExample.svelte
index bcd5a99748..13b1895b69 100644
--- a/packages/svelte-query/tests/createQuery/DisabledExample.svelte
+++ b/packages/svelte-query/tests/createQuery/DisabledExample.svelte
@@ -2,14 +2,17 @@
import { QueryClient } from '@tanstack/query-core'
import { derived, writable } from 'svelte/store'
import { createQuery } from '../../src/createQuery'
- import { queryKey, sleep } from '../utils'
+ import { sleep } from '../utils'
+ import type { QueryObserverResult } from '@tanstack/query-core'
+ import type { Writable } from 'svelte/store'
+
+ export let states: Writable>
const queryClient = new QueryClient()
- const key = queryKey()
const count = writable(0)
const options = derived(count, ($count) => ({
- queryKey: [key, $count],
+ queryKey: ['test', $count],
queryFn: async () => {
await sleep(5)
return $count
@@ -18,8 +21,11 @@
}))
const query = createQuery(options, queryClient)
+
+ $: states.update((prev) => [...prev, $query])
+
Data: {$query.data ?? 'undefined'}
Count: {$count}
diff --git a/packages/svelte-query/tests/createQuery/PlaceholderData.svelte b/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
index b56fd40e78..e864f0d419 100644
--- a/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
+++ b/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
@@ -13,7 +13,7 @@
const options = derived(count, ($count) => ({
queryKey: ['test', $count],
queryFn: async () => {
- await sleep(10)
+ await sleep(5)
return $count
},
placeholderData: keepPreviousData,
@@ -27,4 +27,4 @@
Status: {$query.status}
-Data: {$query.data}
+Data: {$query.data ?? 'undefined'}
diff --git a/packages/svelte-query/tests/createQuery/createQuery.test.ts b/packages/svelte-query/tests/createQuery/createQuery.test.ts
index d1c6d7b5a4..ec6d2d5c77 100644
--- a/packages/svelte-query/tests/createQuery/createQuery.test.ts
+++ b/packages/svelte-query/tests/createQuery/createQuery.test.ts
@@ -16,7 +16,7 @@ describe('createQuery', () => {
const options = {
queryKey: ['test'],
queryFn: async () => {
- await sleep(10)
+ await sleep(5)
return 'Success'
},
}
@@ -30,7 +30,7 @@ describe('createQuery', () => {
})
await waitFor(() => {
- expect(rendered.queryByText('Success')).toBeInTheDocument()
+ expect(rendered.queryByText('Status: success')).toBeInTheDocument()
})
const states = get(statesStore)
@@ -204,7 +204,7 @@ describe('createQuery', () => {
const optionsStore = writable({
queryKey: ['test'],
queryFn: async () => {
- await sleep(10)
+ await sleep(5)
return 'Success'
},
})
@@ -218,7 +218,7 @@ describe('createQuery', () => {
})
await waitFor(() => {
- expect(rendered.queryByText('Success')).toBeInTheDocument()
+ expect(rendered.queryByText('Status: success')).toBeInTheDocument()
})
})
@@ -230,7 +230,7 @@ describe('createQuery', () => {
const derivedStore = derived(writableStore, ($store) => ({
queryKey: [$store],
queryFn: async () => {
- await sleep(10)
+ await sleep(5)
return 'Success'
},
}))
@@ -244,7 +244,7 @@ describe('createQuery', () => {
})
await waitFor(() => {
- expect(rendered.queryByText('Success')).toBeInTheDocument()
+ expect(rendered.queryByText('Status: success')).toBeInTheDocument()
})
})
@@ -256,8 +256,8 @@ describe('createQuery', () => {
const derivedStore = derived(writableStore, ($store) => ({
queryKey: [$store],
queryFn: async () => {
- await sleep(10)
- return `Success ${$store}`
+ await sleep(5)
+ return $store
},
}))
@@ -272,22 +272,22 @@ describe('createQuery', () => {
})
await waitFor(() => {
- expect(rendered.queryByText('Success 1')).toBeInTheDocument()
- expect(rendered.queryByText('Success 2')).not.toBeInTheDocument()
+ expect(rendered.queryByText('Data: 1')).toBeInTheDocument()
+ expect(rendered.queryByText('Data: 2')).not.toBeInTheDocument()
})
writableStore.set(2)
await waitFor(() => {
- expect(rendered.queryByText('Success 1')).not.toBeInTheDocument()
- expect(rendered.queryByText('Success 2')).toBeInTheDocument()
+ expect(rendered.queryByText('Data: 1')).not.toBeInTheDocument()
+ expect(rendered.queryByText('Data: 2')).toBeInTheDocument()
})
writableStore.set(1)
await waitFor(() => {
- expect(rendered.queryByText('Success 1')).toBeInTheDocument()
- expect(rendered.queryByText('Success 2')).not.toBeInTheDocument()
+ expect(rendered.queryByText('Data: 1')).toBeInTheDocument()
+ expect(rendered.queryByText('Data: 2')).not.toBeInTheDocument()
})
})
@@ -318,6 +318,7 @@ describe('createQuery', () => {
isSuccess: false,
isPlaceholderData: false,
})
+
// Fetched
expect(states[1]).toMatchObject({
data: 0,
@@ -325,6 +326,7 @@ describe('createQuery', () => {
isSuccess: true,
isPlaceholderData: false,
})
+
// Set state
expect(states[2]).toMatchObject({
data: 0,
@@ -332,6 +334,7 @@ describe('createQuery', () => {
isSuccess: true,
isPlaceholderData: true,
})
+
// New data
expect(states[3]).toMatchObject({
data: 1,
@@ -342,7 +345,13 @@ describe('createQuery', () => {
})
test('Should not fetch when switching to a disabled query', async () => {
- const rendered = render(DisabledExample)
+ const statesStore: Writable> = writable([])
+
+ const rendered = render(DisabledExample, {
+ props: {
+ states: statesStore,
+ },
+ })
await waitFor(() => rendered.getByText('Data: 0'))
@@ -352,5 +361,30 @@ describe('createQuery', () => {
rendered.getByText('Count: 1')
rendered.getByText('Data: undefined')
})
+
+ const states = get(statesStore)
+
+ expect(states).toHaveLength(3)
+
+ // Fetch query
+ expect(states[0]).toMatchObject({
+ data: undefined,
+ isFetching: true,
+ isSuccess: false,
+ })
+
+ // Fetched query
+ expect(states[1]).toMatchObject({
+ data: 0,
+ isFetching: false,
+ isSuccess: true,
+ })
+
+ // Switch to disabled query
+ expect(states[2]).toMatchObject({
+ data: undefined,
+ isFetching: false,
+ isSuccess: false,
+ })
})
})
diff --git a/packages/svelte-query/tests/useIsFetching/BaseExample.svelte b/packages/svelte-query/tests/useIsFetching/BaseExample.svelte
index 97737ff37b..d485b7b69b 100644
--- a/packages/svelte-query/tests/useIsFetching/BaseExample.svelte
+++ b/packages/svelte-query/tests/useIsFetching/BaseExample.svelte
@@ -3,18 +3,17 @@
import { derived, writable } from 'svelte/store'
import { createQuery } from '../../src/createQuery'
import { useIsFetching } from '../../src/useIsFetching'
- import { queryKey, sleep } from '../utils'
+ import { 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],
+ queryKey: ['test'],
queryFn: async () => {
- await sleep(20)
+ await sleep(5)
return 'test'
},
enabled: $ready,
@@ -24,8 +23,6 @@
-isFetching: {$isFetching}
-{#if $query.isSuccess}
- {$query.data}
-{/if}
+isFetching: {$isFetching}
+Data: {$query.data ?? 'undefined'}
diff --git a/packages/svelte-query/tests/useIsMutating/BaseExample.svelte b/packages/svelte-query/tests/useIsMutating/BaseExample.svelte
index 7c30b57207..35dafba38c 100644
--- a/packages/svelte-query/tests/useIsMutating/BaseExample.svelte
+++ b/packages/svelte-query/tests/useIsMutating/BaseExample.svelte
@@ -9,9 +9,9 @@
const mutation = createMutation(
{
- mutationKey: ['mutation1'],
+ mutationKey: ['mutation-1'],
mutationFn: async () => {
- await sleep(20)
+ await sleep(5)
return 'data'
},
},
diff --git a/packages/svelte-query/tests/utils.ts b/packages/svelte-query/tests/utils.ts
index e8c5baf88b..1a3a619a22 100644
--- a/packages/svelte-query/tests/utils.ts
+++ b/packages/svelte-query/tests/utils.ts
@@ -3,10 +3,3 @@ export function sleep(timeout: number): Promise {
setTimeout(resolve, timeout)
})
}
-
-let queryKeyCount = 0
-
-export function queryKey(): string {
- queryKeyCount += 1
- return `query_${queryKeyCount}`
-}