Fix Turbo Frame prefetching bug

Closes [hotwired#1191][] Ensure Prefetching does not share cache entries for requests with differing `Turbo-Frame:` HTTP headers. [hotwired#1191]: hotwired#1191
seanpdoyle · Feb 21, 2024 · 0947407 · 0947407
1 parent 861fcca
commit 0947407
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 5 deletions.
diff --git a/src/tests/fixtures/hover_to_prefetch.html b/src/tests/fixtures/hover_to_prefetch.html
@@ -1,9 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html id="html">
   <head>
     <meta charset="utf-8" />
     <title>Hover to Prefetch</title>
     <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+    <script src="/src/tests/fixtures/test.js"></script>
     <meta name="turbo-prefetch" content="true" />
   </head>
 
@@ -49,11 +50,11 @@
     <iframe src="/src/tests/fixtures/hover_to_prefetch_iframe.html" name="prefetch_iframe"> </iframe>
 
     <turbo-frame id="frame_for_prefetch">
-      <a href="/src/tests/fixtures/prefetched.html" id="anchor_for_prefetch_in_frame">Hover to prefetch me</a>
+      <a href="/src/tests/fixtures/prefetched.html" id="anchor_for_prefetch_in_frame">Hover to prefetch /prefetched.html frame</a>
     </turbo-frame>
 
     <turbo-frame id="frame_for_prefetch_top" target="_top">
-      <a href="/src/tests/fixtures/prefetched.html" id="anchor_for_prefetch_in_frame_target_top">Hover to prefetch me</a>
+      <a href="/src/tests/fixtures/prefetched.html" id="anchor_for_prefetch_in_frame_target_top">Hover to prefetch /prefetched.html page</a>
     </turbo-frame>
   </body>
 </html>
diff --git a/src/tests/functional/link_prefetch_observer_tests.js b/src/tests/functional/link_prefetch_observer_tests.js
@@ -1,6 +1,6 @@
-import { test } from "@playwright/test"
+import { expect, test } from "@playwright/test"
 import { assert } from "chai"
-import { nextBeat, sleep } from "../helpers/page"
+import { nextBeat, nextEventOnTarget, sleep } from "../helpers/page"
 import fs from "fs"
 import path from "path"
 
@@ -182,6 +182,35 @@ test("it prefetches links inside a turbo frame", async ({ page }) => {
   }})
 })
 
+test("prefetching a page-wide request does not affect frame requests", async ({ page }) => {
+  await goTo({ page, path: "/hover_to_prefetch.html" })
+
+  const pageLink = page.locator("#anchor_for_prefetch_in_frame_target_top")
+  const frameLink = page.locator("#anchor_for_prefetch_in_frame")
+
+  await pageLink.hover()
+  await sleep(25)
+  await frameLink.click()
+
+  const frameRequest = await nextEventOnTarget(page, "frame_for_prefetch", "turbo:before-fetch-request")
+
+  expect(frameRequest.fetchOptions.headers["Turbo-Frame"]).toEqual("frame_for_prefetch")
+})
+
+test("prefetching a frame request does not affect page-wide requests", async ({ page }) => {
+  await goTo({ page, path: "/hover_to_prefetch.html" })
+
+  const pageLink = page.locator("#anchor_for_prefetch_in_frame_target_top")
+  const frameLink = page.locator("#anchor_for_prefetch_in_frame")
+
+  await frameLink.hover()
+  await sleep(25)
+  await pageLink.click()
+
+  const pageRequest = await nextEventOnTarget(page, "html", "turbo:before-fetch-request")
+
+  expect(pageRequest.fetchOptions.headers["Turbo-Frame"]).toEqual(undefined)
+})
 
 test("doesn't include a turbo-frame header when the link is inside a turbo frame with a target=_top", async ({ page}) => {
   await goTo({ page, path: "/hover_to_prefetch.html" })