From 7bea2a827afb52a03ebd2e79a22a9e5d9fdd8f4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Best?= <github@francoisbest.com>
Date: Thu, 30 Jan 2025 13:56:14 +0100
Subject: [PATCH] test: Add React Router Fog of War test

See #884.
---
 .../v6/cypress/e2e/shared/fog-of-war.cy.ts    |  5 +++++
 .../e2e/react-router/v6/src/react-router.tsx  |  2 ++
 .../v6/src/routes/fog-of-war._index.tsx       |  5 +++++
 .../v6/src/routes/fog-of-war.result.tsx       |  3 +++
 packages/e2e/react-router/v7/app/routes.ts    |  3 +++
 .../v7/app/routes/fog-of-war._index.tsx       |  5 +++++
 .../v7/app/routes/fog-of-war.result.tsx       |  3 +++
 .../v7/cypress/e2e/shared/fog-of-war.cy.ts    |  5 +++++
 .../remix/app/routes/fog-of-war._index.tsx    |  5 +++++
 .../remix/app/routes/fog-of-war.result.tsx    |  3 +++
 .../remix/cypress/e2e/shared/fog-of-war.cy.ts |  5 +++++
 .../specs/react-router/fog-of-war.cy.ts       | 12 ++++++++++
 .../shared/specs/react-router/fog-of-war.tsx  | 22 +++++++++++++++++++
 13 files changed, 78 insertions(+)
 create mode 100644 packages/e2e/react-router/v6/cypress/e2e/shared/fog-of-war.cy.ts
 create mode 100644 packages/e2e/react-router/v6/src/routes/fog-of-war._index.tsx
 create mode 100644 packages/e2e/react-router/v6/src/routes/fog-of-war.result.tsx
 create mode 100644 packages/e2e/react-router/v7/app/routes/fog-of-war._index.tsx
 create mode 100644 packages/e2e/react-router/v7/app/routes/fog-of-war.result.tsx
 create mode 100644 packages/e2e/react-router/v7/cypress/e2e/shared/fog-of-war.cy.ts
 create mode 100644 packages/e2e/remix/app/routes/fog-of-war._index.tsx
 create mode 100644 packages/e2e/remix/app/routes/fog-of-war.result.tsx
 create mode 100644 packages/e2e/remix/cypress/e2e/shared/fog-of-war.cy.ts
 create mode 100644 packages/e2e/shared/specs/react-router/fog-of-war.cy.ts
 create mode 100644 packages/e2e/shared/specs/react-router/fog-of-war.tsx

diff --git a/packages/e2e/react-router/v6/cypress/e2e/shared/fog-of-war.cy.ts b/packages/e2e/react-router/v6/cypress/e2e/shared/fog-of-war.cy.ts
new file mode 100644
index 000000000..24dd01824
--- /dev/null
+++ b/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'
+})
diff --git a/packages/e2e/react-router/v6/src/react-router.tsx b/packages/e2e/react-router/v6/src/react-router.tsx
index 5cffb4d09..64fe6f4b6 100644
--- a/packages/e2e/react-router/v6/src/react-router.tsx
+++ b/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="conditional-rendering/useQueryState"   lazy={load(import('./routes/conditional-rendering.useQueryState'))} />
       <Route path="conditional-rendering/useQueryStates"  lazy={load(import('./routes/conditional-rendering.useQueryStates'))} />
 
diff --git a/packages/e2e/react-router/v6/src/routes/fog-of-war._index.tsx b/packages/e2e/react-router/v6/src/routes/fog-of-war._index.tsx
new file mode 100644
index 000000000..72e330d8a
--- /dev/null
+++ b/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" />
+}
diff --git a/packages/e2e/react-router/v6/src/routes/fog-of-war.result.tsx b/packages/e2e/react-router/v6/src/routes/fog-of-war.result.tsx
new file mode 100644
index 000000000..a1ca1acaf
--- /dev/null
+++ b/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
diff --git a/packages/e2e/react-router/v7/app/routes.ts b/packages/e2e/react-router/v7/app/routes.ts
index 29751d350..fd9a0a244 100644
--- a/packages/e2e/react-router/v7/app/routes.ts
+++ b/packages/e2e/react-router/v7/app/routes.ts
@@ -24,8 +24,11 @@ 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('/conditional-rendering/useQueryState',   './routes/conditional-rendering.useQueryState.tsx'),
     route('/conditional-rendering/useQueryStates',  './routes/conditional-rendering.useQueryStates.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'),
diff --git a/packages/e2e/react-router/v7/app/routes/fog-of-war._index.tsx b/packages/e2e/react-router/v7/app/routes/fog-of-war._index.tsx
new file mode 100644
index 000000000..72e330d8a
--- /dev/null
+++ b/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" />
+}
diff --git a/packages/e2e/react-router/v7/app/routes/fog-of-war.result.tsx b/packages/e2e/react-router/v7/app/routes/fog-of-war.result.tsx
new file mode 100644
index 000000000..a1ca1acaf
--- /dev/null
+++ b/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
diff --git a/packages/e2e/react-router/v7/cypress/e2e/shared/fog-of-war.cy.ts b/packages/e2e/react-router/v7/cypress/e2e/shared/fog-of-war.cy.ts
new file mode 100644
index 000000000..24dd01824
--- /dev/null
+++ b/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'
+})
diff --git a/packages/e2e/remix/app/routes/fog-of-war._index.tsx b/packages/e2e/remix/app/routes/fog-of-war._index.tsx
new file mode 100644
index 000000000..72e330d8a
--- /dev/null
+++ b/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" />
+}
diff --git a/packages/e2e/remix/app/routes/fog-of-war.result.tsx b/packages/e2e/remix/app/routes/fog-of-war.result.tsx
new file mode 100644
index 000000000..a1ca1acaf
--- /dev/null
+++ b/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
diff --git a/packages/e2e/remix/cypress/e2e/shared/fog-of-war.cy.ts b/packages/e2e/remix/cypress/e2e/shared/fog-of-war.cy.ts
new file mode 100644
index 000000000..24dd01824
--- /dev/null
+++ b/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'
+})
diff --git a/packages/e2e/shared/specs/react-router/fog-of-war.cy.ts b/packages/e2e/shared/specs/react-router/fog-of-war.cy.ts
new file mode 100644
index 000000000..15e2dee39
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/packages/e2e/shared/specs/react-router/fog-of-war.tsx b/packages/e2e/shared/specs/react-router/fog-of-war.tsx
new file mode 100644
index 000000000..3a308982c
--- /dev/null
+++ b/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>
+}