next.js/test/integration/prerender-preview/test/index.test.ts

/* 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'
import qs from 'querystring'

const appDir = join(__dirname, '..')

async function getBuildId() {
  return fs.readFile(join(appDir, '.next', 'BUILD_ID'), 'utf8')
}

function getData(html) {
  const $ = cheerio.load(html)
  const nextData = $('#__NEXT_DATA__')
  const preEl = $('#props-pre')
  const routerData = JSON.parse($('#router').text())
  return {
    nextData: JSON.parse(nextData.html()),
    pre: preEl.text(),
    routerData,
  }
}

function runTests(startServer = nextStart) {
  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/)
  })

  let appPort, app
  it('should start production application', async () => {
    appPort = await findPort()
    app = await startServer(appDir, appPort)
  })

  it('should return prerendered page on first request', async () => {
    const html = await renderViaHTTP(appPort, '/')
    const { nextData, pre, routerData } = getData(html)
    expect(nextData).toMatchObject({ isFallback: false })
    expect(nextData.isPreview).toBeUndefined()
    expect(pre).toBe('false and null')
    expect(routerData.isPreview).toBe(false)
  })

  it('should return prerendered page on second request', async () => {
    const html = await renderViaHTTP(appPort, '/')
    const { nextData, pre, routerData } = getData(html)
    expect(nextData).toMatchObject({ isFallback: false })
    expect(nextData.isPreview).toBeUndefined()
    expect(pre).toBe('false and null')
    expect(routerData.isPreview).toBe(false)
  })

  it('should throw error when setting too large of preview data', async () => {
    const res = await fetchViaHTTP(appPort, '/api/preview?tooBig=true')
    expect(res.status).toBe(500)
    expect(await res.text()).toBe('too big')
  })

  let previewCookieString
  it('should enable preview mode', async () => {
    const res = await fetchViaHTTP(appPort, '/api/preview', { lets: 'goooo' })
    expect(res.status).toBe(200)

    const originalCookies = res.headers.get('set-cookie').split(',')
    const cookies = originalCookies.map((cookieRaw) => cookie.parse(cookieRaw))

    expect(originalCookies.every((c) => c.includes('; Secure;'))).toBe(true)

    expect(cookies.length).toBe(2)
    expect(cookies[0]).toMatchObject({ Path: '/', SameSite: 'None' })
    expect(cookies[0]).toHaveProperty('__prerender_bypass')
    expect(cookies[0]).not.toHaveProperty('Max-Age')
    expect(cookies[1]).toMatchObject({ Path: '/', SameSite: 'None' })
    expect(cookies[1]).toHaveProperty('__next_preview_data')
    expect(cookies[1]).not.toHaveProperty('Max-Age')

    previewCookieString =
      cookie.serialize('__prerender_bypass', cookies[0].__prerender_bypass) +
      '; ' +
      cookie.serialize('__next_preview_data', cookies[1].__next_preview_data)
  })

  it('should expire cookies with a maxAge', async () => {
    const expiry = '60'
    const res = await fetchViaHTTP(appPort, '/api/preview', {
      cookieMaxAge: expiry,
    })
    expect(res.status).toBe(200)

    const originalCookies = res.headers.get('set-cookie').split(',')
    const cookies = originalCookies.map((cookieRaw) => cookie.parse(cookieRaw))

    expect(originalCookies.every((c) => c.includes('; Secure;'))).toBe(true)

    expect(cookies.length).toBe(2)
    expect(cookies[0]).toMatchObject({ Path: '/', SameSite: 'None' })
    expect(cookies[0]).toHaveProperty('__prerender_bypass')
    expect(cookies[0]['Max-Age']).toBe(expiry)
    expect(cookies[1]).toMatchObject({ Path: '/', SameSite: 'None' })
    expect(cookies[1]).toHaveProperty('__next_preview_data')
    expect(cookies[1]['Max-Age']).toBe(expiry)
  })
  it('should set custom path cookies', async () => {
    const path = '/path'
    const res = await fetchViaHTTP(appPort, '/api/preview', {
      cookiePath: path,
    })
    expect(res.status).toBe(200)

    const originalCookies = res.headers.get('set-cookie').split(',')
    const cookies = originalCookies.map((cookieRaw) => cookie.parse(cookieRaw))

    expect(originalCookies.every((c) => c.includes('; Secure;'))).toBe(true)

    expect(cookies.length).toBe(2)
    expect(cookies[0]).toMatchObject({ Path: path, SameSite: 'None' })
    expect(cookies[0]).toHaveProperty('__prerender_bypass')
    expect(cookies[0]['Path']).toBe(path)
    expect(cookies[0]).toMatchObject({ Path: path, SameSite: 'None' })
    expect(cookies[1]).toHaveProperty('__next_preview_data')
    expect(cookies[1]['Path']).toBe(path)
  })
  it('should not return fallback page on preview request', async () => {
    const res = await fetchViaHTTP(
      appPort,
      '/',
      {},
      { headers: { Cookie: previewCookieString } }
    )
    const html = await res.text()

    const { nextData, pre, routerData } = getData(html)
    expect(res.headers.get('cache-control')).toBe(
      'private, no-cache, no-store, max-age=0, must-revalidate'
    )
    expect(nextData).toMatchObject({ isFallback: false, isPreview: true })
    expect(pre).toBe('true and {"lets":"goooo"}')
    expect(routerData.isPreview).toBe(true)
  })

  it('should return correct caching headers for data preview request', async () => {
    const res = await fetchViaHTTP(
      appPort,
      `/_next/data/${encodeURI(await getBuildId())}/index.json`,
      {},
      { headers: { Cookie: previewCookieString } }
    )
    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: {
        preview: true,
        previewData: { lets: 'goooo' },
      },
    })
  })

  it('should return cookies to be expired on reset request', async () => {
    const res = await fetchViaHTTP(
      appPort,
      '/api/reset',
      {},
      { headers: { Cookie: previewCookieString } }
    )
    expect(res.status).toBe(200)

    const cookies = res.headers
      .get('set-cookie')
      .replace(/(=(?!Lax)\w{3}),/g, '$1')
      .split(',')
      .map((cookieRaw) => cookie.parse(cookieRaw))

    expect(cookies.length).toBe(2)
    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')
    expect(cookies[1]).toMatchObject({
      Path: '/',
      SameSite: 'None',
      Expires: 'Thu 01 Jan 1970 00:00:00 GMT',
    })
    expect(cookies[1]).toHaveProperty('__next_preview_data')
    expect(cookies[1]).not.toHaveProperty('Max-Age')
  })

  it('should return cookies to be expired on reset request with path specified', async () => {
    const res = await fetchViaHTTP(
      appPort,
      '/api/reset',
      { cookiePath: '/blog' },
      { headers: { Cookie: previewCookieString } }
    )
    expect(res.status).toBe(200)

    const cookies = res.headers
      .get('set-cookie')
      .replace(/(=(?!Lax)\w{3}),/g, '$1')
      .split(',')
      .map((cookieRaw) => cookie.parse(cookieRaw))

    expect(cookies.length).toBe(2)
    expect(cookies[0]).toMatchObject({
      Path: '/blog',
      SameSite: 'None',
      Expires: 'Thu 01 Jan 1970 00:00:00 GMT',
    })
    expect(cookies[0]).toHaveProperty('__prerender_bypass')
    expect(cookies[0]).not.toHaveProperty('Max-Age')
    expect(cookies[1]).toMatchObject({
      Path: '/blog',
      SameSite: 'None',
      Expires: 'Thu 01 Jan 1970 00:00:00 GMT',
    })
    expect(cookies[1]).toHaveProperty('__next_preview_data')
    expect(cookies[1]).not.toHaveProperty('Max-Age')
  })

  it('should pass undefined to API routes when not in preview', async () => {
    const res = await fetchViaHTTP(appPort, `/api/read`)
    const json = await res.json()

    expect(json).toMatchObject({})
  })
  it('should pass the preview data to API routes', async () => {
    const res = await fetchViaHTTP(
      appPort,
      '/api/read',
      {},
      { headers: { Cookie: previewCookieString } }
    )
    const json = await res.json()

    expect(json).toMatchObject({
      preview: true,
      previewData: { lets: 'goooo' },
    })
  })

  afterAll(async () => {
    await killApp(app)
  })
}

describe('Prerender Preview Mode', () => {
  ;(process.env.TURBOPACK_BUILD ? describe.skip : describe)(
    'development mode',
    () => {
      let appPort, app
      it('should start development application', async () => {
        appPort = await findPort()
        app = await launchApp(appDir, appPort)
      })

      let previewCookieString
      it('should enable preview mode', async () => {
        const res = await fetchViaHTTP(appPort, '/api/preview', {
          lets: 'goooo',
        })
        expect(res.status).toBe(200)

        const cookies = res.headers
          .get('set-cookie')
          .split(',')
          .map((cookieRaw) => cookie.parse(cookieRaw))

        expect(cookies.length).toBe(2)
        previewCookieString =
          cookie.serialize(
            '__prerender_bypass',
            cookies[0].__prerender_bypass
          ) +
          '; ' +
          cookie.serialize(
            '__next_preview_data',
            cookies[1].__next_preview_data
          )
      })

      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: previewCookieString } }
        )
        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((cookieRaw) => cookie.parse(cookieRaw))

        expect(cookies.length).toBe(2)
      })

      /** @type {import('next-webdriver').Chain} */
      let browser
      it('should start the client-side browser', async () => {
        browser = await webdriver(
          appPort,
          '/api/preview?' + qs.stringify({ client: 'mode' })
        )
      })

      it('should fetch preview data on SSR', async () => {
        await browser.get(`http://localhost:${appPort}/`)
        await browser.waitForElementByCss('#props-pre')
        // expect(await browser.elementById('props-pre').text()).toBe('Has No Props')
        // await new Promise(resolve => setTimeout(resolve, 2000))
        expect(await browser.elementById('props-pre').text()).toBe(
          'true and {"client":"mode"}'
        )
      })

      it('should fetch preview data on CST', async () => {
        await browser.get(`http://localhost:${appPort}/to-index`)
        await browser.waitForElementByCss('#to-index')
        await browser.eval('window.itdidnotrefresh = "hello"')
        await browser.elementById('to-index').click()
        await browser.waitForElementByCss('#props-pre')
        expect(await browser.eval('window.itdidnotrefresh')).toBe('hello')
        expect(await browser.elementById('props-pre').text()).toBe(
          'true and {"client":"mode"}'
        )
      })

      it('should fetch prerendered data', async () => {
        await browser.get(`http://localhost:${appPort}/api/reset`)

        await browser.get(`http://localhost:${appPort}/`)
        await browser.waitForElementByCss('#props-pre')
        expect(await browser.elementById('props-pre').text()).toBe(
          'false and null'
        )
      })

      it('should fetch live static props with preview active', async () => {
        await browser.get(`http://localhost:${appPort}/`)

        await browser.waitForElementByCss('#ssg-random')
        const initialRandom = await browser.elementById('ssg-random').text()

        // reload static props with router.replace
        await browser.elementById('reload-props').click()

        // wait for route change to complete and set updated state
        await browser.waitForElementByCss('#ssg-reloaded')

        // assert that the random number from static props has changed (thus, was re-evaluated)
        expect(await browser.elementById('ssg-random').text()).not.toBe(
          initialRandom
        )
      })

      afterAll(async () => {
        await browser.close()
        await killApp(app)
      })
    }
  )
  ;(process.env.TURBOPACK_DEV ? describe.skip : describe)(
    'production mode',
    () => {
      runTests()
    }
  )
})