From 71e5a1fe983b8b258adb4f336190095c52e0a9a4 Mon Sep 17 00:00:00 2001
From: Alexander <github@lichter.io>
Date: Mon, 6 Mar 2023 14:43:29 +0100
Subject: [PATCH] test: add failing test

---
 test/basic.test.ts                            | 24 +++++++++
 test/fixtures/basic/nuxt.config.ts            |  4 +-
 .../basic/pages/random-catchall/[...id].vue   | 52 +++++++++++++++++++
 3 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 test/fixtures/basic/pages/random-catchall/[...id].vue

diff --git a/test/basic.test.ts b/test/basic.test.ts
index 10a04b7b7e..70e6319f72 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -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[]
diff --git a/test/fixtures/basic/nuxt.config.ts b/test/fixtures/basic/nuxt.config.ts
index f09079b074..592c9e5bf7 100644
--- a/test/fixtures/basic/nuxt.config.ts
+++ b/test/fixtures/basic/nuxt.config.ts
@@ -45,7 +45,9 @@ export default defineNuxtConfig({
       routes: [
         '/random/a',
         '/random/b',
-        '/random/c'
+        '/random/c',
+        '/random-catchall/a/',
+        '/random-catchall/b/',
       ]
     }
   },
diff --git a/test/fixtures/basic/pages/random-catchall/[...id].vue b/test/fixtures/basic/pages/random-catchall/[...id].vue
new file mode 100644
index 0000000000..d55e725eae
--- /dev/null
+++ b/test/fixtures/basic/pages/random-catchall/[...id].vue
@@ -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>