Skip to content

Commit aff9c8a

Browse files
piehpieh
committed
test: expand middleware + json data e2e tests
1 parent 1f8ae92 commit aff9c8a

9 files changed

+244
-14
lines changed

‎tests/e2e/edge-middleware.test.ts

Lines changed: 81 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import { nextVersionSatisfies } from '../utils/next-version-helpers.mjs'
33
import { test } from '../utils/playwright-helpers.js'
44
import { getImageSize } from 'next/dist/server/image-optimizer.js'
55

6+
type ExtendedWindow = Window & {
7+
didReload?: boolean
8+
}
9+
610
test('Runs edge middleware', async ({ page, middleware }) => {
711
await page.goto(`${middleware.url}/test/redirect`)
812

@@ -53,21 +57,84 @@ test('it should render OpenGraph image meta tag correctly', async ({ page, middl
5357
expect([size.width, size.height]).toEqual([1200, 630])
5458
})
5559

56-
test('json data rewrite works', async ({ middlewarePages }) => {
57-
const response = await fetch(`${middlewarePages.url}/_next/data/build-id/sha.json`, {
58-
headers: {
59-
'x-nextjs-data': '1',
60-
},
60+
test.describe('json data', () => {
61+
test.describe('no 18n', () => {
62+
for (const config of [
63+
{
64+
describeLabel: 'NextResponse.next() -> getServerSideProps page',
65+
selector: 'NextResponse.next()#getServerSideProps',
66+
jsonPathMatcher: '/link/next-getserversideprops.json',
67+
},
68+
{
69+
describeLabel: 'NextResponse.next() -> getStaticProps page',
70+
selector: 'NextResponse.next()#getStaticProps',
71+
jsonPathMatcher: '/link/next-getstaticprops.json',
72+
},
73+
{
74+
describeLabel: 'NextResponse.next() -> fully static page',
75+
selector: 'NextResponse.next()#fullyStatic',
76+
jsonPathMatcher: '/link/next-fullystatic.json',
77+
},
78+
{
79+
describeLabel: 'NextResponse.rewrite() -> getServerSideProps page',
80+
selector: 'NextResponse.rewrite()#getServerSideProps',
81+
jsonPathMatcher: '/link/rewrite-me-getserversideprops.json',
82+
},
83+
{
84+
describeLabel: 'NextResponse.rewrite() -> getStaticProps page',
85+
selector: 'NextResponse.rewrite()#getStaticProps',
86+
jsonPathMatcher: '/link/rewrite-me-getstaticprops.json',
87+
},
88+
{
89+
describeLabel: 'NextResponse.rewrite() -> fully static page',
90+
selector: 'NextResponse.rewrite()#fullyStatic',
91+
jsonPathMatcher: '/link/rewrite-me-fullystatic.json',
92+
},
93+
]) {
94+
test.describe(config.describeLabel, () => {
95+
test('json data fetch', async ({ middlewarePages, page }) => {
96+
const dataFetchPromise = new Promise<Response>((resolve) => {
97+
page.on('response', (response) => {
98+
if (response.url().includes(config.jsonPathMatcher)) {
99+
resolve(response)
100+
}
101+
})
102+
})
103+
104+
await page.goto(`${middlewarePages.url}/link`)
105+
106+
await page.hover(`[data-link="${config.selector}"]`)
107+
108+
const dataResponse = await dataFetchPromise
109+
110+
expect(dataResponse.ok()).toBe(true)
111+
})
112+
113+
test('navigation', async ({ middlewarePages, page }) => {
114+
await page.goto(`${middlewarePages.url}/link`)
115+
116+
await page.evaluate(() => {
117+
// set some value to window to check later if browser did reload and lost this state
118+
;(window as ExtendedWindow).didReload = false
119+
})
120+
121+
await page.click(`[data-link="${config.selector}"]`)
122+
123+
// wait for page to be rendered
124+
await page.waitForSelector(`[data-page="${config.selector}"]`)
125+
126+
// check if browser navigation worked by checking if state was preserved
127+
const browserNavigationWorked =
128+
(await page.evaluate(() => {
129+
return (window as ExtendedWindow).didReload
130+
})) === false
131+
132+
// we expect client navigation to work without browser reload
133+
expect(browserNavigationWorked).toBe(true)
134+
})
135+
})
136+
}
61137
})
62-
63-
expect(response.ok).toBe(true)
64-
const body = await response.text()
65-
66-
expect(body).toMatch(/^{"pageProps":/)
67-
68-
const data = JSON.parse(body)
69-
70-
expect(data.pageProps.message).toBeDefined()
71138
})
72139

73140
// those tests use `fetch` instead of `page.goto` intentionally to avoid potential client rendering

‎tests/fixtures/middleware-pages/middleware.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { NextResponse, URLPattern } from 'next/server'
22

3+
console.log('middleware.js loaded')
4+
35
export async function middleware(request) {
46
const url = request.nextUrl
57

@@ -8,6 +10,26 @@ export async function middleware(request) {
810
return NextResponse.next()
911
}
1012

13+
if (url.pathname.startsWith('/link/next')) {
14+
return NextResponse.next({
15+
headers: {
16+
'x-middleware-test': 'link-next',
17+
},
18+
})
19+
}
20+
21+
if (url.pathname.startsWith('/link/rewrite-me')) {
22+
const rewriteUrl = new URL(
23+
url.pathname.replace('/link/rewrite-me', '/link/rewrite-target'),
24+
url,
25+
)
26+
return NextResponse.rewrite(rewriteUrl, {
27+
headers: {
28+
'x-middleware-test': 'link-rewrite',
29+
},
30+
})
31+
}
32+
1133
if (request.headers.get('x-prerender-revalidate')) {
1234
return NextResponse.next({
1335
headers: { 'x-middleware': 'hi' },

‎tests/fixtures/middleware-pages/pages/link/index.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import Link from 'next/link'
2+
3+
export default function Page() {
4+
return (
5+
<div>
6+
<h1>Page with Links</h1>
7+
<ul>
8+
<li>
9+
NextResponse.next()
10+
<ul>
11+
<li>
12+
<Link
13+
href="/link/next-getserversideprops"
14+
data-link="NextResponse.next()#getServerSideProps"
15+
>
16+
getServerSideProps
17+
</Link>
18+
</li>
19+
20+
<li>
21+
<Link href="/link/next-getstaticprops" data-link="NextResponse.next()#getStaticProps">
22+
getStaticProps
23+
</Link>
24+
</li>
25+
26+
<li>
27+
<Link href="/link/next-fullystatic" data-link="NextResponse.next()#fullyStatic">
28+
fullyStatic
29+
</Link>
30+
</li>
31+
</ul>
32+
</li>
33+
<li>
34+
NextResponse.rewrite()
35+
<ul>
36+
<li>
37+
<Link
38+
href="/link/rewrite-me-getserversideprops"
39+
data-link="NextResponse.rewrite()#getServerSideProps"
40+
>
41+
getServerSideProps
42+
</Link>
43+
</li>
44+
45+
<li>
46+
<Link
47+
href="/link/rewrite-me-getstaticprops"
48+
data-link="NextResponse.rewrite()#getStaticProps"
49+
>
50+
getStaticProps
51+
</Link>
52+
</li>
53+
54+
<li>
55+
<Link
56+
href="/link/rewrite-me-fullystatic"
57+
data-link="NextResponse.rewrite()#fullyStatic"
58+
>
59+
fullyStatic
60+
</Link>
61+
</li>
62+
</ul>
63+
</li>
64+
</ul>
65+
</div>
66+
)
67+
}

‎tests/fixtures/middleware-pages/pages/link/next-fullystatic.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function Page() {
2+
return (
3+
<div data-page="NextResponse.next()#fullyStatic">
4+
<h1>fully static page</h1>
5+
</div>
6+
)
7+
}

‎tests/fixtures/middleware-pages/pages/link/next-getserversideprops.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export default function Page() {
2+
return (
3+
<div data-page="NextResponse.next()#getServerSideProps">
4+
<h1>
5+
<code>getServerSideProps</code> page
6+
</h1>
7+
</div>
8+
)
9+
}
10+
11+
export function getServerSideProps() {
12+
return {
13+
props: {},
14+
}
15+
}

‎tests/fixtures/middleware-pages/pages/link/next-getstaticprops.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export default function Page() {
2+
return (
3+
<div data-page="NextResponse.next()#getStaticProps">
4+
<h1>
5+
<code>getStaticProps</code> page
6+
</h1>
7+
</div>
8+
)
9+
}
10+
11+
export function getStaticProps() {
12+
return {
13+
props: {},
14+
}
15+
}

‎tests/fixtures/middleware-pages/pages/link/rewrite-target-fullystatic.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default function Page() {
2+
return (
3+
<div data-page="NextResponse.rewrite()#fullyStatic">
4+
<h1>fully static page</h1>
5+
</div>
6+
)
7+
}

‎tests/fixtures/middleware-pages/pages/link/rewrite-target-getserversideprops.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export default function Page() {
2+
return (
3+
<div data-page="NextResponse.rewrite()#getServerSideProps">
4+
<h1>
5+
<code>getServerSideProps</code> page
6+
</h1>
7+
</div>
8+
)
9+
}
10+
11+
export function getServerSideProps() {
12+
return {
13+
props: {},
14+
}
15+
}

‎tests/fixtures/middleware-pages/pages/link/rewrite-target-getstaticprops.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export default function Page() {
2+
return (
3+
<div data-page="NextResponse.rewrite()#getStaticProps">
4+
<h1>
5+
<code>getStaticProps</code> page
6+
</h1>
7+
</div>
8+
)
9+
}
10+
11+
export function getStaticProps() {
12+
return {
13+
props: {},
14+
}
15+
}

0 commit comments

Comments
 (0)