test: Add routing e2e test

Author: franky47

packages/e2e/next/cypress/e2e/shared/routing.cy.ts

@@ -0,0 +1,25 @@
+import { testRouting } from 'e2e-shared/specs/routing.cy'
+
+testRouting({
+  path: '/app/routing/useQueryState',
+  hook: 'useQueryState',
+  nextJsRouter: 'app'
+})
+
+testRouting({
+  path: '/app/routing/useQueryStates',
+  hook: 'useQueryStates',
+  nextJsRouter: 'app'
+})
+
+testRouting({
+  path: '/pages/routing/useQueryState',
+  hook: 'useQueryState',
+  nextJsRouter: 'pages'
+})
+
+testRouting({
+  path: '/pages/routing/useQueryStates',
+  hook: 'useQueryStates',
+  nextJsRouter: 'pages'
+})

packages/e2e/next/src/app/app/(shared)/routing/useQueryState/other/page.tsx

@@ -0,0 +1,10 @@
+import { RoutingUseQueryState } from 'e2e-shared/specs/routing'
+import { Suspense } from 'react'
+
+export default function Page() {
+  return (
+    <Suspense>
+      <RoutingUseQueryState path="/app/routing/useQueryState" />
+    </Suspense>
+  )
+}

packages/e2e/next/src/app/app/(shared)/routing/useQueryState/page.tsx

@@ -0,0 +1,10 @@
+import { RoutingUseQueryState } from 'e2e-shared/specs/routing'
+import { Suspense } from 'react'
+
+export default function Page() {
+  return (
+    <Suspense>
+      <RoutingUseQueryState path="/app/routing/useQueryState" />
+    </Suspense>
+  )
+}

packages/e2e/next/src/app/app/(shared)/routing/useQueryStates/other/page.tsx

@@ -0,0 +1,10 @@
+import { RoutingUseQueryStates } from 'e2e-shared/specs/routing'
+import { Suspense } from 'react'
+
+export default function Page() {
+  return (
+    <Suspense>
+      <RoutingUseQueryStates path="/app/routing/useQueryStates" />
+    </Suspense>
+  )
+}

packages/e2e/next/src/app/app/(shared)/routing/useQueryStates/page.tsx

@@ -0,0 +1,10 @@
+import { RoutingUseQueryStates } from 'e2e-shared/specs/routing'
+import { Suspense } from 'react'
+
+export default function Page() {
+  return (
+    <Suspense>
+      <RoutingUseQueryStates path="/app/routing/useQueryStates" />
+    </Suspense>
+  )
+}

packages/e2e/next/src/pages/pages/routing/useQueryState/index.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryState } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryState path="/pages/routing/useQueryState" />
+}

packages/e2e/next/src/pages/pages/routing/useQueryState/other.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryState } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryState path="/pages/routing/useQueryState" />
+}

packages/e2e/next/src/pages/pages/routing/useQueryStates/index.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryStates } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryStates path="/pages/routing/useQueryStates" />
+}

packages/e2e/next/src/pages/pages/routing/useQueryStates/other.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryStates } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryStates path="/pages/routing/useQueryStates" />
+}

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

@@ -0,0 +1,13 @@
+import { testRouting } from 'e2e-shared/specs/routing.cy'
+
+testRouting({
+  path: '/routing/useQueryState',
+  hook: 'useQueryState',
+  shallowOptions: [false] // todo: Enable shallow routing
+})
+
+testRouting({
+  path: '/routing/useQueryStates',
+  hook: 'useQueryStates',
+  shallowOptions: [false] // todo: Enable shallow routing
+})

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

@@ -25,6 +25,10 @@ const router = createBrowserRouter(
       <Route path='linking/useQueryStates/other' lazy={load(import('./routes/linking.useQueryStates.other'))} />
       <Route path='push/useQueryState'           lazy={load(import('./routes/push.useQueryState'))} />
       <Route path='push/useQueryStates'          lazy={load(import('./routes/push.useQueryStates'))} />
+      <Route path="routing/useQueryState"        lazy={load(import('./routes/routing.useQueryState'))} />
+      <Route path="routing/useQueryState/other"  lazy={load(import('./routes/routing.useQueryState.other'))} />
+      <Route path="routing/useQueryStates"       lazy={load(import('./routes/routing.useQueryStates'))} />
+      <Route path="routing/useQueryStates/other" lazy={load(import('./routes/routing.useQueryStates.other'))} />
     </Route>
   ))
 

packages/e2e/react-router/v6/src/routes/routing.useQueryState.other.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryState } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryState path="/routing/useQueryState" />
+}

packages/e2e/react-router/v6/src/routes/routing.useQueryState.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryState } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryState path="/routing/useQueryState" />
+}

packages/e2e/react-router/v6/src/routes/routing.useQueryStates.other.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryStates } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryStates path="/routing/useQueryStates" />
+}

packages/e2e/react-router/v6/src/routes/routing.useQueryStates.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryStates } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryStates path="/routing/useQueryStates" />
+}

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

@@ -12,5 +12,9 @@ export default [
     route('/linking/useQueryStates/other',  './routes/linking.useQueryStates.other.tsx'),
     route('/push/useQueryState',            './routes/push.useQueryState.tsx'),
     route('/push/useQueryStates',           './routes/push.useQueryStates.tsx'),
+    route('/routing/useQueryState',         './routes/routing.useQueryState.tsx'),
+    route('/routing/useQueryState/other',   './routes/routing.useQueryState.other.tsx'),
+    route('/routing/useQueryStates',        './routes/routing.useQueryStates.tsx'),
+    route('/routing/useQueryStates/other',  './routes/routing.useQueryStates.other.tsx')
   ])
 ] satisfies RouteConfig

packages/e2e/react-router/v7/app/routes/routing.useQueryState.other.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryState } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryState path="/routing/useQueryState" />
+}

packages/e2e/react-router/v7/app/routes/routing.useQueryState.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryState } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryState path="/routing/useQueryState" />
+}

packages/e2e/react-router/v7/app/routes/routing.useQueryStates.other.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryStates } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryStates path="/routing/useQueryStates" />
+}

packages/e2e/react-router/v7/app/routes/routing.useQueryStates.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryStates } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryStates path="/routing/useQueryStates" />
+}

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

@@ -0,0 +1,13 @@
+import { testRouting } from 'e2e-shared/specs/routing.cy'
+
+testRouting({
+  path: '/routing/useQueryState',
+  hook: 'useQueryState',
+  shallowOptions: [false] // todo: Enable shallow routing
+})
+
+testRouting({
+  path: '/routing/useQueryStates',
+  hook: 'useQueryStates',
+  shallowOptions: [false] // todo: Enable shallow routing
+})

packages/e2e/react/cypress/e2e/shared/routing.cy.ts

@@ -0,0 +1,13 @@
+import { testRouting } from 'e2e-shared/specs/routing.cy'
+
+testRouting({
+  path: '/routing/useQueryState',
+  hook: 'useQueryState',
+  shallowOptions: [false] // todo: Enable shallow routing
+})
+
+testRouting({
+  path: '/routing/useQueryStates',
+  hook: 'useQueryStates',
+  shallowOptions: [false] // todo: Enable shallow routing
+})

packages/e2e/react/src/routes.tsx

@@ -11,6 +11,10 @@ const routes: Record<string, React.LazyExoticComponent<() => JSX.Element>> = {
   '/linking/useQueryState/other':   lazy(() => import('./routes/linking.useQueryState.other')),
   '/linking/useQueryStates':        lazy(() => import('./routes/linking.useQueryStates')),
   '/linking/useQueryStates/other':  lazy(() => import('./routes/linking.useQueryStates.other')),
+  '/routing/useQueryState':         lazy(() => import('./routes/routing.useQueryState')),
+  '/routing/useQueryState/other':   lazy(() => import('./routes/routing.useQueryState.other')),
+  '/routing/useQueryStates':        lazy(() => import('./routes/routing.useQueryStates')),
+  '/routing/useQueryStates/other':  lazy(() => import('./routes/routing.useQueryStates.other'))
 }
 
 export function Router() {

packages/e2e/react/src/routes/routing.useQueryState.other.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryState } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryState path="/routing/useQueryState" />
+}

packages/e2e/react/src/routes/routing.useQueryState.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryState } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryState path="/routing/useQueryState" />
+}

packages/e2e/react/src/routes/routing.useQueryStates.other.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryStates } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryStates path="/routing/useQueryStates" />
+}

packages/e2e/react/src/routes/routing.useQueryStates.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryStates } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryStates path="/routing/useQueryStates" />
+}

packages/e2e/remix/app/routes/routing.useQueryState.other.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryState } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryState path="/routing/useQueryState" />
+}

packages/e2e/remix/app/routes/routing.useQueryState.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryState } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryState path="/routing/useQueryState" />
+}

packages/e2e/remix/app/routes/routing.useQueryStates.other.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryStates } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryStates path="/routing/useQueryStates" />
+}

packages/e2e/remix/app/routes/routing.useQueryStates.tsx

@@ -0,0 +1,5 @@
+import { RoutingUseQueryStates } from 'e2e-shared/specs/routing'
+
+export default function Page() {
+  return <RoutingUseQueryStates path="/routing/useQueryStates" />
+}

packages/e2e/remix/cypress/e2e/shared/routing.cy.ts

@@ -0,0 +1,13 @@
+import { testRouting } from 'e2e-shared/specs/routing.cy'
+
+testRouting({
+  path: '/routing/useQueryState',
+  hook: 'useQueryState',
+  shallowOptions: [false] // todo: Enable shallow routing
+})
+
+testRouting({
+  path: '/routing/useQueryStates',
+  hook: 'useQueryStates',
+  shallowOptions: [false] // todo: Enable shallow routing
+})

packages/e2e/shared/create-test.ts

@@ -11,7 +11,7 @@ export function createTest(
 ) {
   return (config: TestConfig) => {
     const router = config.nextJsRouter ? `${config.nextJsRouter} router` : null
-    const describeLabel = [config.hook, label, router, config.description]
+    const describeLabel = [label, config.hook, router, config.description]
       .filter(Boolean)
       .join(' - ')
     describe(describeLabel, implementation.bind(null, config))

packages/e2e/shared/specs/linking.cy.ts

@@ -9,7 +9,7 @@ export const testLinking = createTest('Linking', ({ path }) => {
     cy.get('#state').should('have.text', 'pass')
   })
 
-  it('picks up state from Links pointing to the same page', () => {
+  it('picks up state from Links from another page', () => {
     cy.visit(path + '/other')
     cy.contains('#hydration-marker', 'hydrated').should('be.hidden')
     cy.get('#state').should('be.empty')

packages/e2e/shared/specs/routing.cy.ts

@@ -0,0 +1,44 @@
+import { createTest, type TestConfig } from '../create-test'
+import { getRoutingUrl } from './routing.defs'
+
+type TestRoutingOptions = TestConfig & {
+  shallowOptions?: boolean[]
+  methodOptions?: ('replace' | 'push')[]
+}
+
+export function testRouting({
+  shallowOptions = [true, false],
+  methodOptions = ['replace', 'push'],
+  ...options
+}: TestRoutingOptions) {
+  const factory = createTest('Routing', ({ path }) => {
+    for (const shallow of shallowOptions) {
+      for (const method of methodOptions) {
+        it(`picks up state from a router call pointing to the same page - router.${method}({ shallow: ${shallow} })`, () => {
+          cy.visit(getRoutingUrl(path, { shallow, method }))
+          cy.contains('#hydration-marker', 'hydrated').should('be.hidden')
+          cy.get('#state').should('be.empty')
+          cy.get('button').click()
+          cy.get('#state').should('have.text', 'pass')
+          if (method === 'push') {
+            cy.go('back')
+            cy.get('#state').should('be.empty')
+          }
+        })
+
+        it('picks up state from a router issued from another page', () => {
+          cy.visit(getRoutingUrl(path + '/other', { shallow, method }))
+          cy.contains('#hydration-marker', 'hydrated').should('be.hidden')
+          cy.get('#state').should('be.empty')
+          cy.get('button').click()
+          cy.get('#state').should('have.text', 'pass')
+          if (method === 'push') {
+            cy.go('back')
+            cy.get('#state').should('be.empty')
+          }
+        })
+      }
+    }
+  })
+  return factory(options)
+}

packages/e2e/shared/specs/routing.defs.ts

@@ -0,0 +1,20 @@
+import {
+  createSerializer,
+  parseAsBoolean,
+  parseAsString,
+  parseAsStringLiteral
+} from 'nuqs'
+
+export const routingSearchParams = {
+  state: parseAsString,
+  shallow: parseAsBoolean.withDefault(true),
+  method: parseAsStringLiteral(['push', 'replace']).withDefault('replace')
+}
+export const routingUrlKeys = {
+  state: 'test',
+  method: 'router'
+}
+
+export const getRoutingUrl = createSerializer(routingSearchParams, {
+  urlKeys: routingUrlKeys
+})