test: Add pretty URL encoding e2e test

Author: franky47

packages/e2e/next/cypress/e2e/shared/pretty-urls.cy.ts

@@ -0,0 +1,11 @@
+import { testPrettyUrls } from 'e2e-shared/specs/pretty-urls.cy'
+
+testPrettyUrls({
+  path: '/app/pretty-urls',
+  nextJsRouter: 'app'
+})
+
+testPrettyUrls({
+  path: '/pages/pretty-urls',
+  nextJsRouter: 'pages'
+})

packages/e2e/next/src/app/app/(shared)/pretty-urls/page.tsx

@@ -0,0 +1,10 @@
+import { PrettyUrls } from 'e2e-shared/specs/pretty-urls'
+import { Suspense } from 'react'
+
+export default function Page() {
+  return (
+    <Suspense>
+      <PrettyUrls />
+    </Suspense>
+  )
+}

packages/e2e/next/src/pages/pages/pretty-urls.tsx

@@ -0,0 +1,3 @@
+import { PrettyUrls } from 'e2e-shared/specs/pretty-urls'
+
+export default PrettyUrls

packages/e2e/react-router/v6/cypress/e2e/shared/pretty-urls.cy.ts

@@ -0,0 +1,5 @@
+import { testPrettyUrls } from 'e2e-shared/specs/pretty-urls.cy'
+
+testPrettyUrls({
+  path: '/pretty-urls'
+})

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

@@ -46,6 +46,7 @@ const router = createBrowserRouter(
       <Route path="conditional-rendering/useQueryState"   lazy={load(import('./routes/conditional-rendering.useQueryState'))} />
       <Route path="conditional-rendering/useQueryStates"  lazy={load(import('./routes/conditional-rendering.useQueryStates'))} />
       <Route path="scroll"                                lazy={load(import('./routes/scroll'))} />
+      <Route path="pretty-urls"                           lazy={load(import('./routes/pretty-urls'))} />
 
       <Route path="render-count/:hook/:shallow/:history/:startTransition/no-loader"     lazy={load(import('./routes/render-count.$hook.$shallow.$history.$startTransition.no-loader'))} />
       <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/pretty-urls.tsx

@@ -0,0 +1,3 @@
+import { PrettyUrls } from 'e2e-shared/specs/pretty-urls'
+
+export default PrettyUrls

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

@@ -29,6 +29,7 @@ export default [
     route('/conditional-rendering/useQueryState',   './routes/conditional-rendering.useQueryState.tsx'),
     route('/conditional-rendering/useQueryStates',  './routes/conditional-rendering.useQueryStates.tsx'),
     route('/scroll',                                './routes/scroll.tsx'),
+    route('/pretty-urls',                           './routes/pretty-urls.tsx'),
 
     route('/render-count/:hook/:shallow/:history/:startTransition/no-loader',    './routes/render-count.$hook.$shallow.$history.$startTransition.no-loader.tsx'),
     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/pretty-urls.tsx

@@ -0,0 +1,3 @@
+import { PrettyUrls } from 'e2e-shared/specs/pretty-urls'
+
+export default PrettyUrls

packages/e2e/react-router/v7/cypress/e2e/shared/pretty-urls.cy.ts

@@ -0,0 +1,5 @@
+import { testPrettyUrls } from 'e2e-shared/specs/pretty-urls.cy'
+
+testPrettyUrls({
+  path: '/pretty-urls'
+})

packages/e2e/react/cypress/e2e/shared/pretty-urls.cy.ts

@@ -0,0 +1,5 @@
+import { testPrettyUrls } from 'e2e-shared/specs/pretty-urls.cy'
+
+testPrettyUrls({
+  path: '/pretty-urls'
+})

packages/e2e/react/src/routes.tsx

@@ -24,6 +24,7 @@ const routes: Record<string, React.LazyExoticComponent<() => JSX.Element>> = {
   '/conditional-rendering/useQueryState':   lazy(() => import('./routes/conditional-rendering.useQueryState')),
   '/conditional-rendering/useQueryStates':  lazy(() => import('./routes/conditional-rendering.useQueryStates')),
   '/scroll':                                lazy(() => import('./routes/scroll')),
+  '/pretty-urls':                           lazy(() => import('./routes/pretty-urls')),
 
   '/render-count/useQueryState/true/replace/false':   lazy(() => import('./routes/render-count')),
   '/render-count/useQueryState/true/replace/true':    lazy(() => import('./routes/render-count')),

packages/e2e/react/src/routes/pretty-urls.tsx

@@ -0,0 +1,3 @@
+import { PrettyUrls } from 'e2e-shared/specs/pretty-urls'
+
+export default PrettyUrls

packages/e2e/remix/app/routes/pretty-urls.tsx

@@ -0,0 +1,3 @@
+import { PrettyUrls } from 'e2e-shared/specs/pretty-urls'
+
+export default PrettyUrls

packages/e2e/remix/cypress/e2e/shared/pretty-urls.cy.ts

@@ -0,0 +1,5 @@
+import { testPrettyUrls } from 'e2e-shared/specs/pretty-urls.cy'
+
+testPrettyUrls({
+  path: '/pretty-urls'
+})

packages/e2e/shared/specs/pretty-urls.cy.ts

@@ -0,0 +1,10 @@
+import { createTest } from '../create-test'
+
+export const testPrettyUrls = createTest('Pretty URLs', ({ path }) => {
+  it('should render unencoded characters', () => {
+    cy.visit(path)
+    cy.contains('#hydration-marker', 'hydrated').should('be.hidden')
+    cy.get('button').click()
+    cy.get('#state').should('have.text', '-._~!$()*,;=:@/?[]{}\\|^')
+  })
+})

packages/e2e/shared/specs/pretty-urls.tsx

@@ -0,0 +1,13 @@
+'use client'
+
+import { useQueryState } from 'nuqs'
+
+export function PrettyUrls() {
+  const [state, setState] = useQueryState('test')
+  return (
+    <>
+      <button onClick={() => setState('-._~!$()*,;=:@/?[]{}\\|^')}>Test</button>
+      <pre id="state">{state}</pre>
+    </>
+  )
+}