vercel · timneutkens · Dec 16, 2022 · Dec 9, 2022 · Dec 9, 2022 · Dec 9, 2022
@@ -0,0 +1,29 @@
+import Link from 'next/link'
+import RenderValues from './render-values'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <head />
+      <body>
+        <RenderValues prefix="root" />
+        <Link id="change-static" href="/segment-name/param1/different-segment">
+          Change static
+        </Link>
+        <Link
+          id="change-param"
+          href="/segment-name/param1/segment-name2/different-value/value3/value4'"
+        >
+          Change param
+        </Link>
+        <Link
+          id="change-catchall"
+          href="/segment-name/param1/segment-name2/value2/different/random/paths'"
+        >
+          Change param
+        </Link>
+        {children}
+      </body>
+    </html>
+  )
+}
@@ -0,0 +1,19 @@
+'use client'
+
+import {
+  useSelectedLayoutSegment,
+  useSelectedLayoutSegments,
+} from 'next/navigation'
+
+export default function RenderValues({ prefix }: { prefix: string }) {
+  return (
+    <div id={prefix}>
+      <div className="segments">
+        {JSON.stringify(useSelectedLayoutSegments())}
+      </div>
+      <div className="segment">
+        {JSON.stringify(useSelectedLayoutSegment())}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}
@@ -0,0 +1,10 @@
+import RenderValues from '../../render-values'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <RenderValues prefix="before-static" />
+      {children}
+    </>
+  )
+}
@@ -0,0 +1,10 @@
+import RenderValues from '../../../../../render-values'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <RenderValues prefix="final" />
+      {children}
+    </>
+  )
+}
@@ -0,0 +1,3 @@
+export default function Page() {
+  return null
+}
@@ -0,0 +1,10 @@
+import RenderValues from '../../../../render-values'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <RenderValues prefix="before-catchall" />
+      {children}
+    </>
+  )
+}
@@ -0,0 +1,10 @@
+import RenderValues from '../../../render-values'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <RenderValues prefix="before-param" />
+      {children}
+    </>
+  )
+}
@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    appDir: true,
+  },
+}
@@ -0,0 +1,141 @@
+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
+
+  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())
+
+  let browser: Awaited<ReturnType<typeof webdriver>>
+  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\\"]"`
+    )
+
+    expect(
+      await browser.elementByCss('#root > .segment').text()
+    ).toMatchInlineSnapshot(`"\\"segment-name\\""`)
+  })
+
+  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\\"]"`
+    )
+
+    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 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()
+    ).toMatchInlineSnapshot(`"[]"`)
+
+    expect(
+      await browser.elementByCss('#final > .segment').text()
+    ).toMatchInlineSnapshot(`"null"`)
+  })
+
+  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\\"]"`)
+
+    expect(
+      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\\""`)
+  })
+
+  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'\\""`)
+  })
+})