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} 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 917670352c70..53e603497de3 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 @@ -90,4 +90,23 @@ describe('useSelectedLayoutSegment(s)', () => { await browser.elementByCss('#before-static > .segment').text() ).toMatchInlineSnapshot(`"\\"different-segment\\""`) }) + + it('should correctly update when changing param segment', async () => { + browser.elementById('change-param').click() + await waitFor(100) + + expect( + await browser.elementByCss('#root > .segments').text() + ).toMatchInlineSnapshot( + `"[\\"segment-name\\",\\"param1\\",\\"segment-name2\\",\\"different-value\\",\\"value3/value4'\\"]"` + ) + + expect( + await browser.elementByCss('#before-param > .segments').text() + ).toMatchInlineSnapshot(`"[\\"different-value\\",\\"value3/value4'\\"]"`) + + expect( + await browser.elementByCss('#before-param > .segment').text() + ).toMatchInlineSnapshot(`"\\"different-value\\""`) + }) }) From f0065e0d94842da3ce0366723bb8b2658ed9ebac Mon Sep 17 00:00:00 2001 From: Jan Kaifer Date: Mon, 12 Dec 2022 10:30:06 +0100 Subject: [PATCH 6/6] Add test for catchall segments --- .../app/layout.tsx | 6 ++++ .../segment-name2/[param2]/layout.tsx | 10 +++++++ .../use-selected-layout-segment-s.test.ts | 29 +++++++++++++++++++ 3 files changed, 45 insertions(+) create mode 100644 test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/layout.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 fa23af327573..4013c87af92f 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 @@ -16,6 +16,12 @@ export default function Layout({ children }: { children: React.ReactNode }) { > Change param + + Change param + {children} diff --git a/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/layout.tsx b/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/layout.tsx new file mode 100644 index 000000000000..1b27aa42497f --- /dev/null +++ b/test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/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/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 53e603497de3..12410ceb089b 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 @@ -62,6 +62,16 @@ describe('useSelectedLayoutSegment(s)', () => { ).toMatchInlineSnapshot(`"\\"value2\\""`) }) + it('should return correct values in layout before catchall segment', async () => { + expect( + await browser.elementByCss('#before-catchall > .segments').text() + ).toMatchInlineSnapshot(`"[\\"value3/value4\\"]"`) + + expect( + await browser.elementByCss('#before-catchall > .segment').text() + ).toMatchInlineSnapshot(`"\\"value3/value4\\""`) + }) + it('should return correct values in layout after last segment', async () => { expect( await browser.elementByCss('#final > .segments').text() @@ -109,4 +119,23 @@ describe('useSelectedLayoutSegment(s)', () => { await browser.elementByCss('#before-param > .segment').text() ).toMatchInlineSnapshot(`"\\"different-value\\""`) }) + + it('should correctly update when changing catchall segment', async () => { + browser.elementById('change-catchall').click() + await waitFor(100) + + expect( + await browser.elementByCss('#root > .segments').text() + ).toMatchInlineSnapshot( + `"[\\"segment-name\\",\\"param1\\",\\"segment-name2\\",\\"value2\\",\\"different/random/paths'\\"]"` + ) + + expect( + await browser.elementByCss('#before-catchall > .segments').text() + ).toMatchInlineSnapshot(`"[\\"different/random/paths'\\"]"`) + + expect( + await browser.elementByCss('#before-catchall > .segment').text() + ).toMatchInlineSnapshot(`"\\"different/random/paths'\\""`) + }) })