import { nextTestSetup } from 'e2e-utils' import { createRouterAct } from 'router-act' describe('segment cache (metadata)', () => { const { next, isNextDev } = nextTestSetup({ files: __dirname, }) if (isNextDev) { test('disabled in development', () => {}) return } describe("regression: prefetch the head if it's missing even if all other data is cached", () => { it('pages with dynamic content and dynamic metadata, using a full prefetch', async () => { let act: ReturnType const browser = await next.browser('/', { beforePageLoad(p) { act = createRouterAct(p) }, }) // Fully prefetch a page await act(async () => { const checkbox = await browser.elementByCss( 'input[data-link-accordion="/page-with-dynamic-head"]' ) await checkbox.click() }, [ { includes: 'Target page', }, // Because the link is prefetched with prefetch={true}, // we should be able to prefetch the title, even though it's dynamic. { includes: 'Dynamic Title', }, ]) // Now prefetch a link that rewrites to the same underlying page. await act(async () => { const checkbox = await browser.elementByCss( 'input[data-link-accordion="/rewrite-to-page-with-dynamic-head"]' ) await checkbox.click() }, [ { includes: 'Target page', block: 'reject', }, // It should not prefetch the page title or content again, because it // was already cached. { includes: 'Dynamic Title', block: 'reject', }, ]) // When we navigate to the page, it should not make any additional // network requests, because both the segment data and the head were // fully prefetched. await act(async () => { const link = await browser.elementByCss( 'a[href="/rewrite-to-page-with-dynamic-head"]' ) await link.click() const pageContent = await browser.elementById('target-page') expect(await pageContent.text()).toBe('Target page') const title = await browser.eval(() => document.title) expect(title).toBe('Dynamic Title') }, 'no-requests') }) it('pages with runtime-prefetchable content and dynamic metadata, using a runtime prefetch', async () => { let act: ReturnType const browser = await next.browser('/', { beforePageLoad(p) { act = createRouterAct(p) }, }) // Runtime-prefetch a page. // It only uses cookies, so this should be a complete prefetch. await act(async () => { const checkbox = await browser.elementByCss( 'input[data-link-accordion="/page-with-runtime-prefetchable-head"]' ) await checkbox.click() }, [ { includes: 'Target page', }, // Because the link is prefetched with prefetch={true}, // we should be able to prefetch the title, even though it's dynamic. { includes: 'Runtime-prefetchable title', }, ]) // Now runtime-prefetch a link that rewrites to the same underlying page. await act(async () => { const checkbox = await browser.elementByCss( 'input[data-link-accordion="/rewrite-to-page-with-runtime-prefetchable-head"]' ) await checkbox.click() }, [ { includes: 'Target page', block: 'reject', }, // It should not prefetch the page title or content again, because it // was already cached. { includes: 'Runtime-prefetchable title', block: 'reject', }, ]) // When we navigate to the page, it should not make any additional // network requests, because both the segment data and the head were // fully prefetched. await act(async () => { const link = await browser.elementByCss( 'a[href="/rewrite-to-page-with-runtime-prefetchable-head"]' ) await link.click() const pageContent = await browser.elementById('target-page') expect(await pageContent.text()).toBe('Target page') const title = await browser.eval(() => document.title) expect(title).toBe('Runtime-prefetchable title') }, 'no-requests') }) }) })