test: add tests for keepalive

test/basic.test.ts

@@ -1999,6 +1999,87 @@ describe.runIf(isDev())('component testing', () => {
   })
 })
 
+describe('keepalive', () => {
+  it('should not keepalive by default', async () => {
+    const { page, consoleLogs } = await renderPage('/keepalive')
+
+    const pageName = 'not-keepalive'
+    await page.click(`#${pageName}`)
+    await page.waitForTimeout(25)
+
+    expect(consoleLogs.map(l => l.text)).toEqual([`${pageName}: onMounted`])
+
+    await page.close()
+  })
+
+  it('should not keepalive when included in app config but config in nuxt-page is not undefined', async () => {
+    const { page, consoleLogs } = await renderPage('/keepalive')
+
+    const pageName = 'keepalive-in-config'
+    await page.click(`#${pageName}`)
+    await page.waitForTimeout(25)
+
+    expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`])
+
+    await page.close()
+  })
+
+  it('should not keepalive when included in app config but exclueded in nuxt-page', async () => {
+    const { page, consoleLogs } = await renderPage('/keepalive')
+
+    const pageName = 'not-keepalive-in-nuxtpage'
+    await page.click(`#${pageName}`)
+    await page.waitForTimeout(25)
+
+    expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`])
+
+    await page.close()
+  })
+
+  it('should keepalive when included in nuxt-page', async () => {
+    const { page, consoleLogs } = await renderPage('/keepalive')
+
+    const pageName = 'keepalive-in-nuxtpage'
+    await page.click(`#${pageName}`)
+    await page.waitForTimeout(25)
+
+    expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([`${pageName}: onMounted`, `${pageName}: onActivated`])
+
+    await page.close()
+  })
+
+  it('should preserve keepalive config when navigate routes in nuxt-page', async () => {
+    const { page, consoleLogs } = await renderPage('/keepalive')
+
+    await page.click('#keepalive-in-nuxtpage')
+    await page.waitForTimeout(25)
+    await page.click('#keepalive-in-nuxtpage-2')
+    await page.waitForTimeout(25)
+    await page.click('#keepalive-in-nuxtpage')
+    await page.waitForTimeout(25)
+    await page.click('#not-keepalive')
+    await page.waitForTimeout(25)
+    await page.click('#keepalive-in-nuxtpage-2')
+    await page.waitForTimeout(25)
+
+    expect(consoleLogs.map(l => l.text).filter(t => t.includes('keepalive'))).toEqual([
+      'keepalive-in-nuxtpage: onMounted',
+      'keepalive-in-nuxtpage: onActivated',
+      'keepalive-in-nuxtpage: onDeactivated',
+      'keepalive-in-nuxtpage-2: onMounted',
+      'keepalive-in-nuxtpage-2: onActivated',
+      'keepalive-in-nuxtpage-2: onDeactivated',
+      'keepalive-in-nuxtpage: onActivated',
+      'keepalive-in-nuxtpage: onDeactivated',
+      'not-keepalive: onMounted',
+      'not-keepalive: onUnmounted',
+      'keepalive-in-nuxtpage-2: onActivated'
+    ])
+
+    await page.close()
+  })
+})
+
 function normaliseIslandResult (result: NuxtIslandResponse) {
   return {
     ...result,

test/fixtures/basic/nuxt.config.ts

@@ -22,6 +22,9 @@ export default defineNuxtConfig({
         { charset: 'utf-8' },
         { name: 'description', content: 'Nuxt Fixture' }
       ]
+    },
+    keepalive: {
+      include: ['keepalive-in-config', 'not-keepalive-in-nuxtpage']
     }
   },
   buildDir: process.env.NITRO_BUILD_DIR,

test/fixtures/basic/pages/keepalive.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const links = ['keepalive-in-config', 'not-keepalive', 'keepalive-in-nuxtpage', 'keepalive-in-nuxtpage-2', 'not-keepalive-in-nuxtpage']
+</script>
+
+<template>
+  <div>
+    <h1>Keepalive Test</h1>
+    <NuxtLink id="keepalive-home" to="/keepalive">
+      Keepalive Home
+    </NuxtLink>
+    <div :style="{ display: 'flex', flexDirection: 'column', marginTop: '10px' }">
+      <NuxtLink v-for="link in links" :id="link" :key="link" :to="`/keepalive/${link}`">
+        {{ link }}
+      </NuxtLink>
+    </div>
+    <NuxtPage :keepalive="{include: ['keepalive-in-nuxtpage', 'keepalive-in-nuxtpage-2'], exclude: ['not-keepalive-in-nuxtpage']}" />
+  </div>
+</template>

test/fixtures/basic/pages/keepalive/composables.ts

@@ -0,0 +1,6 @@
+export function useLifecyleLogs (name: string) {
+  onMounted(() => console.log(`${name}: onMounted`))
+  onUnmounted(() => console.log(`${name}: onUnmounted`))
+  onActivated(() => console.log(`${name}: onActivated`))
+  onDeactivated(() => console.log(`${name}: onDeactivated`))
+}

test/fixtures/basic/pages/keepalive/keepalive-in-config.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useLifecyleLogs } from './composables'
+
+useLifecyleLogs('keepalive-in-config')
+</script>
+
+<template>
+  <div>
+    <h2>Keepalive in Config</h2>
+  </div>
+</template>

test/fixtures/basic/pages/keepalive/keepalive-in-nuxtpage-2.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useLifecyleLogs } from './composables'
+
+useLifecyleLogs('keepalive-in-nuxtpage-2')
+</script>
+
+<template>
+  <div>
+    <h2>Keepalive in `nuxt-page` 2</h2>
+  </div>
+</template>

test/fixtures/basic/pages/keepalive/keepalive-in-nuxtpage.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useLifecyleLogs } from './composables'
+
+useLifecyleLogs('keepalive-in-nuxtpage')
+</script>
+
+<template>
+  <div>
+    <h2>Keepalive in `nuxt-page`</h2>
+  </div>
+</template>

test/fixtures/basic/pages/keepalive/not-keepalive-in-nuxtpage.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useLifecyleLogs } from './composables'
+
+useLifecyleLogs('not-keepalive-in-nuxtpage')
+</script>
+
+<template>
+  <div>
+    <h2>Not Keepalive in `nuxt-page`</h2>
+  </div>
+</template>

test/fixtures/basic/pages/keepalive/not-keepalive.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useLifecyleLogs } from './composables'
+
+useLifecyleLogs('not-keepalive')
+</script>
+
+<template>
+  <div>
+    <h2>Not Keepalive</h2>
+  </div>
+</template>