first commit

test/integration/draft-mode/pages/another.tsx

@@ -0,0 +1,32 @@
+import Link from 'next/link'
+import type { GetStaticProps } from 'next'
+
+type Props = {
+  random: number
+  draftMode: string
+}
+
+export const getStaticProps: GetStaticProps<Props> = ({ draftMode }) => {
+  return {
+    props: {
+      random: Math.random(),
+      draftMode: Boolean(draftMode).toString(),
+    },
+    revalidate: 100000,
+  }
+}
+
+export default function Another(props: Props) {
+  return (
+    <>
+      <h1>Another</h1>
+      <p>
+        Draft Mode: <em id="draft">{props.draftMode}</em>
+      </p>
+      <p>
+        Random: <em id="rand">{props.random}</em>
+      </p>
+      <Link href="/">Go home</Link>
+    </>
+  )
+}

test/integration/draft-mode/pages/api/disable.ts

@@ -0,0 +1,6 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(_req: NextApiRequest, res: NextApiResponse) {
+  res.setDraftMode({ enable: false })
+  res.end('Check your cookies...')
+}

test/integration/draft-mode/pages/api/enable.ts

@@ -0,0 +1,6 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(_req: NextApiRequest, res: NextApiResponse) {
+  res.setDraftMode({ enable: true })
+  res.end('Check your cookies...')
+}

test/integration/draft-mode/pages/api/read.ts

@@ -0,0 +1,6 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default (req: NextApiRequest, res: NextApiResponse) => {
+  const { draftMode } = req
+  res.json({ draftMode })
+}

test/integration/draft-mode/pages/index.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react'
+import Link from 'next/link'
+import type { GetStaticProps } from 'next'
+
+type Props = {
+  random: number
+  draftMode: string
+}
+
+export const getStaticProps: GetStaticProps<Props> = ({ draftMode }) => {
+  return {
+    props: {
+      random: Math.random(),
+      draftMode: Boolean(draftMode).toString(),
+    },
+    revalidate: 100000,
+  }
+}
+
+export default function Home(props: Props) {
+  const [count, setCount] = useState(0)
+  return (
+    <>
+      <h1>Home</h1>
+      <p>
+        Draft Mode: <em id="draft">{props.draftMode}</em>
+      </p>
+      <button id="inc" onClick={() => setCount(count + 1)}>
+        Increment
+      </button>
+      <p>
+        Count: <span id="count">{count}</span>
+      </p>
+      <p>
+        Random: <em id="rand">{props.random}</em>
+      </p>
+      <Link href="/another">Visit another page</Link>
+    </>
+  )
+}

test/integration/draft-mode/pages/ssp.tsx

@@ -0,0 +1,36 @@
+import Link from 'next/link'
+import type { GetServerSideProps } from 'next'
+
+type Props = {
+  random: number
+  draftMode: string
+}
+
+export const getServerSideProps: GetServerSideProps<Props> = async ({
+  res,
+  draftMode,
+}) => {
+  // test override header
+  res.setHeader('Cache-Control', 'public, max-age=3600')
+  return {
+    props: {
+      random: Math.random(),
+      draftMode: Boolean(draftMode).toString(),
+    },
+  }
+}
+
+export default function SSP(props: Props) {
+  return (
+    <>
+      <h1>Server Side Props</h1>
+      <p>
+        Draft Mode: <em id="draft">{props.draftMode}</em>
+      </p>
+      <p>
+        Random: <em id="rand">{props.random}</em>
+      </p>
+      <Link href="/">Go home</Link>
+    </>
+  )
+}

test/integration/draft-mode/pages/to-index.tsx

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+
+export function getStaticProps() {
+  return { props: {} }
+}
+
+export default function () {
+  return (
+    <main>
+      <Link href="/" id="to-index">
+        To Index
+      </Link>
+    </main>
+  )
+}

test/integration/draft-mode/test/index.test.ts

@@ -0,0 +1,255 @@
+/* eslint-env jest */
+
+import cheerio from 'cheerio'
+import cookie from 'cookie'
+import fs from 'fs-extra'
+import {
+  fetchViaHTTP,
+  findPort,
+  killApp,
+  launchApp,
+  nextBuild,
+  nextStart,
+  renderViaHTTP,
+} from 'next-test-utils'
+import webdriver from 'next-webdriver'
+import { join } from 'path'
+
+const appDir = join(__dirname, '..')
+
+async function getBuildId() {
+  return fs.readFile(join(appDir, '.next', 'BUILD_ID'), 'utf8')
+}
+
+function getData(html: string) {
+  const $ = cheerio.load(html)
+  return {
+    nextData: JSON.parse($('#__NEXT_DATA__').html()),
+    draft: $('#draft').text(),
+    rand: $('#rand').text(),
+    count: $('#count').text(),
+  }
+}
+
+describe('Test Draft Mode', () => {
+  ;(process.env.TURBOPACK_BUILD ? describe.skip : describe)(
+    'development mode',
+    () => {
+      let appPort, app, browser, cookieString
+      it('should start development application', async () => {
+        appPort = await findPort()
+        app = await launchApp(appDir, appPort)
+      })
+
+      it('should enable draft mode', async () => {
+        const res = await fetchViaHTTP(appPort, '/api/enable')
+        expect(res.status).toBe(200)
+
+        const cookies = res.headers
+          .get('set-cookie')
+          .split(',')
+          .map((c) => cookie.parse(c))
+
+        expect(cookies[0]).toBeTruthy()
+        expect(cookies[0].__prerender_bypass).toBeTruthy()
+        cookieString = cookie.serialize(
+          '__prerender_bypass',
+          cookies[0].__prerender_bypass
+        )
+      })
+
+      it('should return cookies to be expired after dev server reboot', async () => {
+        await killApp(app)
+        appPort = await findPort()
+        app = await launchApp(appDir, appPort)
+
+        const res = await fetchViaHTTP(
+          appPort,
+          '/',
+          {},
+          { headers: { Cookie: cookieString } }
+        )
+        expect(res.status).toBe(200)
+
+        const body = await res.text()
+        // "err":{"name":"TypeError","message":"Cannot read property 'previewModeId' of undefined"
+        expect(body).not.toContain('"err"')
+        expect(body).not.toContain('TypeError')
+        expect(body).not.toContain('previewModeId')
+
+        const cookies = res.headers
+          .get('set-cookie')
+          .replace(/(=(?!Lax)\w{3}),/g, '$1')
+          .split(',')
+          .map((c) => cookie.parse(c))
+
+        expect(cookies[0]).toBeTruthy()
+      })
+
+      it('should start the client-side browser', async () => {
+        browser = await webdriver(appPort, '/api/enable')
+      })
+
+      it('should fetch draft data on SSR', async () => {
+        await browser.get(`http://localhost:${appPort}/`)
+        await browser.waitForElementByCss('#draft')
+        expect(await browser.elementById('draft').text()).toBe('true')
+      })
+
+      it('should fetch draft data on CST', async () => {
+        await browser.get(`http://localhost:${appPort}/to-index`)
+        await browser.waitForElementByCss('#to-index')
+        await browser.eval('window.itdidnotrefresh = "yep"')
+        await browser.elementById('to-index').click()
+        await browser.waitForElementByCss('#draft')
+        expect(await browser.eval('window.itdidnotrefresh')).toBe('yep')
+        expect(await browser.elementById('draft').text()).toBe('true')
+      })
+
+      it('should disable draft mode', async () => {
+        await browser.get(`http://localhost:${appPort}/api/disable`)
+
+        await browser.get(`http://localhost:${appPort}/`)
+        await browser.waitForElementByCss('#draft')
+        expect(await browser.elementById('draft').text()).toBe('false')
+      })
+
+      afterAll(async () => {
+        await browser.close()
+        await killApp(app)
+      })
+    }
+  )
+  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
+    'production mode',
+    () => {
+      let appPort, app, cookieString, initialRand
+      const getOpts = () => ({ headers: { Cookie: cookieString } })
+
+      it('should compile successfully', async () => {
+        await fs.remove(join(appDir, '.next'))
+        const { code, stdout } = await nextBuild(appDir, [], {
+          stdout: true,
+        })
+        expect(code).toBe(0)
+        expect(stdout).toMatch(/Compiled successfully/)
+      })
+
+      it('should start production application', async () => {
+        appPort = await findPort()
+        app = await nextStart(appDir, appPort)
+      })
+
+      it('should return prerendered page on first request', async () => {
+        const html = await renderViaHTTP(appPort, '/')
+        const { nextData, draft, rand } = getData(html)
+        expect(nextData).toMatchObject({ isFallback: false })
+        expect(draft).toBe('false')
+        initialRand = rand
+      })
+
+      it('should return prerendered page on second request', async () => {
+        const html = await renderViaHTTP(appPort, '/')
+        const { nextData, draft, rand } = getData(html)
+        expect(nextData).toMatchObject({ isFallback: false })
+        expect(draft).toBe('false')
+        expect(rand).toBe(initialRand)
+      })
+
+      // eslint-disable-next-line jest/no-identical-title
+      it('should enable draft mode', async () => {
+        const res = await fetchViaHTTP(appPort, '/api/enable')
+        expect(res.status).toBe(200)
+
+        const originalCookies = res.headers.get('set-cookie').split(',')
+        const cookies = originalCookies.map((c) => cookie.parse(c))
+
+        expect(cookies.length).toBe(1)
+        expect(cookies[0]).toBeTruthy()
+        expect(cookies[0]).toMatchObject({ Path: '/', SameSite: 'None' })
+        expect(cookies[0]).toHaveProperty('__prerender_bypass')
+        //expect(cookies[0]).toHaveProperty('Secure')
+        expect(cookies[0]).not.toHaveProperty('Max-Age')
+
+        cookieString = cookie.serialize(
+          '__prerender_bypass',
+          cookies[0].__prerender_bypass
+        )
+      })
+
+      it('should return dynamic response when draft mode enabled', async () => {
+        const html = await renderViaHTTP(appPort, '/', {}, getOpts())
+        const { nextData, draft, rand } = getData(html)
+        expect(nextData).toMatchObject({ isFallback: false })
+        expect(draft).toBe('true')
+        expect(rand).not.toBe(initialRand)
+      })
+
+      it('should not return fallback page on draft request', async () => {
+        const res = await fetchViaHTTP(appPort, '/ssp', {}, getOpts())
+        const html = await res.text()
+
+        const { nextData, draft } = getData(html)
+        expect(res.headers.get('cache-control')).toBe(
+          'private, no-cache, no-store, max-age=0, must-revalidate'
+        )
+        expect(nextData).toMatchObject({ isFallback: false })
+        expect(draft).toBe('true')
+      })
+
+      it('should return correct caching headers for draft mode request', async () => {
+        const url = `/_next/data/${encodeURI(await getBuildId())}/index.json`
+        const res = await fetchViaHTTP(appPort, url, {}, getOpts())
+        const json = await res.json()
+
+        expect(res.headers.get('cache-control')).toBe(
+          'private, no-cache, no-store, max-age=0, must-revalidate'
+        )
+        expect(json).toMatchObject({
+          pageProps: {
+            draftMode: 'true',
+          },
+        })
+      })
+
+      it('should return cookies to be expired on disable request', async () => {
+        const res = await fetchViaHTTP(appPort, '/api/disable', {}, getOpts())
+        expect(res.status).toBe(200)
+
+        const cookies = res.headers
+          .get('set-cookie')
+          .replace(/(=(?!Lax)\w{3}),/g, '$1')
+          .split(',')
+          .map((c) => cookie.parse(c))
+
+        expect(cookies[0]).toBeTruthy()
+        expect(cookies[0]).toMatchObject({
+          Path: '/',
+          SameSite: 'None',
+          Expires: 'Thu 01 Jan 1970 00:00:00 GMT',
+        })
+        expect(cookies[0]).toHaveProperty('__prerender_bypass')
+        expect(cookies[0]).not.toHaveProperty('Max-Age')
+      })
+
+      it('should pass undefined to API routes when not in draft mode', async () => {
+        const res = await fetchViaHTTP(appPort, `/api/read`)
+        const json = await res.json()
+
+        expect(json).toMatchObject({})
+      })
+      it('should pass draft mode to API routes', async () => {
+        const res = await fetchViaHTTP(appPort, '/api/read', {}, getOpts())
+        const json = await res.json()
+
+        expect(json).toMatchObject({
+          draftMode: true,
+        })
+      })
+
+      afterAll(async () => {
+        await killApp(app)
+      })
+    }
+  )
+})

test/integration/draft-mode/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "baseUrl": "../../..",
+    "paths": {
+      "development-sandbox": ["test/lib/development-sandbox"],
+      "next-test-utils": ["test/lib/next-test-utils"],
+      "next-webdriver": ["test/lib/next-webdriver"],
+      "e2e-utils": ["test/lib/e2e-utils"]
+    },
+    "target": "ES2017"
+  },
+  "include": [
+    "test/integration/draft-mode/next-env.d.ts",
+    "test/integration/draft-mode/**/*.ts",
+    "test/integration/draft-mode/**/*.tsx"
+  ],
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
+}