test: add failing test

This commit is contained in:
Alexander 2023-03-06 14:43:29 +01:00
parent d4f443abfb
commit 71e5a1fe98
3 changed files with 79 additions and 1 deletions

View File

@ -978,6 +978,30 @@ describe.skipIf(isDev() || isWindows)('payload rendering', () => {
)
})
it('does fetch payload for page with trailing slash', async () => {
const page = await createPage()
const requests = [] as string[]
page.on('request', (req) => {
requests.push(req.url().replace(url('/'), '/'))
})
await page.goto(url('/random-catchall/a/'))
await page.waitForLoadState('networkidle')
// We are not triggering API requests in the payload in client-side nav
expect(requests).not.toContain('/api/random')
expect(requests).not.toContain(expect.stringContaining('/__nuxt_island'))
// Go to pre-rendered page with trailing slash
await page.click('[href="/random-catchall/b/"]')
await page.waitForLoadState('networkidle')
// We are not triggering API requests in the payload in client-side nav
expect(requests).not.toContain('/api/random')
expect(requests).not.toContain(expect.stringContaining('/__nuxt_island'))
})
it('does not fetch a prefetched payload', async () => {
const page = await createPage()
const requests = [] as string[]

View File

@ -45,7 +45,9 @@ export default defineNuxtConfig({
routes: [
'/random/a',
'/random/b',
'/random/c'
'/random/c',
'/random-catchall/a/',
'/random-catchall/b/',
]
}
},

View File

@ -0,0 +1,52 @@
<template>
<div>
<NuxtLink to="/" prefetched-class="prefetched">
Home
</NuxtLink>
<NuxtLink to="/random-catchall/a/" prefetched-class="prefetched">
Random (A)
</NuxtLink>
<NuxtLink to="/random-catchall/b/" prefetched-class="prefetched">
Random (B)
</NuxtLink>
<NuxtLink to="/random-catchall/c/" prefetched-class="prefetched">
Random (C)
</NuxtLink>
<ServerOnlyComponent />
<br>
Random: {{ random }}
Random: (global) {{ globalRandom }}
Random page: <b>{{ route.params.id }}</b><br>
Here are some random numbers for you:
<ul>
<li v-for="n in randomNumbers" :key="n">
{{ n }}
</li>
</ul>
<button @click="() => refresh()">
Give me another set
</button>
</div>
</template>
<script setup lang="ts">
const route = useRoute()
const pageKey = 'rand_' + route.params.id
const { data: randomNumbers, refresh } = await useFetch('/api/random', { key: pageKey as string })
const random = useRandomState(100, pageKey)
const globalRandom = useRandomState(100)
</script>
<style scoped>
.prefetched {
color: green;
}
</style>