This commit is contained in:
VALERIY SINEVICH 2024-11-19 15:32:40 -05:00 committed by GitHub
commit e93bce7c92
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 142 additions and 0 deletions

View File

@ -2619,6 +2619,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/Counter.vue', { multiplier: 2 })

View File

@ -0,0 +1,15 @@
<script setup lang="ts">
import { useSharedAsyncData } from '../composables/asyncDataTests'
const { data, pending } = await useSharedAsyncData()
</script>
<template>
<div>
<div id="componentWithSharedUseAsyncData__data">
{{ data }}
</div>
<div id="componentWithSharedUseAsyncData__pending">
{{ pending }}
</div>
</div>
</template>

View File

@ -5,3 +5,23 @@ export const useSleep = () => useAsyncData('sleep', async () => {
})
export const useCounter = () => useFetch('/api/useAsyncData/count')
export const useSharedAsyncData = async () => {
const route = useRoute()
const { data, execute, pending } = await useAsyncData(
'sharedAsyncData',
() => Promise.resolve('some data'),
{
default: () => 'default data',
immediate: false,
watch: [() => route.query]
}
)
return {
data,
execute,
pending
}
}

View File

@ -0,0 +1,43 @@
<script setup lang="ts">
import { useSharedAsyncData } from '../../composables/asyncDataTests'
import ComponentWithSharedUseAsyncData from '../../components/ComponentWithSharedUseAsyncData.vue'
const { data, pending, execute } = await 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>