Skip to content

Commit 851a9a7

Browse files
ztannerztanner
committed
[tests]: de-flake client-cache.parallel-routes.test.ts
1 parent dd5e3ad commit 851a9a7

File tree

4 files changed

+130
-64
lines changed

4 files changed

+130
-64
lines changed

‎test/e2e/app-dir/app-client-cache/client-cache.parallel-routes.test.ts‎

Lines changed: 97 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
import { nextTestSetup } from 'e2e-utils'
2-
import { check } from 'next-test-utils'
3-
import { Playwright } from 'next-webdriver'
4-
import {
5-
browserConfigWithFixedTime,
6-
createRequestsListener,
7-
fastForwardTo,
8-
getPathname,
9-
} from './test-utils'
2+
import { createRouterAct } from 'router-act'
3+
import { browserConfigWithFixedTime, fastForwardTo } from './test-utils'
104
import path from 'path'
115

126
describe('app dir client cache with parallel routes', () => {
@@ -21,64 +15,113 @@ describe('app dir client cache with parallel routes', () => {
2115
}
2216

2317
describe('prefetch={true}', () => {
24-
let browser: Playwright
25-
26-
beforeEach(async () => {
27-
browser = await next.browser('/', browserConfigWithFixedTime)
28-
})
29-
3018
it('should prefetch the full page', async () => {
31-
const { getRequests, clearRequests } =
32-
await createRequestsListener(browser)
33-
await check(() => {
34-
return getRequests().some(
35-
([url, didPartialPrefetch]) =>
36-
getPathname(url) === '/0' && !didPartialPrefetch
37-
)
38-
? 'success'
39-
: 'fail'
40-
}, 'success')
41-
42-
clearRequests()
43-
44-
await browser
45-
.elementByCss('[href="/0"]')
46-
.click()
47-
.waitForElementByCss('#random-number')
48-
49-
expect(getRequests().every(([url]) => getPathname(url) !== '/0')).toEqual(
50-
true
19+
let act: ReturnType<typeof createRouterAct>
20+
const browser = await next.browser('/', {
21+
beforePageLoad(page) {
22+
browserConfigWithFixedTime.beforePageLoad(page)
23+
act = createRouterAct(page)
24+
},
25+
})
26+
27+
// Reveal the link to trigger prefetch and wait for it to complete
28+
const link = await act(
29+
async () => {
30+
const reveal = await browser.elementByCss(
31+
'[data-link-accordion="/0"]'
32+
)
33+
await reveal.click()
34+
return await browser.elementByCss('[href="/0"]')
35+
},
36+
{ includes: 'random-number' }
5137
)
38+
39+
// Navigate to /0 - should not make additional requests
40+
await act(async () => {
41+
await link.click()
42+
await browser.waitForElementByCss('#random-number')
43+
}, 'no-requests')
5244
})
5345

5446
it('should re-use the cache for the full page, only for 5 mins', async () => {
55-
const randomNumber = await browser
56-
.elementByCss('[href="/0"]')
57-
.click()
58-
.waitForElementByCss('#random-number')
59-
.text()
47+
let act: ReturnType<typeof createRouterAct>
48+
const browser = await next.browser('/', {
49+
beforePageLoad(page) {
50+
browserConfigWithFixedTime.beforePageLoad(page)
51+
act = createRouterAct(page)
52+
},
53+
})
54+
55+
// Toggle the link, assert on the prefetch content
56+
const link = await act(
57+
async () => {
58+
const reveal = await browser.elementByCss(
59+
'[data-link-accordion="/0"]'
60+
)
61+
await reveal.click()
62+
return await browser.elementByCss('[href="/0"]')
63+
},
64+
{ includes: 'random-number' }
65+
)
6066

61-
await browser.elementByCss('[href="/"]').click()
67+
// Navigate to the page, assert no requests are made
68+
const randomNumber = await act(async () => {
69+
await link.click()
70+
await browser.waitForElementByCss('#random-number')
71+
return await browser.elementByCss('#random-number').text()
72+
}, 'no-requests')
73+
74+
// Toggle the home link, assert on the homepage content
75+
const homeLink = await act(
76+
async () => {
77+
const reveal = await browser.elementByCss('[data-link-accordion="/"]')
78+
await reveal.click()
79+
return await browser.elementByCss('[href="/"]')
80+
},
81+
{ includes: 'home-page' }
82+
)
6283

63-
const number = await browser
64-
.elementByCss('[href="/0"]')
65-
.click()
66-
.waitForElementByCss('#random-number')
67-
.text()
84+
// Navigate home, assert no requests are made
85+
await act(async () => {
86+
await homeLink.click()
87+
await browser.waitForElementByCss('#home-page')
88+
}, 'no-requests')
89+
90+
// Toggle the link to the other page again, navigate, assert no requests (because it's cached)
91+
const number = await act(async () => {
92+
const reveal = await browser.elementByCss('[data-link-accordion="/0"]')
93+
await reveal.click()
94+
const link = await browser.elementByCss('[href="/0"]')
95+
await link.click()
96+
await browser.waitForElementByCss('#random-number')
97+
return await browser.elementByCss('#random-number').text()
98+
}, 'no-requests')
6899

69100
expect(number).toBe(randomNumber)
70101

71-
await browser.eval(fastForwardTo, 5 * 60 * 1000)
72-
73-
await browser.elementByCss('[href="/"]').click()
102+
// Navigate back home
103+
await act(async () => {
104+
const reveal = await browser.elementByCss('[data-link-accordion="/"]')
105+
await reveal.click()
106+
const homeLink = await browser.elementByCss('[href="/"]')
107+
await homeLink.click()
108+
await browser.waitForElementByCss('#home-page')
109+
}, 'no-requests')
74110

75-
const newNumber = await browser
76-
.elementByCss('[href="/0"]')
77-
.click()
78-
.waitForElementByCss('#random-number')
79-
.text()
111+
// Fast forward 5 minutes
112+
await browser.eval(fastForwardTo, 5 * 60 * 1000)
80113

81-
expect(newNumber).not.toBe(randomNumber)
114+
// Toggle the link to the other page again, assert on prefetch content
115+
await act(
116+
async () => {
117+
const reveal = await browser.elementByCss(
118+
'[data-link-accordion="/0"]'
119+
)
120+
await reveal.click()
121+
await browser.elementByCss('[href="/0"]')
122+
},
123+
{ includes: 'random-number' }
124+
)
82125
})
83126
})
84127
})

‎test/e2e/app-dir/app-client-cache/fixtures/parallel-routes/app/[id]/page.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Link from 'next/link'
1+
import { LinkAccordion } from '../components/link-accordion'
22

33
export default async function Page() {
44
const randomNumber = await new Promise((resolve) => {
@@ -8,11 +8,9 @@ export default async function Page() {
88
})
99

1010
return (
11-
<>
12-
<div>
13-
<Link href="/">Back to Home</Link>
14-
</div>
11+
<div id="dynamic-page">
12+
<LinkAccordion href="/">Back to Home</LinkAccordion>
1513
<div id="random-number">{randomNumber}</div>
16-
</>
14+
</div>
1715
)
1816
}

‎test/e2e/app-dir/app-client-cache/fixtures/parallel-routes/app/components/link-accordion.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
'use client'
2+
3+
import Link from 'next/link'
4+
import { useState } from 'react'
5+
6+
export function LinkAccordion({ href, children, prefetch = undefined }) {
7+
const [isVisible, setIsVisible] = useState(false)
8+
return (
9+
<>
10+
<input
11+
type="checkbox"
12+
checked={isVisible}
13+
onChange={() => setIsVisible(!isVisible)}
14+
data-link-accordion={href}
15+
/>
16+
{isVisible ? (
17+
<Link href={href} prefetch={prefetch}>
18+
{children}
19+
</Link>
20+
) : (
21+
<>{children} (link is hidden)</>
22+
)}
23+
</>
24+
)
25+
}

‎test/e2e/app-dir/app-client-cache/fixtures/parallel-routes/app/page.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import Link from 'next/link'
1+
import { LinkAccordion } from './components/link-accordion'
22

33
export default function Page() {
44
return (
5-
<div>
6-
<Link href="/0" prefetch={true}>
5+
<div id="home-page">
6+
<LinkAccordion href="/0" prefetch={true}>
77
To Dynamic Page
8-
</Link>
8+
</LinkAccordion>
99
</div>
1010
)
1111
}

0 commit comments

Comments
 (0)