test morph stream action events

hotwired · Mar 14, 2024 · f02bfb2 · f02bfb2
1 parent 276ee38
commit f02bfb2
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 23 deletions.
diff --git a/src/core/streams/actions/morph.js b/src/core/streams/actions/morph.js
@@ -4,21 +4,16 @@ import { dispatch } from "../../../util"
 export default function morph(streamElement) {
   const morphStyle = streamElement.hasAttribute("children-only") ? "innerHTML" : "outerHTML"
   streamElement.targetElements.forEach((element) => {
-    try {
-      Idiomorph.morph(element, streamElement.templateContent, {
-        morphStyle: morphStyle,
-        ignoreActiveValue: true,
-        callbacks: {
-          beforeNodeAdded,
-          beforeNodeMorphed,
-          beforeAttributeUpdated,
-          beforeNodeRemoved,
-          afterNodeMorphed,
-        },
-      })
-    } catch (e) {
-      console.error(e)
-    }
+    Idiomorph.morph(element, streamElement.templateContent, {
+      morphStyle: morphStyle,
+      callbacks: {
+        beforeNodeAdded,
+        beforeNodeMorphed,
+        beforeAttributeUpdated,
+        beforeNodeRemoved,
+        afterNodeMorphed
+      }
+    })
   })
 }
 
@@ -34,10 +29,10 @@ function beforeNodeMorphed(target, newElement) {
   if (target instanceof HTMLElement && !target.hasAttribute("data-turbo-permanent")) {
     const event = dispatch("turbo:before-morph-element", {
       cancelable: true,
+      target,
       detail: {
-        target,
-        newElement,
-      },
+        newElement
+      }
     })
     return !event.defaultPrevented
   }
@@ -50,8 +45,8 @@ function beforeAttributeUpdated(attributeName, target, mutationType) {
     target,
     detail: {
       attributeName,
-      mutationType,
-    },
+      mutationType
+    }
   })
   return !event.defaultPrevented
 }
@@ -61,8 +56,8 @@ function afterNodeMorphed(target, newElement) {
     dispatch("turbo:morph-element", {
       target,
       detail: {
-        newElement,
-      },
+        newElement
+      }
     })
   }
 }
diff --git a/src/core/streams/stream_actions.js b/src/core/streams/stream_actions.js
@@ -41,5 +41,5 @@ export const StreamActions = {
 
   morph() {
     morph(this)
-  },
+  }
 }
diff --git a/src/tests/fixtures/morph_stream_action.html b/src/tests/fixtures/morph_stream_action.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html id="html">
+  <head>
+    <meta charset="utf-8">
+    <title>Morph Stream Action</title>
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+    <script src="/src/tests/fixtures/test.js"></script>
+    <meta name="turbo-refresh-method" content="replace">
+  </head>
+
+  <body>
+    <div id="message_1">
+      <div>Morph me</div>
+    </div>
+  </body>
+</html>
diff --git a/src/tests/functional/morph_stream_action_tests.js b/src/tests/functional/morph_stream_action_tests.js
@@ -0,0 +1,48 @@
+import { test, expect } from "@playwright/test"
+import { nextEventOnTarget, noNextEventOnTarget } from "../helpers/page"
+
+test("dispatches a turbo:before-morph-element & turbo:morph-element for each morph stream action", async ({ page }) => {
+  await page.goto("/src/tests/fixtures/morph_stream_action.html")
+
+  await page.evaluate(() => {
+    window.Turbo.renderStreamMessage(`
+      <turbo-stream action="morph" target="message_1">
+        <template>
+          <div id="message_1">
+            <h1>Morphed</h1>
+          </div>
+        </template>
+      </turbo-stream>
+    `)
+  })
+
+  await nextEventOnTarget(page, "message_1", "turbo:before-morph-element")
+  await nextEventOnTarget(page, "message_1", "turbo:morph-element")
+  await expect(page.locator("#message_1")).toHaveText("Morphed")
+})
+
+test("preventing a turbo:before-morph-element prevents the morph", async ({ page }) => {
+  await page.goto("/src/tests/fixtures/morph_stream_action.html")
+
+  await page.evaluate(() => {
+    addEventListener("turbo:before-morph-element", (event) => {
+      event.preventDefault()
+    })
+  })
+
+  await page.evaluate(() => {
+    window.Turbo.renderStreamMessage(`
+      <turbo-stream action="morph" target="message_1">
+        <template>
+          <div id="message_1">
+            <h1>Morphed</h1>
+          </div>
+        </template>
+      </turbo-stream>
+    `)
+  })
+
+  await nextEventOnTarget(page, "message_1", "turbo:before-morph-element")
+  await noNextEventOnTarget(page, "message_1", "turbo:morph-element")
+  await expect(page.locator("#message_1")).toHaveText("Morph me")
+})
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,5 +41,5 @@ export const StreamActions = { @@
       morph() {
         morph(this)
-      },
+      }
     }