Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add static test for useSelectedLayoutSegments (#43955)
- Loading branch information
Showing
10 changed files
with
240 additions
and
0 deletions.
There are no files selected for viewing
29 changes: 29 additions & 0 deletions
29
test/e2e/app-dir/use-selected-layout-segment-s/app/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
19 changes: 19 additions & 0 deletions
19
test/e2e/app-dir/use-selected-layout-segment-s/app/render-values.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ) | ||
| } |
3 changes: 3 additions & 0 deletions
3
...pp-dir/use-selected-layout-segment-s/app/segment-name/[param1]/different-segment/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export default function Page() { | ||
| return null | ||
| } |
10 changes: 10 additions & 0 deletions
10
test/e2e/app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import RenderValues from '../../render-values' | ||
|
|
||
| export default function Layout({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <> | ||
| <RenderValues prefix="before-static" /> | ||
| {children} | ||
| </> | ||
| ) | ||
| } |
10 changes: 10 additions & 0 deletions
10
...ayout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/[...catchall]/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import RenderValues from '../../../../../render-values' | ||
|
|
||
| export default function Layout({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <> | ||
| <RenderValues prefix="final" /> | ||
| {children} | ||
| </> | ||
| ) | ||
| } |
3 changes: 3 additions & 0 deletions
3
...-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/[...catchall]/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export default function Page() { | ||
| return null | ||
| } |
10 changes: 10 additions & 0 deletions
10
...use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/[param2]/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import RenderValues from '../../../../render-values' | ||
|
|
||
| export default function Layout({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <> | ||
| <RenderValues prefix="before-catchall" /> | ||
| {children} | ||
| </> | ||
| ) | ||
| } |
10 changes: 10 additions & 0 deletions
10
.../app-dir/use-selected-layout-segment-s/app/segment-name/[param1]/segment-name2/layout.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import RenderValues from '../../../render-values' | ||
|
|
||
| export default function Layout({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <> | ||
| <RenderValues prefix="before-param" /> | ||
| {children} | ||
| </> | ||
| ) | ||
| } |
5 changes: 5 additions & 0 deletions
5
test/e2e/app-dir/use-selected-layout-segment-s/next.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| module.exports = { | ||
| experimental: { | ||
| appDir: true, | ||
| }, | ||
| } |
141 changes: 141 additions & 0 deletions
141
test/e2e/app-dir/use-selected-layout-segment-s/use-selected-layout-segment-s.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'\\""`) | ||
| }) | ||
| }) |