test morph stream action events

omarluq · omarluq · commit 9601ff3dcd71 · 2024-03-12T23:00:36.000-05:00
diff --git a/src/core/streams/actions/morph.js b/src/core/streams/actions/morph.js
@@ -7,14 +7,13 @@ export default function morph(streamElement) {
     try {
       Idiomorph.morph(element, streamElement.templateContent, {
         morphStyle: morphStyle,
-        ignoreActiveValue: true,
         callbacks: {
           beforeNodeAdded,
           beforeNodeMorphed,
           beforeAttributeUpdated,
           beforeNodeRemoved,
-          afterNodeMorphed,
-        },
+          afterNodeMorphed
+        }
       })
     } catch (e) {
       console.error(e)
@@ -34,10 +33,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 +49,8 @@ function beforeAttributeUpdated(attributeName, target, mutationType) {
     target,
     detail: {
       attributeName,
-      mutationType,
-    },
+      mutationType
+    }
   })
   return !event.defaultPrevented
 }
@@ -61,8 +60,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,49 @@
+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 number	Diff line change
`@@ -41,5 +41,5 @@ export const StreamActions = {`
`41`	`41`
`42`	`42`	`morph() {`
`43`	`43`	`morph(this)`
`44`		`- },`
	`44`	`+ }`
`45`	`45`	`}`