Add test for providing correct params to layouts (#43775)

test/e2e/app-dir/layout-params.test.ts

@@ -0,0 +1,99 @@
+import path from 'path'
+import { renderViaHTTP } from 'next-test-utils'
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import cheerio from 'cheerio'
+
+describe('app dir - layout params', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: new FileRef(path.join(__dirname, './layout-params')),
+      dependencies: {
+        react: 'latest',
+        'react-dom': 'latest',
+        typescript: 'latest',
+        '@types/react': 'latest',
+        '@types/node': 'latest',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  const isReact17 = process.env.NEXT_TEST_REACT_VERSION === '^17'
+
+  if (isReact17) {
+    it('should skip tests for react 17', () => {})
+    return
+  }
+
+  describe('basic params', () => {
+    it('check layout without params get no params', async () => {
+      const html = await renderViaHTTP(next.url, '/base/something/another')
+
+      const $ = cheerio.load(html)
+
+      const ids = ['#root-layout', '#lvl1-layout']
+      ids.forEach((divId) => {
+        const params = $(`${divId} > div`)
+        expect(params.length).toBe(0)
+      })
+    })
+
+    it("check layout renders just it's params", async () => {
+      const html = await renderViaHTTP(next.url, '/base/something/another')
+
+      const $ = cheerio.load(html)
+
+      expect($('#lvl2-layout > div').length).toBe(1)
+      expect($('#lvl2-param1').text()).toBe('"something"')
+    })
+
+    it('check topmost layout renders all params', async () => {
+      const html = await renderViaHTTP(next.url, '/base/something/another')
+
+      const $ = cheerio.load(html)
+
+      expect($('#lvl3-layout > div').length).toBe(2)
+      expect($('#lvl3-param1').text()).toBe('"something"')
+      expect($('#lvl3-param2').text()).toBe('"another"')
+    })
+  })
+
+  describe('catchall params', () => {
+    it('should give catchall params just to last layout', async () => {
+      const html = await renderViaHTTP(next.url, '/catchall/something/another')
+
+      const $ = cheerio.load(html)
+
+      expect($(`#root-layout > div`).length).toBe(0)
+
+      expect($('#lvl2-layout > div').length).toBe(1)
+      expect($('#lvl2-params').text()).toBe('["something","another"]')
+    })
+
+    it('should give optional catchall params just to last layout', async () => {
+      const html = await renderViaHTTP(
+        next.url,
+        '/optional-catchall/something/another'
+      )
+
+      const $ = cheerio.load(html)
+
+      expect($(`#root-layout > div`).length).toBe(0)
+
+      expect($('#lvl2-layout > div').length).toBe(1)
+      expect($('#lvl2-params').text()).toBe('["something","another"]')
+    })
+
+    it("should give empty optional catchall params won't give params to any layout", async () => {
+      const html = await renderViaHTTP(next.url, '/optional-catchall')
+
+      const $ = cheerio.load(html)
+
+      expect($(`#root-layout > div`).length).toBe(0)
+      expect($('#lvl2-layout > div').length).toBe(0)
+    })
+  })
+})

test/e2e/app-dir/layout-params/app/base/[param1]/[param2]/layout.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import ShowParams from '../../../show-params'
+
+export default function Layout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: {}
+}) {
+  return (
+    <div>
+      <ShowParams prefix="lvl3" params={params} />
+      {children}
+    </div>
+  )
+}

test/e2e/app-dir/layout-params/app/base/[param1]/[param2]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}

test/e2e/app-dir/layout-params/app/base/[param1]/layout.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import ShowParams from '../../show-params'
+
+export default function Layout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: {}
+}) {
+  return (
+    <div>
+      <ShowParams prefix="lvl2" params={params} />
+      {children}
+    </div>
+  )
+}

test/e2e/app-dir/layout-params/app/base/[param1]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}

test/e2e/app-dir/layout-params/app/base/layout.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import ShowParams from '../show-params'
+
+export default function Layout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: {}
+}) {
+  return (
+    <div>
+      <ShowParams prefix="lvl1" params={params} />
+      {children}
+    </div>
+  )
+}

test/e2e/app-dir/layout-params/app/base/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}

test/e2e/app-dir/layout-params/app/catchall/[...params]/layout.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import ShowParams from '../../show-params'
+
+export default function Layout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: {}
+}) {
+  return (
+    <div>
+      <ShowParams prefix="lvl2" params={params} />
+      {children}
+    </div>
+  )
+}

test/e2e/app-dir/layout-params/app/catchall/[...params]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}

test/e2e/app-dir/layout-params/app/layout.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import ShowParams from './show-params'
+
+export default function Layout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: {}
+}) {
+  return (
+    <html>
+      <head></head>
+      <body>
+        <div>
+          <ShowParams prefix="root" params={params} />
+          {children}
+        </div>
+      </body>
+    </html>
+  )
+}

test/e2e/app-dir/layout-params/app/optional-catchall/[[...params]]/layout.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import ShowParams from '../../show-params'
+
+export default function Layout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: {}
+}) {
+  return (
+    <div>
+      <ShowParams prefix="lvl2" params={params} />
+      {children}
+    </div>
+  )
+}

test/e2e/app-dir/layout-params/app/optional-catchall/[[...params]]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}

test/e2e/app-dir/layout-params/app/show-params.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+export default function ShowParams({
+  prefix,
+  params,
+}: {
+  prefix: string
+  params: Record<string, unknown>
+}) {
+  return (
+    <div id={`${prefix}-layout`}>
+      {Object.entries(params).map(([key, val]) => (
+        <div key={key} id={`${prefix}-${key}`}>
+          {JSON.stringify(val)}
+        </div>
+      ))}
+    </div>
+  )
+}

test/e2e/app-dir/layout-params/next.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    appDir: true,
+  },
+}