zero-query 0.7.5 → 0.8.6

package/tests/core.test.js

@@ -356,11 +356,58 @@ describe('ZQueryCollection', () => {
       expect(col.html()).toBe('<b>bold</b>');
     });
 
+    it('html() auto-morphs when element has existing children', () => {
+      const main = document.querySelector('#main');
+      main.innerHTML = '<p id="preserved">old text</p>';
+      const ref = main.children[0];  // grab DOM reference
+      const col = queryAll('#main');
+      col.html('<p id="preserved">new text</p>');
+      // Same DOM node preserved — morph, not innerHTML replace
+      expect(main.children[0]).toBe(ref);
+      expect(main.children[0].textContent).toBe('new text');
+    });
+
+    it('html() uses innerHTML for empty elements (fast first-paint)', () => {
+      const main = document.querySelector('#main');
+      main.innerHTML = '';  // make it empty
+      const col = queryAll('#main');
+      col.html('<p id="fresh">hello</p>');
+      expect(main.innerHTML).toBe('<p id="fresh">hello</p>');
+    });
+
+    it('empty().html() forces raw innerHTML (opt-out of morph)', () => {
+      const main = document.querySelector('#main');
+      main.innerHTML = '<p id="old">will be destroyed</p>';
+      const ref = main.children[0];
+      const col = queryAll('#main');
+      col.empty().html('<p id="old">replaced</p>');
+      // NOT the same node — empty() cleared children, so html() used innerHTML
+      expect(main.children[0]).not.toBe(ref);
+      expect(main.children[0].textContent).toBe('replaced');
+    });
+
     it('text get/set', () => {
       const col = queryAll('.text').eq(0);
       col.text('Changed');
       expect(col.text()).toBe('Changed');
     });
+
+    it('morph() diffs content instead of replacing', () => {
+      const main = document.querySelector('#main');
+      main.innerHTML = '<p id="keep">old</p>';
+      const ref = main.children[0];
+      const col = queryAll('#main');
+      col.morph('<p id="keep">new</p>');
+      // Same DOM node preserved (morph, not innerHTML)
+      expect(main.children[0]).toBe(ref);
+      expect(main.children[0].textContent).toBe('new');
+    });
+
+    it('morph() is chainable', () => {
+      const col = queryAll('#main');
+      const ret = col.morph('<p>m</p>');
+      expect(ret).toBe(col);
+    });
   });
 
 
@@ -700,6 +747,210 @@ describe('CSS dimension methods', () => {
 });
 
 
+// ---------------------------------------------------------------------------
+// prop() method
+// ---------------------------------------------------------------------------
+
+describe('ZQueryCollection — prop()', () => {
+  it('gets a DOM property', () => {
+    document.body.innerHTML = '<input type="checkbox" checked>';
+    const col = queryAll('input');
+    expect(col.prop('checked')).toBe(true);
+  });
+
+  it('sets a DOM property', () => {
+    document.body.innerHTML = '<input type="checkbox">';
+    const col = queryAll('input');
+    col.prop('checked', true);
+    expect(col[0].checked).toBe(true);
+  });
+
+  it('sets multiple properties via sequential calls', () => {
+    document.body.innerHTML = '<input type="text">';
+    const col = queryAll('input');
+    col.prop('disabled', true);
+    col.prop('value', 'hello');
+    expect(col[0].disabled).toBe(true);
+    expect(col[0].value).toBe('hello');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// css() method
+// ---------------------------------------------------------------------------
+
+describe('ZQueryCollection — css()', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="styled">test</div>';
+  });
+
+  it('sets style properties from object', () => {
+    queryAll('#styled').css({ color: 'red', 'font-size': '16px' });
+    const el = document.getElementById('styled');
+    expect(el.style.color).toBe('red');
+  });
+
+  it('returns collection for chaining', () => {
+    const col = queryAll('#styled').css({ color: 'blue' });
+    expect(col).toBeInstanceOf(ZQueryCollection);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// val() method
+// ---------------------------------------------------------------------------
+
+describe('ZQueryCollection — val()', () => {
+  it('gets input value', () => {
+    document.body.innerHTML = '<input value="test">';
+    expect(queryAll('input').val()).toBe('test');
+  });
+
+  it('sets input value', () => {
+    document.body.innerHTML = '<input value="">';
+    queryAll('input').val('new value');
+    expect(document.querySelector('input').value).toBe('new value');
+  });
+
+  it('gets select value', () => {
+    document.body.innerHTML = '<select><option value="a" selected>A</option><option value="b">B</option></select>';
+    expect(queryAll('select').val()).toBe('a');
+  });
+
+  it('gets textarea value', () => {
+    document.body.innerHTML = '<textarea>hello</textarea>';
+    expect(queryAll('textarea').val()).toBe('hello');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// after(), before() methods
+// ---------------------------------------------------------------------------
+
+describe('ZQueryCollection — after() / before()', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="container"><p id="target">target</p></div>';
+  });
+
+  it('after() inserts content after element', () => {
+    queryAll('#target').after('<span class="after">after</span>');
+    const next = document.getElementById('target').nextElementSibling;
+    expect(next.className).toBe('after');
+  });
+
+  it('before() inserts content before element', () => {
+    queryAll('#target').before('<span class="before">before</span>');
+    const prev = document.getElementById('target').previousElementSibling;
+    expect(prev.className).toBe('before');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// wrap() method
+// ---------------------------------------------------------------------------
+
+describe('ZQueryCollection — wrap()', () => {
+  it('wraps element in new parent', () => {
+    document.body.innerHTML = '<div id="container"><p id="target">text</p></div>';
+    queryAll('#target').wrap('<div class="wrapper"></div>');
+    const wrapper = document.querySelector('.wrapper');
+    expect(wrapper).not.toBeNull();
+    expect(wrapper.querySelector('#target')).not.toBeNull();
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// replaceWith() method
+// ---------------------------------------------------------------------------
+
+describe('ZQueryCollection — replaceWith()', () => {
+  it('replaces element with new content', () => {
+    document.body.innerHTML = '<div id="container"><p id="old">old</p></div>';
+    queryAll('#old').replaceWith('<span id="new">new</span>');
+    expect(document.querySelector('#old')).toBeNull();
+    expect(document.querySelector('#new')).not.toBeNull();
+  });
+
+  it('auto-morphs when tag name matches (preserves identity)', () => {
+    document.body.innerHTML = '<div id="container"><p id="target" class="old">old text</p></div>';
+    const target = document.querySelector('#target');
+    queryAll('#target').replaceWith('<p id="target" class="new">new text</p>');
+    // Same DOM node — morphed, not replaced
+    expect(document.querySelector('#target')).toBe(target);
+    expect(target.className).toBe('new');
+    expect(target.textContent).toBe('new text');
+  });
+
+  it('replaces when tag name differs', () => {
+    document.body.innerHTML = '<div id="container"><p id="old">old</p></div>';
+    const oldRef = document.querySelector('#old');
+    queryAll('#old').replaceWith('<section id="replaced">new</section>');
+    expect(document.querySelector('#replaced')).not.toBe(oldRef);
+    expect(document.querySelector('#replaced').tagName).toBe('SECTION');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// offset() and position()
+// ---------------------------------------------------------------------------
+
+describe('ZQueryCollection — offset() / position()', () => {
+  it('offset() returns object with top and left', () => {
+    document.body.innerHTML = '<div id="box">box</div>';
+    const off = queryAll('#box').offset();
+    expect(off).toHaveProperty('top');
+    expect(off).toHaveProperty('left');
+    expect(typeof off.top).toBe('number');
+  });
+
+  it('position() returns object with top and left', () => {
+    document.body.innerHTML = '<div id="box">box</div>';
+    const pos = queryAll('#box').position();
+    expect(pos).toHaveProperty('top');
+    expect(pos).toHaveProperty('left');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// width() and height()
+// ---------------------------------------------------------------------------
+
+describe('ZQueryCollection — width() / height()', () => {
+  it('width() returns a number', () => {
+    document.body.innerHTML = '<div id="box" style="width:100px">box</div>';
+    const val = queryAll('#box').width();
+    expect(typeof val).toBe('number');
+  });
+
+  it('height() returns a number', () => {
+    document.body.innerHTML = '<div id="box" style="height:50px">box</div>';
+    const val = queryAll('#box').height();
+    expect(typeof val).toBe('number');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// animate()
+// ---------------------------------------------------------------------------
+
+describe('ZQueryCollection — animate()', () => {
+  it('returns a promise', () => {
+    document.body.innerHTML = '<div id="box">box</div>';
+    const result = queryAll('#box').animate({ opacity: 0 }, 100);
+    // animate() returns a Promise
+    expect(result).toBeInstanceOf(Promise);
+  });
+});
+
+
 // ---------------------------------------------------------------------------
 // hover() convenience
 // ---------------------------------------------------------------------------

package/tests/diff.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect, beforeEach } from 'vitest';
-import { morph } from '../src/diff.js';
+import { morph, morphElement } from '../src/diff.js';
 
 
 // ---------------------------------------------------------------------------
@@ -54,6 +54,32 @@ describe('morph — basic', () => {
     const root = morphAndGet('<p>hello</p>', '');
     expect(root.children.length).toBe(0);
   });
+
+  it('handles multiple appends at once', () => {
+    const root = morphAndGet('<p>a</p>', '<p>a</p><p>b</p><p>c</p><p>d</p>');
+    expect(root.children.length).toBe(4);
+  });
+
+  it('handles complete replacement of all children', () => {
+    const root = morphAndGet('<p>a</p><p>b</p>', '<span>x</span><span>y</span>');
+    expect(root.children[0].tagName).toBe('SPAN');
+    expect(root.children[1].tagName).toBe('SPAN');
+  });
+
+  it('handles single text node to multiple elements', () => {
+    const root = document.createElement('div');
+    root.textContent = 'hello';
+    morph(root, '<p>a</p><p>b</p>');
+    expect(root.children.length).toBe(2);
+  });
+
+  it('handles morphing identical content (no-op)', () => {
+    const root = el('<p>same</p>');
+    const child = root.children[0];
+    morph(root, '<p>same</p>');
+    expect(root.children[0]).toBe(child); // identity preserved
+    expect(root.innerHTML).toBe('<p>same</p>');
+  });
 });
 
 
@@ -76,6 +102,30 @@ describe('morph — attributes', () => {
     const root = morphAndGet('<div class="x" id="y"></div>', '<div class="x"></div>');
     expect(root.children[0].hasAttribute('id')).toBe(false);
   });
+
+  it('handles multiple attribute changes simultaneously', () => {
+    const root = morphAndGet(
+      '<div class="a" id="old" data-x="1"></div>',
+      '<div class="b" title="new" data-y="2"></div>'
+    );
+    const d = root.children[0];
+    expect(d.className).toBe('b');
+    expect(d.hasAttribute('id')).toBe(false);
+    expect(d.hasAttribute('data-x')).toBe(false);
+    expect(d.getAttribute('title')).toBe('new');
+    expect(d.getAttribute('data-y')).toBe('2');
+  });
+
+  it('preserves attributes that have not changed', () => {
+    const root = morphAndGet('<div class="keep" id="a"></div>', '<div class="keep" id="b"></div>');
+    expect(root.children[0].className).toBe('keep');
+    expect(root.children[0].id).toBe('b');
+  });
+
+  it('handles attribute with empty value', () => {
+    const root = morphAndGet('<div></div>', '<div hidden></div>');
+    expect(root.children[0].hasAttribute('hidden')).toBe(true);
+  });
 });
 
 
@@ -87,7 +137,6 @@ describe('morph — keyed', () => {
   it('matches elements by z-key', () => {
     const root = el('<div z-key="a">A</div><div z-key="b">B</div>');
     morph(root, '<div z-key="b">B-updated</div><div z-key="a">A-updated</div>');
-    // Keys should match — b first, then a
     const kids = [...root.children];
     expect(kids[0].getAttribute('z-key')).toBe('b');
     expect(kids[0].textContent).toBe('B-updated');
@@ -109,6 +158,47 @@ describe('morph — keyed', () => {
     expect(root.children.length).toBe(2);
     expect(root.children[1].getAttribute('z-key')).toBe('b');
   });
+
+  it('preserves keyed node identity on reorder', () => {
+    const root = el('<div z-key="a">A</div><div z-key="b">B</div><div z-key="c">C</div>');
+    const nodeA = root.children[0];
+    const nodeB = root.children[1];
+    const nodeC = root.children[2];
+    morph(root, '<div z-key="c">C</div><div z-key="a">A</div><div z-key="b">B</div>');
+    // Same DOM nodes, just reordered
+    expect(root.children[0]).toBe(nodeC);
+    expect(root.children[1]).toBe(nodeA);
+    expect(root.children[2]).toBe(nodeB);
+  });
+
+  it('handles mixed keyed and unkeyed nodes', () => {
+    const root = el('<div z-key="a">A</div><p>unkeyed</p><div z-key="b">B</div>');
+    morph(root, '<div z-key="b">B2</div><span>new-unkeyed</span><div z-key="a">A2</div>');
+    expect(root.children[0].getAttribute('z-key')).toBe('b');
+    expect(root.children[0].textContent).toBe('B2');
+    expect(root.children[2].getAttribute('z-key')).toBe('a');
+    expect(root.children[2].textContent).toBe('A2');
+  });
+
+  it('handles complete key set swap', () => {
+    const root = el('<div z-key="a">A</div><div z-key="b">B</div>');
+    morph(root, '<div z-key="c">C</div><div z-key="d">D</div>');
+    expect(root.children.length).toBe(2);
+    expect(root.children[0].getAttribute('z-key')).toBe('c');
+    expect(root.children[1].getAttribute('z-key')).toBe('d');
+  });
+
+  it('handles reverse order (worst case for naive diff)', () => {
+    const root = el(
+      '<div z-key="1">1</div><div z-key="2">2</div><div z-key="3">3</div>' +
+      '<div z-key="4">4</div><div z-key="5">5</div>'
+    );
+    morph(root,
+      '<div z-key="5">5</div><div z-key="4">4</div><div z-key="3">3</div>' +
+      '<div z-key="2">2</div><div z-key="1">1</div>'
+    );
+    expect([...root.children].map(c => c.getAttribute('z-key'))).toEqual(['5','4','3','2','1']);
+  });
 });
 
 
@@ -135,6 +225,27 @@ describe('morph — form elements', () => {
     morph(root, '<textarea>new</textarea>');
     expect(root.querySelector('textarea').value).toBe('new');
   });
+
+  it('syncs input disabled state', () => {
+    const root = el('<input>');
+    morph(root, '<input disabled>');
+    expect(root.querySelector('input').disabled).toBe(true);
+  });
+
+  it('syncs radio button', () => {
+    const root = el('<input type="radio" value="a">');
+    root.querySelector('input').checked = false;
+    morph(root, '<input type="radio" value="a" checked>');
+    expect(root.querySelector('input').checked).toBe(true);
+  });
+
+  it('syncs select element value', () => {
+    const root = el('<select><option value="a">A</option><option value="b">B</option></select>');
+    root.querySelector('select').value = 'a';
+    morph(root, '<select><option value="a">A</option><option value="b" selected>B</option></select>');
+    // Note: jsdom may handle selected differently, but the morph should attempt to sync
+    expect(root.querySelector('select')).toBeTruthy();
+  });
 });
 
 
@@ -149,6 +260,22 @@ describe('morph — text nodes', () => {
     morph(root, 'new');
     expect(root.textContent).toBe('new');
   });
+
+  it('handles multiple text nodes', () => {
+    const root = document.createElement('div');
+    root.appendChild(document.createTextNode('a'));
+    root.appendChild(document.createTextNode('b'));
+    morph(root, 'xy');
+    expect(root.textContent).toBe('xy');
+  });
+
+  it('handles comment nodes', () => {
+    const root = document.createElement('div');
+    root.appendChild(document.createComment('old comment'));
+    morph(root, '<!-- new comment -->');
+    expect(root.childNodes[0].nodeType).toBe(8); // Comment node
+    expect(root.childNodes[0].nodeValue).toBe(' new comment ');
+  });
 });
 
 
@@ -176,6 +303,25 @@ describe('morph — nested', () => {
     expect(root.querySelector('p').textContent).toBe('new text');
     expect(root.querySelector('span')).toBeNull();
   });
+
+  it('handles deeply nested changes (3 levels)', () => {
+    const root = morphAndGet(
+      '<div><div><div><span>deep</span></div></div></div>',
+      '<div><div><div><span>updated</span></div></div></div>'
+    );
+    expect(root.querySelector('span').textContent).toBe('updated');
+  });
+
+  it('handles nested list reorder with keys', () => {
+    const root = morphAndGet(
+      '<ul><li z-key="a">A</li><li z-key="b">B</li><li z-key="c">C</li></ul>',
+      '<ul><li z-key="c">C</li><li z-key="a">A</li><li z-key="b">B</li></ul>'
+    );
+    const items = root.querySelectorAll('li');
+    expect(items[0].getAttribute('z-key')).toBe('c');
+    expect(items[1].getAttribute('z-key')).toBe('a');
+    expect(items[2].getAttribute('z-key')).toBe('b');
+  });
 });
 
 
@@ -191,4 +337,189 @@ describe('morph — preservation', () => {
     expect(root.children[0]).toBe(firstP); // same DOM node
     expect(root.children[1].textContent).toBe('changed');
   });
+
+  it('preserves identity of deeply nested unchanged nodes', () => {
+    const root = el('<div><ul><li>item</li></ul></div>');
+    const li = root.querySelector('li');
+    morph(root, '<div><ul><li>item</li></ul></div>');
+    expect(root.querySelector('li')).toBe(li);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// z-skip directive
+// ---------------------------------------------------------------------------
+
+describe('morph — z-skip', () => {
+  it('skips subtrees with z-skip attribute', () => {
+    const root = el('<div z-skip><p>original</p></div>');
+    const p = root.querySelector('p');
+    morph(root, '<div z-skip><p>updated</p></div>');
+    // The inner content should NOT change because z-skip is set
+    expect(root.querySelector('p')).toBe(p);
+    expect(root.querySelector('p').textContent).toBe('original');
+  });
+
+  it('morphs sibling of z-skip normally', () => {
+    const root = el('<div z-skip><p>skip me</p></div><div><p>morph me</p></div>');
+    morph(root, '<div z-skip><p>different</p></div><div><p>morphed</p></div>');
+    expect(root.children[0].querySelector('p').textContent).toBe('skip me');
+    expect(root.children[1].querySelector('p').textContent).toBe('morphed');
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// isEqualNode fast bail-out
+// ---------------------------------------------------------------------------
+
+describe('morph — fast bail-out', () => {
+  it('uses isEqualNode to skip identical elements', () => {
+    const root = el('<div><p class="a" id="b">text</p></div>');
+    const p = root.querySelector('p');
+    morph(root, '<div><p class="a" id="b">text</p></div>');
+    // isEqualNode returns true, so the node should be kept
+    expect(root.querySelector('p')).toBe(p);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Edge cases & stress
+// ---------------------------------------------------------------------------
+
+describe('morph — edge cases', () => {
+  it('handles whitespace-only text nodes', () => {
+    const root = morphAndGet('<div>  </div>', '<div>text</div>');
+    expect(root.children[0].textContent).toBe('text');
+  });
+
+  it('handles node type change (text → element)', () => {
+    const root = document.createElement('div');
+    root.appendChild(document.createTextNode('text'));
+    morph(root, '<p>element</p>');
+    expect(root.children[0].tagName).toBe('P');
+  });
+
+  it('handles large number of children', () => {
+    const oldItems = Array.from({ length: 100 }, (_, i) => `<li>${i}</li>`).join('');
+    const newItems = Array.from({ length: 100 }, (_, i) => `<li>${i * 2}</li>`).join('');
+    const root = morphAndGet(`<ul>${oldItems}</ul>`, `<ul>${newItems}</ul>`);
+    expect(root.querySelectorAll('li').length).toBe(100);
+    expect(root.querySelectorAll('li')[50].textContent).toBe('100');
+  });
+
+  it('handles large keyed list shuffle', () => {
+    const ids = Array.from({ length: 50 }, (_, i) => i);
+    const shuffled = [...ids].sort(() => Math.random() - 0.5);
+    const oldHTML = ids.map(i => `<div z-key="${i}">${i}</div>`).join('');
+    const newHTML = shuffled.map(i => `<div z-key="${i}">${i}</div>`).join('');
+    const root = el(oldHTML);
+    morph(root, newHTML);
+    const result = [...root.children].map(c => c.getAttribute('z-key'));
+    expect(result).toEqual(shuffled.map(String));
+  });
+
+  it('handles empty string to empty string', () => {
+    const root = morphAndGet('', '');
+    expect(root.childNodes.length).toBe(0);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// Auto-keyed reconciliation (id / data-id / data-key)
+// ---------------------------------------------------------------------------
+
+describe('morph — auto-keyed via id attribute', () => {
+  it('reorders elements by id without z-key', () => {
+    const root = el(
+      '<div id="a">A</div><div id="b">B</div><div id="c">C</div>'
+    );
+    const refA = root.children[0];
+    const refB = root.children[1];
+    morph(root, '<div id="c">C</div><div id="a">A</div><div id="b">B</div>');
+    // Node identity preserved — same DOM nodes, different order
+    expect(root.children[1]).toBe(refA);
+    expect(root.children[2]).toBe(refB);
+    expect([...root.children].map(c => c.id)).toEqual(['c', 'a', 'b']);
+  });
+
+  it('reorders elements by data-id without z-key', () => {
+    const root = el(
+      '<li data-id="1">One</li><li data-id="2">Two</li><li data-id="3">Three</li>'
+    );
+    const ref1 = root.children[0];
+    morph(root, '<li data-id="3">Three</li><li data-id="1">One</li><li data-id="2">Two</li>');
+    expect(root.children[1]).toBe(ref1);
+    expect([...root.children].map(c => c.dataset.id)).toEqual(['3', '1', '2']);
+  });
+
+  it('reorders elements by data-key without z-key', () => {
+    const root = el(
+      '<span data-key="x">X</span><span data-key="y">Y</span>'
+    );
+    const refX = root.children[0];
+    morph(root, '<span data-key="y">Y</span><span data-key="x">X</span>');
+    expect(root.children[1]).toBe(refX);
+  });
+
+  it('removes auto-keyed elements not in new tree', () => {
+    const root = morphAndGet(
+      '<p id="a">A</p><p id="b">B</p><p id="c">C</p>',
+      '<p id="a">A</p><p id="c">C</p>'
+    );
+    expect(root.children.length).toBe(2);
+    expect([...root.children].map(c => c.id)).toEqual(['a', 'c']);
+  });
+
+  it('inserts new auto-keyed elements', () => {
+    const root = morphAndGet(
+      '<p id="a">A</p><p id="c">C</p>',
+      '<p id="a">A</p><p id="b">B</p><p id="c">C</p>'
+    );
+    expect(root.children.length).toBe(3);
+    expect([...root.children].map(c => c.id)).toEqual(['a', 'b', 'c']);
+  });
+});
+
+
+// ---------------------------------------------------------------------------
+// morphElement — single-element morph
+// ---------------------------------------------------------------------------
+
+describe('morphElement', () => {
+  it('morphs attributes and children, preserving identity', () => {
+    const root = el('<div class="old"><span>old</span></div>');
+    const target = root.children[0];
+    const result = morphElement(target, '<div class="new"><span>new</span></div>');
+    expect(result).toBe(target);  // same node
+    expect(target.className).toBe('new');
+    expect(target.children[0].textContent).toBe('new');
+  });
+
+  it('replaces element when tag name differs', () => {
+    const root = el('<div>old</div>');
+    const target = root.children[0];
+    const result = morphElement(target, '<section>new</section>');
+    expect(result).not.toBe(target);
+    expect(result.tagName).toBe('SECTION');
+    expect(result.textContent).toBe('new');
+    expect(root.children[0]).toBe(result);
+  });
+
+  it('returns original element when nothing changes', () => {
+    const root = el('<p class="x">same</p>');
+    const target = root.children[0];
+    const result = morphElement(target, '<p class="x">same</p>');
+    expect(result).toBe(target);
+  });
+
+  it('handles empty new HTML gracefully', () => {
+    const root = el('<div>content</div>');
+    const target = root.children[0];
+    const result = morphElement(target, '');
+    expect(result).toBe(target);  // no-op on empty
+  });
 });