add test for blocking: true

assets/js/phoenix_live_view/js.js

@@ -61,7 +61,7 @@ let JS = {
       const promise = new Promise((resolve, _reject) => {
         detail.done = resolve
       })
-      liveSocket.asyncTransition(promise)
+      view.liveSocket.asyncTransition(promise)
     }
     DOM.dispatchEvent(el, event, {detail, bubbles})
   },

assets/test/js_test.js

@@ -376,6 +376,29 @@ describe("JS", () => {
 
       JS.exec(event, "close", close.getAttribute("phx-click"), view, close)
     })
+
+    test("blocking blocks DOM updates until done", done => {
+      let view = setupView(`
+      <div id="modal">modal</div>
+      <div id="click" phx-click='[["dispatch", {"to": "#modal", "event": "custom", "blocking": true}]]'></div>
+      `)
+      let modal = simulateVisibility(document.querySelector("#modal"))
+      let click = document.querySelector("#click")
+      let doneCalled = false
+
+      modal.addEventListener("custom", (e) => {
+        expect(e.detail).toEqual({done: expect.any(Function), dispatcher: click})
+        expect(view.liveSocket.transitions.size()).toBe(1)
+        view.liveSocket.requestDOMUpdate(() => {
+          expect(doneCalled).toBe(true)
+          done()
+        })
+        // now we unblock the transition
+        e.detail.done()
+        doneCalled = true
+      })
+      JS.exec(event, "click", click.getAttribute("phx-click"), view, click)
+    })
   })
 
   describe("exec_add_class and exec_remove_class", () => {