Don't refresh automatically turbo-frames that descend from a [data-tu…

…rbo-permanent] element

Since we are now reloading all the remote frames in the page, we need to make sure we ignore
those that are contained in elements to be preserved.

src/core/drive/morph_renderer.js

@@ -87,6 +87,8 @@ export class MorphRenderer extends Renderer {
   }
 
   #remoteFrames() {
-    return document.querySelectorAll("turbo-frame[src]")
+    return Array.from(document.querySelectorAll('turbo-frame[src]')).filter(frame => {
+      return !frame.closest('[data-turbo-permanent]')
+    })
   }
 }

src/tests/fixtures/page_refresh.html

@@ -30,6 +30,10 @@ <h2>Frame to be morphed</h2>
 
     <div id="preserve-me" data-turbo-permanent>
       Preserve me!
+
+      <turbo-frame id="remote-permanent-frame" src="/src/tests/fixtures/remote_permanent_frame.html">
+        <h2>Frame to be preserved</h2>
+      </turbo-frame>
     </div>
 
     <div id="stimulus-controller" data-controller="test">

src/tests/fixtures/remote_permanent_frame.html

@@ -0,0 +1,3 @@
+<turbo-frame id="remote-permanent-frame">
+  <h2>Loaded permanent frame</h2>
+</turbo-frame>

src/tests/functional/page_refresh_tests.js

@@ -4,6 +4,7 @@ import {
   nextBeat,
   nextEventNamed,
   nextEventOnTarget,
+  noNextEventOnTarget,
   noNextEventNamed
 } from "../helpers/page"
 
@@ -30,7 +31,7 @@ test("doesn't morph when the navigation doesn't go to the same URL", async ({ pa
   expect(await noNextEventNamed(page, "turbo:render", { renderMethod: "morph" })).toBeTruthy()
 })
 
-test("uses morphing to update remote frames marked", async ({ page }) => {
+test("uses morphing to update remote frames", async ({ page }) => {
   await page.goto("/src/tests/fixtures/page_refresh.html")
 
   await page.click("#form-submit")
@@ -42,6 +43,17 @@ test("uses morphing to update remote frames marked", async ({ page }) => {
   await expect(page.locator("#remote-frame")).toHaveText("Loaded morphed frame")
 })
 
+test("don't refresh frames contained in [data-turbo-permanent] elements", async ({ page }) => {
+  await page.goto("/src/tests/fixtures/page_refresh.html")
+
+  await page.click("#form-submit")
+  await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })
+  await nextBeat()
+
+  // Only the frame marked with refresh="morph" uses morphing
+  expect(await noNextEventOnTarget(page, "refresh-reload", "turbo:before-frame-morph")).toBeTruthy()
+})
+
 test("frames marked with refresh='morph' are excluded from full page morphing", async ({ page }) => {
   await page.goto("/src/tests/fixtures/page_refresh.html")