[BUGFIX]: morphdom v2.5.11 bump (#524)

phoenixframework · Jan 15, 2020 · 43b949d · 43b949d
1 parent 59ec6eb
commit 43b949d
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 8 deletions.
diff --git a/assets/package-lock.json b/assets/package-lock.json
diff --git a/assets/package.json b/assets/package.json
@@ -13,7 +13,7 @@
     "test.watch": "jest --watch"
   },
   "dependencies": {
-    "morphdom": "2.5.5",
+    "morphdom": "2.5.12",
     "phoenix_html": "file:../deps/phoenix_html"
   },
   "devDependencies": {

diff --git a/assets/test/view_test.js b/assets/test/view_test.js
@@ -3,7 +3,7 @@ import LiveSocket, {View, DOM} from '../js/phoenix_live_view'
 
 function liveViewDOM() {
   const div = document.createElement('div')
-  div.setAttribute('data-phx-view', '')
+  div.setAttribute('data-phx-view', 'User.Form')
   div.setAttribute('data-phx-session', 'abc123')
   div.setAttribute('id', 'container')
   div.setAttribute('class', 'user-implemented-class')
@@ -271,7 +271,7 @@ describe('View', function() {
     expect(view.parent).toBeUndefined()
     expect(view.el).toBe(el)
     expect(view.id).toEqual('container')
-    expect(view.view).toEqual('')
+    expect(view.view).toEqual('User.Form')
     expect(view.channel).toBeDefined()
     expect(view.loaderTimer).toBeDefined()
   })
@@ -290,6 +290,17 @@ describe('View', function() {
     expect(view.getSession()).toEqual('abc123')
   })
 
+  test('getStatic', async () => {
+    let liveSocket = new LiveSocket('/live', Socket)
+    let el = liveViewDOM()
+    let view = new View(el, liveSocket)
+    expect(view.getStatic()).toEqual(null)
+
+    el.setAttribute('data-phx-static', 'foo')
+    view = new View(el, liveSocket)
+    expect(view.getStatic()).toEqual('foo')
+  })
+
   test('showLoader and hideLoader', async () => {
     let liveSocket = new LiveSocket('/live', Socket)
     let el = document.querySelector('[data-phx-view]')
@@ -383,3 +394,68 @@ describe('View Hooks', function() {
     expect(upcaseWasDestroyed).toBe(true)
   })
 })
+
+function liveViewComponent() {
+  const div = document.createElement('div')
+  div.setAttribute('data-phx-view', 'User.Form')
+  div.setAttribute('data-phx-session', 'abc123')
+  div.setAttribute('id', 'container')
+  div.setAttribute('class', 'user-implemented-class')
+  div.innerHTML = `
+    <article class="form-wrapper" data-phx-component="0">
+      <form>
+        <label for="plus">Plus</label>
+        <input id="plus" value="1" name="increment" phx-target=".form-wrapper" />
+        <input type="checkbox" phx-click="toggle_me" phx-target=".form-wrapper" />
+        <button phx-click="inc_temperature">Inc Temperature</button>
+      </form>
+    </article>
+  `
+  return div
+}
+
+describe('View + Component', function() {
+  beforeEach(() => {
+    global.Phoenix = { Socket }
+    global.document.body.innerHTML = liveViewComponent().outerHTML
+  })
+
+  afterAll(() => {
+    global.document.body.innerHTML = ''
+  })
+
+  test('targetComponentID', async () => {
+    let liveSocket = new LiveSocket('/live', Socket)
+    let el = liveViewComponent()
+    let view = new View(el, liveSocket)
+    let form = el.querySelector('input[type="checkbox"]')
+    let targetCtx = el.querySelector('.form-wrapper')
+    expect(view.targetComponentID(el, targetCtx)).toBe(null)
+    expect(view.targetComponentID(form, targetCtx)).toBe(0)
+  })
+
+  test('pushEvent', function() {
+    expect.assertions(4)
+
+    let liveSocket = new LiveSocket('/live', Socket)
+    let el = liveViewComponent()
+    let targetCtx = el.querySelector('.form-wrapper')
+    let input = el.querySelector('input')
+
+    let view = new View(el, liveSocket)
+    let channelStub = {
+      push(evt, payload, timeout) {
+        expect(payload.type).toBe('keyup')
+        expect(payload.event).toBeDefined()
+        expect(payload.value).toEqual({"value": "1"})
+        expect(payload.cid).toEqual(0)
+        return {
+          receive() {}
+        }
+      }
+    }
+    view.channel = channelStub
+
+    view.pushEvent('keyup', input, targetCtx, "click", {})
+  })
+});
diff --git a/lib/phoenix_live_view/socket.ex b/lib/phoenix_live_view/socket.ex
@@ -55,7 +55,7 @@ defmodule Phoenix.LiveView.Socket do
             socket "/live", Phoenix.LiveView.Socket,
               websocket: [connect_info: [session: @session_options]]
 
-        4) Define the CSRF meta tag inside the in <head> in your layout:
+        4) Define the CSRF meta tag inside the `<head>` tag in your layout:
 
             <%= csrf_meta_tag() %>