mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Zack TannerandGitHub
c95eb899fa
These tests aren't resilient to changes in router behavior after extensive refactors. What looks to be happening is a race between the prefetch being issued and the click firing: 1. Cache expires -> refetch prefetch is triggered 2. Click happens while prefetch is in-flight -> route entry is Pending 3. Since no fulfilled cache entry exists, `navigate()` falls through to `navigateDynamicallyWithNoPrefetch()` 4. This issues a full dynamic request 5. The full dynamic response is favored and skips the loading state This ensures that we are waiting for network activity to finish before navigating.
351 lines
10 KiB
TypeScript
351 lines
10 KiB
TypeScript
import { nextTestSetup } from 'e2e-utils'
|
|
import { check, retry } from 'next-test-utils'
|
|
import { Playwright } from 'next-webdriver'
|
|
import {
|
|
browserConfigWithFixedTime,
|
|
createRequestsListener,
|
|
fastForwardTo,
|
|
getPathname,
|
|
} from './test-utils'
|
|
import path from 'path'
|
|
|
|
describe('app dir client cache semantics (default semantics)', () => {
|
|
const { next, isNextDev } = nextTestSetup({
|
|
files: path.join(__dirname, 'fixtures', 'regular'),
|
|
})
|
|
|
|
if (isNextDev) {
|
|
// dev doesn't support prefetch={true}, so this just performs a basic test to make sure data is reused for 30s
|
|
it('should return fresh data every navigation', async () => {
|
|
let browser = await next.browser('/', browserConfigWithFixedTime)
|
|
|
|
// navigate to prefetch-auto page
|
|
await browser.elementByCss('[href="/1"]').click()
|
|
|
|
let initialNumber = await browser.elementById('random-number').text()
|
|
|
|
// Navigate back to the index, and then back to the prefetch-auto page
|
|
await browser.elementByCss('[href="/"]').click()
|
|
await browser.eval(fastForwardTo, 5 * 1000)
|
|
await browser.elementByCss('[href="/1"]').click()
|
|
|
|
let newNumber = await browser.elementById('random-number').text()
|
|
|
|
expect(newNumber).not.toBe(initialNumber)
|
|
})
|
|
} else {
|
|
describe('prefetch={true}', () => {
|
|
let browser: Playwright
|
|
|
|
beforeEach(async () => {
|
|
browser = await next.browser('/', browserConfigWithFixedTime)
|
|
})
|
|
|
|
it('should prefetch the full page', async () => {
|
|
const { getRequests, clearRequests } =
|
|
await createRequestsListener(browser)
|
|
await check(() => {
|
|
return getRequests().some(
|
|
([url, didPartialPrefetch]) =>
|
|
getPathname(url) === '/0' && !didPartialPrefetch
|
|
)
|
|
? 'success'
|
|
: 'fail'
|
|
}, 'success')
|
|
|
|
clearRequests()
|
|
|
|
await browser
|
|
.elementByCss('[href="/0?timeout=0"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
|
|
expect(
|
|
getRequests().every(([url]) => getPathname(url) !== '/0')
|
|
).toEqual(true)
|
|
})
|
|
it('should re-use the cache for the full page, only for 5 mins', async () => {
|
|
const randomNumber = await browser
|
|
.elementByCss('[href="/0?timeout=0"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
.text()
|
|
|
|
await browser.elementByCss('[href="/"]').click()
|
|
|
|
const number = await browser
|
|
.elementByCss('[href="/0?timeout=0"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
.text()
|
|
|
|
expect(number).toBe(randomNumber)
|
|
|
|
await browser.eval(fastForwardTo, 5 * 60 * 1000)
|
|
|
|
await browser.elementByCss('[href="/"]').click()
|
|
|
|
const newNumber = await browser
|
|
.elementByCss('[href="/0?timeout=0"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
.text()
|
|
|
|
expect(newNumber).not.toBe(randomNumber)
|
|
})
|
|
|
|
it('should prefetch again after 5 mins if the link is visible again', async () => {
|
|
const { getRequests, clearRequests } =
|
|
await createRequestsListener(browser)
|
|
|
|
await check(() => {
|
|
return getRequests().some(
|
|
([url, didPartialPrefetch]) =>
|
|
getPathname(url) === '/0' && !didPartialPrefetch
|
|
)
|
|
? 'success'
|
|
: 'fail'
|
|
}, 'success')
|
|
|
|
const randomNumber = await browser
|
|
.elementByCss('[href="/0?timeout=0"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
.text()
|
|
|
|
await browser.eval(fastForwardTo, 5 * 60 * 1000)
|
|
clearRequests()
|
|
|
|
await browser.elementByCss('[href="/"]').click()
|
|
|
|
await check(() => {
|
|
return getRequests().some(
|
|
([url, didPartialPrefetch]) =>
|
|
getPathname(url) === '/0' && !didPartialPrefetch
|
|
)
|
|
? 'success'
|
|
: 'fail'
|
|
}, 'success')
|
|
|
|
const number = await browser
|
|
.elementByCss('[href="/0?timeout=0"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
.text()
|
|
|
|
expect(number).not.toBe(randomNumber)
|
|
})
|
|
})
|
|
describe('prefetch={false}', () => {
|
|
let browser: Playwright
|
|
|
|
beforeEach(async () => {
|
|
browser = await next.browser('/', browserConfigWithFixedTime)
|
|
})
|
|
it('should not prefetch the page at all', async () => {
|
|
const { getRequests } = await createRequestsListener(browser)
|
|
|
|
await browser
|
|
.elementByCss('[href="/2"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
|
|
expect(
|
|
getRequests().filter(([url]) => getPathname(url) === '/2')
|
|
).toHaveLength(1)
|
|
|
|
expect(
|
|
getRequests().some(
|
|
([url, didPartialPrefetch]) =>
|
|
getPathname(url) === '/2' && didPartialPrefetch
|
|
)
|
|
).toBe(false)
|
|
})
|
|
it('should not re-use the page segment cache', async () => {
|
|
const randomNumber = await browser
|
|
.elementByCss('[href="/2"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
.text()
|
|
|
|
await browser.elementByCss('[href="/"]').click()
|
|
|
|
const number = await browser
|
|
.elementByCss('[href="/2"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
.text()
|
|
|
|
expect(number).not.toBe(randomNumber)
|
|
|
|
await browser.eval(fastForwardTo, 30 * 1000)
|
|
|
|
await browser.elementByCss('[href="/"]').click()
|
|
|
|
const newNumber = await browser
|
|
.elementByCss('[href="/2"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
.text()
|
|
|
|
expect(newNumber).not.toBe(randomNumber)
|
|
})
|
|
})
|
|
describe('prefetch={undefined} - default', () => {
|
|
let browser: Playwright
|
|
|
|
beforeEach(async () => {
|
|
browser = await next.browser('/', browserConfigWithFixedTime)
|
|
})
|
|
|
|
it('should prefetch partially a dynamic page', async () => {
|
|
const { getRequests, clearRequests } =
|
|
await createRequestsListener(browser)
|
|
|
|
await check(() => {
|
|
return getRequests().some(
|
|
([url, didPartialPrefetch]) =>
|
|
getPathname(url) === '/1' && didPartialPrefetch
|
|
)
|
|
? 'success'
|
|
: 'fail'
|
|
}, 'success')
|
|
|
|
clearRequests()
|
|
|
|
await browser
|
|
.elementByCss('[href="/1"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
|
|
expect(
|
|
getRequests().some(
|
|
([url, didPartialPrefetch]) =>
|
|
getPathname(url) === '/1' && !didPartialPrefetch
|
|
)
|
|
).toBe(true)
|
|
})
|
|
it('should not re-use the page segment cache', async () => {
|
|
const randomNumber = await browser
|
|
.elementByCss('[href="/1"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
.text()
|
|
|
|
await browser.elementByCss('[href="/"]').click()
|
|
|
|
const number = await browser
|
|
.elementByCss('[href="/1"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
.text()
|
|
|
|
expect(number).not.toBe(randomNumber)
|
|
|
|
await browser.eval(fastForwardTo, 5 * 1000)
|
|
|
|
await browser.elementByCss('[href="/"]').click()
|
|
|
|
const newNumber = await browser
|
|
.elementByCss('[href="/1"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
.text()
|
|
|
|
expect(newNumber).not.toBe(randomNumber)
|
|
|
|
await browser.eval(fastForwardTo, 30 * 1000)
|
|
|
|
await browser.elementByCss('[href="/"]').click()
|
|
|
|
const newNumber2 = await browser
|
|
.elementByCss('[href="/1"]')
|
|
.click()
|
|
.waitForElementByCss('#random-number')
|
|
.text()
|
|
|
|
expect(newNumber2).not.toBe(newNumber)
|
|
})
|
|
|
|
it('should refetch the full page after 5 mins', async () => {
|
|
// Wait for initial prefetch to complete before clicking
|
|
await browser.waitForIdleNetwork()
|
|
|
|
const randomLoadingNumber = await browser
|
|
.elementByCss('[href="/1?timeout=1000"]')
|
|
.click()
|
|
.waitForElementByCss('#loading')
|
|
.text()
|
|
|
|
const randomNumber = await browser
|
|
.waitForElementByCss('#random-number')
|
|
.text()
|
|
|
|
await browser.eval(fastForwardTo, 5 * 60 * 1000)
|
|
|
|
await browser
|
|
.elementByCss('[href="/"]')
|
|
.click()
|
|
.waitForElementByCss('[href="/1?timeout=1000"]')
|
|
|
|
// Wait for prefetch requests to complete before clicking, otherwise
|
|
// clicking during an in-flight prefetch aborts it and skips loading state
|
|
await browser.waitForIdleNetwork()
|
|
|
|
const newLoadingNumber = await browser
|
|
.elementByCss('[href="/1?timeout=1000"]')
|
|
.click()
|
|
.waitForElementByCss('#loading')
|
|
.text()
|
|
|
|
const newNumber = await browser
|
|
.waitForElementByCss('#random-number')
|
|
.text()
|
|
|
|
expect(newLoadingNumber).not.toBe(randomLoadingNumber)
|
|
|
|
expect(newNumber).not.toBe(randomNumber)
|
|
})
|
|
|
|
it('should respect a loading boundary that returns `null`', async () => {
|
|
await browser.elementByCss('[href="/null-loading"]').click()
|
|
|
|
// the page content should disappear immediately
|
|
await retry(async () => {
|
|
expect(
|
|
await browser.hasElementByCssSelector('[href="/null-loading"]')
|
|
).toBe(false)
|
|
})
|
|
|
|
// the root layout should still be visible
|
|
expect(await browser.hasElementByCssSelector('#root-layout')).toBe(true)
|
|
|
|
// the dynamic content should eventually appear
|
|
await browser.waitForElementByCss('#random-number')
|
|
expect(await browser.hasElementByCssSelector('#random-number')).toBe(
|
|
true
|
|
)
|
|
})
|
|
})
|
|
|
|
it('should renew the initial seeded data after expiration time', async () => {
|
|
const browser = await next.browser(
|
|
'/without-loading/1',
|
|
browserConfigWithFixedTime
|
|
)
|
|
|
|
const initialNumber = await browser.elementById('random-number').text()
|
|
|
|
// Expire the cache
|
|
await browser.eval(fastForwardTo, 30 * 1000)
|
|
await browser.elementByCss('[href="/without-loading"]').click()
|
|
await browser.elementByCss('[href="/without-loading/1"]').click()
|
|
|
|
const newNumber = await browser.elementById('random-number').text()
|
|
|
|
// The number should be different, as the seeded data has expired after 30s
|
|
expect(newNumber).not.toBe(initialNumber)
|
|
})
|
|
}
|
|
})
|