Skip to content

Commit eadaca7

Browse files
authored
Add additional tests for prefetch and trailingSlash (vercel#40517)
Adds some of the tests we didn't have yet for app. <!-- Thanks for opening a PR! Your contribution is much appreciated. In order to make sure your PR is handled as smoothly as possible we request that you follow the checklist sections below. Choose the right checklist for the change that you're making: --> ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
1 parent 69d0e60 commit eadaca7

12 files changed

+172
-27
lines changed

test/e2e/app-dir/app-prefetch/app/dashboard/layout.server.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export async function getServerSideProps() {
2-
await new Promise((resolve) => setTimeout(resolve, 2000))
2+
await new Promise((resolve) => setTimeout(resolve, 400))
33
return {
44
props: {
55
message: 'Hello World',
@@ -9,7 +9,7 @@ export async function getServerSideProps() {
99
export default function DashboardLayout({ children, message }) {
1010
return (
1111
<>
12-
<h1>Dashboard {message}</h1>
12+
<h1 id="dashboard-layout">Dashboard {message}</h1>
1313
{children}
1414
</>
1515
)

test/e2e/app-dir/app-prefetch/app/dashboard/page.server.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export async function getServerSideProps() {
99
export default function DashboardPage({ message }) {
1010
return (
1111
<>
12-
<p>{message}</p>
12+
<p id="dashboard-page">{message}</p>
1313
</>
1414
)
1515
}

test/e2e/app-dir/app-prefetch/app/page.server.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import Link from 'next/link'
22
export default function HomePage() {
33
return (
44
<>
5-
<Link href="/dashboard">To Dashboard</Link>
5+
<Link href="/dashboard">
6+
<a id="to-dashboard">To Dashboard</a>
7+
</Link>
68
</>
79
)
810
}

test/e2e/app-dir/index.test.ts

+1-9
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,7 @@ describe('app dir', () => {
2323
function runTests({ assetPrefix }: { assetPrefix?: boolean }) {
2424
beforeAll(async () => {
2525
next = await createNext({
26-
files: {
27-
public: new FileRef(path.join(__dirname, 'app/public')),
28-
styles: new FileRef(path.join(__dirname, 'app/styles')),
29-
pages: new FileRef(path.join(__dirname, 'app/pages')),
30-
app: new FileRef(path.join(__dirname, 'app/app')),
31-
'next.config.js': new FileRef(
32-
path.join(__dirname, 'app/next.config.js')
33-
),
34-
},
26+
files: new FileRef(path.join(__dirname, 'app')),
3527
dependencies: {
3628
react: 'experimental',
3729
'react-dom': 'experimental',

test/e2e/app-dir/prefetching.test.ts

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { createNext, FileRef } from 'e2e-utils'
2+
import { NextInstance } from 'test/lib/next-modes/base'
3+
import { waitFor } from 'next-test-utils'
4+
import path from 'path'
5+
import webdriver from 'next-webdriver'
6+
7+
describe('app dir prefetching', () => {
8+
if ((global as any).isNextDeploy) {
9+
it('should skip next deploy for now', () => {})
10+
return
11+
}
12+
13+
if (process.env.NEXT_TEST_REACT_VERSION === '^17') {
14+
it('should skip for react v17', () => {})
15+
return
16+
}
17+
let next: NextInstance
18+
19+
beforeAll(async () => {
20+
next = await createNext({
21+
files: new FileRef(path.join(__dirname, 'app-prefetch')),
22+
dependencies: {
23+
react: 'experimental',
24+
'react-dom': 'experimental',
25+
},
26+
skipStart: true,
27+
})
28+
await next.start()
29+
})
30+
afterAll(() => next.destroy())
31+
32+
it('should show layout eagerly when prefetched with loading one level down', async () => {
33+
const browser = await webdriver(next.url, '/')
34+
// Ensure the page is prefetched
35+
await waitFor(1000)
36+
37+
const before = Date.now()
38+
await browser
39+
.elementByCss('#to-dashboard')
40+
.click()
41+
.waitForElementByCss('#dashboard-layout')
42+
const after = Date.now()
43+
const timeToComplete = after - before
44+
45+
expect(timeToComplete < 1000).toBe(true)
46+
47+
expect(await browser.elementByCss('#dashboard-layout').text()).toBe(
48+
'Dashboard Hello World'
49+
)
50+
51+
await browser.waitForElementByCss('#dashboard-page')
52+
53+
expect(await browser.waitForElementByCss('#dashboard-page').text()).toBe(
54+
'Welcome to the dashboard'
55+
)
56+
})
57+
})

test/e2e/app-dir/rendering.test.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,7 @@ describe('app dir rendering', () => {
2020

2121
beforeAll(async () => {
2222
next = await createNext({
23-
files: {
24-
app: new FileRef(path.join(__dirname, 'app-rendering/app')),
25-
'next.config.js': new FileRef(
26-
path.join(__dirname, 'app-rendering/next.config.js')
27-
),
28-
},
23+
files: new FileRef(path.join(__dirname, 'app-rendering')),
2924
dependencies: {
3025
react: 'experimental',
3126
'react-dom': 'experimental',

test/e2e/app-dir/rsc-basic.test.ts

+1-8
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,8 @@ describe('app dir - react server components', () => {
3535
}
3636

3737
beforeAll(async () => {
38-
const appDir = path.join(__dirname, './rsc-basic')
3938
next = await createNext({
40-
files: {
41-
node_modules_bak: new FileRef(path.join(appDir, 'node_modules_bak')),
42-
public: new FileRef(path.join(appDir, 'public')),
43-
components: new FileRef(path.join(appDir, 'components')),
44-
app: new FileRef(path.join(appDir, 'app')),
45-
'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
46-
},
39+
files: new FileRef(path.join(__dirname, './rsc-basic')),
4740
dependencies: {
4841
'styled-components': '6.0.0-alpha.5',
4942
react: 'experimental',
+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { createNext, FileRef } from 'e2e-utils'
2+
import { NextInstance } from 'test/lib/next-modes/base'
3+
import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
4+
import path from 'path'
5+
import cheerio from 'cheerio'
6+
import webdriver from 'next-webdriver'
7+
8+
describe('app-dir trailingSlash handling', () => {
9+
if ((global as any).isNextDeploy) {
10+
it('should skip next deploy for now', () => {})
11+
return
12+
}
13+
14+
if (process.env.NEXT_TEST_REACT_VERSION === '^17') {
15+
it('should skip for react v17', () => {})
16+
return
17+
}
18+
let next: NextInstance
19+
20+
beforeAll(async () => {
21+
next = await createNext({
22+
files: new FileRef(path.join(__dirname, 'trailingslash')),
23+
dependencies: {
24+
react: 'experimental',
25+
'react-dom': 'experimental',
26+
},
27+
skipStart: true,
28+
})
29+
30+
await next.start()
31+
})
32+
afterAll(() => next.destroy())
33+
34+
it('should redirect route when requesting it directly', async () => {
35+
const res = await fetchViaHTTP(
36+
next.url,
37+
'/a',
38+
{},
39+
{
40+
redirect: 'manual',
41+
}
42+
)
43+
expect(res.status).toBe(308)
44+
expect(res.headers.get('location')).toBe(next.url + '/a/')
45+
})
46+
47+
it('should render link with trailing slash', async () => {
48+
const html = await renderViaHTTP(next.url, '/')
49+
const $ = cheerio.load(html)
50+
expect($('#to-a-trailing-slash').attr('href')).toBe('/a/')
51+
})
52+
53+
it('should redirect route when requesting it directly by browser', async () => {
54+
const browser = await webdriver(next.url, '/a')
55+
expect(await browser.waitForElementByCss('#a-page').text()).toBe('A page')
56+
})
57+
58+
it('should redirect route when clicking link', async () => {
59+
const browser = await webdriver(next.url, '/')
60+
await browser
61+
.elementByCss('#to-a-trailing-slash')
62+
.click()
63+
.waitForElementByCss('#a-page')
64+
expect(await browser.waitForElementByCss('#a-page').text()).toBe('A page')
65+
})
66+
})
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Link from 'next/link'
2+
export default function HomePage() {
3+
return (
4+
<>
5+
<h1 id="a-page">A page</h1>
6+
<Link href="/">To home</Link>
7+
</>
8+
)
9+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export default function Root({ children }) {
2+
return (
3+
<html>
4+
<head>
5+
<title>Hello</title>
6+
</head>
7+
<body>{children}</body>
8+
</html>
9+
)
10+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Link from 'next/link'
2+
export default function HomePage() {
3+
return (
4+
<>
5+
<p>
6+
<Link href="/a/">
7+
<a id="to-a-trailing-slash">To a with trailing slash</a>
8+
</Link>
9+
</p>
10+
</>
11+
)
12+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
module.exports = {
2+
experimental: {
3+
appDir: true,
4+
serverComponents: true,
5+
legacyBrowsers: false,
6+
browsersListForSwc: true,
7+
},
8+
trailingSlash: true,
9+
}

0 commit comments

Comments
 (0)