Skip to content

Commit 181b23a

Browse files
franky47franky47
committed
test: Add dynamic segments e2e test for RR-based frameworks
1 parent 5bb1606 commit 181b23a

11 files changed

+255
-0
lines changed

‎packages/e2e/react-router/v6/cypress/e2e/shared/dynamic-segments.cy.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { testDynamicSegments } from 'e2e-shared/specs/dynamic-segments.cy'
2+
3+
testDynamicSegments({
4+
path: '/dynamic-segments/dynamic/foo',
5+
expectedSegments: ['foo']
6+
})
7+
8+
testDynamicSegments({
9+
path: '/dynamic-segments/catch-all',
10+
expectedSegments: ['']
11+
})
12+
13+
testDynamicSegments({
14+
path: '/dynamic-segments/catch-all/a/b/c',
15+
expectedSegments: ['a', 'b', 'c']
16+
})

‎packages/e2e/react-router/v6/src/react-router.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ const router = createBrowserRouter(
4747
<Route path="conditional-rendering/useQueryStates" lazy={load(import('./routes/conditional-rendering.useQueryStates'))} />
4848
<Route path="scroll" lazy={load(import('./routes/scroll'))} />
4949
<Route path="pretty-urls" lazy={load(import('./routes/pretty-urls'))} />
50+
<Route path="dynamic-segments/dynamic/:segment" lazy={load(import('./routes/dynamic-segments.dynamic.$segment'))} />
51+
<Route path="dynamic-segments/catch-all?*" lazy={load(import('./routes/dynamic-segments.catch-all.$'))} />
5052

5153
<Route path="render-count/:hook/:shallow/:history/:startTransition/no-loader" lazy={load(import('./routes/render-count.$hook.$shallow.$history.$startTransition.no-loader'))} />
5254
<Route path="render-count/:hook/:shallow/:history/:startTransition/sync-loader" lazy={load(import('./routes/render-count.$hook.$shallow.$history.$startTransition.sync-loader'))} />

‎packages/e2e/react-router/v6/src/routes/dynamic-segments.catch-all.$.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Display } from 'e2e-shared/components/display'
2+
import { DisplaySegments, UrlControls } from 'e2e-shared/specs/dynamic-segments'
3+
import { createLoader, parseAsString } from 'nuqs'
4+
import {
5+
useLoaderData,
6+
useParams,
7+
type LoaderFunctionArgs
8+
} from 'react-router-dom'
9+
10+
const loadSearchParams = createLoader({
11+
test: parseAsString
12+
})
13+
14+
export function loader({ request, params }: LoaderFunctionArgs) {
15+
const { test: serverState } = loadSearchParams(request)
16+
return {
17+
serverState,
18+
serverSegments: params['*']?.split('/') ?? []
19+
}
20+
}
21+
22+
export default function Page() {
23+
const { serverState, serverSegments } = useLoaderData() as ReturnType<
24+
typeof loader
25+
>
26+
const clientSegments = useParams()['*']?.split('/') ?? []
27+
return (
28+
<>
29+
<UrlControls>
30+
<Display environment="server" state={serverState} />
31+
</UrlControls>
32+
<DisplaySegments environment="server" segments={serverSegments} />
33+
<DisplaySegments environment="client" segments={clientSegments} />
34+
</>
35+
)
36+
}

‎packages/e2e/react-router/v6/src/routes/dynamic-segments.dynamic.$segment.tsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Display } from 'e2e-shared/components/display'
2+
import { DisplaySegments, UrlControls } from 'e2e-shared/specs/dynamic-segments'
3+
import { createLoader, parseAsString } from 'nuqs'
4+
import {
5+
useLoaderData,
6+
useParams,
7+
type LoaderFunctionArgs
8+
} from 'react-router-dom'
9+
10+
const loadSearchParams = createLoader({
11+
test: parseAsString
12+
})
13+
14+
export function loader({ request, params }: LoaderFunctionArgs) {
15+
const { test: serverState } = loadSearchParams(request)
16+
return {
17+
serverState,
18+
serverSegments: [params.segment as string]
19+
}
20+
}
21+
22+
export default function Page() {
23+
const { serverState, serverSegments } = useLoaderData() as ReturnType<
24+
typeof loader
25+
>
26+
const params = useParams()
27+
return (
28+
<>
29+
<UrlControls>
30+
<Display environment="server" state={serverState} />
31+
</UrlControls>
32+
<DisplaySegments environment="server" segments={serverSegments} />
33+
<DisplaySegments
34+
environment="client"
35+
segments={[params.segment as string]}
36+
/>
37+
</>
38+
)
39+
}

‎packages/e2e/react-router/v7/app/routes.ts

+2
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ export default [
3030
route('/conditional-rendering/useQueryStates', './routes/conditional-rendering.useQueryStates.tsx'),
3131
route('/scroll', './routes/scroll.tsx'),
3232
route('/pretty-urls', './routes/pretty-urls.tsx'),
33+
route('/dynamic-segments/dynamic/:segment', './routes/dynamic-segments.dynamic.$segment.tsx'),
34+
route('/dynamic-segments/catch-all?/*', './routes/dynamic-segments.catch-all.$.tsx'),
3335

3436
route('/render-count/:hook/:shallow/:history/:startTransition/no-loader', './routes/render-count.$hook.$shallow.$history.$startTransition.no-loader.tsx'),
3537
route('/render-count/:hook/:shallow/:history/:startTransition/sync-loader', './routes/render-count.$hook.$shallow.$history.$startTransition.sync-loader.tsx'),

‎packages/e2e/react-router/v7/app/routes/dynamic-segments.catch-all.$.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Display } from 'e2e-shared/components/display'
2+
import { DisplaySegments, UrlControls } from 'e2e-shared/specs/dynamic-segments'
3+
import { createLoader, parseAsString } from 'nuqs'
4+
import { useLoaderData, useParams, type LoaderFunctionArgs } from 'react-router'
5+
6+
const loadSearchParams = createLoader({
7+
test: parseAsString
8+
})
9+
10+
export function loader({ request, params }: LoaderFunctionArgs) {
11+
const { test: serverState } = loadSearchParams(request)
12+
return {
13+
serverState,
14+
serverSegments: params['*']?.split('/') ?? []
15+
}
16+
}
17+
18+
export default function Page() {
19+
const { serverState, serverSegments } = useLoaderData<typeof loader>()
20+
const clientSegments = useParams()['*']?.split('/') ?? []
21+
return (
22+
<>
23+
<UrlControls>
24+
<Display environment="server" state={serverState} />
25+
</UrlControls>
26+
<DisplaySegments environment="server" segments={serverSegments} />
27+
<DisplaySegments environment="client" segments={clientSegments} />
28+
</>
29+
)
30+
}

‎packages/e2e/react-router/v7/app/routes/dynamic-segments.dynamic.$segment.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Display } from 'e2e-shared/components/display'
2+
import { DisplaySegments, UrlControls } from 'e2e-shared/specs/dynamic-segments'
3+
import { createLoader, parseAsString } from 'nuqs'
4+
import { useLoaderData, useParams, type LoaderFunctionArgs } from 'react-router'
5+
6+
const loadSearchParams = createLoader({
7+
test: parseAsString
8+
})
9+
10+
export function loader({ request, params }: LoaderFunctionArgs) {
11+
const { test: serverState } = loadSearchParams(request)
12+
return {
13+
serverState,
14+
serverSegments: [params.segment as string]
15+
}
16+
}
17+
18+
export default function Page() {
19+
const { serverState, serverSegments } = useLoaderData<typeof loader>()
20+
const params = useParams()
21+
return (
22+
<>
23+
<UrlControls>
24+
<Display environment="server" state={serverState} />
25+
</UrlControls>
26+
<DisplaySegments environment="server" segments={serverSegments} />
27+
<DisplaySegments
28+
environment="client"
29+
segments={[params.segment as string]}
30+
/>
31+
</>
32+
)
33+
}

‎packages/e2e/react-router/v7/cypress/e2e/shared/dynamic-segments.cy.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { testDynamicSegments } from 'e2e-shared/specs/dynamic-segments.cy'
2+
3+
testDynamicSegments({
4+
path: '/dynamic-segments/dynamic/foo',
5+
expectedSegments: ['foo']
6+
})
7+
8+
testDynamicSegments({
9+
path: '/dynamic-segments/catch-all',
10+
expectedSegments: ['']
11+
})
12+
13+
testDynamicSegments({
14+
path: '/dynamic-segments/catch-all/a/b/c',
15+
expectedSegments: ['a', 'b', 'c']
16+
})

‎packages/e2e/remix/app/routes/dynamic-segments.catch-all.$.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import type { LoaderFunctionArgs } from '@remix-run/node'
2+
import { useLoaderData, useParams } from '@remix-run/react'
3+
import { Display } from 'e2e-shared/components/display'
4+
import { DisplaySegments, UrlControls } from 'e2e-shared/specs/dynamic-segments'
5+
import { createLoader, parseAsString } from 'nuqs'
6+
7+
const loadSearchParams = createLoader({
8+
test: parseAsString
9+
})
10+
11+
export function loader({ request, params }: LoaderFunctionArgs) {
12+
const { test: serverState } = loadSearchParams(request)
13+
return {
14+
serverState,
15+
serverSegments: params['*']?.split('/') ?? []
16+
}
17+
}
18+
19+
export default function Page() {
20+
const { serverState, serverSegments } = useLoaderData<typeof loader>()
21+
const clientSegments = useParams()['*']?.split('/') ?? []
22+
return (
23+
<>
24+
<UrlControls>
25+
<Display environment="server" state={serverState} />
26+
</UrlControls>
27+
<DisplaySegments environment="server" segments={serverSegments} />
28+
<DisplaySegments environment="client" segments={clientSegments} />
29+
</>
30+
)
31+
}

‎packages/e2e/remix/app/routes/dynamic-segments.dynamic.$segment.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import type { LoaderFunctionArgs } from '@remix-run/node'
2+
import { useLoaderData, useParams } from '@remix-run/react'
3+
import { Display } from 'e2e-shared/components/display'
4+
import { DisplaySegments, UrlControls } from 'e2e-shared/specs/dynamic-segments'
5+
import { createLoader, parseAsString } from 'nuqs'
6+
7+
const loadSearchParams = createLoader({
8+
test: parseAsString
9+
})
10+
11+
export function loader({ request, params }: LoaderFunctionArgs) {
12+
const { test: serverState } = loadSearchParams(request)
13+
return {
14+
serverState,
15+
serverSegments: [params.segment]
16+
}
17+
}
18+
19+
export default function Page() {
20+
const { serverState, serverSegments } = useLoaderData<typeof loader>()
21+
const params = useParams()
22+
return (
23+
<>
24+
<UrlControls>
25+
<Display environment="server" state={serverState} />
26+
</UrlControls>
27+
<DisplaySegments environment="server" segments={serverSegments} />
28+
<DisplaySegments
29+
environment="client"
30+
segments={[params.segment as string]}
31+
/>
32+
</>
33+
)
34+
}

‎packages/e2e/remix/cypress/e2e/shared/dynamic-segments.cy.ts

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { testDynamicSegments } from 'e2e-shared/specs/dynamic-segments.cy'
2+
3+
testDynamicSegments({
4+
path: '/dynamic-segments/dynamic/foo',
5+
expectedSegments: ['foo']
6+
})
7+
8+
testDynamicSegments({
9+
path: '/dynamic-segments/catch-all',
10+
expectedSegments: ['']
11+
})
12+
13+
testDynamicSegments({
14+
path: '/dynamic-segments/catch-all/a/b/c',
15+
expectedSegments: ['a', 'b', 'c']
16+
})

0 commit comments

Comments
 (0)