import { nextTestSetup } from 'e2e-utils'
import type * as Playwright from 'playwright'
import { createRouterAct } from 'router-act'
describe('force stale', () => {
const { next, isNextDev } = nextTestSetup({
files: __dirname,
})
if (isNextDev) {
test('prefetching is disabled in dev', () => {})
return
}
it(
'during a navigation, don\'t request segments that have a pending "full" ' +
'prefetch already in progress',
async () => {
let act: ReturnType<typeof createRouterAct>
const browser = await next.browser('/', {
beforePageLoad(p: Playwright.Page) {
act = createRouterAct(p)
},
})
await act(
async () => {
// Reveal a link to a dynamic page. The Link has prefetch={true}, so the
// full page data is prefetched, including dynamic content.
const toggleLinkVisibility = await browser.elementByCss(
'input[data-link-accordion="/dynamic"]'
)
await act(async () => await toggleLinkVisibility.click(), {
includes: 'Dynamic page content',
// Block the data from loading into the client so we can test what
// happens if we request the same segment again during a navigation.
block: true,
})
// Initiate a navigation to the dynamic page. Even though the dynamic
// content from the prefetch hasn't loaded yet, the router should not
// request the same segment again, because it knows the data it
// receives from the prefetch will be complete. This assumption is
// _only_ correct for "full" prefetches, because we explicitly instruct
// the server not to omit any dynamic or runtime data.
const link = await browser.elementByCss('a[href="/dynamic"]')
await link.click()
},
// There should have been no additional requests upon navigation
'no-requests'
)
// The data succesfully streams in.
const content = await browser.elementById('dynamic-page-content')
expect(await content.text()).toBe('Dynamic page content')
}
)
it(
'during a "full" prefetch, read from bfcache before issuing new ' +
'prefetch request',
async () => {
let act: ReturnType<typeof createRouterAct>
const browser = await next.browser('/', {
beforePageLoad(p: Playwright.Page) {
act = createRouterAct(p)
},
})
// Navigate to the dynamic page using the link without prefetch.
// This will fetch the page data and store it in the bfcache.
await act(
async () => {
const link = await browser.elementById('link-without-prefetch')
await link.click()
},
{
includes: 'Dynamic page content',
}
)
// Navigate back to the home page
await browser.back()
// Now reveal a link with prefetch={true} to the same page. Because we've
// already navigated to this page, the route entry and segment data
// should already be in the cache. The prefetch should reuse the cached
// data instead of making a new request to the server.
await act(async () => {
const toggleLinkVisibility = await browser.elementByCss(
'input[data-link-accordion="/dynamic"]'
)
await toggleLinkVisibility.click()
}, 'no-requests')
}
)
})