From be9e77186f3c18241ed10d71550f97833c14d015 Mon Sep 17 00:00:00 2001
From: Valeriy Sinevich <zohan33333@gmail.com>
Date: Sat, 28 Oct 2023 01:21:20 +0300
Subject: [PATCH] useAsyncData-regressions

---
 test/basic.test.ts                            | 64 +++++++++++++++++++
 .../ComponentWithSharedUseAsyncData.vue       | 15 +++++
 .../basic/composables/asyncDataTests.ts       | 20 ++++++
 .../basic/pages/useAsyncData/shared.vue       | 37 +++++++++++
 4 files changed, 136 insertions(+)
 create mode 100644 test/fixtures/basic/components/ComponentWithSharedUseAsyncData.vue
 create mode 100644 test/fixtures/basic/pages/useAsyncData/shared.vue

diff --git a/test/basic.test.ts b/test/basic.test.ts
index e7e3a43c0..3952abe2f 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -1989,6 +1989,70 @@ describe.skipIf(isWindows)('useAsyncData', () => {
   })
 })
 
+describe('useAsyncData regression with immediate:false', () => {
+  it('shared data, pending', async () => {
+    const page = await createPage('/useAsyncData/shared')
+    await page.waitForLoadState('networkidle')
+    await page.waitForFunction(
+      () => window.useNuxtApp?.()._route.fullPath === '/useAsyncData/shared'
+    )
+
+    expect(await page.locator('#pageWithSharedAsyncData__data').innerText()).toContain('default data')
+    expect(await page.locator('#pageWithSharedAsyncData__pending').innerText()).toContain('true')
+
+    expect(await page.locator('#componentWithSharedUseAsyncData__data').innerText()).toContain(
+      'default data'
+    )
+    expect(await page.locator('#componentWithSharedUseAsyncData__pending').innerText()).toContain(
+      'true'
+    )
+
+    await page.click('#pageWithSharedAsyncData__execute')
+
+    expect(await page.locator('#pageWithSharedAsyncData__data').innerText()).toContain('some data')
+    expect(await page.locator('#pageWithSharedAsyncData__pending').innerText()).toContain('false')
+
+    expect(await page.locator('#componentWithSharedUseAsyncData__data').innerText()).toContain(
+      'some data'
+    )
+    expect(await page.locator('#componentWithSharedUseAsyncData__pending').innerText()).toContain(
+      'false'
+    )
+  })
+
+  it('watch', async () => {
+    const page = await createPage('/useAsyncData/shared')
+    await page.waitForLoadState('networkidle')
+    await page.waitForFunction(
+      () => window.useNuxtApp?.()._route.fullPath === '/useAsyncData/shared'
+    )
+
+    expect(await page.locator('#pageWithSharedAsyncData__data').innerText()).toContain('default data')
+    expect(await page.locator('#pageWithSharedAsyncData__pending').innerText()).toContain('true')
+
+    expect(await page.locator('#componentWithSharedUseAsyncData__data').innerText()).toContain(
+      'default data'
+    )
+    expect(await page.locator('#componentWithSharedUseAsyncData__pending').innerText()).toContain(
+      'true'
+    )
+
+    await page.click('#pageWithSharedAsyncData__changeQuery')
+
+    expect(await page.locator('#pageWithSharedAsyncData__data').innerText()).toContain('some data')
+    expect(await page.locator('#pageWithSharedAsyncData__pending').innerText()).toContain('false')
+
+    expect(await page.locator('#componentWithSharedUseAsyncData__data').innerText()).toContain(
+      'some data'
+    )
+    expect(await page.locator('#componentWithSharedUseAsyncData__pending').innerText()).toContain(
+      'false'
+    )
+
+    await page.close()
+  })
+})
+
 describe.runIf(isDev())('component testing', () => {
   it('should work', async () => {
     const comp1 = await $fetchComponent('components/SugarCounter.vue', { multiplier: 2 })
diff --git a/test/fixtures/basic/components/ComponentWithSharedUseAsyncData.vue b/test/fixtures/basic/components/ComponentWithSharedUseAsyncData.vue
new file mode 100644
index 000000000..4057ed15b
--- /dev/null
+++ b/test/fixtures/basic/components/ComponentWithSharedUseAsyncData.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useSharedAsyncData } from '../composables/asyncDataTests'
+const { data, pending } = useSharedAsyncData()
+</script>
+
+<template>
+  <div>
+    <div id="componentWithSharedUseAsyncData__data">
+      {{ data }}
+    </div>
+    <div id="componentWithSharedUseAsyncData__pending">
+      {{ pending }}
+    </div>
+  </div>
+</template>
diff --git a/test/fixtures/basic/composables/asyncDataTests.ts b/test/fixtures/basic/composables/asyncDataTests.ts
index 07dd078ae..67c165980 100644
--- a/test/fixtures/basic/composables/asyncDataTests.ts
+++ b/test/fixtures/basic/composables/asyncDataTests.ts
@@ -5,3 +5,23 @@ export const useSleep = () => useAsyncData('sleep', async () => {
 })
 
 export const useCounter = () => useFetch('/api/useAsyncData/count')
+
+export const useSharedAsyncData = () => {
+  const route = useRoute()
+
+  const { data, execute, pending } = useAsyncData(
+    'sharedAsyncData',
+    () => Promise.resolve('some data'),
+    {
+      default: () => 'default data',
+      immediate: false,
+      watch: [() => route.query]
+    }
+  )
+
+  return {
+    data,
+    execute,
+    pending
+  }
+}
diff --git a/test/fixtures/basic/pages/useAsyncData/shared.vue b/test/fixtures/basic/pages/useAsyncData/shared.vue
new file mode 100644
index 000000000..ded3376dc
--- /dev/null
+++ b/test/fixtures/basic/pages/useAsyncData/shared.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useSharedAsyncData } from '../../composables/asyncDataTests'
+import ComponentWithSharedUseAsyncData from '../../components/ComponentWithSharedUseAsyncData.vue'
+
+const { data, pending, execute } = useSharedAsyncData()
+const router = useRouter()
+
+const page = ref(1)
+const changeQuery = () => {
+  page.value += 1
+  router.push({
+    query: {
+      page: page.value
+    }
+  })
+}
+</script>
+
+<template>
+  <div>
+    <div id="pageWithSharedAsyncData__execute" @click="() => execute()">
+      execute
+    </div>
+    <div id="pageWithSharedAsyncData__changeQuery" @click="changeQuery">
+      changeQuery
+    </div>
+
+    <div id="pageWithSharedAsyncData__data">
+      {{ data }}
+    </div>
+    <div id="pageWithSharedAsyncData__pending">
+      {{ pending }}
+    </div>
+
+    <ComponentWithSharedUseAsyncData />
+  </div>
+</template>