diff --git a/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte b/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte
index 5480ef90182..70ef9aceab0 100644
--- a/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte
+++ b/packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte
@@ -19,12 +19,7 @@
],
})
- state.subscribe(([s]) => {
- states.update((prev) => [
- ...prev,
- { status: s.status, data: s.data, fetchStatus: s.fetchStatus },
- ])
- })
+ $: states.update((prev) => [...prev, $state[0]])
diff --git a/packages/svelte-query/tests/createQueries/BaseExample.svelte b/packages/svelte-query/tests/createQueries/BaseExample.svelte
index bb2fe5a846e..6401f34b101 100644
--- a/packages/svelte-query/tests/createQueries/BaseExample.svelte
+++ b/packages/svelte-query/tests/createQueries/BaseExample.svelte
@@ -15,13 +15,13 @@
{#if Array.isArray($queries)}
{#each $queries as query, index}
{#if query.isPending}
-
Loading {index + 1}
+
Loading {index + 1}
{:else if query.isSuccess}
-
{query.data}
+
{query.data}
{/if}
{/each}
{:else if $queries.isPending}
-
Loading
+
Loading
{:else if $queries.isSuccess}
-
{$queries.data}
+
{$queries.data}
{/if}
diff --git a/packages/svelte-query/tests/createQuery/BaseExample.svelte b/packages/svelte-query/tests/createQuery/BaseExample.svelte
index e95b54d901a..2f321b53394 100644
--- a/packages/svelte-query/tests/createQuery/BaseExample.svelte
+++ b/packages/svelte-query/tests/createQuery/BaseExample.svelte
@@ -1,24 +1,25 @@
+
Status: {$query.status}
+
Failure Count: {$query.failureCount}
+
{#if $query.isPending}
-
Loading
+
Loading
{:else if $query.isError}
-
Error
+
Error
{:else if $query.isSuccess}
- {#if Array.isArray($query.data)}
- {#each $query.data as item}
-
{item}
- {/each}
- {:else}
-
{$query.data}
- {/if}
+
{$query.data}
{/if}
diff --git a/packages/svelte-query/tests/createQuery/PlaceholderData.svelte b/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
new file mode 100644
index 00000000000..fc6654ffbd7
--- /dev/null
+++ b/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
@@ -0,0 +1,30 @@
+
+
+
+
+
Status: {$query.status}
+
Data: {$query.data}
diff --git a/packages/svelte-query/tests/createQuery/createQuery.test.ts b/packages/svelte-query/tests/createQuery/createQuery.test.ts
index 0449eb951cd..7814a969c9a 100644
--- a/packages/svelte-query/tests/createQuery/createQuery.test.ts
+++ b/packages/svelte-query/tests/createQuery/createQuery.test.ts
@@ -1,36 +1,204 @@
import { describe, expect, test } from 'vitest'
import { fireEvent, render, waitFor } from '@testing-library/svelte'
-import { derived, writable } from 'svelte/store'
+import { derived, get, writable } from 'svelte/store'
import { QueryClient } from '@tanstack/query-core'
import { sleep } from '../utils'
import BaseExample from './BaseExample.svelte'
import DisabledExample from './DisabledExample.svelte'
+import PlaceholderData from './PlaceholderData.svelte'
describe('createQuery', () => {
- test('Render and wait for success', async () => {
+ test('Return the correct states for a successful query', async () => {
+ const statesStore = writable([])
+
+ const options = {
+ queryKey: ['test'],
+ queryFn: async () => {
+ await sleep(10)
+ return 'Success'
+ },
+ }
+
const rendered = render(BaseExample, {
props: {
- options: {
- queryKey: ['test'],
- queryFn: async () => {
- await sleep(10)
- return 'Success'
- },
- },
+ options,
queryClient: new QueryClient(),
+ states: statesStore,
},
})
await waitFor(() => {
- expect(rendered.queryByText('Loading')).toBeInTheDocument()
+ expect(rendered.queryByText('Success')).toBeInTheDocument()
})
- await waitFor(() => {
- expect(rendered.queryByText('Success')).toBeInTheDocument()
+ const states = get(statesStore)
+
+ expect(states.length).toEqual(2)
+
+ expect(states[0]).toMatchObject({
+ data: undefined,
+ dataUpdatedAt: 0,
+ error: null,
+ errorUpdatedAt: 0,
+ failureCount: 0,
+ failureReason: null,
+ errorUpdateCount: 0,
+ isError: false,
+ isFetched: false,
+ isFetchedAfterMount: false,
+ isFetching: true,
+ isPaused: false,
+ isPending: true,
+ isInitialLoading: true,
+ isLoading: true,
+ isLoadingError: false,
+ isPlaceholderData: false,
+ isRefetchError: false,
+ isRefetching: false,
+ isStale: true,
+ isSuccess: false,
+ refetch: expect.any(Function),
+ status: 'pending',
+ fetchStatus: 'fetching',
+ })
+
+ expect(states[1]).toMatchObject({
+ data: 'Success',
+ dataUpdatedAt: expect.any(Number),
+ error: null,
+ errorUpdatedAt: 0,
+ failureCount: 0,
+ failureReason: null,
+ errorUpdateCount: 0,
+ isError: false,
+ isFetched: true,
+ isFetchedAfterMount: true,
+ isFetching: false,
+ isPaused: false,
+ isPending: false,
+ isInitialLoading: false,
+ isLoading: false,
+ isLoadingError: false,
+ isPlaceholderData: false,
+ isRefetchError: false,
+ isRefetching: false,
+ isStale: true,
+ isSuccess: true,
+ refetch: expect.any(Function),
+ status: 'success',
+ fetchStatus: 'idle',
+ })
+ })
+
+ test('Return the correct states for an unsuccessful query', async () => {
+ const statesStore = writable([])
+
+ const options = {
+ queryKey: ['test'],
+ queryFn: async () => Promise.reject(new Error('Rejected')),
+ retry: 1,
+ retryDelay: 1,
+ }
+
+ const rendered = render(BaseExample, {
+ props: {
+ options,
+ queryClient: new QueryClient(),
+ states: statesStore,
+ },
+ })
+
+ await waitFor(() => rendered.getByText('Status: error'))
+
+ const states = get(statesStore)
+
+ expect(states.length).toEqual(3)
+
+ expect(states[0]).toMatchObject({
+ data: undefined,
+ dataUpdatedAt: 0,
+ error: null,
+ errorUpdatedAt: 0,
+ failureCount: 0,
+ failureReason: null,
+ errorUpdateCount: 0,
+ isError: false,
+ isFetched: false,
+ isFetchedAfterMount: false,
+ isFetching: true,
+ isPaused: false,
+ isPending: true,
+ isInitialLoading: true,
+ isLoading: true,
+ isLoadingError: false,
+ isPlaceholderData: false,
+ isRefetchError: false,
+ isRefetching: false,
+ isStale: true,
+ isSuccess: false,
+ refetch: expect.any(Function),
+ status: 'pending',
+ fetchStatus: 'fetching',
+ })
+
+ expect(states[1]).toMatchObject({
+ data: undefined,
+ dataUpdatedAt: 0,
+ error: null,
+ errorUpdatedAt: 0,
+ failureCount: 1,
+ failureReason: new Error('Rejected'),
+ errorUpdateCount: 0,
+ isError: false,
+ isFetched: false,
+ isFetchedAfterMount: false,
+ isFetching: true,
+ isPaused: false,
+ isPending: true,
+ isInitialLoading: true,
+ isLoading: true,
+ isLoadingError: false,
+ isPlaceholderData: false,
+ isRefetchError: false,
+ isRefetching: false,
+ isStale: true,
+ isSuccess: false,
+ refetch: expect.any(Function),
+ status: 'pending',
+ fetchStatus: 'fetching',
+ })
+
+ expect(states[2]).toMatchObject({
+ data: undefined,
+ dataUpdatedAt: 0,
+ error: new Error('Rejected'),
+ errorUpdatedAt: expect.any(Number),
+ failureCount: 2,
+ failureReason: new Error('Rejected'),
+ errorUpdateCount: 1,
+ isError: true,
+ isFetched: true,
+ isFetchedAfterMount: true,
+ isFetching: false,
+ isPaused: false,
+ isPending: false,
+ isInitialLoading: false,
+ isLoading: false,
+ isLoadingError: true,
+ isPlaceholderData: false,
+ isRefetchError: false,
+ isRefetching: false,
+ isStale: true,
+ isSuccess: false,
+ refetch: expect.any(Function),
+ status: 'error',
+ fetchStatus: 'idle',
})
})
test('Accept a writable store for options', async () => {
+ const statesStore = writable([])
+
const optionsStore = writable({
queryKey: ['test'],
queryFn: async () => {
@@ -43,6 +211,7 @@ describe('createQuery', () => {
props: {
options: optionsStore,
queryClient: new QueryClient(),
+ states: statesStore,
},
})
@@ -52,6 +221,8 @@ describe('createQuery', () => {
})
test('Accept a derived store for options', async () => {
+ const statesStore = writable([])
+
const writableStore = writable('test')
const derivedStore = derived(writableStore, ($store) => ({
@@ -66,6 +237,7 @@ describe('createQuery', () => {
props: {
options: derivedStore,
queryClient: new QueryClient(),
+ states: statesStore,
},
})
@@ -75,6 +247,8 @@ describe('createQuery', () => {
})
test('Ensure reactivity when queryClient defaults are set', async () => {
+ const statesStore = writable([])
+
const writableStore = writable(1)
const derivedStore = derived(writableStore, ($store) => ({
@@ -91,6 +265,7 @@ describe('createQuery', () => {
queryClient: new QueryClient({
defaultOptions: { queries: { staleTime: 60 * 1000 } },
}),
+ states: statesStore,
},
})
@@ -114,45 +289,53 @@ describe('createQuery', () => {
})
})
- test('Keep previous data when returned as placeholder data', async () => {
- const writableStore = writable
>([1])
-
- const derivedStore = derived(writableStore, ($store) => ({
- queryKey: ['test', $store],
- queryFn: async () => {
- await sleep(10)
- return $store.map((id) => `Success ${id}`)
- },
- placeholderData: (previousData: string) => previousData,
- }))
+ test('Keep previous data when placeholderData is set', async () => {
+ const statesStore = writable([])
- const rendered = render(BaseExample, {
+ const rendered = render(PlaceholderData, {
props: {
- options: derivedStore,
queryClient: new QueryClient(),
+ states: statesStore,
},
})
- await waitFor(() => {
- expect(rendered.queryByText('Success 1')).not.toBeInTheDocument()
- expect(rendered.queryByText('Success 2')).not.toBeInTheDocument()
- })
+ await waitFor(() => rendered.getByText('Data: 0'))
- await waitFor(() => {
- expect(rendered.queryByText('Success 1')).toBeInTheDocument()
- expect(rendered.queryByText('Success 2')).not.toBeInTheDocument()
- })
+ fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))
- writableStore.set([1, 2])
+ await waitFor(() => rendered.getByText('Data: 1'))
- await waitFor(() => {
- expect(rendered.queryByText('Success 1')).toBeInTheDocument()
- expect(rendered.queryByText('Success 2')).not.toBeInTheDocument()
- })
+ const states = get(statesStore)
- await waitFor(() => {
- expect(rendered.queryByText('Success 1')).toBeInTheDocument()
- expect(rendered.queryByText('Success 2')).toBeInTheDocument()
+ expect(states.length).toEqual(4)
+
+ // Initial
+ expect(states[0]).toMatchObject({
+ data: undefined,
+ isFetching: true,
+ isSuccess: false,
+ isPlaceholderData: false,
+ })
+ // Fetched
+ expect(states[1]).toMatchObject({
+ data: 0,
+ isFetching: false,
+ isSuccess: true,
+ isPlaceholderData: false,
+ })
+ // Set state
+ expect(states[2]).toMatchObject({
+ data: 0,
+ isFetching: true,
+ isSuccess: true,
+ isPlaceholderData: true,
+ })
+ // New data
+ expect(states[3]).toMatchObject({
+ data: 1,
+ isFetching: false,
+ isSuccess: true,
+ isPlaceholderData: false,
})
})
From e5ec9099fd05917c18145f29762ee4ba42a998af Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Tue, 16 Jul 2024 13:27:46 +1000
Subject: [PATCH 3/4] Use toHaveLength
---
packages/svelte-query/tests/createQuery/createQuery.test.ts | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/svelte-query/tests/createQuery/createQuery.test.ts b/packages/svelte-query/tests/createQuery/createQuery.test.ts
index 7814a969c9a..2d11fc85430 100644
--- a/packages/svelte-query/tests/createQuery/createQuery.test.ts
+++ b/packages/svelte-query/tests/createQuery/createQuery.test.ts
@@ -33,7 +33,7 @@ describe('createQuery', () => {
const states = get(statesStore)
- expect(states.length).toEqual(2)
+ expect(states).toHaveLength(2)
expect(states[0]).toMatchObject({
data: undefined,
@@ -112,7 +112,7 @@ describe('createQuery', () => {
const states = get(statesStore)
- expect(states.length).toEqual(3)
+ expect(states).toHaveLength(3)
expect(states[0]).toMatchObject({
data: undefined,
@@ -307,7 +307,7 @@ describe('createQuery', () => {
const states = get(statesStore)
- expect(states.length).toEqual(4)
+ expect(states).toHaveLength(4)
// Initial
expect(states[0]).toMatchObject({
From 32bcfd4be95694f479fbeb8aa8796274418dffc9 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Tue, 16 Jul 2024 13:43:14 +1000
Subject: [PATCH 4/4] Stricter types
---
.../tests/createQuery/BaseExample.svelte | 4 ++--
.../tests/createQuery/PlaceholderData.svelte | 4 ++--
.../tests/createQuery/createQuery.test.ts | 14 ++++++++------
3 files changed, 12 insertions(+), 10 deletions(-)
diff --git a/packages/svelte-query/tests/createQuery/BaseExample.svelte b/packages/svelte-query/tests/createQuery/BaseExample.svelte
index 2f321b53394..ede107bcdd4 100644
--- a/packages/svelte-query/tests/createQuery/BaseExample.svelte
+++ b/packages/svelte-query/tests/createQuery/BaseExample.svelte
@@ -1,12 +1,12 @@