Add test for catchall segments

vercel · Dec 12, 2022 · cdc6bdd · cdc6bdd
1 parent 79d53d0
commit cdc6bdd
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 0 deletions.
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
@@ -16,6 +16,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         >
           Change param
         </Link>
+        <Link
+          id="change-catchall"
+          href="/segment-name/param1/segment-name2/value2/different/random/paths'"
+        >
+          Change param
+        </Link>
         {children}
       </body>
     </html>

diff --git a/...use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/layout.tsx b/...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 (
+    <>
+      <RenderValues prefix="before-catchall" />
+      {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
@@ -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'\\""`)
+  })
 })