tests

playground/app/components/Navbar.vue

@@ -1,5 +1,13 @@
 <template>
   <nav class="menu">
+    <div class="menu-label">Main Menu</div>
+    <ul class="menu-list">
+      <li v-for="route in routes" :key="route.name">
+        <NuxtLink :to="route.path" :id="'route-' + route.name">{{
+          route.name
+        }}</NuxtLink>
+      </li>
+    </ul>
     <div class="menu-label">User Management</div>
     <ul class="menu-list">
       <li v-for="user in users">
@@ -10,11 +18,20 @@
 </template>
 
 <script lang="ts" setup>
-import { useAsyncData } from '#imports'
+import { useAsyncData, useRouter } from '#imports'
 
 const { data: users } = await useAsyncData('navbar', () => {
   return $fetch('/api/getUsers').then((v) => {
     return v
   })
 })
+
+const router = useRouter()
+
+const routes = router.getRoutes().map((route) => {
+  return {
+    name: route.name?.toString() || '',
+    path: route.path,
+  }
+})
 </script>

playground/app/pages/useCachedAsyncData.vue

@@ -10,6 +10,11 @@
         </li>
       </ul>
     </div>
+
+    <NuxtLink to="/" id="go-to-home">Go to Home</NuxtLink>
+
+    <div id="not-cached-data">{{ notCachedData }}</div>
+    <div id="no-max-age">{{ noMaxAge }}</div>
   </div>
 </template>
 
@@ -35,6 +40,24 @@ const { data, refresh } = await useCachedAsyncData(
   },
 )
 
+const { data: notCachedData } = await useCachedAsyncData(
+  'not-cached-data',
+  () => Promise.resolve(Date.now().toString()),
+  {
+    serverMaxAge: 0,
+    clientMaxAge: 0,
+  },
+)
+
+const { data: noMaxAge } = await useCachedAsyncData(
+  'no-max-age',
+  () => Promise.resolve(Date.now().toString()),
+  {
+    serverMaxAge: undefined,
+    clientMaxAge: undefined,
+  },
+)
+
 function onClick() {
   refresh()
 }

test/useCachedAsyncData.e2e.spec.ts

@@ -58,4 +58,73 @@ describe('The useCachedAsyncData composable', () => {
     `)
     expect(item.data.expires).toBeTruthy()
   })
+
+  test('treats a max age of 5 as cacheable on the client', async () => {
+    await purgeAll()
+
+    const page = await createPage('/useCachedAsyncData')
+    const number1 = await page.locator('#time').innerText()
+
+    await page.locator('#go-to-home').click()
+    await page.locator('#route-useCachedAsyncData').click()
+    const number2 = await page.locator('#time').innerText()
+
+    expect(number1).toEqual(number2)
+  })
+
+  test('treats a max age of 0 as uncacheable on the server', async () => {
+    await purgeAll()
+
+    const page1 = await createPage('/useCachedAsyncData')
+
+    const data: any = await getDataCacheItems()
+    expect(data.rows).toHaveLength(1)
+
+    const number1 = await page1.locator('#not-cached-data').innerText()
+
+    const page2 = await createPage('/useCachedAsyncData')
+    const number2 = await page2.locator('#not-cached-data').innerText()
+    expect(number1).not.toEqual(number2)
+  })
+
+  test('treats a max age of 0 as uncacheable on the client', async () => {
+    await purgeAll()
+
+    const page = await createPage('/useCachedAsyncData')
+    const number1 = await page.locator('#not-cached-data').innerText()
+
+    await page.locator('#go-to-home').click()
+    await page.locator('#route-useCachedAsyncData').click()
+    const number2 = await page.locator('#not-cached-data').innerText()
+
+    expect(number1).not.toEqual(number2)
+  })
+
+  test('treats no max age as uncacheable on the server', async () => {
+    await purgeAll()
+
+    const page1 = await createPage('/useCachedAsyncData')
+
+    const data: any = await getDataCacheItems()
+    expect(data.rows).toHaveLength(1)
+
+    const number1 = await page1.locator('#no-max-age').innerText()
+
+    const page2 = await createPage('/useCachedAsyncData')
+    const number2 = await page2.locator('#no-max-age').innerText()
+    expect(number1).not.toEqual(number2)
+  })
+
+  test('treats no max age as uncacheable on the client', async () => {
+    await purgeAll()
+
+    const page = await createPage('/useCachedAsyncData')
+    const number1 = await page.locator('#no-max-age').innerText()
+
+    await page.locator('#go-to-home').click()
+    await page.locator('#route-useCachedAsyncData').click()
+    const number2 = await page.locator('#no-max-age').innerText()
+
+    expect(number1).not.toEqual(number2)
+  })
 })