test: add test for preview mode when using middleware

Author: pieh

cypress/e2e/middleware/preview.cy.ts

@@ -0,0 +1,34 @@
+describe('Preview Mode', () => {
+  it('enters and exits preview mode', () => {
+    Cypress.Cookies.debug(true)
+    cy.getCookies().then((cookie) => cy.log('cookies', cookie))
+
+    cy.intercept('/previewTest', (req) => {
+      req.continue((res) => {
+        expect(res.headers?.['x-middleware-executed']).to.equal('true')
+      })
+    }).as('previewTestVisit')
+
+    // preview mode is off by default
+    cy.visit('/previewTest')
+    cy.findByText('Is preview? No', { selector: 'h1' })
+
+    // enter preview mode
+    cy.request('/api/enterPreview').then((response) => {
+      expect(response.body).to.have.property('name', 'preview mode')
+    })
+
+    // exptected content is rendered
+    cy.visit('/previewTest')
+    cy.findByText('Is preview? Yes!', { selector: 'h1' })
+
+    // exit preview mode
+    cy.request('/api/exitPreview')
+    cy.visit('/previewTest')
+    cy.findByText('Is preview? No', { selector: 'h1' })
+
+    // we should hit /previewTest 3 times (before entering preview, after entering preview, after exiting preview)
+    // this assertion is mainly to ensure interception works and assertion on response header is made
+    cy.get('@previewTestVisit.all').should('have.length', 3)
+  })
+})

demos/middleware/middleware.ts

@@ -109,6 +109,14 @@ export async function middleware(req: NextRequest) {
     return response
   }
 
+  if (pathname.startsWith('/previewTest')) {
+    console.log('Preview test middleware')
+    response = NextResponse.next()
+
+    response.headers.set('x-middleware-executed', 'true')
+    return response
+  }
+
   if (pathname.includes('locale-preserving-rewrite')) {
     return NextResponse.rewrite(new URL('/locale-test', req.url))
   }
@@ -189,5 +197,6 @@ export const config = {
         }
       ],
     },
+    '/previewTest',
   ],
 }

demos/middleware/pages/index.js

@@ -48,6 +48,9 @@ export default function Home() {
         <p>
           <Link href="/headers">Adds `x-hello` request header to a rewrite</Link>
         </p>
+        <p>
+          <Link href="/previewTest">Preview mode</Link>
+        </p>
       </main>
     </div>
   )

demos/middleware/pages/previewTest.js

@@ -0,0 +1,25 @@
+import Link from 'next/link'
+
+const StaticTest = ({ isPreview }) => {
+  return (
+    <div>
+      <h1>Is preview? {isPreview ? 'Yes!' : 'No'}</h1>
+      <p>
+        <a href={isPreview ? '/api/exitPreview' : '/api/enterPreview'}>
+          {isPreview ? 'Exit Preview' : 'Enter Preview'}
+        </a>
+      </p>
+      <Link href="/">Go back home</Link>
+    </div>
+  )
+}
+
+export const getStaticProps = async ({ preview }) => {
+  return {
+    props: {
+      isPreview: Boolean(preview),
+    },
+  }
+}
+
+export default StaticTest