Skip to content

Commit

Permalink
Add additional tests for prefetch and trailingSlash
Browse files Browse the repository at this point in the history
  • Loading branch information
timneutkens committed Sep 13, 2022
1 parent d0903a5 commit c3e7c62
Show file tree
Hide file tree
Showing 12 changed files with 176 additions and 27 deletions.
4 changes: 2 additions & 2 deletions test/e2e/app-dir/app-prefetch/app/dashboard/layout.server.js
@@ -1,5 +1,5 @@
export async function getServerSideProps() {
await new Promise((resolve) => setTimeout(resolve, 2000))
await new Promise((resolve) => setTimeout(resolve, 400))
return {
props: {
message: 'Hello World',
Expand All @@ -9,7 +9,7 @@ export async function getServerSideProps() {
export default function DashboardLayout({ children, message }) {
return (
<>
<h1>Dashboard {message}</h1>
<h1 id="dashboard-layout">Dashboard {message}</h1>
{children}
</>
)
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/app-dir/app-prefetch/app/dashboard/page.server.js
Expand Up @@ -9,7 +9,7 @@ export async function getServerSideProps() {
export default function DashboardPage({ message }) {
return (
<>
<p>{message}</p>
<p id="dashboard-page">{message}</p>
</>
)
}
4 changes: 3 additions & 1 deletion test/e2e/app-dir/app-prefetch/app/page.server.js
Expand Up @@ -2,7 +2,9 @@ import Link from 'next/link'
export default function HomePage() {
return (
<>
<Link href="/dashboard">To Dashboard</Link>
<Link href="/dashboard">
<a id="to-dashboard">To Dashboard</a>
</Link>
</>
)
}
10 changes: 1 addition & 9 deletions test/e2e/app-dir/index.test.ts
Expand Up @@ -23,15 +23,7 @@ describe('app dir', () => {
function runTests({ assetPrefix }: { assetPrefix?: boolean }) {
beforeAll(async () => {
next = await createNext({
files: {
public: new FileRef(path.join(__dirname, 'app/public')),
styles: new FileRef(path.join(__dirname, 'app/styles')),
pages: new FileRef(path.join(__dirname, 'app/pages')),
app: new FileRef(path.join(__dirname, 'app/app')),
'next.config.js': new FileRef(
path.join(__dirname, 'app/next.config.js')
),
},
files: new FileRef(path.join(__dirname, 'app')),
dependencies: {
react: 'experimental',
'react-dom': 'experimental',
Expand Down
61 changes: 61 additions & 0 deletions test/e2e/app-dir/prefetching.test.ts
@@ -0,0 +1,61 @@
import { createNext, FileRef } from 'e2e-utils'
import crypto from 'crypto'
import { NextInstance } from 'test/lib/next-modes/base'
import { check, fetchViaHTTP, renderViaHTTP, waitFor } from 'next-test-utils'
import path from 'path'
import cheerio from 'cheerio'
import webdriver from 'next-webdriver'

describe('app dir prefetching', () => {
const isDev = (global as any).isNextDev

if ((global as any).isNextDeploy) {
it('should skip next deploy for now', () => {})
return
}

if (process.env.NEXT_TEST_REACT_VERSION === '^17') {
it('should skip for react v17', () => {})
return
}
let next: NextInstance

beforeAll(async () => {
next = await createNext({
files: new FileRef(path.join(__dirname, 'app-prefetch')),
dependencies: {
react: 'experimental',
'react-dom': 'experimental',
},
skipStart: true,
})
await next.start()
})
afterAll(() => next.destroy())

it('should show layout eagerly when prefetched with loading one level down', async () => {
const browser = await webdriver(next.url, '/')
// Ensure the page is prefetched
await waitFor(1000)

const before = Date.now()
await browser
.elementByCss('#to-dashboard')
.click()
.waitForElementByCss('#dashboard-layout')
const after = Date.now()
const timeToComplete = after - before

expect(timeToComplete < 1000).toBe(true)

expect(await browser.elementByCss('#dashboard-layout').text()).toBe(
'Dashboard Hello World'
)

await browser.waitForElementByCss('#dashboard-page')

expect(await browser.waitForElementByCss('#dashboard-page').text()).toBe(
'Welcome to the dashboard'
)
})
})
7 changes: 1 addition & 6 deletions test/e2e/app-dir/rendering.test.ts
Expand Up @@ -20,12 +20,7 @@ describe('app dir rendering', () => {

beforeAll(async () => {
next = await createNext({
files: {
app: new FileRef(path.join(__dirname, 'app-rendering/app')),
'next.config.js': new FileRef(
path.join(__dirname, 'app-rendering/next.config.js')
),
},
files: new FileRef(path.join(__dirname, 'app-rendering')),
dependencies: {
react: 'experimental',
'react-dom': 'experimental',
Expand Down
9 changes: 1 addition & 8 deletions test/e2e/app-dir/rsc-basic.test.ts
Expand Up @@ -35,15 +35,8 @@ describe('app dir - react server components', () => {
}

beforeAll(async () => {
const appDir = path.join(__dirname, './rsc-basic')
next = await createNext({
files: {
node_modules_bak: new FileRef(path.join(appDir, 'node_modules_bak')),
public: new FileRef(path.join(appDir, 'public')),
components: new FileRef(path.join(appDir, 'components')),
app: new FileRef(path.join(appDir, 'app')),
'next.config.js': new FileRef(path.join(appDir, 'next.config.js')),
},
files: new FileRef(path.join(__dirname, './rsc-basic')),
dependencies: {
'styled-components': '6.0.0-alpha.5',
react: 'experimental',
Expand Down
66 changes: 66 additions & 0 deletions test/e2e/app-dir/trailingslash.test.ts
@@ -0,0 +1,66 @@
import { createNext, FileRef } from 'e2e-utils'
import { NextInstance } from 'test/lib/next-modes/base'
import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
import path from 'path'
import cheerio from 'cheerio'
import webdriver from 'next-webdriver'

describe('app-dir trailingSlash handling', () => {
if ((global as any).isNextDeploy) {
it('should skip next deploy for now', () => {})
return
}

if (process.env.NEXT_TEST_REACT_VERSION === '^17') {
it('should skip for react v17', () => {})
return
}
let next: NextInstance

beforeAll(async () => {
next = await createNext({
files: new FileRef(path.join(__dirname, 'trailingslash')),
dependencies: {
react: 'experimental',
'react-dom': 'experimental',
},
skipStart: true,
})

await next.start()
})
afterAll(() => next.destroy())

it('should redirect route when requesting it directly', async () => {
const res = await fetchViaHTTP(
next.url,
'/a',
{},
{
redirect: 'manual',
}
)
expect(res.status).toBe(308)
expect(res.headers.get('location')).toBe(next.url + '/a/')
})

it('should render link with trailing slash', async () => {
const html = await renderViaHTTP(next.url, '/')
const $ = cheerio.load(html)
expect($('#to-a-trailing-slash').attr('href')).toBe('/a/')
})

it('should redirect route when requesting it directly by browser', async () => {
const browser = await webdriver(next.url, '/a')
expect(await browser.waitForElementByCss('#a-page').text()).toBe('A page')
})

it('should redirect route when clicking link', async () => {
const browser = await webdriver(next.url, '/')
await browser
.elementByCss('#to-a-trailing-slash')
.click()
.waitForElementByCss('#a-page')
expect(await browser.waitForElementByCss('#a-page').text()).toBe('A page')
})
})
9 changes: 9 additions & 0 deletions test/e2e/app-dir/trailingslash/app/a/page.server.js
@@ -0,0 +1,9 @@
import Link from 'next/link'
export default function HomePage() {
return (
<>
<h1 id="a-page">A page</h1>
<Link href="/">To home</Link>
</>
)
}
10 changes: 10 additions & 0 deletions test/e2e/app-dir/trailingslash/app/layout.server.js
@@ -0,0 +1,10 @@
export default function Root({ children }) {
return (
<html>
<head>
<title>Hello</title>
</head>
<body>{children}</body>
</html>
)
}
12 changes: 12 additions & 0 deletions test/e2e/app-dir/trailingslash/app/page.server.js
@@ -0,0 +1,12 @@
import Link from 'next/link'
export default function HomePage() {
return (
<>
<p>
<Link href="/a/">
<a id="to-a-trailing-slash">To a with trailing slash</a>
</Link>
</p>
</>
)
}
9 changes: 9 additions & 0 deletions test/e2e/app-dir/trailingslash/next.config.js
@@ -0,0 +1,9 @@
module.exports = {
experimental: {
appDir: true,
serverComponents: true,
legacyBrowsers: false,
browsersListForSwc: true,
},
trailingSlash: true,
}

0 comments on commit c3e7c62

Please sign in to comment.