From 461876a24a3796043237d6de4fd715fd0c87ef78 Mon Sep 17 00:00:00 2001
From: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>
Date: Sun, 28 Jul 2024 14:20:50 +1000
Subject: [PATCH] test(svelte-query): add refetch test for createQuery (#7810)

---
 .../tests/createQuery/RefetchExample.svelte   | 32 +++++++++++++++++++
 .../tests/createQuery/createQuery.test.ts     | 31 ++++++++++++++++++
 2 files changed, 63 insertions(+)
 create mode 100644 packages/svelte-query/tests/createQuery/RefetchExample.svelte

diff --git a/packages/svelte-query/tests/createQuery/RefetchExample.svelte b/packages/svelte-query/tests/createQuery/RefetchExample.svelte
new file mode 100644
index 0000000000..d096b16142
--- /dev/null
+++ b/packages/svelte-query/tests/createQuery/RefetchExample.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { QueryClient } from '@tanstack/query-core'
+  import { derived, writable } from 'svelte/store'
+  import { createQuery } from '../../src/createQuery'
+  import { sleep } from '../utils'
+  import type { QueryObserverResult } from '@tanstack/query-core'
+  import type { Writable } from 'svelte/store'
+
+  export let states: Writable<Array<QueryObserverResult>>
+
+  const queryClient = new QueryClient()
+  const count = writable(0)
+
+  const options = derived(count, ($count) => ({
+    queryKey: ['test'],
+    queryFn: async () => {
+      await sleep(5)
+      return ++$count
+    },
+  }))
+
+  const query = createQuery(options, queryClient)
+
+  $: states.update((prev) => [...prev, $query])
+</script>
+
+<button on:click={() => queryClient.removeQueries({ queryKey: ['test'] })}
+  >Remove</button
+>
+<button on:click={() => $query.refetch()}>Refetch</button>
+
+<div>Data: {$query.data ?? 'undefined'}</div>
diff --git a/packages/svelte-query/tests/createQuery/createQuery.test.ts b/packages/svelte-query/tests/createQuery/createQuery.test.ts
index ec6d2d5c77..347f49a01c 100644
--- a/packages/svelte-query/tests/createQuery/createQuery.test.ts
+++ b/packages/svelte-query/tests/createQuery/createQuery.test.ts
@@ -6,6 +6,7 @@ import { sleep } from '../utils'
 import BaseExample from './BaseExample.svelte'
 import DisabledExample from './DisabledExample.svelte'
 import PlaceholderData from './PlaceholderData.svelte'
+import RefetchExample from './RefetchExample.svelte'
 import type { Writable } from 'svelte/store'
 import type { QueryObserverResult } from '@tanstack/query-core'
 
@@ -387,4 +388,34 @@ describe('createQuery', () => {
       isSuccess: false,
     })
   })
+
+  test('Create a new query when refetching a removed query', async () => {
+    const statesStore: Writable<Array<QueryObserverResult>> = writable([])
+
+    const rendered = render(RefetchExample, {
+      props: {
+        states: statesStore,
+      },
+    })
+
+    await waitFor(() => rendered.getByText('Data: 1'))
+    fireEvent.click(rendered.getByRole('button', { name: /Remove/i }))
+
+    await sleep(5)
+
+    fireEvent.click(rendered.getByRole('button', { name: /Refetch/i }))
+    await waitFor(() => rendered.getByText('Data: 2'))
+
+    const states = get(statesStore)
+
+    expect(states.length).toBe(4)
+    // Initial
+    expect(states[0]).toMatchObject({ data: undefined, dataUpdatedAt: 0 })
+    // Fetched
+    expect(states[1]).toMatchObject({ data: 1 })
+    // Switch
+    expect(states[2]).toMatchObject({ data: undefined, dataUpdatedAt: 0 })
+    // Fetched
+    expect(states[3]).toMatchObject({ data: 2 })
+  })
 })