test: add key matching test for keyed composables (#6372)

This commit is contained in:
Daniel Roe 2022-08-05 12:02:20 +01:00 committed by GitHub
parent 0df9553ec4
commit 07fa104b46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 6 deletions

View File

@ -344,6 +344,9 @@ describe('automatically keyed composables', () => {
expect(html).toContain('true') expect(html).toContain('true')
expect(html).not.toContain('false') expect(html).not.toContain('false')
}) })
it('should match server-generated keys', async () => {
await expectNoClientErrors('/keyed-composables')
})
}) })
describe('dynamic paths', () => { describe('dynamic paths', () => {

View File

@ -1,17 +1,31 @@
<script setup lang="ts"> <script setup lang="ts">
const useLocalState = () => useState(() => ({ foo: Math.random() })) const useLocalState = () => useState(() => {
if (process.client) { console.error('running usestate') }
return { foo: Math.random() }
})
const useStateTest1 = useLocalState() const useStateTest1 = useLocalState()
const useStateTest2 = useLocalState() const useStateTest2 = useLocalState()
const useLocalAsyncData = () => useAsyncData(() => Promise.resolve({ foo: Math.random() }), { transform: data => data.foo }) const useLocalAsyncData = () => useAsyncData(() => {
if (process.client) { console.error('running asyncdata') }
return Promise.resolve({ foo: Math.random() })
}, { transform: data => data.foo })
const { data: useAsyncDataTest1 } = await useLocalAsyncData() const { data: useAsyncDataTest1 } = await useLocalAsyncData()
const { data: useAsyncDataTest2 } = await useLocalAsyncData() const { data: useAsyncDataTest2 } = await useLocalAsyncData()
const useLocalLazyAsyncData = () => useLazyAsyncData(() => Promise.resolve({ foo: Math.random() }), { transform: data => data.foo }) const useLocalLazyAsyncData = () => useLazyAsyncData(() => {
if (process.client) { console.error('running asyncdata') }
return Promise.resolve({ foo: Math.random() })
}, { transform: data => data.foo })
const { data: useLazyAsyncDataTest1 } = await useLocalLazyAsyncData() const { data: useLazyAsyncDataTest1 } = await useLocalLazyAsyncData()
const { data: useLazyAsyncDataTest2 } = await useLocalLazyAsyncData() const { data: useLazyAsyncDataTest2 } = await useLocalLazyAsyncData()
const useLocalFetch = () => useFetch('/api/counter', { transform: data => data.count }) const useLocalFetch = () => useFetch('/api/counter', {
transform: (data) => {
if (process.client) { console.error('running client-side transform') }
return data.count
}
})
const { data: useFetchTest1 } = await useLocalFetch() const { data: useFetchTest1 } = await useLocalFetch()
const { data: useFetchTest2 } = await useLocalFetch() const { data: useFetchTest2 } = await useLocalFetch()
@ -21,11 +35,11 @@ const { data: useLazyFetchTest2 } = await useLocalLazyFetch()
</script> </script>
<template> <template>
<pre> <div>
{{ useStateTest1 === useStateTest2 }} {{ useStateTest1 === useStateTest2 }}
{{ useAsyncDataTest1 === useAsyncDataTest2 }} {{ useAsyncDataTest1 === useAsyncDataTest2 }}
{{ useLazyAsyncDataTest1 === useLazyAsyncDataTest2 }} {{ useLazyAsyncDataTest1 === useLazyAsyncDataTest2 }}
{{ useFetchTest1 === useFetchTest2 }} {{ useFetchTest1 === useFetchTest2 }}
{{ useLazyFetchTest1 === useLazyFetchTest2 }} {{ useLazyFetchTest1 === useLazyFetchTest2 }}
</pre> </div>
</template> </template>