Add Morph test for swapping keyed elements (#2734)

* Add test to cover functionality

* Update debugging comment

Co-authored-by: Caleb Porzio <calebporzio@gmail.com>

packages/morph/src/morph.js

@@ -271,7 +271,7 @@ async function patchChildren(from, to) {
                     currentFrom = dom(currentFrom).next()
                     currentTo = dom(currentTo).next()
 
-                    await breakpoint('I dont even know what this does')
+                    await breakpoint('Swap elements with keys')
 
                     continue
                 }

tests/cypress/integration/plugins/morph.spec.js

@@ -1,4 +1,4 @@
-import { haveLength, haveText, haveValue, haveHtml, html, test } from '../../utils'
+import { haveAttribute, haveLength, haveText, haveValue, haveHtml, html, test } from '../../utils'
 
 test('can morph components and preserve Alpine state',
     [html`
@@ -287,6 +287,27 @@ test('can morph with added element before and siblings are different',
     },
 )
 
+test('can morph using different keys',
+    [html`
+        <ul>
+            <li key="1">foo</li>
+        </ul>
+    `],
+    ({ get }, reload, window, document) => {
+        let toHtml = html`
+            <ul>
+                <li key="2">bar</li>
+            </ul>
+        `
+
+        get('ul').then(([el]) => window.Alpine.morph(el, toHtml))
+
+        get('li').should(haveLength(1))
+        get('li:nth-of-type(1)').should(haveText('bar'))
+        get('li:nth-of-type(1)').should(haveAttribute('key', '2'))
+    },
+)
+
 test('can morph different inline nodes',
     [html`
     <div id="from">
@@ -304,4 +325,4 @@ test('can morph different inline nodes',
 
         get('div').should(haveHtml('\n            Welcome <b>Person</b>!\n        '))
     },
-)
+)