neo.mjs 10.0.0-beta.6 → 10.0.0

package/src/util/vdom/TreeBuilder.mjs

@@ -24,40 +24,43 @@ class TreeBuilder extends Base {
     }
 
     /**
-     * Copies a given vdom tree and replaces child component references with the vdom of their matching components
-     * @param {Object} vdom
-     * @param {Number} [depth=-1]
-     *     The component replacement depth.
-     *     -1 will parse the full tree, 1 top level only, 2 include children, 3 include grandchildren
-     * @param {Set<String>|null} [mergedChildIds=null] A set of component IDs to selectively expand.
+     * Private helper to recursively build a tree, abstracting the child node key.
+     * @param {Object} node The vdom or vnode to process.
+     * @param {Number} depth The current recursion depth.
+     * @param {Set<String>|null} mergedChildIds A set of component IDs to selectively expand.
+     * @param {String} childKey The property name for child nodes ('cn' or 'childNodes').
      * @returns {Object}
+     * @private
      */
-    getVdomTree(vdom, depth = -1, mergedChildIds = null) {
-        if (!Neo.isObject(vdom)) {
-            return vdom
+    #buildTree(node, depth, mergedChildIds, childKey) {
+        // We can not use Neo.isObject() here, since inside unit-test scenarios, we will import vdom.Helper into main threads.
+        // Inside this scenario, Neo.isObject() returns false for VNode instances
+        if (typeof node !== 'object' || node === null) {
+            return node
         }
 
-        let output = {...vdom}; // Shallow copy
+        let output = {...node}; // Shallow copy
 
-        if (vdom.cn) {
-            output.cn = [];
+        if (node[childKey]) {
+            output[childKey] = [];
 
-            vdom.cn.forEach(item => {
+            node[childKey].forEach(item => {
                 let currentItem = item,
                     childDepth;
 
                 if (currentItem.componentId) {
                     // Prune the branch only if we are at the boundary AND the child is not part of a merged update
                     if (depth === 1 && !mergedChildIds?.has(currentItem.componentId)) {
-                        output.cn.push({componentId: 'neo-ignore', id: item.id || item.componentId});
-                        // Stop processing this branch
-                        return
+                        output[childKey].push({componentId: 'neo-ignore', id: item.id || item.componentId});
+                        return // Stop processing this branch
                     }
                     // Expand the branch if it's part of a merged update, or if the depth requires it
                     else if (depth > 1 || depth === -1 || mergedChildIds?.has(currentItem.componentId)) {
                         const component = ComponentManager.get(currentItem.componentId);
-                        if (component?.vdom) {
-                            currentItem = component.vdom
+                        // Use the correct tree type based on the childKey
+                        const componentTree = childKey === 'cn' ? component?.vdom : component?.vnode;
+                        if (componentTree) {
+                            currentItem = componentTree
                         }
                     }
                 }
@@ -68,61 +71,34 @@ class TreeBuilder extends Base {
                     childDepth = depth
                 }
 
-                output.cn.push(this.getVdomTree(currentItem, childDepth, mergedChildIds))
+                output[childKey].push(this.#buildTree(currentItem, childDepth, mergedChildIds, childKey))
             })
         }
 
         return output
     }
 
+
     /**
-     * Copies a given vnode tree and replaces child component references with the vnode of their matching components
-     * @param {Object} vnode
+     * Copies a given vdom tree and replaces child component references with their vdom.
+     * @param {Object} vdom
      * @param {Number} [depth=-1]
-     *     The component replacement depth.
-     *     -1 will parse the full tree, 1 top level only, 2 include children, 3 include grandchildren
-     * @param {Set<String>|null} [mergedChildIds=null] A set of component IDs to selectively expand.
+     * @param {Set<String>|null} [mergedChildIds=null]
      * @returns {Object}
      */
-    getVnodeTree(vnode, depth = -1, mergedChildIds = null) {
-        let output = {...vnode}; // Shallow copy
-
-        if (vnode.childNodes) {
-            output.childNodes = [];
-
-            vnode.childNodes.forEach(item => {
-                let currentItem = item,
-                    childDepth, component;
-
-                if (currentItem.componentId) {
-                    // Prune the branch only if we are at the boundary AND the child is not part of a merged update
-                    if (depth === 1 && !mergedChildIds?.has(currentItem.componentId)) {
-                        output.childNodes.push({componentId: 'neo-ignore', id: item.id || item.componentId});
-                        // Stop processing this branch
-                        return
-                    }
-                    // Expand the branch if it's part of a merged update, or if the depth requires it
-                    else if (depth > 1 || depth === -1 || mergedChildIds?.has(currentItem.componentId)) {
-                        component = ComponentManager.get(currentItem.componentId);
-
-                        // Keep references in case there is no vnode (e.g. component not mounted yet)
-                        if (component?.vnode) {
-                            currentItem = component.vnode
-                        }
-                    }
-                }
-
-                if (item.componentId) {
-                    childDepth = (depth === -1) ? -1 : Math.max(0, depth - 1)
-                } else {
-                    childDepth = depth
-                }
-
-                output.childNodes.push(this.getVnodeTree(currentItem, childDepth, mergedChildIds))
-            })
-        }
+    getVdomTree(vdom, depth=-1, mergedChildIds=null) {
+        return this.#buildTree(vdom, depth, mergedChildIds, 'cn')
+    }
 
-        return output
+    /**
+     * Copies a given vnode tree and replaces child component references with their vnode.
+     * @param {Object} vnode
+     * @param {Number} [depth=-1]
+     * @param {Set<String>|null} [mergedChildIds=null]
+     * @returns {Object}
+     */
+    getVnodeTree(vnode, depth=-1, mergedChildIds=null) {
+        return this.#buildTree(vnode, depth, mergedChildIds, 'childNodes')
     }
 }
 

package/src/worker/mixin/RemoteMethodAccess.mjs

@@ -10,12 +10,7 @@ class RemoteMethodAccess extends Base {
          * @member {String} className='Neo.worker.mixin.RemoteMethodAccess'
          * @protected
          */
-        className: 'Neo.worker.mixin.RemoteMethodAccess',
-        /**
-         * @member {Boolean} mixin=true
-         * @protected
-         */
-        mixin: true
+        className: 'Neo.worker.mixin.RemoteMethodAccess'
     }
 
     /**

package/test/siesta/siesta.js

@@ -70,9 +70,21 @@ project.plan(
                 'tests/vdom/table/Container.mjs'
             ]
         },
-        'tests/vdom/Advanced.mjs',
-        'tests/vdom/VdomAsymmetricUpdates.mjs',
-        'tests/vdom/VdomRealWorldUpdates.mjs']
+            'tests/vdom/Advanced.mjs',
+            'tests/vdom/VdomAsymmetricUpdates.mjs',
+            'tests/vdom/VdomRealWorldUpdates.mjs']
+    },
+    {
+        group: 'functional',
+        items: [
+            'tests/functional/Button.mjs'
+        ]
+    },
+    {
+        group: 'classic',
+        items: [
+            'tests/classic/Button.mjs'
+        ]
     }
 );
 

package/test/siesta/tests/VdomCalendar.mjs

@@ -1,15 +1,15 @@
-import Neo        from '../../../src/Neo.mjs';
-import * as core  from '../../../src/core/_export.mjs';
-import NeoArray   from '../../../src/util/Array.mjs';
-import Style      from '../../../src/util/Style.mjs';
-import VdomHelper from '../../../src/vdom/Helper.mjs';
-import VDomUtil   from '../../../src/util/VDom.mjs';
+import Neo             from '../../../src/Neo.mjs';
+import * as core       from '../../../src/core/_export.mjs';
+import NeoArray        from '../../../src/util/Array.mjs';
+import Style           from '../../../src/util/Style.mjs';
+import StringFromVnode from '../../../src/vdom/util/StringFromVnode.mjs';
+import VdomHelper      from '../../../src/vdom/Helper.mjs';
+import VDomUtil        from '../../../src/util/VDom.mjs';
 
 let deltas, output, vdom, vnode;
 
 // tests are designed for this rendering mode
 Neo.config.useDomApiRenderer = false;
-VdomHelper.onNeoConfigChange({useDomApiRenderer: false})
 
 StartTest(t => {
     t.it('Week view: Infinite Scrolling', t => {

package/test/siesta/tests/VdomHelper.mjs

@@ -1,13 +1,13 @@
-import Neo        from '../../../src/Neo.mjs';
-import * as core  from '../../../src/core/_export.mjs';
-import NeoArray   from '../../../src/util/Array.mjs';
-import Style      from '../../../src/util/Style.mjs';
-import VdomHelper from '../../../src/vdom/Helper.mjs';
-import VDomUtil   from '../../../src/util/VDom.mjs';
+import Neo             from '../../../src/Neo.mjs';
+import * as core       from '../../../src/core/_export.mjs';
+import NeoArray        from '../../../src/util/Array.mjs';
+import Style           from '../../../src/util/Style.mjs';
+import StringFromVnode from '../../../src/vdom/util/StringFromVnode.mjs';
+import VdomHelper      from '../../../src/vdom/Helper.mjs';
+import VDomUtil        from '../../../src/util/VDom.mjs';
 
 // tests are designed for this rendering mode
 Neo.config.useDomApiRenderer = false;
-VdomHelper.onNeoConfigChange({useDomApiRenderer: false})
 
 let deltas, output, tmp, vdom, vnode;
 

package/test/siesta/tests/classic/Button.mjs

@@ -0,0 +1,113 @@
+import Neo                from '../../../../src/Neo.mjs';
+import * as core          from '../../../../src/core/_export.mjs';
+import Button             from '../../../../src/button/Base.mjs';
+import DomApiVnodeCreator from '../../../../src/vdom/util/DomApiVnodeCreator.mjs';
+import VdomHelper         from '../../../../src/vdom/Helper.mjs';
+
+// IMPORTANT: This test file uses real components and expects them to render.
+// We need to enable unitTestMode for isolation, but also allow VDOM updates.
+Neo.config.unitTestMode = true;
+Neo.config.allowVdomUpdatesInTests = true;
+// This ensures that the VdomHelper uses the correct renderer for the assertions.
+Neo.config.useDomApiRenderer = true;
+
+// Create a mock application context, as the component lifecycle requires it for updates.
+const appName = 'ClassicButtonTest';
+Neo.apps = Neo.apps || {};
+Neo.apps[appName] = {
+    name     : appName,
+    fire     : Neo.emptyFn,
+    isMounted: () => true,
+    rendering: false
+};
+
+StartTest(t => {
+    let button, vnode;
+    let testRun = 0;
+
+    t.beforeEach(async t => {
+        testRun++;
+
+        button = Neo.create(Button, {
+            appName,
+            id     : 'my-button-' + testRun,
+            iconCls: 'fa fa-home',
+            text   : 'Click me'
+        });
+
+        ({vnode} = await button.render());
+        button.mounted = true; // Manually mount to enable updates in the test env
+    });
+
+    t.afterEach(t => {
+        button?.destroy();
+        button = null;
+        vnode  = null;
+    });
+
+    t.it('should create initial vnode correctly', async t => {
+        t.expect(vnode.nodeName).toBe('button');
+        t.expect(vnode.className).toEqual(['neo-button', 'icon-left']);
+        t.expect(vnode.childNodes.length).toBe(2); // icon & text. badge & ripple have removeDom:true
+
+        const iconNode = vnode.childNodes[0];
+        t.expect(iconNode.className).toEqual(['neo-button-glyph', 'fa', 'fa-home']);
+
+        const textNode = vnode.childNodes[1];
+        t.expect(textNode.className).toEqual(['neo-button-text']);
+        t.expect(textNode.textContent).toBe('Click me');
+    });
+
+    t.it('should update vnode and create delta for a single config change', async t => {
+        const textNodeId = vnode.childNodes[1].id;
+        const {deltas} = await button.set({text: 'New Text'});
+
+        t.is(deltas.length, 1, 'Should generate exactly one delta');
+        const delta = deltas[0];
+
+        t.is(delta.id, textNodeId, 'Delta should target the text node');
+        t.is(delta.textContent, 'New Text', 'Delta textContent is correct');
+    });
+
+    t.it('should update vnode and create delta for multiple config changes', async t => {
+        const iconNodeId = vnode.childNodes[0].id;
+        const textNodeId = vnode.childNodes[1].id;
+
+        const {deltas} = await button.set({
+            iconCls: 'fa fa-user',
+            text   : 'Submit'
+        });
+
+        t.is(deltas.length, 2, 'Should generate exactly two deltas');
+
+        const iconDelta = deltas.find(d => d.id === iconNodeId);
+        const textDelta = deltas.find(d => d.id === textNodeId);
+
+        t.ok(iconDelta, 'Should have a delta for the icon node');
+        t.isDeeply(iconDelta.cls.remove, ['fa-home'], 'Icon delta should remove old class');
+        t.isDeeply(iconDelta.cls.add, ['fa-user'], 'Icon delta should add new class');
+
+        t.ok(textDelta, 'Should have a delta for the text node');
+        t.is(textDelta.textContent, 'Submit', 'Text delta is correct');
+    });
+
+    t.it('should handle pressed state change', async t => {
+        t.notOk(vnode.className.includes('pressed'), 'Initial vnode should not have "pressed" class');
+
+        let updateData = await button.set({pressed: true});
+
+        t.is(updateData.deltas.length, 1, 'Should generate one delta for pressed: true');
+        let delta = updateData.deltas[0];
+        t.is(delta.id, button.id, 'Delta should target the button component root');
+        t.isDeeply(delta.cls.add, ['pressed'], 'Delta should add "pressed" class');
+        t.ok(updateData.vnode.className.includes('pressed'), 'Vnode should have "pressed" class');
+
+        updateData = await button.set({pressed: false});
+
+        t.is(updateData.deltas.length, 1, 'Should generate one delta for pressed: false');
+        delta = updateData.deltas[0];
+        t.is(delta.id, button.id, 'Delta should target the button component root');
+        t.isDeeply(delta.cls.remove, ['pressed'], 'Delta should remove "pressed" class');
+        t.notOk(updateData.vnode.className.includes('pressed'), 'Vnode should not have "pressed" class');
+    });
+});

package/test/siesta/tests/core/EffectBatching.mjs

@@ -1,23 +1,24 @@
-import Neo                from '../../../../src/Neo.mjs';
-import * as core          from '../../../../src/core/_export.mjs';
-import Effect             from '../../../../src/core/Effect.mjs';
-import EffectBatchManager from '../../../../src/core/EffectBatchManager.mjs';
+import Neo           from '../../../../src/Neo.mjs';
+import * as core     from '../../../../src/core/_export.mjs';
+import Effect        from '../../../../src/core/Effect.mjs';
+import EffectManager from '../../../../src/core/EffectManager.mjs';
 
 class TestComponent extends core.Base {
     static config = {
         className: 'Neo.Test.EffectBatchingComponent',
-        configA_: 0,
-        configB_: 0,
-        configC_: 0
+        configA_ : 0,
+        configB_ : 0,
+        configC_ : 0
     }
 }
+
 Neo.setupClass(TestComponent);
 
 StartTest(t => {
     t.it('Effects should be batched during core.Base#set() operations', t => {
-        const instance = Neo.create(TestComponent);
+        const instance     = Neo.create(TestComponent);
         let effectRunCount = 0;
-        let sum = 0;
+        let sum            = 0;
 
         const effect = new Effect(() => {
             effectRunCount++;
@@ -47,7 +48,7 @@ StartTest(t => {
         t.is(instance.configC, 3, 'configC should be updated');
 
         // Test individual property change outside a batch
-        effectRunCount = 0;
+        effectRunCount   = 0;
         instance.configA = 10;
         t.is(effectRunCount, 1, 'Effect should run immediately for individual property change outside a batch');
         t.is(sum, 10 + 2 + 3, 'Sum should be 10 + 2 + 3 = 15 after individual configA change');
@@ -58,8 +59,8 @@ StartTest(t => {
         // Update all configs to their previous values (no change)
         instance.set({
             configA: 10,
-            configB:  2,
-            configC:  3
+            configB: 2,
+            configC: 3
         });
 
         t.is(effectRunCount, 0, 'Effect should not run.');
@@ -68,28 +69,28 @@ StartTest(t => {
         instance.destroy();
     });
 
-    t.it('EffectBatchManager should correctly manage batch state', t => {
-        t.is(EffectBatchManager.isBatchActive(), false, 'Batch should not be active initially');
+    t.it('EffectManager should correctly manage batch state via pause() and resume()', t => {
+        t.is(EffectManager.isPaused(), false, 'Batch should not be active initially');
 
-        EffectBatchManager.startBatch();
-        t.is(EffectBatchManager.isBatchActive(), true, 'Batch should be active after startBatch()');
+        EffectManager.pause();
+        t.is(EffectManager.isPaused(), true, 'Batch should be active after pause()');
 
-        EffectBatchManager.startBatch(); // Nested batch
-        t.is(EffectBatchManager.isBatchActive(), true, 'Batch should still be active for nested batch');
+        EffectManager.pause(); // Nested batch
+        t.is(EffectManager.isPaused(), true, 'Batch should still be active for nested pause()');
 
-        EffectBatchManager.endBatch();
-        t.is(EffectBatchManager.isBatchActive(), true, 'Batch should still be active after inner endBatch()');
+        EffectManager.resume();
+        t.is(EffectManager.isPaused(), true, 'Batch should still be active after inner resume()');
 
-        EffectBatchManager.endBatch();
-        t.is(EffectBatchManager.isBatchActive(), false, 'Batch should not be active after all endBatch() calls');
+        EffectManager.resume();
+        t.is(EffectManager.isPaused(), false, 'Batch should not be active after all resume() calls');
     });
 
     t.it('Effect should run when a dependency is changed inside an afterSet hook', t => {
         class IndirectDependencyComponent extends core.Base {
             static config = {
                 className: 'Neo.Test.IndirectDependencyComponent',
-                configA_: 'initialA',
-                configB_: 'initialB'
+                configA_ : 'initialA',
+                configB_ : 'initialB'
             }
 
             afterSetConfigA(newValue, oldValue) {
@@ -99,11 +100,12 @@ StartTest(t => {
                 }
             }
         }
+
         Neo.setupClass(IndirectDependencyComponent);
 
-        const instance = Neo.create(IndirectDependencyComponent);
+        const instance     = Neo.create(IndirectDependencyComponent);
         let effectRunCount = 0;
-        let effectValue = '';
+        let effectValue    = '';
 
         // Effect depends only on configB
         const effect = new Effect(() => {
@@ -135,8 +137,8 @@ StartTest(t => {
         class BeforeSetDependencyComponent extends core.Base {
             static config = {
                 className: 'Neo.Test.BeforeSetDependencyComponent',
-                configA_: 'initialA',
-                configC_: 'initialC' // configC will be changed by beforeSetConfigA
+                configA_ : 'initialA',
+                configC_ : 'initialC' // configC will be changed by beforeSetConfigA
             }
 
             beforeSetConfigA(newValue, oldValue) {
@@ -147,11 +149,12 @@ StartTest(t => {
                 return newValue; // Important: return newValue to allow configA to be set
             }
         }
+
         Neo.setupClass(BeforeSetDependencyComponent);
 
-        const instance = Neo.create(BeforeSetDependencyComponent);
+        const instance     = Neo.create(BeforeSetDependencyComponent);
         let effectRunCount = 0;
-        let effectValue = '';
+        let effectValue    = '';
 
         // Effect depends only on configC
         const effect = new Effect(() => {
@@ -183,9 +186,9 @@ StartTest(t => {
         class CombinedDependencyComponent extends core.Base {
             static config = {
                 className: 'Neo.Test.CombinedDependencyComponent',
-                configA_: 'initialA',
-                configB_: 'initialB', // Changed by afterSet
-                configC_: 'initialC'  // Changed by beforeSet
+                configA_ : 'initialA',
+                configB_ : 'initialB', // Changed by afterSet
+                configC_ : 'initialC'  // Changed by beforeSet
             }
 
             beforeSetConfigA(newValue, oldValue) {
@@ -201,13 +204,14 @@ StartTest(t => {
                 }
             }
         }
+
         Neo.setupClass(CombinedDependencyComponent);
 
-        const instance = Neo.create(CombinedDependencyComponent);
+        const instance      = Neo.create(CombinedDependencyComponent);
         let effectBRunCount = 0;
         let effectCRunCount = 0;
-        let effectBValue = '';
-        let effectCValue = '';
+        let effectBValue    = '';
+        let effectCValue    = '';
 
         // Effect for configB (changed by afterSet)
         const effectB = new Effect(() => {
@@ -257,9 +261,9 @@ StartTest(t => {
         class SingleEffectCombinedDependencyComponent extends core.Base {
             static config = {
                 className: 'Neo.Test.SingleEffectCombinedDependencyComponent',
-                configA_: 'initialA',
-                configB_: 'initialB', // Changed by afterSet
-                configC_: 'initialC'  // Changed by beforeSet
+                configA_ : 'initialA',
+                configB_ : 'initialB', // Changed by afterSet
+                configC_ : 'initialC'  // Changed by beforeSet
             }
 
             beforeSetConfigA(newValue, oldValue) {
@@ -275,11 +279,12 @@ StartTest(t => {
                 }
             }
         }
+
         Neo.setupClass(SingleEffectCombinedDependencyComponent);
 
-        const instance = Neo.create(SingleEffectCombinedDependencyComponent);
+        const instance     = Neo.create(SingleEffectCombinedDependencyComponent);
         let effectRunCount = 0;
-        let effectValue = '';
+        let effectValue    = '';
 
         // Single Effect depends on both configB and configC
         const effect = new Effect(() => {

package/test/siesta/tests/functional/Button.mjs

@@ -0,0 +1,113 @@
+import Neo                from '../../../../src/Neo.mjs';
+import * as core          from '../../../../src/core/_export.mjs';
+import Button             from '../../../../src/functional/button/Base.mjs';
+import DomApiVnodeCreator from '../../../../src/vdom/util/DomApiVnodeCreator.mjs';
+import VdomHelper         from '../../../../src/vdom/Helper.mjs';
+
+// IMPORTANT: This test file uses real components and expects them to render.
+// We need to enable unitTestMode for isolation, but also allow VDOM updates.
+Neo.config.unitTestMode = true;
+Neo.config.allowVdomUpdatesInTests = true;
+// This ensures that the VdomHelper uses the correct renderer for the assertions.
+Neo.config.useDomApiRenderer = true;
+
+// Create a mock application context, as the component lifecycle requires it for updates.
+const appName = 'FunctionalButtonTest';
+Neo.apps = Neo.apps || {};
+Neo.apps[appName] = {
+    name     : appName,
+    fire     : Neo.emptyFn,
+    isMounted: () => true,
+    rendering: false
+};
+
+StartTest(t => {
+    let button, vnode;
+    let testRun = 0;
+
+    t.beforeEach(async t => {
+        testRun++;
+
+        button = Neo.create(Button, {
+            appName,
+            id     : 'my-button-' + testRun,
+            iconCls: 'fa fa-home',
+            text   : 'Click me'
+        });
+
+        ({vnode} = await button.render());
+        button.mounted = true; // Manually mount to enable updates in the test env
+    });
+
+    t.afterEach(t => {
+        button?.destroy();
+        button = null;
+        vnode  = null;
+    });
+
+    t.it('should create initial vnode correctly', async t => {
+        t.expect(vnode.nodeName).toBe('button');
+        t.expect(vnode.className).toEqual(['neo-button', 'icon-left']);
+        t.expect(vnode.childNodes.length).toBe(2); // icon & text. badge & ripple have removeDom:true
+
+        const iconNode = vnode.childNodes[0];
+        t.expect(iconNode.className).toEqual(['neo-button-glyph', 'fa', 'fa-home']);
+
+        const textNode = vnode.childNodes[1];
+        t.expect(textNode.className).toEqual(['neo-button-text']);
+        t.expect(textNode.textContent).toBe('Click me');
+    });
+
+    t.it('should update vnode and create delta for a single config change', async t => {
+        const textNodeId = vnode.childNodes[1].id;
+        const {deltas} = await button.set({text: 'New Text'});
+
+        t.is(deltas.length, 1, 'Should generate exactly one delta');
+        const delta = deltas[0];
+
+        t.is(delta.id, textNodeId, 'Delta should target the text node');
+        t.is(delta.textContent, 'New Text', 'Delta textContent is correct');
+    });
+
+    t.it('should update vnode and create delta for multiple config changes', async t => {
+        const iconNodeId = vnode.childNodes[0].id;
+        const textNodeId = vnode.childNodes[1].id;
+
+        const {deltas} = await button.set({
+            iconCls: 'fa fa-user',
+            text   : 'Submit'
+        });
+
+        t.is(deltas.length, 2, 'Should generate exactly two deltas');
+
+        const iconDelta = deltas.find(d => d.id === iconNodeId);
+        const textDelta = deltas.find(d => d.id === textNodeId);
+
+        t.ok(iconDelta, 'Should have a delta for the icon node');
+        t.isDeeply(iconDelta.cls.remove, ['fa-home'], 'Icon delta should remove old class');
+        t.isDeeply(iconDelta.cls.add, ['fa-user'], 'Icon delta should add new class');
+
+        t.ok(textDelta, 'Should have a delta for the text node');
+        t.is(textDelta.textContent, 'Submit', 'Text delta is correct');
+    });
+
+    t.it('should handle pressed state change', async t => {
+        t.notOk(vnode.className.includes('pressed'), 'Initial vnode should not have "pressed" class');
+
+        let updateData = await button.set({pressed: true});
+
+        t.is(updateData.deltas.length, 1, 'Should generate one delta for pressed: true');
+        let delta = updateData.deltas[0];
+        t.is(delta.id, button.id, 'Delta should target the button component root');
+        t.isDeeply(delta.cls.add, ['pressed'], 'Delta should add "pressed" class');
+        t.ok(updateData.vnode.className.includes('pressed'), 'Vnode should have "pressed" class');
+
+        updateData = await button.set({pressed: false});
+
+        t.is(updateData.deltas.length, 1, 'Should generate one delta for pressed: false');
+        delta = updateData.deltas[0];
+        t.is(delta.id, button.id, 'Delta should target the button component root');
+        t.isDeeply(delta.cls.remove, ['pressed'], 'Delta should remove "pressed" class');
+        t.notOk(updateData.vnode.className.includes('pressed'), 'Vnode should not have "pressed" class');
+    });
+});