Finish frame tests

hotwired · Feb 19, 2024 · 51b4d6e · 51b4d6e
1 parent a049125
commit 51b4d6e
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 16 deletions.
diff --git a/src/tests/fixtures/frame_refresh_morph.html b/src/tests/fixtures/frame_refresh_morph.html
@@ -1,3 +1,4 @@
 <turbo-frame id="refresh-morph">
   <h2>Loaded morphed frame</h2>
+  <h3>Does not change</h3>
 </turbo-frame>
diff --git a/src/tests/fixtures/frame_refresh_reload.html b/src/tests/fixtures/frame_refresh_reload.html
@@ -1,3 +1,4 @@
 <turbo-frame id="refresh-reload">
   <h2>Loaded reloadable frame</h2>
+  <h3>Does not change</h3>
 </turbo-frame>
diff --git a/src/tests/fixtures/frames.html b/src/tests/fixtures/frames.html
@@ -13,6 +13,8 @@
           document.getElementById("hello").removeAttribute("target")
         } else if (target.id == "add-refresh-morph-to-frame") {
           target.closest("turbo-frame")?.setAttribute("refresh", "morph")
+        } else if (target.id == "add-refresh-morph-to-refreshing-frame") {
+          document.getElementById("refresh-reload")?.setAttribute("refresh", "morph")
         }
       })
     </script>
@@ -67,6 +69,13 @@ <h2>Frames: #hello</h2>
 
     <a id="link-hello-advance" href="/src/tests/fixtures/frames/hello.html" data-turbo-frame="hello" data-turbo-action="advance">advance #hello</a>
 
+    <turbo-frame id="refresh-reload" src="/src/tests/fixtures/frame_refresh_reload.html" refresh="reload">
+      <h2>Frames: #refresh-reload</h2>
+      <h3>Does not change</h3>
+    </turbo-frame>
+
+    <button id="add-refresh-morph-to-refreshing-frame" type="button">Add [refresh="morph"] to #refresh-reload frame</button>
+
     <turbo-frame id="nested-root" target="frame">
       <h2>Frames: #nested-root</h2>
       <a id="inner-outer-frame-link" href="/src/tests/fixtures/frames/frame.html" data-turbo-frame="nested-child">Inner/Outer frame link</a>

diff --git a/src/tests/fixtures/page_refresh.html b/src/tests/fixtures/page_refresh.html
@@ -76,10 +76,12 @@ <h1 id="title">Page to be refreshed</h1>
 
     <turbo-frame id="refresh-morph" src="/src/tests/fixtures/frame_refresh_morph.html" refresh="morph">
       <h2>Frame to be morphed</h2>
+      <h3>Does not change</h3>
     </turbo-frame>
 
     <turbo-frame id="refresh-reload" src="/src/tests/fixtures/frame_refresh_reload.html" refresh="reload">
       <h2>Frame to be reloaded</h2>
+      <h3>Does not change</h3>
     </turbo-frame>
 
     <div id="preserve-me" data-turbo-permanent>

diff --git a/src/tests/functional/frame_tests.js b/src/tests/functional/frame_tests.js
@@ -286,7 +286,7 @@ test("following a link within a frame with a target set navigates the target fra
   assert.equal(frameText, "Frame: Loaded")
 })
 
-test("navigating turbo-frame from within updates the contents", async ({ page }) => {
+test("navigating turbo-frame from within replaces the contents", async ({ page }) => {
   await page.click("#link-frame")
   await nextBeat()
 
@@ -305,6 +305,20 @@ test("navigating turbo-frame[refresh=morph] from within morphs the contents", as
   assert.equal(frameText, "Frame: Loaded")
 })
 
+test("calling reload on a frame replaces the contents", async ({ page }) => {
+  await page.evaluate(() => document.getElementById("refresh-reload").reload())
+  expect(await noNextEventOnTarget(page, "refresh-reload", "turbo:before-frame-morph")).toBeTruthy()
+  await expect(page.locator("#refresh-reload h2")).toHaveText("Loaded reloadable frame")
+})
+
+test("calling reload on a frame[refresh=morph] morphs the contents", async ({ page }) => {
+  await page.click("#add-refresh-morph-to-refreshing-frame")
+
+  await page.evaluate(() => document.getElementById("refresh-reload").reload())
+  expect(await nextEventOnTarget(page, "refresh-reload", "turbo:before-frame-morph")).toBeTruthy()
+  await expect(page.locator("#refresh-reload h2")).toHaveText("Loaded reloadable frame")
+})
+
 test("following a link in rapid succession cancels the previous request", async ({ page }) => {
   await page.click("#outside-frame-form")
   await page.click("#outer-frame-link")

diff --git a/src/tests/functional/page_refresh_tests.js b/src/tests/functional/page_refresh_tests.js
@@ -142,7 +142,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 with refresh='morph' when full page is morphed", async ({ page }) => {
+test("uses morphing to update remote frames marked with refresh='morph'", async ({ page }) => {
   await page.goto("/src/tests/fixtures/page_refresh.html")
 
   await page.click("#form-submit")
@@ -159,20 +159,6 @@ test("uses morphing to update remote frames marked with refresh='morph' when ful
   await expect(page.locator("#refresh-reload")).toHaveText("Loaded reloadable frame")
 })
 
-test("uses morphing to update remote frames marked with refresh='morph' when explicit reload is called on the frame", async ({ page }) => {
-  await page.goto("/src/tests/fixtures/page_refresh.html")
-
-  // The frame marked with refresh="morph" uses morphing
-  await page.evaluate(() => document.getElementById("refresh-morph").reload())
-  expect(await nextEventOnTarget(page, "refresh-morph", "turbo:before-frame-morph")).toBeTruthy()
-  await expect(page.locator("#refresh-morph")).toHaveText("Loaded morphed frame")
-
-  // The frame without morph does not
-  await page.evaluate(() => document.getElementById("refresh-reload").reload())
-  expect(await noNextEventOnTarget(page, "refresh-reload", "turbo:before-frame-morph")).toBeTruthy()
-  await expect(page.locator("#refresh-reload")).toHaveText("Loaded reloadable frame")
-})
-
 test("don't refresh frames contained in [data-turbo-permanent] elements", async ({ page }) => {
   await page.goto("/src/tests/fixtures/page_refresh.html")