Fix failing tests - account for the morph function now returning a promise (#2528)

* wip: fix failing tests - account for the morph function now returning a promise

* fix: failing tests

packages/morph/src/morph.js

@@ -25,7 +25,7 @@ export async function morph(from, toHtml, options) {
 
     await breakpoint()
 
-    patch(from, toEl)
+    await patch(from, toEl)
 
     return from
 }
@@ -195,7 +195,7 @@ async function patchChildren(from, to) {
 
                 await breakpoint('Add element (from key)')
             } else {
-                let added = addNodeTo(currentTo, from)
+                let added = addNodeTo(currentTo, from) || {}
 
                 await breakpoint('Add element: ' + added.outerHTML || added.nodeValue)
 
@@ -327,6 +327,8 @@ function addNodeTo(node, parent) {
 
         return clone
     }
+
+    return null;
 }
 
 function addNodeBefore(node, beforeMe) {

tests/jest/morph/external.spec.js

@@ -36,6 +36,6 @@ test('change attribute', () => assertPatch(
     `<div foo="baz">foo</div>`
 ))
 
-function assertPatch(before, after) {
-    expect(morph(createElement(before), after).outerHTML).toEqual(after)
+async function assertPatch(before, after) {
+    expect((await morph(createElement(before), after)).outerHTML).toEqual(after)
 }

tests/jest/morph/hooks.spec.js

@@ -1,22 +1,22 @@
 let { morph } = require('@alpinejs/morph')
 let createElement = require('./createElement.js')
 
-test('can use custom key name', () => {
+test('can use custom key name', async () => {
     let dom = createElement('<ul><li wire:key="2">bar</li></ul>')
 
     dom.querySelector('li').is_me = true
 
-    morph(dom, '<ul><li wire:key="1">foo</li><li wire:key="2">bar</li></ul>', {
+    await morph(dom, '<ul><li wire:key="1">foo</li><li wire:key="2">bar</li></ul>', {
         key(el) { return el.getAttribute('wire:key') }
     })
 
     expect(dom.querySelector('li:nth-of-type(2)').is_me).toBeTruthy()
 })
 
-test('can prevent update', () => {
+test('can prevent update', async () => {
     let dom = createElement('<div><span>foo</span></div>')
 
-    morph(dom, '<div><span>bar</span></div>', {
+    await morph(dom, '<div><span>bar</span></div>', {
         updating(from, to, childrenOnly, prevent) {
             if (from.textContent === 'foo') {
                 prevent()
@@ -27,10 +27,10 @@ test('can prevent update', () => {
     expect(dom.querySelector('span').textContent).toEqual('foo')
 })
 
-test('can prevent update, but still update children', () => {
+test('can prevent update, but still update children', async () => {
     let dom = createElement('<div><span foo="bar">foo</span></div>')
 
-    morph(dom, '<div><span foo="baz">bar</span></div>', {
+    await morph(dom, '<div><span foo="baz">bar</span></div>', {
         updating(from, to, childrenOnly, prevent) {
             if (from.textContent === 'foo') {
                 childrenOnly()
@@ -42,12 +42,12 @@ test('can prevent update, but still update children', () => {
     expect(dom.querySelector('span').getAttribute('foo')).toEqual('bar')
 })
 
-test('changing tag doesnt trigger an update (add and remove instead)', () => {
+test('changing tag doesnt trigger an update (add and remove instead)', async () => {
     let dom = createElement('<div><span>foo</span></div>')
 
     let updateHookCalledTimes = 0
 
-    morph(dom, '<div><h1>foo</h1></div>', {
+    await morph(dom, '<div><h1>foo</h1></div>', {
         updating(from, to, prevent) {
             updateHookCalledTimes++
         }
@@ -56,10 +56,10 @@ test('changing tag doesnt trigger an update (add and remove instead)', () => {
     expect(updateHookCalledTimes).toEqual(1)
 })
 
-test('can impact update', () => {
+test('can impact update', async () => {
     let dom = createElement('<div><span>foo</span></div>')
 
-    morph(dom, '<div><span>bar</span></div>', {
+    await morph(dom, '<div><span>bar</span></div>', {
         updated(from, to) {
             if (from.textContent === 'bar') {
                 from.textContent = 'baz'
@@ -70,13 +70,13 @@ test('can impact update', () => {
     expect(dom.querySelector('span').textContent).toEqual('baz')
 })
 
-test('updating and updated are sequential when element has child updates ', () => {
+test('updating and updated are sequential when element has child updates ', async () => {
     let dom = createElement('<div><span>foo</span></div>')
 
     let updatings = []
     let updateds = []
 
-    morph(dom, '<div><span>bar</span></div>', {
+    await morph(dom, '<div><span>bar</span></div>', {
         updating(from, to) {
             updatings.push(from.nodeName.toLowerCase())
         },
@@ -90,10 +90,10 @@ test('updating and updated are sequential when element has child updates ', () =
     expect(updateds).toEqual(['div', 'span', '#text'])
 })
 
-test('can prevent removal', () => {
+test('can prevent removal', async () => {
     let dom = createElement('<div><span>foo</span></div>')
 
-    morph(dom, '<div></div>', {
+    await morph(dom, '<div></div>', {
         removing(from, prevent) {
             prevent()
         }
@@ -102,12 +102,12 @@ test('can prevent removal', () => {
     expect(dom.querySelector('span')).toBeTruthy()
 })
 
-test('can impact removal', () => {
+test('can impact removal', async () => {
     let dom = createElement('<div><span>foo</span></div>')
 
     let textContent
 
-    morph(dom, '<div></div>', {
+    await morph(dom, '<div></div>', {
         removed(from) {
             textContent = from.textContent
         }
@@ -116,10 +116,10 @@ test('can impact removal', () => {
     expect(textContent).toEqual('foo')
 })
 
-test('can prevent removal for tag replacement', () => {
+test('can prevent removal for tag replacement', async () => {
     let dom = createElement('<div><span>foo</span></div>')
 
-    morph(dom, '<div><h1>foo</h1></div>', {
+    await morph(dom, '<div><h1>foo</h1></div>', {
         removing(from, prevent) {
             prevent()
         }
@@ -128,12 +128,12 @@ test('can prevent removal for tag replacement', () => {
     expect(dom.querySelector('span')).toBeTruthy()
 })
 
-test('can impact removal for tag replacement', () => {
+test('can impact removal for tag replacement', async () => {
     let dom = createElement('<div><span>foo</span></div>')
 
     let textContent
 
-    morph(dom, '<div><h1>foo</h1></div>', {
+    await morph(dom, '<div><h1>foo</h1></div>', {
         removed(from) {
             textContent = from.textContent
         }
@@ -142,10 +142,10 @@ test('can impact removal for tag replacement', () => {
     expect(textContent).toEqual('foo')
 })
 
-test('can prevent addition', () => {
+test('can prevent addition', async () => {
     let dom = createElement('<div></div>')
 
-    morph(dom, '<div><span>foo</span></div>', {
+    await morph(dom, '<div><span>foo</span></div>', {
         adding(to, prevent) {
             prevent()
         }
@@ -154,10 +154,10 @@ test('can prevent addition', () => {
     expect(dom.querySelector('span')).toBeFalsy()
 })
 
-test('can impact addition', () => {
+test('can impact addition', async () => {
     let dom = createElement('<div></div>')
 
-    morph(dom, '<div><span>foo</span></div>', {
+    await morph(dom, '<div><span>foo</span></div>', {
         added(to) {
             to.textContent = 'bar'
         }
@@ -166,10 +166,10 @@ test('can impact addition', () => {
     expect(dom.querySelector('span').textContent).toEqual('bar')
 })
 
-test('can prevent addition for tag replacement', () => {
+test('can prevent addition for tag replacement', async () => {
     let dom = createElement('<div><h1>foo</h1></div>')
 
-    morph(dom, '<div><span>foo</span></div>', {
+    await morph(dom, '<div><span>foo</span></div>', {
         adding(to, prevent) {
             prevent()
         }
@@ -178,10 +178,10 @@ test('can prevent addition for tag replacement', () => {
     expect(dom.querySelector('span')).toBeFalsy()
 })
 
-test('can impact addition for tag replacement', () => {
+test('can impact addition for tag replacement', async () => {
     let dom = createElement('<div><h1>foo</h1></div>')
 
-    morph(dom, '<div><span>foo</span></div>', {
+    await morph(dom, '<div><span>foo</span></div>', {
         added(to) {
             to.textContent = 'bar'
         }

tests/jest/morph/internal.spec.js

@@ -1,42 +1,42 @@
 let { morph } = require('@alpinejs/morph')
 let createElement = require('./createElement.js')
 
-test('changed element is the same element', () => {
+test('changed element is the same element', async () => {
     let dom = createElement('<div><span>foo</span></div>')
 
     dom.querySelector('span').is_me = true
 
-    morph(dom, '<div><span>bar</span></div>')
+    await morph(dom, '<div><span>bar</span></div>')
 
     expect(dom.querySelector('span').is_me).toBeTruthy()
 })
 
-test('non-keyed elements are replaced instead of moved', () => {
+test('non-keyed elements are replaced instead of moved', async () => {
     let dom = createElement('<ul><li>bar</li></ul>')
 
     dom.querySelector('li').is_me = true
 
-    morph(dom, '<ul><li>foo</li><li>bar</li></ul>')
+    await morph(dom, '<ul><li>foo</li><li>bar</li></ul>')
 
     expect(dom.querySelector('li:nth-of-type(1)').is_me).toBeTruthy()
 })
 
-test('keyed elements are moved instead of replaced', () => {
+test('keyed elements are moved instead of replaced', async () => {
     let dom = createElement('<ul><li key="2">bar</li></ul>')
 
     dom.querySelector('li').is_me = true
 
-    morph(dom, '<ul><li key="1">foo</li><li key="2">bar</li></ul>')
+    await morph(dom, '<ul><li key="1">foo</li><li key="2">bar</li></ul>')
 
     expect(dom.querySelector('li:nth-of-type(2)').is_me).toBeTruthy()
 })
 
-test('elements inserted into a list are properly tracked using lookahead inside updating hook instead of keys', () => {
+test('elements inserted into a list are properly tracked using lookahead inside updating hook instead of keys', async () => {
     let dom = createElement('<ul><li>bar</li></ul>')
 
     dom.querySelector('li').is_me = true
 
-    morph(dom, '<ul><li>foo</li><li>bar</li></ul>', {
+    await morph(dom, '<ul><li>foo</li><li>bar</li></ul>', {
         lookahead: true,
     })
 
@@ -44,7 +44,7 @@ test('elements inserted into a list are properly tracked using lookahead inside
     expect(dom.querySelector('li:nth-of-type(2)').is_me).toBeTruthy()
 })
 
-test('lookahead still works if comparison elements have keys', () => {
+test('lookahead still works if comparison elements have keys', async () => {
     let dom = createElement(`<ul>
 <li key="bar">bar</li>
 <li>hey</li>
@@ -53,7 +53,7 @@ test('lookahead still works if comparison elements have keys', () => {
     dom.querySelector('li:nth-of-type(1)').is_me = true
     dom.querySelector('li:nth-of-type(2)').is_me = true
 
-    morph(dom, `<ul>
+    await morph(dom, `<ul>
 <li key="foo">foo</li>
 <li key="bar">bar</li>
 <li>hey</li>
@@ -67,7 +67,7 @@ test('lookahead still works if comparison elements have keys', () => {
     expect(dom.querySelectorAll('li').length).toEqual(3)
 })
 
-test('baz', () => {
+test('baz', async () => {
     let dom = createElement(`<ul>
 <li key="bar">bar</li>
 
@@ -77,7 +77,7 @@ test('baz', () => {
     dom.querySelector('li:nth-of-type(1)').is_me = true
     dom.querySelector('li:nth-of-type(2)').is_me = true
 
-    morph(dom, `<ul>
+    await morph(dom, `<ul>
 <li>foo</li>
 
 <li key="bar">bar</li>
@@ -93,7 +93,7 @@ test('baz', () => {
     expect(dom.querySelectorAll('li').length).toEqual(3)
 })
 
-test('blah blah blah no lookahead', () => {
+test('blah blah blah no lookahead', async () => {
     let dom = createElement(`<ul>
 <li key="bar">bar</li>
 <li>hey</li>
@@ -101,7 +101,7 @@ test('blah blah blah no lookahead', () => {
 
     dom.querySelector('li:nth-of-type(1)').is_me = true
 
-    morph(dom, `<ul>
+    await morph(dom, `<ul>
 <li key="foo">foo</li>
 <li key="bar">bar</li>
 <li>hey</li>