remix-run · brophdawg11 · Jun 27, 2024 · Jun 26, 2024 · Jun 26, 2024 · Jun 26, 2024
diff --git a/integration/fog-of-war-test.ts b/integration/fog-of-war-test.ts
diff --git a/integration/link-test.ts b/integration/link-test.ts
@@ -594,6 +594,10 @@ test.describe("route module link export", () => {
   });
 
   test.describe("script imports", () => {
+    // Disable JS for this test since we don't want it to hydrate and remove
+    // the initial <script> tags
+    test.use({ javaScriptEnabled: false });
+
     test("are added to the document", async ({ page }) => {
       let app = new PlaywrightFixture(appFixture, page);
       await app.goto("/");
@@ -605,8 +609,8 @@ test.describe("route module link export", () => {
       let moduleScriptText = await moduleScript.innerText();
       expect(
         Array.from(moduleScriptText.matchAll(/import "\/assets\/manifest-/g)),
-        "invalid build manifest"
-      ).toHaveLength(1);
+        "did not expect a manifest due to fog of war"
+      ).toHaveLength(0);
       expect(
         Array.from(moduleScriptText.matchAll(/import \* as route0 from "/g)),
         "invalid route0"

diff --git a/integration/prefetch-test.ts b/integration/prefetch-test.ts
@@ -154,6 +154,99 @@ test.describe.skip("multi fetch", () => {
     });
   });
 
+  test.describe("prefetch=render (fog of war)", () => {
+    let appFixture: AppFixture;
+
+    test.afterAll(() => {
+      appFixture?.close();
+    });
+
+    test("adds prefetch tags after discovery", async ({ page }) => {
+      let fixture = await createFixture({
+        files: {
+          "app/root.tsx": js`
+            import * as React from "react";
+            import {
+              Link,
+              Links,
+              Meta,
+              Outlet,
+              Scripts,
+              useLoaderData,
+            } from "react-router";
+            export default function Root() {
+              let [discover, setDiscover] = React.useState(false);
+              return (
+                <html lang="en">
+                  <head>
+                    <Meta />
+                    <Links />
+                  </head>
+                  <body>
+                    <nav id="nav">
+                      <Link
+                        to="/with-loader"
+                        discover={discover ? "render" : "none"}
+                        prefetch="render">
+                        Loader Page
+                      </Link>
+                      <br/>
+                      <button onClick={() => setDiscover(true)}>
+                        Discover Link
+                      </button>
+                    </nav>
+                    <Outlet />
+                    <Scripts />
+                  </body>
+                </html>
+              );
+            }
+          `,
+
+          "app/routes/_index.tsx": js`
+            export default function() {
+              return <h2 className="index">Index</h2>;
+            }
+          `,
+
+          "app/routes/with-loader.tsx": js`
+            export function loader() {
+              return { message: 'data from the loader' };
+            }
+            export default function() {
+              return <h2 className="with-loader">With Loader</h2>;
+            }
+          `,
+        },
+      });
+      appFixture = await createAppFixture(fixture);
+      let app = new PlaywrightFixture(appFixture, page);
+
+      let consoleLogs: string[] = [];
+      page.on("console", (msg) => {
+        consoleLogs.push(msg.text());
+      });
+
+      let selectors = {
+        data: "#nav link[href='/with-loader.data']",
+        route: "#nav link[href^='/build/routes/with-loader-']",
+      };
+      await app.goto("/", true);
+      expect(await app.page.$(selectors.data)).toBeNull();
+      expect(await app.page.$(selectors.route)).toBeNull();
+      expect(consoleLogs).toEqual([
+        "Tried to prefetch /with-loader but no routes matched.",
+      ]);
+
+      await app.clickElement("button");
+      await page.waitForSelector(selectors.data, { state: "attached" });
+      await page.waitForSelector(selectors.route, { state: "attached" });
+
+      // Ensure no other links in the #nav element
+      expect(await page.locator("#nav link").count()).toBe(2);
+    });
+  });
+
   test.describe("prefetch=intent (hover)", () => {
     let fixture: Fixture;
     let appFixture: AppFixture;

diff --git a/packages/react-router/__tests__/dom/data-browser-router-test.tsx b/packages/react-router/__tests__/dom/data-browser-router-test.tsx
@@ -2152,6 +2152,7 @@ function testDomRouter(
         "<div>
           <form
             action="/base/path"
+            data-discover="true"
             method="get"
           >
             <p>
@@ -2178,6 +2179,7 @@ function testDomRouter(
         "<div>
           <form
             action="/base/path?a=1&b=2"
+            data-discover="true"
             method="get"
           >
             <p>
@@ -2233,6 +2235,7 @@ function testDomRouter(
         "<div>
           <form
             action="/base/path"
+            data-discover="true"
             method="post"
           >
             <p>
@@ -2260,6 +2263,7 @@ function testDomRouter(
         "<div>
           <form
             action="/base/path"
+            data-discover="true"
             method="post"
           >
             <p>
@@ -2417,23 +2421,24 @@ function testDomRouter(
       fireEvent.click(screen.getByText("Submit"));
       await waitFor(() => screen.getByText("Yes"));
       expect(getHtml(container)).toMatchInlineSnapshot(`
-          "<div>
-            <form
-              action="/foo"
-              method="post"
+        "<div>
+          <form
+            action="/foo"
+            data-discover="true"
+            method="post"
+          >
+            <p>
+              Yes
+            </p>
+            <button
+              formaction="/foo/bar"
+              type="submit"
             >
-              <p>
-                Yes
-              </p>
-              <button
-                formaction="/foo/bar"
-                type="submit"
-              >
-                Submit
-              </button>
-            </form>
-          </div>"
-        `);
+              Submit
+            </button>
+          </form>
+        </div>"
+      `);
     });
 
     it("supports uppercase form method attributes", async () => {
@@ -5073,6 +5078,7 @@ function testDomRouter(
           "<div>
             <form
               action="/fetch"
+              data-discover="true"
               method="post"
             >
               <button
@@ -6726,6 +6732,7 @@ function testDomRouter(
               </p>
               <form
                 action="/base/fetch"
+                data-discover="true"
                 method="post"
               >
                 <button
@@ -6746,6 +6753,7 @@ function testDomRouter(
               </p>
               <form
                 action="/base/fetch"
+                data-discover="true"
                 method="post"
               >
                 <button

diff --git a/packages/react-router/__tests__/dom/data-static-router-test.tsx b/packages/react-router/__tests__/dom/data-static-router-test.tsx
@@ -96,7 +96,7 @@ describe("A <StaticRouterProvider>", () => {
       </React.StrictMode>
     );
     expect(html).toMatch("<h1>👋</h1>");
-    expect(html).toMatch('<a href="/the/other/path">');
+    expect(html).toMatch('<a href="/the/other/path" data-discover="true">');
 
     // @ts-expect-error
     expect(hooksData1.location).toEqual({
@@ -243,7 +243,7 @@ describe("A <StaticRouterProvider>", () => {
       </React.StrictMode>
     );
     expect(html).toMatch("<h1>👋</h1>");
-    expect(html).toMatch('<a href="/the/other/path">');
+    expect(html).toMatch('<a href="/the/other/path" data-discover="true">');
 
     // @ts-expect-error
     expect(hooksData1.location).toEqual({
@@ -355,7 +355,9 @@ describe("A <StaticRouterProvider>", () => {
       </React.StrictMode>
     );
     expect(html).toMatch("<h1>👋</h1>");
-    expect(html).toMatch('<a href="/base/the/other/path">');
+    expect(html).toMatch(
+      '<a href="/base/the/other/path" data-discover="true">'
+    );
 
     // @ts-expect-error
     expect(location).toEqual({
@@ -528,7 +530,9 @@ describe("A <StaticRouterProvider>", () => {
         />
       </React.StrictMode>
     );
-    expect(html).toContain('<a href="/path/with%20space">👋</a>');
+    expect(html).toContain(
+      '<a href="/path/with%20space" data-discover="true">👋</a>'
+    );
   });
 
   it("does not encode user-specified <a href> values", async () => {
@@ -551,7 +555,9 @@ describe("A <StaticRouterProvider>", () => {
         />
       </React.StrictMode>
     );
-    expect(html).toContain('<a href="/path/with space">👋</a>');
+    expect(html).toContain(
+      '<a href="/path/with space" data-discover="true">👋</a>'
+    );
   });
 
   it("encodes auto-generated <form action> values to avoid hydration errors (action=undefined)", async () => {
@@ -573,7 +579,7 @@ describe("A <StaticRouterProvider>", () => {
       </React.StrictMode>
     );
     expect(html).toContain(
-      '<form method="get" action="/path/with%20space">👋</form>'
+      '<form method="get" action="/path/with%20space" data-discover="true">👋</form>'
     );
   });
 
@@ -598,7 +604,7 @@ describe("A <StaticRouterProvider>", () => {
       </React.StrictMode>
     );
     expect(html).toContain(
-      '<form method="get" action="/path/with%20space">👋</form>'
+      '<form method="get" action="/path/with%20space" data-discover="true">👋</form>'
     );
   });
 
@@ -623,7 +629,7 @@ describe("A <StaticRouterProvider>", () => {
       </React.StrictMode>
     );
     expect(html).toContain(
-      '<form method="get" action="/path/with space">👋</form>'
+      '<form method="get" action="/path/with space" data-discover="true">👋</form>'
     );
   });
 
@@ -1259,7 +1265,7 @@ describe("A <StaticRouterProvider>", () => {
       </React.StrictMode>
     );
     expect(html).toMatch(
-      '<a href="/the/path">relative path</a>' +
+      '<a href="/the/path" data-discover="true">relative path</a>' +
         '<a href="http://localhost/the/path">absolute same-origin url</a>' +
         '<a href="https://remix.run">absolute different-origin url</a>' +
         '<a href="mailto:[email protected]">absolute mailto: url</a>'

diff --git a/packages/react-router/__tests__/dom/link-push-test.tsx b/packages/react-router/__tests__/dom/link-push-test.tsx
@@ -97,6 +97,7 @@ describe("Link push and replace", () => {
             Home
           </h1>
           <a
+            data-discover="true"
             href="/home?name=michael"
             onClick={[Function]}
           >
@@ -151,6 +152,7 @@ describe("Link push and replace", () => {
             Home
           </h1>
           <a
+            data-discover="true"
             href="/home#bio"
             onClick={[Function]}
           >
@@ -210,6 +212,7 @@ describe("Link push and replace", () => {
             Home
           </h1>
           <a
+            data-discover="true"
             href="/home"
             onClick={[Function]}
           >
@@ -271,6 +274,7 @@ describe("Link push and replace", () => {
             Home
           </h1>
           <a
+            data-discover="true"
             href="/home"
             onClick={[Function]}
           >

diff --git a/packages/react-router/__tests__/dom/special-characters-test.tsx b/packages/react-router/__tests__/dom/special-characters-test.tsx
@@ -538,6 +538,7 @@ describe("special character tests", () => {
       expect(getHtml(ctx.container)).toMatchInlineSnapshot(`
         "<div>
           <a
+            data-discover="true"
             href="/parent/child/%20%20param%20%20/grandchild"
           >
             Link to grandchild
@@ -551,6 +552,7 @@ describe("special character tests", () => {
       expect(getHtml(ctx.container)).toMatchInlineSnapshot(`
         "<div>
           <a
+            data-discover="true"
             href="/parent/child/%20%20param%20%20/grandchild"
           >
             Link to grandchild