import type * as Playwright from 'playwright' import webdriver from 'next-webdriver' import { createRouterAct } from 'router-act' import { findPort, nextBuild } from 'next-test-utils' import { isNextStart } from 'e2e-utils' import { server } from './server.mjs' describe('segment cache (output: "export")', () => { if (!isNextStart) { test('build test should not run during dev test run', () => {}) return } // To debug these tests locally, first build the app, then run: // // node start.mjs // // This will serve the static `/out` directory, and also set up a server-side // rewrite, which some of the tests below rely on. let port: number beforeAll(async () => { const appDir = __dirname await nextBuild(appDir, undefined, { cwd: appDir, disableAutoSkewProtection: true, }) port = await findPort() server.listen(port) }) afterAll(() => { server.close() }) it('basic prefetch in output: "export" mode', async () => { let act const browser = await webdriver(port, '/', { beforePageLoad(p: Playwright.Page) { act = createRouterAct(p) }, }) // Initiate a prefetch await act( async () => { const checkbox = await browser.elementByCss( '[data-link-accordion="/target-page"]' ) await checkbox.click() }, { includes: 'Target page', } ) // Navigate to the prefetched target page. await act( async () => { const link = await browser.elementByCss('a[href="/target-page"]') await link.click() // The page was prefetched, so we're able to render the target // page immediately. const div = await browser.elementById('target-page') expect(await div.text()).toBe('Target page') // The target page includes a link back to the home page await browser.elementByCss('a[href="/"]') }, { // Should have prefetched the home page includes: 'Demonstrates that per-segment prefetching works', } ) }) it('prefetch a link to a page that is rewritten server side', async () => { let act const browser = await webdriver(port, '/', { beforePageLoad(p: Playwright.Page) { act = createRouterAct(p) }, }) // Initiate a prefetch await act( async () => { const checkbox = await browser.elementByCss( '[data-link-accordion="/rewrite-to-target-page"]' ) await checkbox.click() }, { includes: 'Target page', } ) // Navigate to the prefetched page. await act( async () => { const link = await browser.elementByCss( 'a[href="/rewrite-to-target-page"]' ) await link.click() // The page was prefetched, so we're able to render the target // page immediately. const div = await browser.elementById('target-page') expect(await div.text()).toBe('Target page') // The target page includes a link back to the home page await browser.elementByCss('a[href="/"]') }, { // Should have prefetched the home page includes: 'Demonstrates that per-segment prefetching works', } ) }) it('prefetch a link to a page that is redirected server side', async () => { let act const browser = await webdriver(port, '/', { beforePageLoad(p: Playwright.Page) { act = createRouterAct(p) }, }) // Initiate a prefetch await act( async () => { const checkbox = await browser.elementByCss( '[data-link-accordion="/redirect-to-target-page"]' ) await checkbox.click() }, { includes: 'Target page', } ) // Navigate to the prefetched page. await act( async () => { const link = await browser.elementByCss( 'a[href="/redirect-to-target-page"]' ) await link.click() // The page was prefetched, so we're able to render the target // page immediately. const div = await browser.elementById('target-page') expect(await div.text()).toBe('Target page') // The target page includes a link back to the home page await browser.elementByCss('a[href="/"]') }, { // Should have prefetched the home page includes: 'Demonstrates that per-segment prefetching works', } ) }) })