passing e2e test

launchscout · Sep 18, 2024 · ca97323 · ca97323
1 parent c149134
commit ca97323
Show file tree

Hide file tree

Showing 12 changed files with 699 additions and 144 deletions.
diff --git a/assets/js/phoenix_live_view/dom_patch.js b/assets/js/phoenix_live_view/dom_patch.js
@@ -15,6 +15,7 @@ import {
   PHX_STREAM_REF,
   PHX_VIEWPORT_TOP,
   PHX_VIEWPORT_BOTTOM,
+  PHX_CUSTOM_EVENTS,
 } from "./constants"
 
 import {
@@ -96,6 +97,7 @@ export default class DOMPatch {
     let phxViewportTop = liveSocket.binding(PHX_VIEWPORT_TOP)
     let phxViewportBottom = liveSocket.binding(PHX_VIEWPORT_BOTTOM)
     let phxTriggerExternal = liveSocket.binding(PHX_TRIGGER_ACTION)
+    let phxCustomEvents = liveSocket.binding(PHX_CUSTOM_EVENTS)
     let added = []
     let updates = []
     let appendPrependUpdates = []
@@ -136,7 +138,7 @@ export default class DOMPatch {
           }
         },
         onBeforeNodeAdded: (el) => {
-          DOM.maybeAddPrivateHooks(el, phxViewportTop, phxViewportBottom)
+          DOM.maybeAddPrivateHooks(el, phxViewportTop, phxViewportBottom, phxCustomEvents)
           this.trackBefore("added", el)
 
           let morphedEl = el
@@ -189,7 +191,7 @@ export default class DOMPatch {
         },
         onBeforeElUpdated: (fromEl, toEl) => {
           DOM.syncPendingAttrs(fromEl, toEl)
-          DOM.maybeAddPrivateHooks(toEl, phxViewportTop, phxViewportBottom)
+          DOM.maybeAddPrivateHooks(toEl, phxViewportTop, phxViewportBottom, phxCustomEvents)
           DOM.cleanChildNodes(toEl, phxUpdate)
           if(this.skipCIDSibling(toEl)){
             // if this is a live component used in a stream, we may need to reorder it

diff --git a/assets/js/phoenix_live_view/view.js b/assets/js/phoenix_live_view/view.js
@@ -402,15 +402,6 @@ export default class View {
         this.maybeMounted(el)
       }
     })
-    DOM.all(parent, `[${this.binding(PHX_CUSTOM_EVENTS)}]`, el => {
-      if(this.ownsElement(el)){
-        this.bindCustomEvents(el);
-      }
-    });
-  }
-
-  bindCustomEvents(el) {
-
   }
 
   applyJoinPatch(live_patch, html, streams, events){

diff --git a/assets/test/view_test.js b/assets/test/view_test.js
@@ -754,6 +754,44 @@ describe("View", function(){
   })
 })
 
+describe("Custom Event Hook", function() {
+  beforeEach(() => {
+    global.document.body.innerHTML = liveViewDOM().outerHTML
+  })
+
+  afterAll(() => {
+    global.document.body.innerHTML = ""
+  })
+
+  test("custom event hook gets added", async () => {
+    let liveSocket = new LiveSocket("/live", Socket, {})
+    let el = liveViewDOM()
+
+    let view = simulateJoinedView(el, liveSocket)
+    let channelStub = {
+      push(_evt, payload, _timeout){
+        expect(payload.event).toEqual("my_event")
+        expect(payload.value).toEqual({"value": "2"})
+        return {
+          receive(){ return this }
+        }
+      }
+    }
+
+    view.channel = channelStub
+
+    view.onJoin({
+      rendered: {
+        s: ["<div id=\"one\" phx-custom-events=\"my_event\"></div>"],
+        fingerprint: 123
+      },
+      liveview_version: require("../package.json").version
+    })
+
+    expect(view.el.outerHTML).toContain("Phoenix.CustomEvent")
+  });
+
+});
 describe("View Hooks", function(){
   beforeEach(() => {
     global.document.body.innerHTML = liveViewDOM().outerHTML