expose morphing + data-turbo-permanent bug with failing test.

hotwired · Sep 11, 2024 · 3dc47bb · 3dc47bb
1 parent 7ae9546
commit 3dc47bb
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/src/tests/fixtures/permanent_children.html b/src/tests/fixtures/permanent_children.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="turbo-refresh-method" content="morph">
+    <meta name="turbo-refresh-scroll" content="preserve">
+
+    <title>Turbo</title>
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+    <script src="/src/tests/fixtures/test.js"></script>
+  </head>
+  <body>
+    <section>
+      <h1>Permanent children</h1>
+    </section>
+
+    <ul>
+      <li id="first-li">
+        <input id="first-checkbox" type="checkbox" data-turbo-permanent>
+        <label for="first-checkbox">First checkbox</label>
+      </li>
+      <li id="second-li">
+        <input id="second-checkbox" type="checkbox" data-turbo-permanent>
+        <label for="second-checkbox">Second checkbox</label>
+      </li>
+    </ul>
+
+    <form id="form" action="/__turbo/refresh" method="post" class="redirect">
+      <input type="hidden" name="path" value="/src/tests/fixtures/permanent_children.html">
+      <input type="hidden" name="sleep" value="50">
+      <input id="form-submit" type="submit" value="form[method=post]">
+    </form>
+
+  </body>
+</html>
+
diff --git a/src/tests/functional/page_refresh_tests.js b/src/tests/functional/page_refresh_tests.js
@@ -328,6 +328,28 @@ test("it preserves data-turbo-permanent elements that don't match when their ids
   await expect(page.locator("#preserve-me")).toHaveText("Preserve me, I have a family!")
 })
 
+test("it preserves data-turbo-permanent children", async ({ page }) => {
+  await page.goto("/src/tests/fixtures/permanent_children.html")
+
+  await page.evaluate(() => {
+    // simulate result of client-side drag-and-drop reordering
+    document.getElementById("first-li").before(document.getElementById("second-li"))
+
+    // set state of data-turbo-permanent checkbox
+    document.getElementById("second-checkbox").checked = true
+  })
+
+  // morph page back to original li ordering
+  await page.click("#form-submit")
+  await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })
+
+  // data-turbo-permanent checkbox should still be checked
+  assert.ok(
+    await hasSelector(page, "#second-checkbox:checked"),
+    "retains state of data-turbo-permanent child"
+  )
+})
+
 test("renders unprocessable entity responses with morphing", async ({ page }) => {
   await page.goto("/src/tests/fixtures/page_refresh.html")