From ceb7e752a760edec62e5c12628790f064fd867db Mon Sep 17 00:00:00 2001
From: Jan Kaifer
Date: Fri, 9 Dec 2022 16:52:05 +0100
Subject: [PATCH 1/6] Add static test for useSelectedLayoutSegments
---
.../app/layout.tsx | 13 +++++
.../app/render-values.tsx | 19 ++++++++
.../app/segment-name/[param1]/layout.tsx | 10 ++++
.../[param2]/[...catchall]/layout.tsx | 10 ++++
.../[param2]/[...catchall]/page.tsx | 3 ++
.../[param1]/segment-name2/layout.tsx | 10 ++++
.../next.config.js | 5 ++
.../use-selected-layout-segment-s.test.ts | 48 +++++++++++++++++++
8 files changed, 118 insertions(+)
create mode 100644 test/e2e/app-dir/use-selected-layout-segment-s/app/layout.tsx
create mode 100644 test/e2e/app-dir/use-selected-layout-segment-s/app/render-values.tsx
create mode 100644 test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/layout.tsx
create mode 100644 test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/[...catchall]/layout.tsx
create mode 100644 test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/[...catchall]/page.tsx
create mode 100644 test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/layout.tsx
create mode 100644 test/e2e/app-dir/use-selected-layout-segment-s/next.config.js
create mode 100644 test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts
diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/app/layout.tsx b/test/e2e/app-dir/use-selected-layout-segment-s/app/layout.tsx
new file mode 100644
index 000000000000..e424150dab34
--- /dev/null
+++ b/test/e2e/app-dir/use-selected-layout-segment-s/app/layout.tsx
@@ -0,0 +1,13 @@
+import RenderValues from './render-values'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+ {children}
+
+
+ )
+}
diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/app/render-values.tsx b/test/e2e/app-dir/use-selected-layout-segment-s/app/render-values.tsx
new file mode 100644
index 000000000000..cb2cc8ddbfdb
--- /dev/null
+++ b/test/e2e/app-dir/use-selected-layout-segment-s/app/render-values.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import {
+ useSelectedLayoutSegment,
+ useSelectedLayoutSegments,
+} from 'next/navigation'
+
+export default function RenderValues({ prefix }: { prefix: string }) {
+ return (
+
+
+ {JSON.stringify(useSelectedLayoutSegments())}
+
+
+ {JSON.stringify(useSelectedLayoutSegment())}
+
+
+ )
+}
diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/layout.tsx b/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/layout.tsx
new file mode 100644
index 000000000000..fd9a887f558b
--- /dev/null
+++ b/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/layout.tsx
@@ -0,0 +1,10 @@
+import RenderValues from '../../render-values'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <>
+
+ {children}
+ >
+ )
+}
diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/[...catchall]/layout.tsx b/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/[...catchall]/layout.tsx
new file mode 100644
index 000000000000..0cc7c3bd980c
--- /dev/null
+++ b/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/[...catchall]/layout.tsx
@@ -0,0 +1,10 @@
+import RenderValues from '../../../../../render-values'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <>
+
+ {children}
+ >
+ )
+}
diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/[...catchall]/page.tsx b/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/[...catchall]/page.tsx
new file mode 100644
index 000000000000..c17431379f96
--- /dev/null
+++ b/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/[...catchall]/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+ return null
+}
diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/layout.tsx b/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/layout.tsx
new file mode 100644
index 000000000000..a256a87f595f
--- /dev/null
+++ b/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/layout.tsx
@@ -0,0 +1,10 @@
+import RenderValues from '../../../render-values'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+ <>
+
+ {children}
+ >
+ )
+}
diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/next.config.js b/test/e2e/app-dir/use-selected-layout-segment-s/next.config.js
new file mode 100644
index 000000000000..cfa3ac3d7aa9
--- /dev/null
+++ b/test/e2e/app-dir/use-selected-layout-segment-s/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+ experimental: {
+ appDir: true,
+ },
+}
diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts b/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts
new file mode 100644
index 000000000000..9f71d9b73cc0
--- /dev/null
+++ b/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts
@@ -0,0 +1,48 @@
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import webdriver from 'next-webdriver'
+
+describe('useSelectedLayoutSegment(s)', () => {
+ let next: NextInstance
+
+ beforeAll(async () => {
+ next = await createNext({
+ files: new FileRef(__dirname),
+ dependencies: {
+ react: 'latest',
+ 'react-dom': 'latest',
+ typescript: 'latest',
+ '@types/react': 'latest',
+ '@types/node': 'latest',
+ },
+ })
+ })
+ afterAll(() => next.destroy())
+
+ it('should return correct values for various layouts', async () => {
+ const browser = await webdriver(
+ next.url,
+ '/segment-name/value1/segment-name2/value2/value3/value4'
+ )
+
+ expect(
+ await browser.elementByCss('#root > .segments').text()
+ ).toMatchInlineSnapshot(
+ `"[\\"segment-name\\",\\"value1\\",\\"segment-name2\\",\\"value2\\",\\"value3/value4\\"]"`
+ )
+
+ expect(
+ await browser.elementByCss('#before-static > .segments').text()
+ ).toMatchInlineSnapshot(
+ `"[\\"segment-name2\\",\\"value2\\",\\"value3/value4\\"]"`
+ )
+
+ expect(
+ await browser.elementByCss('#before-param > .segments').text()
+ ).toMatchInlineSnapshot(`"[\\"value2\\",\\"value3/value4\\"]"`)
+
+ expect(
+ await browser.elementByCss('#final > .segments').text()
+ ).toMatchInlineSnapshot(`"[]"`)
+ })
+})
From 21e77f08f49f07792acd9a6bb7e337919160ec16 Mon Sep 17 00:00:00 2001
From: Jan Kaifer
Date: Fri, 9 Dec 2022 16:56:04 +0100
Subject: [PATCH 2/6] Slit large test into multiple small ones
---
.../use-selected-layout-segment-s.test.ts | 13 +++++++++++--
1 file changed, 11 insertions(+), 2 deletions(-)
diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts b/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts
index 9f71d9b73cc0..53453b83d8f2 100644
--- a/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts
+++ b/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts
@@ -19,28 +19,37 @@ describe('useSelectedLayoutSegment(s)', () => {
})
afterAll(() => next.destroy())
- it('should return correct values for various layouts', async () => {
- const browser = await webdriver(
+ let browser: Awaited>
+ beforeEach(async () => {
+ browser = await webdriver(
next.url,
'/segment-name/value1/segment-name2/value2/value3/value4'
)
+ })
+ it('should return correct values for root layout', async () => {
expect(
await browser.elementByCss('#root > .segments').text()
).toMatchInlineSnapshot(
`"[\\"segment-name\\",\\"value1\\",\\"segment-name2\\",\\"value2\\",\\"value3/value4\\"]"`
)
+ })
+ it('should return correct values in layout before static segment', async () => {
expect(
await browser.elementByCss('#before-static > .segments').text()
).toMatchInlineSnapshot(
`"[\\"segment-name2\\",\\"value2\\",\\"value3/value4\\"]"`
)
+ })
+ it('should return correct values in layout before param segment', async () => {
expect(
await browser.elementByCss('#before-param > .segments').text()
).toMatchInlineSnapshot(`"[\\"value2\\",\\"value3/value4\\"]"`)
+ })
+ it('should return correct values in layout after last segment', async () => {
expect(
await browser.elementByCss('#final > .segments').text()
).toMatchInlineSnapshot(`"[]"`)
From 526d44248d0e915acd59cb6be4552febcaa3b3cd Mon Sep 17 00:00:00 2001
From: Jan Kaifer
Date: Fri, 9 Dec 2022 17:01:52 +0100
Subject: [PATCH 3/6] Tests changing of static segment
---
.../use-selected-layout-segment-s/app/layout.tsx | 4 ++++
.../[param1]/different-segment/page.tsx | 3 +++
.../use-selected-layout-segment-s.test.ts | 16 ++++++++++++++++
3 files changed, 23 insertions(+)
create mode 100644 test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/different-segment/page.tsx
diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/app/layout.tsx b/test/e2e/app-dir/use-selected-layout-segment-s/app/layout.tsx
index e424150dab34..5b2098ccd952 100644
--- a/test/e2e/app-dir/use-selected-layout-segment-s/app/layout.tsx
+++ b/test/e2e/app-dir/use-selected-layout-segment-s/app/layout.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link'
import RenderValues from './render-values'
export default function Layout({ children }: { children: React.ReactNode }) {
@@ -6,6 +7,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
+
+ Change static
+
{children}
diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/different-segment/page.tsx b/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/different-segment/page.tsx
new file mode 100644
index 000000000000..c17431379f96
--- /dev/null
+++ b/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/different-segment/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+ return null
+}
diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts b/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts
index 53453b83d8f2..87676290e834 100644
--- a/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts
+++ b/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts
@@ -1,6 +1,7 @@
import { createNext, FileRef } from 'e2e-utils'
import { NextInstance } from 'test/lib/next-modes/base'
import webdriver from 'next-webdriver'
+import { waitFor } from 'next-test-utils'
describe('useSelectedLayoutSegment(s)', () => {
let next: NextInstance
@@ -54,4 +55,19 @@ describe('useSelectedLayoutSegment(s)', () => {
await browser.elementByCss('#final > .segments').text()
).toMatchInlineSnapshot(`"[]"`)
})
+
+ it('should correctly update when changing static segment', async () => {
+ browser.elementById('change-static').click()
+ await waitFor(100)
+
+ expect(
+ await browser.elementByCss('#root > .segments').text()
+ ).toMatchInlineSnapshot(
+ `"[\\"segment-name\\",\\"param1\\",\\"different-segment\\"]"`
+ )
+
+ expect(
+ await browser.elementByCss('#before-static > .segments').text()
+ ).toMatchInlineSnapshot(`"[\\"different-segment\\"]"`)
+ })
})
From 840379b8dc27bef865f73590b4bd979e5b98712b Mon Sep 17 00:00:00 2001
From: Jan Kaifer
Date: Fri, 9 Dec 2022 17:05:57 +0100
Subject: [PATCH 4/6] Add tests for `useSelectedLayoutSegment()`
---
.../use-selected-layout-segment-s.test.ts | 20 +++++++++++++++++++
1 file changed, 20 insertions(+)
diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts b/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts
index 87676290e834..917670352c70 100644
--- a/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts
+++ b/test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts
@@ -34,6 +34,10 @@ describe('useSelectedLayoutSegment(s)', () => {
).toMatchInlineSnapshot(
`"[\\"segment-name\\",\\"value1\\",\\"segment-name2\\",\\"value2\\",\\"value3/value4\\"]"`
)
+
+ expect(
+ await browser.elementByCss('#root > .segment').text()
+ ).toMatchInlineSnapshot(`"\\"segment-name\\""`)
})
it('should return correct values in layout before static segment', async () => {
@@ -42,18 +46,30 @@ describe('useSelectedLayoutSegment(s)', () => {
).toMatchInlineSnapshot(
`"[\\"segment-name2\\",\\"value2\\",\\"value3/value4\\"]"`
)
+
+ expect(
+ await browser.elementByCss('#before-static > .segment').text()
+ ).toMatchInlineSnapshot(`"\\"segment-name2\\""`)
})
it('should return correct values in layout before param segment', async () => {
expect(
await browser.elementByCss('#before-param > .segments').text()
).toMatchInlineSnapshot(`"[\\"value2\\",\\"value3/value4\\"]"`)
+
+ expect(
+ await browser.elementByCss('#before-param > .segment').text()
+ ).toMatchInlineSnapshot(`"\\"value2\\""`)
})
it('should return correct values in layout after last segment', async () => {
expect(
await browser.elementByCss('#final > .segments').text()
).toMatchInlineSnapshot(`"[]"`)
+
+ expect(
+ await browser.elementByCss('#final > .segment').text()
+ ).toMatchInlineSnapshot(`"null"`)
})
it('should correctly update when changing static segment', async () => {
@@ -69,5 +85,9 @@ describe('useSelectedLayoutSegment(s)', () => {
expect(
await browser.elementByCss('#before-static > .segments').text()
).toMatchInlineSnapshot(`"[\\"different-segment\\"]"`)
+
+ expect(
+ await browser.elementByCss('#before-static > .segment').text()
+ ).toMatchInlineSnapshot(`"\\"different-segment\\""`)
})
})
From e5952796e34096ddd24b228932ec0655f935fc73 Mon Sep 17 00:00:00 2001
From: Jan Kaifer
Date: Fri, 9 Dec 2022 17:26:42 +0100
Subject: [PATCH 5/6] Test case where we change param
---
.../app/layout.tsx | 6 ++++++
.../use-selected-layout-segment-s.test.ts | 19 +++++++++++++++++++
2 files changed, 25 insertions(+)
diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/app/layout.tsx b/test/e2e/app-dir/use-selected-layout-segment-s/app/layout.tsx
index 5b2098ccd952..fa23af327573 100644
--- a/test/e2e/app-dir/use-selected-layout-segment-s/app/layout.tsx
+++ b/test/e2e/app-dir/use-selected-layout-segment-s/app/layout.tsx
@@ -10,6 +10,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
Change static
+
+ Change param
+
{children}