test: add test case for fallback: true

Author: pieh

tests/e2e/page-router.test.ts

@@ -51,51 +51,79 @@ export async function check(
 
 test.describe('Simple Page Router (no basePath, no i18n)', () => {
   test.describe('On-demand revalidate works correctly', () => {
-    for (const { label, prerendered, pagePath, revalidateApiBasePath, expectedH1Content } of [
+    for (const {
+      label,
+      useFallback,
+      prerendered,
+      pagePath,
+      revalidateApiBasePath,
+      expectedH1Content,
+    } of [
       {
-        label: 'prerendered page with static path and awaited res.revalidate()',
+        label:
+          'prerendered page with static path with fallback: blocking and awaited res.revalidate()',
         prerendered: true,
         pagePath: '/static/revalidate-manual',
         revalidateApiBasePath: '/api/revalidate',
         expectedH1Content: 'Show #71',
       },
       {
-        label: 'prerendered page with dynamic path and awaited res.revalidate()',
+        label:
+          'prerendered page with dynamic path with fallback: blocking and awaited res.revalidate()',
         prerendered: true,
         pagePath: '/products/prerendered',
         revalidateApiBasePath: '/api/revalidate',
         expectedH1Content: 'Product prerendered',
       },
       {
-        label: 'not prerendered page with dynamic path and awaited res.revalidate()',
+        label:
+          'not prerendered page with dynamic path with fallback: blocking and awaited res.revalidate()',
         prerendered: false,
         pagePath: '/products/not-prerendered',
         revalidateApiBasePath: '/api/revalidate',
         expectedH1Content: 'Product not-prerendered',
       },
       {
-        label: 'not prerendered page with dynamic path and not awaited res.revalidate()',
+        label:
+          'not prerendered page with dynamic path with fallback: blocking and not awaited res.revalidate()',
         prerendered: false,
         pagePath: '/products/not-prerendered-and-not-awaited-revalidation',
         revalidateApiBasePath: '/api/revalidate-no-await',
         expectedH1Content: 'Product not-prerendered-and-not-awaited-revalidation',
       },
       {
         label:
-          'prerendered page with dynamic path and awaited res.revalidate() - non-ASCII variant',
+          'prerendered page with dynamic path with fallback: blocking and awaited res.revalidate() - non-ASCII variant',
         prerendered: true,
         pagePath: '/products/事前レンダリング,test',
         revalidateApiBasePath: '/api/revalidate',
         expectedH1Content: 'Product 事前レンダリング,test',
       },
       {
         label:
-          'not prerendered page with dynamic path and awaited res.revalidate() - non-ASCII variant',
+          'not prerendered page with dynamic path with fallback: blocking and awaited res.revalidate() - non-ASCII variant',
         prerendered: false,
         pagePath: '/products/事前レンダリングされていない,test',
         revalidateApiBasePath: '/api/revalidate',
         expectedH1Content: 'Product 事前レンダリングされていない,test',
       },
+      {
+        label:
+          'prerendered page with dynamic path with fallback: true and awaited res.revalidate()',
+        prerendered: true,
+        pagePath: '/fallback-true/prerendered',
+        revalidateApiBasePath: '/api/revalidate',
+        expectedH1Content: 'Product prerendered',
+      },
+      {
+        label:
+          'not prerendered page with dynamic path with fallback: true and awaited res.revalidate()',
+        prerendered: false,
+        useFallback: true,
+        pagePath: '/fallback-true/not-prerendered',
+        revalidateApiBasePath: '/api/revalidate',
+        expectedH1Content: 'Product not-prerendered',
+      },
     ]) {
       test(label, async ({ page, pollUntilHeadersMatch, pageRouter }) => {
         // in case there is retry or some other test did hit that path before
@@ -126,11 +154,23 @@ test.describe('Simple Page Router (no basePath, no i18n)', () => {
         const headers1 = response1?.headers() || {}
         expect(response1?.status()).toBe(200)
         expect(headers1['x-nextjs-cache']).toBeUndefined()
-        expect(headers1['netlify-cache-tag']).toBe(`_n_t_${encodeURI(pagePath).toLowerCase()}`)
+
+        const fallbackWasServed =
+          useFallback && headers1['cache-status'].includes('"Next.js"; fwd=miss')
+        expect(headers1['netlify-cache-tag']).toBe(
+          fallbackWasServed ? undefined : `_n_t_${encodeURI(pagePath).toLowerCase()}`,
+        )
         expect(headers1['netlify-cdn-cache-control']).toBe(
-          's-maxage=31536000, stale-while-revalidate=31536000, durable',
+          fallbackWasServed
+            ? undefined
+            : 's-maxage=31536000, stale-while-revalidate=31536000, durable',
         )
 
+        if (fallbackWasServed) {
+          const loading = await page.textContent('[data-testid="loading"]')
+          expect(loading, 'Fallback should be shown').toBe('Loading...')
+        }
+
         const date1 = await page.textContent('[data-testid="date-now"]')
         const h1 = await page.textContent('h1')
         expect(h1).toBe(expectedH1Content)
@@ -446,7 +486,14 @@ test.describe('Simple Page Router (no basePath, no i18n)', () => {
 
 test.describe('Page Router with basePath and i18n', () => {
   test.describe('Static revalidate works correctly', () => {
-    for (const { label, prerendered, pagePath, revalidateApiBasePath, expectedH1Content } of [
+    for (const {
+      label,
+      useFallback,
+      prerendered,
+      pagePath,
+      revalidateApiBasePath,
+      expectedH1Content,
+    } of [
       {
         label: 'prerendered page with static path and awaited res.revalidate()',
         prerendered: true,
@@ -455,42 +502,62 @@ test.describe('Page Router with basePath and i18n', () => {
         expectedH1Content: 'Show #71',
       },
       {
-        label: 'prerendered page with dynamic path and awaited res.revalidate()',
+        label:
+          'prerendered page with dynamic path with fallback: blocking and awaited res.revalidate()',
         prerendered: true,
         pagePath: '/products/prerendered',
         revalidateApiBasePath: '/api/revalidate',
         expectedH1Content: 'Product prerendered',
       },
       {
-        label: 'not prerendered page with dynamic path and awaited res.revalidate()',
+        label:
+          'not prerendered page with dynamic path with fallback: blocking and awaited res.revalidate()',
         prerendered: false,
         pagePath: '/products/not-prerendered',
         revalidateApiBasePath: '/api/revalidate',
         expectedH1Content: 'Product not-prerendered',
       },
       {
-        label: 'not prerendered page with dynamic path and not awaited res.revalidate()',
+        label:
+          'not prerendered page with dynamic path with fallback: blocking and not awaited res.revalidate()',
         prerendered: false,
         pagePath: '/products/not-prerendered-and-not-awaited-revalidation',
         revalidateApiBasePath: '/api/revalidate-no-await',
         expectedH1Content: 'Product not-prerendered-and-not-awaited-revalidation',
       },
       {
         label:
-          'prerendered page with dynamic path and awaited res.revalidate() - non-ASCII variant',
+          'prerendered page with dynamic path with fallback: blocking and awaited res.revalidate() - non-ASCII variant',
         prerendered: true,
         pagePath: '/products/事前レンダリング,test',
         revalidateApiBasePath: '/api/revalidate',
         expectedH1Content: 'Product 事前レンダリング,test',
       },
       {
         label:
-          'not prerendered page with dynamic path and awaited res.revalidate() - non-ASCII variant',
+          'not prerendered page with dynamic path with fallback: blocking and awaited res.revalidate() - non-ASCII variant',
         prerendered: false,
         pagePath: '/products/事前レンダリングされていない,test',
         revalidateApiBasePath: '/api/revalidate',
         expectedH1Content: 'Product 事前レンダリングされていない,test',
       },
+      {
+        label:
+          'prerendered page with dynamic path with fallback: true and awaited res.revalidate()',
+        prerendered: true,
+        pagePath: '/fallback-true/prerendered',
+        revalidateApiBasePath: '/api/revalidate',
+        expectedH1Content: 'Product prerendered',
+      },
+      {
+        label:
+          'not prerendered page with dynamic path with fallback: true and awaited res.revalidate()',
+        prerendered: false,
+        useFallback: true,
+        pagePath: '/fallback-true/not-prerendered',
+        revalidateApiBasePath: '/api/revalidate',
+        expectedH1Content: 'Product not-prerendered',
+      },
     ]) {
       test.describe(label, () => {
         test(`default locale`, async ({ page, pollUntilHeadersMatch, pageRouterBasePathI18n }) => {
@@ -528,13 +595,26 @@ test.describe('Page Router with basePath and i18n', () => {
           const headers1ImplicitLocale = response1ImplicitLocale?.headers() || {}
           expect(response1ImplicitLocale?.status()).toBe(200)
           expect(headers1ImplicitLocale['x-nextjs-cache']).toBeUndefined()
+
+          const fallbackWasServedImplicitLocale =
+            useFallback && headers1ImplicitLocale['cache-status'].includes('"Next.js"; fwd=miss')
+
           expect(headers1ImplicitLocale['netlify-cache-tag']).toBe(
-            `_n_t_/en${encodeURI(pagePath).toLowerCase()}`,
+            fallbackWasServedImplicitLocale
+              ? undefined
+              : `_n_t_/en${encodeURI(pagePath).toLowerCase()}`,
           )
           expect(headers1ImplicitLocale['netlify-cdn-cache-control']).toBe(
-            's-maxage=31536000, stale-while-revalidate=31536000, durable',
+            fallbackWasServedImplicitLocale
+              ? undefined
+              : 's-maxage=31536000, stale-while-revalidate=31536000, durable',
           )
 
+          if (fallbackWasServedImplicitLocale) {
+            const loading = await page.textContent('[data-testid="loading"]')
+            expect(loading, 'Fallback should be shown').toBe('Loading...')
+          }
+
           const date1ImplicitLocale = await page.textContent('[data-testid="date-now"]')
           const h1ImplicitLocale = await page.textContent('h1')
           expect(h1ImplicitLocale).toBe(expectedH1Content)
@@ -556,13 +636,25 @@ test.describe('Page Router with basePath and i18n', () => {
           const headers1ExplicitLocale = response1ExplicitLocale?.headers() || {}
           expect(response1ExplicitLocale?.status()).toBe(200)
           expect(headers1ExplicitLocale['x-nextjs-cache']).toBeUndefined()
+
+          const fallbackWasServedExplicitLocale =
+            useFallback && headers1ExplicitLocale['cache-status'].includes('"Next.js"; fwd=miss')
           expect(headers1ExplicitLocale['netlify-cache-tag']).toBe(
-            `_n_t_/en${encodeURI(pagePath).toLowerCase()}`,
+            fallbackWasServedExplicitLocale
+              ? undefined
+              : `_n_t_/en${encodeURI(pagePath).toLowerCase()}`,
           )
           expect(headers1ExplicitLocale['netlify-cdn-cache-control']).toBe(
-            's-maxage=31536000, stale-while-revalidate=31536000, durable',
+            fallbackWasServedExplicitLocale
+              ? undefined
+              : 's-maxage=31536000, stale-while-revalidate=31536000, durable',
           )
 
+          if (fallbackWasServedExplicitLocale) {
+            const loading = await page.textContent('[data-testid="loading"]')
+            expect(loading, 'Fallback should be shown').toBe('Loading...')
+          }
+
           const date1ExplicitLocale = await page.textContent('[data-testid="date-now"]')
           const h1ExplicitLocale = await page.textContent('h1')
           expect(h1ExplicitLocale).toBe(expectedH1Content)
@@ -910,11 +1002,23 @@ test.describe('Page Router with basePath and i18n', () => {
           const headers1 = response1?.headers() || {}
           expect(response1?.status()).toBe(200)
           expect(headers1['x-nextjs-cache']).toBeUndefined()
-          expect(headers1['netlify-cache-tag']).toBe(`_n_t_/de${encodeURI(pagePath).toLowerCase()}`)
+
+          const fallbackWasServed =
+            useFallback && headers1['cache-status'].includes('"Next.js"; fwd=miss')
+          expect(headers1['netlify-cache-tag']).toBe(
+            fallbackWasServed ? undefined : `_n_t_/de${encodeURI(pagePath).toLowerCase()}`,
+          )
           expect(headers1['netlify-cdn-cache-control']).toBe(
-            's-maxage=31536000, stale-while-revalidate=31536000, durable',
+            fallbackWasServed
+              ? undefined
+              : 's-maxage=31536000, stale-while-revalidate=31536000, durable',
           )
 
+          if (fallbackWasServed) {
+            const loading = await page.textContent('[data-testid="loading"]')
+            expect(loading, 'Fallback should be shown').toBe('Loading...')
+          }
+
           const date1 = await page.textContent('[data-testid="date-now"]')
           const h1 = await page.textContent('h1')
           expect(h1).toBe(expectedH1Content)

tests/fixtures/page-router-base-path-i18n/pages/fallback-true/[slug].js

@@ -0,0 +1,43 @@
+import { useRouter } from 'next/router'
+
+const Product = ({ time, slug }) => {
+  const router = useRouter()
+
+  if (router.isFallback) {
+    return <span data-testid="loading">Loading...</span>
+  }
+
+  return (
+    <div>
+      <h1>Product {slug}</h1>
+      <p>
+        This page uses getStaticProps() and getStaticPaths() to pre-fetch a Product
+        <span data-testid="date-now">{time}</span>
+      </p>
+    </div>
+  )
+}
+
+export async function getStaticProps({ params }) {
+  return {
+    props: {
+      time: new Date().toISOString(),
+      slug: params.slug,
+    },
+  }
+}
+
+export const getStaticPaths = () => {
+  return {
+    paths: [
+      {
+        params: {
+          slug: 'prerendered',
+        },
+      },
+    ],
+    fallback: true,
+  }
+}
+
+export default Product

tests/fixtures/page-router/pages/fallback-true/[slug].js

@@ -0,0 +1,43 @@
+import { useRouter } from 'next/router'
+
+const Product = ({ time, slug }) => {
+  const router = useRouter()
+
+  if (router.isFallback) {
+    return <span data-testid="loading">Loading...</span>
+  }
+
+  return (
+    <div>
+      <h1>Product {slug}</h1>
+      <p>
+        This page uses getStaticProps() and getStaticPaths() to pre-fetch a Product
+        <span data-testid="date-now">{time}</span>
+      </p>
+    </div>
+  )
+}
+
+export async function getStaticProps({ params }) {
+  return {
+    props: {
+      time: new Date().toISOString(),
+      slug: params.slug,
+    },
+  }
+}
+
+export const getStaticPaths = () => {
+  return {
+    paths: [
+      {
+        params: {
+          slug: 'prerendered',
+        },
+      },
+    ],
+    fallback: true,
+  }
+}
+
+export default Product

tests/integration/cache-handler.test.ts

@@ -43,6 +43,8 @@ describe('page router', () => {
     // check if the blob entries where successful set on the build plugin
     const blobEntries = await getBlobEntries(ctx)
     expect(blobEntries.map(({ key }) => decodeBlobKey(key.substring(0, 50))).sort()).toEqual([
+      '/fallback-true/[slug]',
+      '/fallback-true/prerendered',
       // the real key is much longer and ends in a hash, but we only assert on the first 50 chars to make it easier
       '/products/an-incredibly-long-product-',
       '/products/prerendered',
@@ -53,6 +55,7 @@ describe('page router', () => {
       '/static/revalidate-slow-data',
       '404.html',
       '500.html',
+      'fallback-true/[slug].html',
       'static/fully-static.html',
     ])