Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test(svelte-query): Check query states #7741

Merged
merged 5 commits into from
Jul 16, 2024
Merged

test(svelte-query): Check query states #7741

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b7adb1c
chore(svelte-query-persist-client): Use store subscribe shortcut
lachlancollins Jul 16, 2024
1746f41
Use statesStore logic in svelte-query
lachlancollins Jul 16, 2024
e5ec909
Use toHaveLength
lachlancollins Jul 16, 2024
32bcfd4
Stricter types
lachlancollins Jul 16, 2024
c3592ed
Merge branch 'main' into svelte-test-stores
lachlancollins Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 2 additions & 10 deletions packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script lang="ts">
import { createQuery } from '@tanstack/svelte-query'
import { get } from 'svelte/store'
import { sleep } from '../utils'
import type { Writable } from 'svelte/store'

Expand All @@ -16,16 +15,9 @@
return 'fetched'
},
})

let data = get(state).data
let fetchStatus = get(state).fetchStatus
state.subscribe((s) => {
data = s.data
fetchStatus = s.fetchStatus
})
</script>

<div>
<h1>{data}</h1>
<h2>fetchStatus: {fetchStatus}</h2>
<h1>{$state.data}</h1>
<h2>fetchStatus: {$state.fetchStatus}</h2>
</div>
16 changes: 3 additions & 13 deletions packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script lang="ts">
import { createQuery } from '@tanstack/svelte-query'
import { get } from 'svelte/store'
import { sleep } from '../utils'
import type { Writable } from 'svelte/store'
import type { StatusResult } from '../utils'
Expand All @@ -20,19 +19,10 @@
staleTime: Infinity,
})

let data = get(state).data
let fetchStatus = get(state).fetchStatus
state.subscribe((s) => {
states.update((prev) => [
...prev,
{ status: s.status, data: s.data, fetchStatus: s.fetchStatus },
])
data = s.data
fetchStatus = s.fetchStatus
})
$: states.update((prev) => [...prev, $state])
</script>

<div>
<h1>data: {data ?? 'null'}</h1>
<h2>fetchStatus: {fetchStatus}</h2>
<h1>data: {$state.data ?? 'null'}</h1>
<h2>fetchStatus: {$state.fetchStatus}</h2>
</div>
16 changes: 3 additions & 13 deletions packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script lang="ts">
import { createQuery } from '@tanstack/svelte-query'
import { get } from 'svelte/store'
import { sleep } from '../utils'
import type { Writable } from 'svelte/store'
import type { StatusResult } from '../utils'
Expand All @@ -21,19 +20,10 @@
initialDataUpdatedAt: 1,
})

let data = get(state).data
let fetchStatus = get(state).fetchStatus
state.subscribe((s) => {
states.update((prev) => [
...prev,
{ status: s.status, data: s.data, fetchStatus: s.fetchStatus },
])
data = s.data
fetchStatus = s.fetchStatus
})
$: states.update((prev) => [...prev, $state])
</script>

<div>
<h1>{data}</h1>
<h2>fetchStatus: {fetchStatus}</h2>
<h1>{$state.data}</h1>
<h2>fetchStatus: {$state.fetchStatus}</h2>
</div>
12 changes: 2 additions & 10 deletions packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script lang="ts">
import { createQuery } from '@tanstack/svelte-query'
import { get } from 'svelte/store'
import { sleep } from '../utils'

export let key: Array<string>
Expand All @@ -12,16 +11,9 @@
return 'fetched'
},
})

let data = get(state).data
let fetchStatus = get(state).fetchStatus
state.subscribe((s) => {
data = s.data
fetchStatus = s.fetchStatus
})
</script>

<div>
<h1>{data}</h1>
<h2>fetchStatus: {fetchStatus}</h2>
<h1>{$state.data}</h1>
<h2>fetchStatus: {$state.fetchStatus}</h2>
</div>
73 changes: 38 additions & 35 deletions packages/svelte-query-persist-client/tests/PersistQueryClientProvider.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const createMockErrorPersister = (
describe('PersistQueryClientProvider', () => {
test('restores cache from persister', async () => {
const key = queryKey()
const states: Writable<Array<StatusResult<string>>> = writable([])
const statesStore: Writable<Array<StatusResult<string>>> = writable([])

const queryClient = createQueryClient()
await queryClient.prefetchQuery({
Expand All @@ -76,36 +76,36 @@ describe('PersistQueryClientProvider', () => {
queryClient,
persistOptions: { persister },
key,
states,
states: statesStore,
},
})

await waitFor(() => rendered.getByText('fetchStatus: idle'))
await waitFor(() => rendered.getByText('hydrated'))
await waitFor(() => rendered.getByText('fetched'))

const states_ = get(states)
expect(states_).toHaveLength(4)
const states = get(statesStore)
expect(states).toHaveLength(4)

expect(states_[0]).toMatchObject({
expect(states[0]).toMatchObject({
status: 'pending',
fetchStatus: 'idle',
data: undefined,
})

expect(states_[1]).toMatchObject({
expect(states[1]).toMatchObject({
status: 'success',
fetchStatus: 'fetching',
data: 'hydrated',
})

expect(states_[2]).toMatchObject({
expect(states[2]).toMatchObject({
status: 'success',
fetchStatus: 'fetching',
data: 'hydrated',
})

expect(states_[3]).toMatchObject({
expect(states[3]).toMatchObject({
status: 'success',
fetchStatus: 'idle',
data: 'fetched',
Expand All @@ -114,7 +114,7 @@ describe('PersistQueryClientProvider', () => {

test('should also put useQueries into idle state', async () => {
const key = queryKey()
const states: Writable<Array<StatusResult<string>>> = writable([])
const statesStore: Writable<Array<StatusResult<string>>> = writable([])

const queryClient = createQueryClient()
await queryClient.prefetchQuery({
Expand All @@ -133,37 +133,37 @@ describe('PersistQueryClientProvider', () => {
queryClient,
persistOptions: { persister },
key,
states,
states: statesStore,
},
})

await waitFor(() => rendered.getByText('fetchStatus: idle'))
await waitFor(() => rendered.getByText('hydrated'))
await waitFor(() => rendered.getByText('fetched'))

const states_ = get(states)
const states = get(statesStore)

expect(states_).toHaveLength(4)
expect(states).toHaveLength(4)

expect(states_[0]).toMatchObject({
expect(states[0]).toMatchObject({
status: 'pending',
fetchStatus: 'idle',
data: undefined,
})

expect(states_[1]).toMatchObject({
expect(states[1]).toMatchObject({
status: 'success',
fetchStatus: 'fetching',
data: 'hydrated',
})

expect(states_[2]).toMatchObject({
expect(states[2]).toMatchObject({
status: 'success',
fetchStatus: 'fetching',
data: 'hydrated',
})

expect(states_[3]).toMatchObject({
expect(states[3]).toMatchObject({
status: 'success',
fetchStatus: 'idle',
data: 'fetched',
Expand All @@ -172,7 +172,7 @@ describe('PersistQueryClientProvider', () => {

test('should show initialData while restoring', async () => {
const key = queryKey()
const states: Writable<Array<StatusResult<string>>> = writable([])
const statesStore: Writable<Array<StatusResult<string>>> = writable([])

const queryClient = createQueryClient()
await queryClient.prefetchQuery({
Expand All @@ -191,36 +191,36 @@ describe('PersistQueryClientProvider', () => {
queryClient,
persistOptions: { persister },
key,
states,
states: statesStore,
},
})

await waitFor(() => rendered.getByText('initial'))
await waitFor(() => rendered.getByText('hydrated'))
await waitFor(() => rendered.getByText('fetched'))

const states_ = get(states)
expect(states_).toHaveLength(4)
const states = get(statesStore)
expect(states).toHaveLength(4)

expect(states_[0]).toMatchObject({
expect(states[0]).toMatchObject({
status: 'success',
fetchStatus: 'idle',
data: 'initial',
})

expect(states_[1]).toMatchObject({
expect(states[1]).toMatchObject({
status: 'success',
fetchStatus: 'fetching',
data: 'hydrated',
})

expect(states_[2]).toMatchObject({
expect(states[2]).toMatchObject({
status: 'success',
fetchStatus: 'fetching',
data: 'hydrated',
})

expect(states_[3]).toMatchObject({
expect(states[3]).toMatchObject({
status: 'success',
fetchStatus: 'idle',
data: 'fetched',
Expand All @@ -229,7 +229,7 @@ describe('PersistQueryClientProvider', () => {

test('should not refetch after restoring when data is fresh', async () => {
const key = queryKey()
const states: Writable<Array<StatusResult<string>>> = writable([])
const statesStore: Writable<Array<StatusResult<string>>> = writable([])

const queryClient = createQueryClient()
await queryClient.prefetchQuery({
Expand All @@ -250,26 +250,26 @@ describe('PersistQueryClientProvider', () => {
queryClient,
persistOptions: { persister },
key,
states,
states: statesStore,
fetched,
},
})

await waitFor(() => rendered.getByText('data: null'))
await waitFor(() => rendered.getByText('data: hydrated'))

const states_ = get(states)
expect(states_).toHaveLength(2)
const states = get(statesStore)
expect(states).toHaveLength(2)

expect(get(fetched)).toBe(false)

expect(states_[0]).toMatchObject({
expect(states[0]).toMatchObject({
status: 'pending',
fetchStatus: 'idle',
data: undefined,
})

expect(states_[1]).toMatchObject({
expect(states[1]).toMatchObject({
status: 'success',
fetchStatus: 'idle',
data: 'hydrated',
Expand Down Expand Up @@ -324,25 +324,28 @@ describe('PersistQueryClientProvider', () => {

queryClient.clear()

const states: Writable<Array<string>> = writable([])
const statesStore: Writable<Array<string>> = writable([])

const rendered = render(AwaitOnSuccess, {
props: {
queryClient,
persistOptions: { persister },
key,
states,
states: statesStore,
onSuccess: async () => {
states.update((s) => [...s, 'onSuccess'])
statesStore.update((s) => [...s, 'onSuccess'])
await sleep(20)
states.update((s) => [...s, 'onSuccess done'])
statesStore.update((s) => [...s, 'onSuccess done'])
},
},
})

await waitFor(() => rendered.getByText('hydrated'))
await waitFor(() => rendered.getByText('fetched'))
expect(get(states)).toEqual([

const states = get(statesStore)

expect(states).toEqual([
'onSuccess',
'onSuccess done',
'fetching',
Expand Down
12 changes: 2 additions & 10 deletions packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script lang="ts">
import { createQuery } from '@tanstack/svelte-query'
import { get } from 'svelte/store'
import { sleep } from '../utils'

export let key: Array<string>
Expand All @@ -12,16 +11,9 @@
return 'fetched'
},
})

let data = get(state).data
let fetchStatus = get(state).fetchStatus
state.subscribe((s) => {
data = s.data
fetchStatus = s.fetchStatus
})
</script>

<div>
<h1>{data}</h1>
<h2>fetchStatus: {fetchStatus}</h2>
<h1>{$state.data}</h1>
<h2>fetchStatus: {$state.fetchStatus}</h2>
</div>
Loading
Loading