test: Add React Router Fog of War test

See #884.

Author: franky47

packages/e2e/react-router/v6/cypress/e2e/shared/fog-of-war.cy.ts

@@ -0,0 +1,5 @@
+import { testFogOfWar } from 'e2e-shared/specs/react-router/fog-of-war.cy'
+
+testFogOfWar({
+  path: '/fog-of-war'
+})

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

@@ -41,6 +41,8 @@ const router = createBrowserRouter(
       <Route path="form/useQueryStates"                   lazy={load(import('./routes/form.useQueryStates'))} />
       <Route path="referential-stability/useQueryState"   lazy={load(import('./routes/referential-stability.useQueryState'))} />
       <Route path="referential-stability/useQueryStates"  lazy={load(import('./routes/referential-stability.useQueryStates'))} />
+      <Route path="fog-of-war"                            lazy={load(import('./routes/fog-of-war._index'))} />
+      <Route path="fog-of-war/result"                     lazy={load(import('./routes/fog-of-war.result'))} />
 
       <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/fog-of-war._index.tsx

@@ -0,0 +1,5 @@
+import { FogOfWarStartPage } from 'e2e-shared/specs/react-router/fog-of-war'
+
+export default function FogOfWarStart() {
+  return <FogOfWarStartPage resultHref="/fog-of-war/result" />
+}

packages/e2e/react-router/v6/src/routes/fog-of-war.result.tsx

@@ -0,0 +1,3 @@
+import { FogOfWarResultPage } from 'e2e-shared/specs/react-router/fog-of-war'
+
+export default FogOfWarResultPage

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

@@ -24,6 +24,9 @@ export default [
     route('/form/useQueryStates',                   './routes/form.useQueryStates.tsx'),
     route('/referential-stability/useQueryState',   './routes/referential-stability.useQueryState.tsx'),
     route('/referential-stability/useQueryStates',  './routes/referential-stability.useQueryStates.tsx'),
+    route('/fog-of-war',                            './routes/fog-of-war._index.tsx'),
+    route('/fog-of-war/result',                     './routes/fog-of-war.result.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'),
     route('/render-count/:hook/:shallow/:history/:startTransition/async-loader', './routes/render-count.$hook.$shallow.$history.$startTransition.async-loader.tsx'),

packages/e2e/react-router/v7/app/routes/fog-of-war._index.tsx

@@ -0,0 +1,5 @@
+import { FogOfWarStartPage } from 'e2e-shared/specs/react-router/fog-of-war'
+
+export default function FogOfWarStart() {
+  return <FogOfWarStartPage resultHref="/fog-of-war/result" />
+}

packages/e2e/react-router/v7/app/routes/fog-of-war.result.tsx

@@ -0,0 +1,3 @@
+import { FogOfWarResultPage } from 'e2e-shared/specs/react-router/fog-of-war'
+
+export default FogOfWarResultPage

packages/e2e/react-router/v7/cypress/e2e/shared/fog-of-war.cy.ts

@@ -0,0 +1,5 @@
+import { testFogOfWar } from 'e2e-shared/specs/react-router/fog-of-war.cy'
+
+testFogOfWar({
+  path: '/fog-of-war'
+})

packages/e2e/remix/app/routes/fog-of-war._index.tsx

@@ -0,0 +1,5 @@
+import { FogOfWarStartPage } from 'e2e-shared/specs/react-router/fog-of-war'
+
+export default function FogOfWarStart() {
+  return <FogOfWarStartPage resultHref="/fog-of-war/result" />
+}

packages/e2e/remix/app/routes/fog-of-war.result.tsx

@@ -0,0 +1,3 @@
+import { FogOfWarResultPage } from 'e2e-shared/specs/react-router/fog-of-war'
+
+export default FogOfWarResultPage

packages/e2e/remix/cypress/e2e/shared/fog-of-war.cy.ts

@@ -0,0 +1,5 @@
+import { testFogOfWar } from 'e2e-shared/specs/react-router/fog-of-war.cy'
+
+testFogOfWar({
+  path: '/fog-of-war'
+})

packages/e2e/shared/specs/react-router/fog-of-war.cy.ts

@@ -0,0 +1,12 @@
+import { createTest } from '../../create-test'
+
+export const testFogOfWar = createTest('Fog of War', ({ path }) => {
+  it('should navigate to the result page', () => {
+    cy.visit(path)
+    cy.contains('#hydration-marker', 'hydrated').should('be.hidden')
+    cy.get('#set').click()
+    cy.get('#navigate').click()
+    cy.location('pathname').should('eq', `${path}/result`)
+    cy.get('#result').should('have.text', 'pass')
+  })
+})

packages/e2e/shared/specs/react-router/fog-of-war.tsx

@@ -0,0 +1,22 @@
+import { useQueryState } from 'nuqs'
+import { useLink } from '../../components/link'
+
+export function FogOfWarStartPage({ resultHref }: { resultHref: string }) {
+  const [, setState] = useQueryState('test')
+  // const [, setState] = useState('init')
+  const Link = useLink()
+  return (
+    <>
+      <button id="set" onClick={() => setState('pass')}>
+        Set
+      </button>
+      <Link id="navigate" href={resultHref}>
+        Navigate
+      </Link>
+    </>
+  )
+}
+
+export function FogOfWarResultPage() {
+  return <div id="result">pass</div>
+}