Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Skip create-root-layout for Turbopack #61191

Merged
merged 1 commit into from
Jan 26, 2024
Merged

Skip create-root-layout for Turbopack #61191

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
306 changes: 155 additions & 151 deletions test/e2e/app-dir/create-root-layout/create-root-layout.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,49 +3,102 @@ import { createNext, FileRef } from 'e2e-utils'
import { NextInstance } from 'test/lib/next-modes/base'
import { check } from 'next-test-utils'
import stripAnsi from 'strip-ansi'
;(process.env.TURBOPACK ? describe.skip : describe)(
'app-dir create root layout',
() => {
const isDev = (global as any).isNextDev

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

let next: NextInstance

if (isDev) {
describe('page.js', () => {
describe('root layout in app', () => {
beforeAll(async () => {
next = await createNext({
files: {
app: new FileRef(path.join(__dirname, 'app')),
'next.config.js': new FileRef(
path.join(__dirname, 'next.config.js')
),
},
})
})
afterAll(() => next.destroy())

describe('app-dir create root layout', () => {
const isDev = (global as any).isNextDev
it('create root layout', async () => {
const outputIndex = next.cliOutput.length
const browser = await next.browser('/route')

if ((global as any).isNextDeploy) {
it('should skip next deploy for now', () => {})
return
}
expect(await browser.elementById('page-text').text()).toBe(
'Hello world!'
)

let next: NextInstance
await check(
() => stripAnsi(next.cliOutput.slice(outputIndex)),
/did not have a root layout/
)
expect(stripAnsi(next.cliOutput.slice(outputIndex))).toMatch(
'Your page app/route/page.js did not have a root layout. We created app/layout.js for you.'
)

if (isDev) {
describe('page.js', () => {
describe('root layout in app', () => {
beforeAll(async () => {
next = await createNext({
files: {
app: new FileRef(path.join(__dirname, 'app')),
'next.config.js': new FileRef(
path.join(__dirname, 'next.config.js')
),
},
expect(await next.readFile('app/layout.js')).toMatchInlineSnapshot(`
"export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}

export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
"
`)
})
})
afterAll(() => next.destroy())

it('create root layout', async () => {
const outputIndex = next.cliOutput.length
const browser = await next.browser('/route')
describe('root layout in route group', () => {
beforeAll(async () => {
next = await createNext({
files: {
app: new FileRef(path.join(__dirname, 'app-group-layout')),
'next.config.js': new FileRef(
path.join(__dirname, 'next.config.js')
),
},
dependencies: {
react: 'latest',
'react-dom': 'latest',
},
})
})
afterAll(() => next.destroy())

expect(await browser.elementById('page-text').text()).toBe(
'Hello world!'
)
it('create root layout', async () => {
const outputIndex = next.cliOutput.length
const browser = await next.browser('/')

await check(
() => stripAnsi(next.cliOutput.slice(outputIndex)),
/did not have a root layout/
)
expect(stripAnsi(next.cliOutput.slice(outputIndex))).toMatch(
'Your page app/route/page.js did not have a root layout. We created app/layout.js for you.'
)
expect(await browser.elementById('page-text').text()).toBe(
'Hello world'
)

expect(await next.readFile('app/layout.js')).toMatchInlineSnapshot(`
await check(
() => stripAnsi(next.cliOutput.slice(outputIndex)),
/did not have a root layout/
)
expect(stripAnsi(next.cliOutput.slice(outputIndex))).toInclude(
'Your page app/(group)/page.js did not have a root layout. We created app/(group)/layout.js for you.'
)

expect(await next.readFile('app/(group)/layout.js'))
.toMatchInlineSnapshot(`
"export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
Expand All @@ -60,44 +113,46 @@ describe('app-dir create root layout', () => {
}
"
`)
})
})
})

describe('root layout in route group', () => {
beforeAll(async () => {
next = await createNext({
files: {
app: new FileRef(path.join(__dirname, 'app-group-layout')),
'next.config.js': new FileRef(
path.join(__dirname, 'next.config.js')
),
},
dependencies: {
react: 'latest',
'react-dom': 'latest',
},
describe('find available dir', () => {
beforeAll(async () => {
next = await createNext({
files: {
app: new FileRef(
path.join(__dirname, 'app-find-available-dir')
),
'next.config.js': new FileRef(
path.join(__dirname, 'next.config.js')
),
},
dependencies: {
react: 'latest',
'react-dom': 'latest',
},
})
})
})
afterAll(() => next.destroy())
afterAll(() => next.destroy())

it('create root layout', async () => {
const outputIndex = next.cliOutput.length
const browser = await next.browser('/')
it('create root layout', async () => {
const outputIndex = next.cliOutput.length
const browser = await next.browser('/route/second/inner')

expect(await browser.elementById('page-text').text()).toBe(
'Hello world'
)
expect(await browser.elementById('page-text').text()).toBe(
'Hello world'
)

await check(
() => stripAnsi(next.cliOutput.slice(outputIndex)),
/did not have a root layout/
)
expect(stripAnsi(next.cliOutput.slice(outputIndex))).toInclude(
'Your page app/(group)/page.js did not have a root layout. We created app/(group)/layout.js for you.'
)
await check(
() => stripAnsi(next.cliOutput.slice(outputIndex)),
/did not have a root layout/
)
expect(stripAnsi(next.cliOutput.slice(outputIndex))).toInclude(
'Your page app/(group)/route/second/inner/page.js did not have a root layout. We created app/(group)/route/second/layout.js for you.'
)

expect(await next.readFile('app/(group)/layout.js'))
.toMatchInlineSnapshot(`
expect(await next.readFile('app/(group)/route/second/layout.js'))
.toMatchInlineSnapshot(`
"export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
Expand All @@ -112,94 +167,42 @@ describe('app-dir create root layout', () => {
}
"
`)
})
})
})

describe('find available dir', () => {
describe('page.tsx', () => {
beforeAll(async () => {
next = await createNext({
files: {
app: new FileRef(path.join(__dirname, 'app-find-available-dir')),
'app/page.tsx': new FileRef(
path.join(__dirname, 'app/route/page.js')
),
'next.config.js': new FileRef(
path.join(__dirname, 'next.config.js')
),
},
dependencies: {
react: 'latest',
'react-dom': 'latest',
},
})
})
afterAll(() => next.destroy())

it('create root layout', async () => {
const outputIndex = next.cliOutput.length
const browser = await next.browser('/route/second/inner')
const browser = await next.browser('/')

expect(await browser.elementById('page-text').text()).toBe(
'Hello world'
'Hello world!'
)

await check(
() => stripAnsi(next.cliOutput.slice(outputIndex)),
/did not have a root layout/
)
expect(stripAnsi(next.cliOutput.slice(outputIndex))).toInclude(
'Your page app/(group)/route/second/inner/page.js did not have a root layout. We created app/(group)/route/second/layout.js for you.'
'Your page app/page.tsx did not have a root layout. We created app/layout.tsx for you.'
)

expect(await next.readFile('app/(group)/route/second/layout.js'))
.toMatchInlineSnapshot(`
"export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}

export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
"
`)
})
})
})

describe('page.tsx', () => {
beforeAll(async () => {
next = await createNext({
files: {
'app/page.tsx': new FileRef(
path.join(__dirname, 'app/route/page.js')
),
'next.config.js': new FileRef(
path.join(__dirname, 'next.config.js')
),
},
})
})
afterAll(() => next.destroy())

it('create root layout', async () => {
const outputIndex = next.cliOutput.length
const browser = await next.browser('/')

expect(await browser.elementById('page-text').text()).toBe(
'Hello world!'
)

await check(
() => stripAnsi(next.cliOutput.slice(outputIndex)),
/did not have a root layout/
)
expect(stripAnsi(next.cliOutput.slice(outputIndex))).toInclude(
'Your page app/page.tsx did not have a root layout. We created app/layout.tsx for you.'
)

expect(await next.readFile('app/layout.tsx')).toMatchInlineSnapshot(`
expect(await next.readFile('app/layout.tsx')).toMatchInlineSnapshot(`
"export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
Expand All @@ -218,33 +221,34 @@ describe('app-dir create root layout', () => {
}
"
`)
})
})
} else {
describe('build', () => {
it('should break the build if a page is missing root layout', async () => {
const next = await createNext({
skipStart: true,
files: {
'app/page.js': new FileRef(
path.join(__dirname, 'app/route/page.js')
),
'next.config.js': new FileRef(
path.join(__dirname, 'next.config.js')
),
},
dependencies: {
react: 'latest',
'react-dom': 'latest',
},
})
})
} else {
describe('build', () => {
it('should break the build if a page is missing root layout', async () => {
const next = await createNext({
skipStart: true,
files: {
'app/page.js': new FileRef(
path.join(__dirname, 'app/route/page.js')
),
'next.config.js': new FileRef(
path.join(__dirname, 'next.config.js')
),
},
dependencies: {
react: 'latest',
'react-dom': 'latest',
},
})

await expect(next.start()).rejects.toThrow('next build failed')
expect(stripAnsi(next.cliOutput)).toInclude(
"page.js doesn't have a root layout. To fix this error, make sure every page has a root layout."
)
await next.destroy()
await expect(next.start()).rejects.toThrow('next build failed')
expect(stripAnsi(next.cliOutput)).toInclude(
"page.js doesn't have a root layout. To fix this error, make sure every page has a root layout."
)
await next.destroy()
})
})
})
}
}
})
)
Loading