failing test to expose issue with turbo-frames changing.

src/tests/fixtures/frames.html

@@ -17,6 +17,8 @@
           target.closest("turbo-frame")?.setAttribute("refresh", "morph")
         } else if (target.id == "add-src-to-frame") {
           target.closest("turbo-frame")?.setAttribute("src", "/src/tests/fixtures/frames.html")
+        } else if (target.id == "change-frame-id-to-different-nested-child") {
+          target.closest("turbo-frame")?.setAttribute("id", "different-nested-child")
         }
       })
     </script>
@@ -90,6 +92,7 @@ <h2>Frames: #nested-root</h2>
         <h2>Frames: #nested-child</h2>
         <button id="add-refresh-morph-to-frame" type="button">Add [refresh="morph"] to #frame</button>
         <button id="add-src-to-frame" type="button">Add [src="/src/tests/fixtures/frames.html"] to #frame so it can be reloaded</button>
+        <button id="change-frame-id-to-different-nested-child" type="button">Change id to different-nested-child</button>
         <a href="/src/tests/fixtures/frames/frame.html">Load #nested-child</a>
         <a href="/src/tests/fixtures/one.html" data-turbo-frame="_top">Visit one.html</a>
 

src/tests/functional/frame_tests.js

@@ -306,7 +306,7 @@ test("calling reload on a frame[refresh=morph] morphs the contents", async ({ pa
   expect(await nextEventOnTarget(page, "frame", "turbo:before-frame-morph")).toBeTruthy()
 })
 
-test("calling reload on a frame[refresh=morph] reloads descendant frame[refresh=morph] with morphing", async ({ page }) => {
+test("calling reload on a frame[refresh=morph] reloads descendant frame[refresh=morph]s via reload() as well", async ({ page }) => {
   await page.click("#nested-root #add-refresh-morph-to-frame")
   await page.click("#nested-root #add-src-to-frame")
   await page.click("#nested-child #add-refresh-morph-to-frame")
@@ -321,6 +321,21 @@ test("calling reload on a frame[refresh=morph] reloads descendant frame[refresh=
   expect(await noNextEventOnTarget(page, "nested-child-navigate-top", "turbo:before-frame-morph")).toBeTruthy()
 })
 
+test("calling reload on a frame[refresh=morph] morphs descendant frame[refresh=morph] normally if the id no longer matches", async ({ page }) => {
+  await page.click("#nested-root #add-refresh-morph-to-frame")
+  await page.click("#nested-root #add-src-to-frame")
+  await page.click("#nested-child #add-refresh-morph-to-frame")
+  await page.click("#nested-child #add-src-to-frame")
+  await page.click("#nested-child #change-frame-id-to-different-nested-child")
+
+  await page.evaluate(() => document.getElementById("nested-root").reload())
+
+  expect(await nextEventOnTarget(page, "nested-root", "turbo:before-frame-morph")).toBeTruthy()
+  expect(await noNextEventOnTarget(page, "different-nested-child", "turbo:before-frame-morph")).toBeTruthy()
+  assert.ok(await hasSelector(page, "#nested-child"))
+  assert.notOk(await hasSelector(page, "#different-nested-child"))
+})
+
 test("calling reload on a frame[refresh=morph] preserves [data-turbo-permanent] elements", async ({ page }) => {
   await page.click("#add-src-to-frame")
   await page.click("#add-refresh-morph-to-frame")