From 2022fa6d45044b75be6c83b8b3829311eef746c3 Mon Sep 17 00:00:00 2001
From: Jan Kaifer <jan@kaifer.cz>
Date: Wed, 7 Dec 2022 17:34:01 +0100
Subject: [PATCH] Add test for providing correct params to layouts (#43775)

---
 test/e2e/app-dir/layout-params.test.ts        | 99 +++++++++++++++++++
 .../app/base/[param1]/[param2]/layout.tsx     | 17 ++++
 .../app/base/[param1]/[param2]/page.tsx       |  3 +
 .../app/base/[param1]/layout.tsx              | 17 ++++
 .../layout-params/app/base/[param1]/page.tsx  |  3 +
 .../app-dir/layout-params/app/base/layout.tsx | 17 ++++
 .../app-dir/layout-params/app/base/page.tsx   |  3 +
 .../app/catchall/[...params]/layout.tsx       | 17 ++++
 .../app/catchall/[...params]/page.tsx         |  3 +
 test/e2e/app-dir/layout-params/app/layout.tsx | 22 +++++
 .../[[...params]]/layout.tsx                  | 17 ++++
 .../optional-catchall/[[...params]]/page.tsx  |  3 +
 .../app-dir/layout-params/app/show-params.tsx | 19 ++++
 test/e2e/app-dir/layout-params/next.config.js |  5 +
 14 files changed, 245 insertions(+)
 create mode 100644 test/e2e/app-dir/layout-params.test.ts
 create mode 100644 test/e2e/app-dir/layout-params/app/base/[param1]/[param2]/layout.tsx
 create mode 100644 test/e2e/app-dir/layout-params/app/base/[param1]/[param2]/page.tsx
 create mode 100644 test/e2e/app-dir/layout-params/app/base/[param1]/layout.tsx
 create mode 100644 test/e2e/app-dir/layout-params/app/base/[param1]/page.tsx
 create mode 100644 test/e2e/app-dir/layout-params/app/base/layout.tsx
 create mode 100644 test/e2e/app-dir/layout-params/app/base/page.tsx
 create mode 100644 test/e2e/app-dir/layout-params/app/catchall/[...params]/layout.tsx
 create mode 100644 test/e2e/app-dir/layout-params/app/catchall/[...params]/page.tsx
 create mode 100644 test/e2e/app-dir/layout-params/app/layout.tsx
 create mode 100644 test/e2e/app-dir/layout-params/app/optional-catchall/[[...params]]/layout.tsx
 create mode 100644 test/e2e/app-dir/layout-params/app/optional-catchall/[[...params]]/page.tsx
 create mode 100644 test/e2e/app-dir/layout-params/app/show-params.tsx
 create mode 100644 test/e2e/app-dir/layout-params/next.config.js

diff --git a/test/e2e/app-dir/layout-params.test.ts b/test/e2e/app-dir/layout-params.test.ts
new file mode 100644
index 000000000000..c0d3105399e0
--- /dev/null
+++ b/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)
+    })
+  })
+})
diff --git a/test/e2e/app-dir/layout-params/app/base/[param1]/[param2]/layout.tsx b/test/e2e/app-dir/layout-params/app/base/[param1]/[param2]/layout.tsx
new file mode 100644
index 000000000000..921ceb5efa17
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/test/e2e/app-dir/layout-params/app/base/[param1]/[param2]/page.tsx b/test/e2e/app-dir/layout-params/app/base/[param1]/[param2]/page.tsx
new file mode 100644
index 000000000000..c17431379f96
--- /dev/null
+++ b/test/e2e/app-dir/layout-params/app/base/[param1]/[param2]/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}
diff --git a/test/e2e/app-dir/layout-params/app/base/[param1]/layout.tsx b/test/e2e/app-dir/layout-params/app/base/[param1]/layout.tsx
new file mode 100644
index 000000000000..0a9cdf7458ff
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/test/e2e/app-dir/layout-params/app/base/[param1]/page.tsx b/test/e2e/app-dir/layout-params/app/base/[param1]/page.tsx
new file mode 100644
index 000000000000..c17431379f96
--- /dev/null
+++ b/test/e2e/app-dir/layout-params/app/base/[param1]/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}
diff --git a/test/e2e/app-dir/layout-params/app/base/layout.tsx b/test/e2e/app-dir/layout-params/app/base/layout.tsx
new file mode 100644
index 000000000000..4cd549d0f5c3
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/test/e2e/app-dir/layout-params/app/base/page.tsx b/test/e2e/app-dir/layout-params/app/base/page.tsx
new file mode 100644
index 000000000000..c17431379f96
--- /dev/null
+++ b/test/e2e/app-dir/layout-params/app/base/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}
diff --git a/test/e2e/app-dir/layout-params/app/catchall/[...params]/layout.tsx b/test/e2e/app-dir/layout-params/app/catchall/[...params]/layout.tsx
new file mode 100644
index 000000000000..0a9cdf7458ff
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/test/e2e/app-dir/layout-params/app/catchall/[...params]/page.tsx b/test/e2e/app-dir/layout-params/app/catchall/[...params]/page.tsx
new file mode 100644
index 000000000000..c17431379f96
--- /dev/null
+++ b/test/e2e/app-dir/layout-params/app/catchall/[...params]/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}
diff --git a/test/e2e/app-dir/layout-params/app/layout.tsx b/test/e2e/app-dir/layout-params/app/layout.tsx
new file mode 100644
index 000000000000..13d293641469
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/test/e2e/app-dir/layout-params/app/optional-catchall/[[...params]]/layout.tsx b/test/e2e/app-dir/layout-params/app/optional-catchall/[[...params]]/layout.tsx
new file mode 100644
index 000000000000..0a9cdf7458ff
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/test/e2e/app-dir/layout-params/app/optional-catchall/[[...params]]/page.tsx b/test/e2e/app-dir/layout-params/app/optional-catchall/[[...params]]/page.tsx
new file mode 100644
index 000000000000..c17431379f96
--- /dev/null
+++ b/test/e2e/app-dir/layout-params/app/optional-catchall/[[...params]]/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}
diff --git a/test/e2e/app-dir/layout-params/app/show-params.tsx b/test/e2e/app-dir/layout-params/app/show-params.tsx
new file mode 100644
index 000000000000..a5452e74f35b
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/test/e2e/app-dir/layout-params/next.config.js b/test/e2e/app-dir/layout-params/next.config.js
new file mode 100644
index 000000000000..cfa3ac3d7aa9
--- /dev/null
+++ b/test/e2e/app-dir/layout-params/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    appDir: true,
+  },
+}