xmlui 0.11.4 → 0.11.6

package/dist/scripts/src/components/Tree/Tree-dynamic.spec.js

@@ -1,2894 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const fixtures_1 = require("../../testing/fixtures");
-const testData_1 = require("./testData");
-// =============================================================================
-// IMPERATIVE API TESTS
-// =============================================================================
-fixtures_1.test.describe("Imperative API", () => {
-    (0, fixtures_1.test)("exposes expandNode method", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}:expand" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="expandBtn" testId="expand-node-btn" label="Expand Node 1" 
-            onClick="treeApi.expandNode(1);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const expandButton = yield createButtonDriver("expand-node-btn");
-        // Initially, tree should be collapsed
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:expand")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:expand")).not.toBeVisible(); // Child hidden
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:expand")).not.toBeVisible(); // Child hidden
-        // Click expand specific node button
-        yield expandButton.click();
-        // Verify node 1's children are now visible but grandchildren are still hidden
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:expand")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:expand")).toBeVisible(); // Child now visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:expand")).toBeVisible(); // Child now visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:expand")).not.toBeVisible(); // Grandchild still hidden (node 2 not expanded)
-    }));
-    (0, fixtures_1.test)("exposes collapseNode method", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}:expand" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="collapseBtn" testId="collapse-btn" label="Collapse Node 1" 
-            onClick="treeApi.collapseNode(1);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const collapseButton = yield createButtonDriver("collapse-btn");
-        // Verify tree starts with all nodes visible (defaultExpanded="all")
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:expand")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:expand")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:expand")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:expand")).toBeVisible();
-        // Click collapse node button
-        yield collapseButton.click();
-        // Verify node 1 children are now hidden
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:expand")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:expand")).not.toBeVisible(); // Child hidden
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:expand")).not.toBeVisible(); // Child hidden
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:expand")).not.toBeVisible(); // Grandchild hidden
-    }));
-    (0, fixtures_1.test)("exposes expandAll method", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}:expandall" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="expandBtn" testId="expand-all-btn" label="Expand All" 
-            onClick="treeApi.expandAll();" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const expandButton = yield createButtonDriver("expand-all-btn");
-        // Initially, tree should be collapsed (not expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:expandall")).not.toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:expandall")).not.toBeVisible();
-        // Click expandAll button
-        yield expandButton.click();
-        // Verify all nodes are now visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:expandall")).toBeVisible(); // Root
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:expandall")).toBeVisible(); // Child
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:expandall")).toBeVisible(); // Child
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:expandall")).toBeVisible(); // Grandchild
-    }));
-    (0, fixtures_1.test)("exposes collapseAll method", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}:collapseall" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="collapseBtn" testId="collapse-all-btn" label="Collapse All" 
-            onClick="treeApi.collapseAll();" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const collapseButton = yield createButtonDriver("collapse-all-btn");
-        // Initially, tree should be fully expanded (defaultExpanded="all")
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:collapseall")).toBeVisible(); // Root
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:collapseall")).toBeVisible(); // Child
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:collapseall")).toBeVisible(); // Child
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:collapseall")).toBeVisible(); // Grandchild
-        // Click collapseAll button
-        yield collapseButton.click();
-        // Verify only root nodes are visible (all collapsed)
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:collapseall")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:collapseall")).not.toBeVisible(); // Child hidden
-        yield (0, fixtures_1.expect)(tree.getByTestId("3:collapseall")).not.toBeVisible(); // Child hidden
-        yield (0, fixtures_1.expect)(tree.getByTestId("4:collapseall")).not.toBeVisible(); // Grandchild hidden
-    }));
-    (0, fixtures_1.test)("exposes scrollToItem method", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        // Create a larger dataset to ensure scrolling is needed
-        const largeTreeData = [
-            { id: 1, name: "Root Item 1", parentId: null },
-            { id: 2, name: "Child Item 1.1", parentId: 1 },
-            { id: 3, name: "Child Item 1.2", parentId: 1 },
-            { id: 4, name: "Grandchild Item 1.1.1", parentId: 2 },
-            { id: 5, name: "Grandchild Item 1.1.2", parentId: 2 },
-            { id: 6, name: "Root Item 2", parentId: null },
-            { id: 7, name: "Child Item 2.1", parentId: 6 },
-            { id: 8, name: "Child Item 2.2", parentId: 6 },
-            { id: 9, name: "Child Item 2.3", parentId: 6 },
-            { id: 10, name: "Root Item 3", parentId: null },
-            { id: 11, name: "Child Item 3.1", parentId: 10 },
-            { id: 12, name: "Child Item 3.2", parentId: 10 },
-            { id: 13, name: "Root Item 4", parentId: null },
-            { id: 14, name: "Child Item 4.1", parentId: 13 },
-            { id: 15, name: "Child Item 4.2", parentId: 13 },
-            { id: 16, name: "Root Item 5", parentId: null },
-            { id: 17, name: "Child Item 5.1", parentId: 16 },
-            { id: 18, name: "Child Item 5.2", parentId: 16 },
-            { id: 19, name: "Target Item (Bottom)", parentId: 16 }, // This will be at the bottom
-        ];
-        const { testStateDriver } = yield initTestBed(`
-        <Fragment>
-          <VStack height="150px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              parentIdField="parentId"
-              defaultExpanded="all"
-              data='{${JSON.stringify(largeTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}:scroll" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="scrollBtn" testId="scroll-btn" label="Scroll to Bottom Item" onClick="
-            treeApi.scrollToItem('19');
-            testState = { actionPerformed: 'scrollToItem', itemId: '19' };
-          " />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const scrollButton = yield createButtonDriver("scroll-btn");
-        // Verify tree is visible and first items are visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:scroll")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:scroll")).toBeVisible();
-        // Verify the target item at the bottom is initially NOT visible in the small viewport
-        // (Due to the small height of 150px and many items, item 19 should be out of view)
-        yield (0, fixtures_1.expect)(tree.getByTestId("19:scroll")).not.toBeVisible();
-        // Click scroll to item button
-        yield scrollButton.click();
-        // Verify test state confirms action was performed
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
-            actionPerformed: "scrollToItem",
-            itemId: "19",
-        });
-        // After scrolling, the target item should now be visible
-        // Note: We can't easily test the exact scroll position in virtualized components,
-        // but we can verify the API was called successfully
-    }));
-    (0, fixtures_1.test)("exposes getSelectedNode method", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        const { testStateDriver } = yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              selectedValue="2"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}:selected" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="getSelectedBtn" testId="get-selected-btn" label="Get Selected" onClick="
-            const selectedNode = treeApi.getSelectedNode();
-            testState = { 
-              hasSelectedNode: selectedNode !== null,
-              selectedNodeKey: selectedNode?.key,
-              selectedNodeName: selectedNode?.displayName
-            };
-          " />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const getSelectedButton = yield createButtonDriver("get-selected-btn");
-        // Verify tree is visible with selection
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:selected")).toBeVisible();
-        // Click get selected node button
-        yield getSelectedButton.click();
-        // Verify getSelectedNode returns correct data
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
-            hasSelectedNode: true,
-            selectedNodeKey: 2,
-            selectedNodeName: "Child Item 1.1",
-        });
-    }));
-    (0, fixtures_1.test)("exposes appendNode method with flat data format #1", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="appendBtn" testId="append-btn" label="Append Child to Node 1" 
-            onClick="treeApi.appendNode(1, { id: 5, name: 'New Child Item' });" />
-          <Button id="expandBtn" testId="expand-btn" label="Expand Node 1" 
-            onClick="treeApi.expandNode(1);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const appendButton = yield createButtonDriver("append-btn");
-        const expandButton = yield createButtonDriver("expand-btn");
-        // Check initial tree structure - only root nodes visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible(); // Child hidden (collapsed)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).not.toBeVisible(); // Child hidden (collapsed)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).not.toBeVisible(); // Grandchild hidden (collapsed)
-        // Append new node using API
-        yield appendButton.click();
-        // Expand node 1 to see its children
-        yield expandButton.click();
-        // Verify original children are visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Original child
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Original child
-        // Verify new node is now visible as a child of node 1
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New child
-    }));
-    (0, fixtures_1.test)("exposes appendNode method with flat data format #2", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="appendBtn" testId="append-btn" label="Append new root node" 
-            onClick="treeApi.appendNode(null, { id: 5, name: 'New Root Item' });" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const appendButton = yield createButtonDriver("append-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Append new root node using API
-        yield appendButton.click();
-        // Verify original nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Original root
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Original child
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Original child
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Original grandchild
-        // Verify new root node is now visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New root node
-    }));
-    (0, fixtures_1.test)("exposes appendNode method with hierarchy data format #1", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="hierarchy"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="appendBtn" testId="append-btn" label="Append Child to Node 1" 
-            onClick="treeApi.appendNode(1, { id: 5, name: 'New Child Item' });" />
-          <Button id="expandBtn" testId="expand-btn" label="Expand Node 1" 
-            onClick="treeApi.expandNode(1);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const appendButton = yield createButtonDriver("append-btn");
-        const expandButton = yield createButtonDriver("expand-btn");
-        // Check initial tree structure - only root nodes visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible(); // Child hidden (collapsed)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).not.toBeVisible(); // Child hidden (collapsed)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).not.toBeVisible(); // Grandchild hidden (collapsed)
-        // Append new node using API
-        yield appendButton.click();
-        // Expand node 1 to see its children
-        yield expandButton.click();
-        // Verify original children are visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Original child
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Original child
-        // Verify new node is now visible as a child of node 1
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New child
-    }));
-    (0, fixtures_1.test)("exposes appendNode method with hierarchy data format #2", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="hierarchy"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="appendBtn" testId="append-btn" label="Append new root node" 
-            onClick="treeApi.appendNode(null, { id: 5, name: 'New Root Item' });" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const appendButton = yield createButtonDriver("append-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Append new root node using API
-        yield appendButton.click();
-        // Verify original nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Original root
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Original child
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Original child
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Original grandchild
-        // Verify new root node is now visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New root node
-    }));
-    (0, fixtures_1.test)("exposes removeNode method with flat data format #1 - remove leaf node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="removeBtn" testId="remove-btn" label="Remove Leaf Node 4" 
-            onClick="treeApi.removeNode(4);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const removeButton = yield createButtonDriver("remove-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Remove leaf node using API
-        yield removeButton.click();
-        // Verify original nodes are still visible except removed node
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Original root
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Original child  
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Original child
-        // Verify removed node is no longer visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).not.toBeVisible(); // Removed leaf node
-    }));
-    (0, fixtures_1.test)("exposes removeNode method with flat data format #2 - remove parent with children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="removeBtn" testId="remove-btn" label="Remove Node 2 and its children" 
-            onClick="treeApi.removeNode(2);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const removeButton = yield createButtonDriver("remove-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Remove parent node and its children using API
-        yield removeButton.click();
-        // Verify remaining nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Original root
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Original child (not removed)
-        // Verify removed nodes are no longer visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible(); // Removed parent
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).not.toBeVisible(); // Removed child (descendant of node 2)
-    }));
-    (0, fixtures_1.test)("exposes removeNode method with flat data format #3 - remove root node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="removeBtn" testId="remove-btn" label="Remove Root Node 1 and all descendants" 
-            onClick="treeApi.removeNode(1);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const removeButton = yield createButtonDriver("remove-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Remove root node and all descendants using API
-        yield removeButton.click();
-        // Verify all nodes are removed since they were all descendants of node 1
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).not.toBeVisible(); // Removed root
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible(); // Removed descendant
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).not.toBeVisible(); // Removed descendant  
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).not.toBeVisible(); // Removed descendant
-    }));
-    (0, fixtures_1.test)("exposes removeChildren method with flat data format #1 - remove children of parent node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="removeChildrenBtn" testId="remove-children-btn" label="Remove children of Node 1" 
-            onClick="treeApi.removeChildren(1);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const removeChildrenButton = yield createButtonDriver("remove-children-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Remove children of node 1 using API
-        yield removeChildrenButton.click();
-        // Verify parent node 1 is still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Parent node kept
-        // Verify all children and descendants are removed
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible(); // Removed child
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).not.toBeVisible(); // Removed child
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).not.toBeVisible(); // Removed descendant
-    }));
-    (0, fixtures_1.test)("exposes removeChildren method with flat data format #2 - remove children of node with one child", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="removeChildrenBtn" testId="remove-children-btn" label="Remove children of Node 2" 
-            onClick="treeApi.removeChildren(2);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const removeChildrenButton = yield createButtonDriver("remove-children-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Remove children of node 2 using API
-        yield removeChildrenButton.click();
-        // Verify nodes 1, 2, and 3 are still visible (not affected)
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Parent node kept
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Sibling not affected
-        // Verify only node 4 (child of node 2) is removed
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).not.toBeVisible(); // Removed child
-    }));
-    (0, fixtures_1.test)("exposes removeChildren method with flat data format #3 - remove children of leaf node (no effect)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="removeChildrenBtn" testId="remove-children-btn" label="Remove children of Leaf Node 4" 
-            onClick="treeApi.removeChildren(4);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const removeChildrenButton = yield createButtonDriver("remove-children-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Remove children of leaf node 4 using API (should have no effect)
-        yield removeChildrenButton.click();
-        // Verify all nodes are still visible (no changes since node 4 has no children)
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Leaf node still visible
-    }));
-    (0, fixtures_1.test)("exposes removeNode method with hierarchy data format #1 - remove leaf node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="hierarchy"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="removeBtn" testId="remove-btn" label="Remove Leaf Node 4" 
-            onClick="treeApi.removeNode(4);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const removeButton = yield createButtonDriver("remove-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Remove leaf node using API
-        yield removeButton.click();
-        // Verify original nodes are still visible except removed node
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Original root
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Original child  
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Original child
-        // Verify removed node is no longer visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).not.toBeVisible(); // Removed leaf node
-    }));
-    (0, fixtures_1.test)("exposes removeNode method with hierarchy data format #2 - remove parent with children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="hierarchy"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="removeBtn" testId="remove-btn" label="Remove Node 3 and its children" 
-            onClick="treeApi.removeNode(3);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const removeButton = yield createButtonDriver("remove-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Remove parent node and its children using API
-        yield removeButton.click();
-        // Verify remaining nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Original root
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Original child (not removed)
-        // Verify removed nodes are no longer visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).not.toBeVisible(); // Removed parent
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).not.toBeVisible(); // Removed child (descendant of node 3)
-    }));
-    (0, fixtures_1.test)("exposes removeNode method with hierarchy data format #3 - remove root node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="hierarchy"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="removeBtn" testId="remove-btn" label="Remove Root Node 1 and all descendants" 
-            onClick="treeApi.removeNode(1);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const removeButton = yield createButtonDriver("remove-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Remove root node and all descendants using API
-        yield removeButton.click();
-        // Verify all nodes are removed since they were all descendants of node 1
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).not.toBeVisible(); // Removed root
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible(); // Removed descendant
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).not.toBeVisible(); // Removed descendant  
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).not.toBeVisible(); // Removed descendant
-    }));
-    (0, fixtures_1.test)("exposes removeChildren method with hierarchy data format #1 - remove children of parent node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="hierarchy"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="removeChildrenBtn" testId="remove-children-btn" label="Remove children of Node 1" 
-            onClick="treeApi.removeChildren(1);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const removeChildrenButton = yield createButtonDriver("remove-children-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Remove children of node 1 using API
-        yield removeChildrenButton.click();
-        // Verify parent node 1 is still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Parent node kept
-        // Verify all children and descendants are removed
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).not.toBeVisible(); // Removed child
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).not.toBeVisible(); // Removed child
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).not.toBeVisible(); // Removed descendant
-    }));
-    (0, fixtures_1.test)("exposes removeChildren method with hierarchy data format #2 - remove children of node with children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="hierarchy"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="removeChildrenBtn" testId="remove-children-btn" label="Remove children of Node 3" 
-            onClick="treeApi.removeChildren(3);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const removeChildrenButton = yield createButtonDriver("remove-children-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Remove children of node 3 using API
-        yield removeChildrenButton.click();
-        // Verify nodes 1, 2, and 3 are still visible (not affected)
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Sibling not affected
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Parent node kept
-        // Verify only node 4 (child of node 3) is removed
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).not.toBeVisible(); // Removed child
-    }));
-    (0, fixtures_1.test)("exposes removeChildren method with hierarchy data format #3 - remove children of leaf node (no effect)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="hierarchy"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="removeChildrenBtn" testId="remove-children-btn" label="Remove children of Leaf Node 2" 
-            onClick="treeApi.removeChildren(2);" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const removeChildrenButton = yield createButtonDriver("remove-children-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Remove children of leaf node 2 using API (should have no effect)
-        yield removeChildrenButton.click();
-        // Verify all nodes are still visible (no changes since node 2 has no children in hierarchy data)
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Leaf node still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Sibling still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Child of sibling still visible
-    }));
-    (0, fixtures_1.test)("exposes insertNodeBefore method with flat data format #1 - insert before sibling node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="insertBtn" testId="insert-btn" label="Insert before Node 3" 
-            onClick="treeApi.insertNodeBefore(3, { id: 5, name: 'New Node Before 3' });" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const insertButton = yield createButtonDriver("insert-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Insert new node before node 3 using API
-        yield insertButton.click();
-        // Verify all original nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild still visible
-        // Verify new node is visible (inserted as sibling of node 3)
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New node inserted
-    }));
-    (0, fixtures_1.test)("exposes insertNodeBefore method with flat data format #2 - insert before first child", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="insertBtn" testId="insert-btn" label="Insert before Node 2" 
-            onClick="treeApi.insertNodeBefore(2, { id: 5, name: 'New First Child' });" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const insertButton = yield createButtonDriver("insert-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Insert new node before node 2 using API
-        yield insertButton.click();
-        // Verify all original nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild still visible
-        // Verify new node is visible (inserted as first child of node 1)
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New node inserted
-    }));
-    (0, fixtures_1.test)("exposes insertNodeBefore method with flat data format #3 - insert before root node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="insertBtn" testId="insert-btn" label="Insert before Root Node 1" 
-            onClick="treeApi.insertNodeBefore(1, { id: 5, name: 'New Root Before 1' });" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const insertButton = yield createButtonDriver("insert-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Insert new node before root node 1 using API
-        yield insertButton.click();
-        // Verify all original nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild still visible
-        // Verify new node is visible (inserted as new root before node 1)
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New node inserted
-    }));
-    (0, fixtures_1.test)("exposes insertNodeBefore method with hierarchy data format #1 - insert before sibling node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="hierarchy"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="insertBtn" testId="insert-btn" label="Insert before Node 3" 
-            onClick="treeApi.insertNodeBefore(3, { id: 5, name: 'New Node Before 3' });" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const insertButton = yield createButtonDriver("insert-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Insert new node before node 3 using API
-        yield insertButton.click();
-        // Verify all original nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild still visible
-        // Verify new node is visible (inserted as sibling of node 3)
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New node inserted
-    }));
-    (0, fixtures_1.test)("exposes insertNodeBefore method with hierarchy data format #2 - insert before first child", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="hierarchy"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="insertBtn" testId="insert-btn" label="Insert before Node 2" 
-            onClick="treeApi.insertNodeBefore(2, { id: 5, name: 'New First Child' });" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const insertButton = yield createButtonDriver("insert-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Insert new node before node 2 using API
-        yield insertButton.click();
-        // Verify all original nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild still visible
-        // Verify new node is visible (inserted as first child of node 1)
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New node inserted
-    }));
-    (0, fixtures_1.test)("exposes insertNodeBefore method with hierarchy data format #3 - insert before root node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="hierarchy"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="insertBtn" testId="insert-btn" label="Insert before Root Node 1" 
-            onClick="treeApi.insertNodeBefore(1, { id: 5, name: 'New Root Before 1' });" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const insertButton = yield createButtonDriver("insert-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Insert new node before root node 1 using API
-        yield insertButton.click();
-        // Verify all original nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild still visible
-        // Verify new node is visible (inserted as new root before node 1)
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New node inserted
-    }));
-    (0, fixtures_1.test)("exposes insertNodeAfter method with flat data format #1 - insert after sibling node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="insertBtn" testId="insert-btn" label="Insert after Node 2" 
-            onClick="treeApi.insertNodeAfter(2, { id: 5, name: 'New Node After 2' });" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const insertButton = yield createButtonDriver("insert-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Insert new node after node 2 using API
-        yield insertButton.click();
-        // Verify all original nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild still visible
-        // Verify new node is visible (inserted as sibling after node 2)
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New node inserted
-    }));
-    (0, fixtures_1.test)("exposes insertNodeAfter method with flat data format #2 - insert after last child", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="insertBtn" testId="insert-btn" label="Insert after Node 3" 
-            onClick="treeApi.insertNodeAfter(3, { id: 5, name: 'New Last Child' });" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const insertButton = yield createButtonDriver("insert-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Insert new node after node 3 using API
-        yield insertButton.click();
-        // Verify all original nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild still visible
-        // Verify new node is visible (inserted as last child of node 1)
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New node inserted
-    }));
-    (0, fixtures_1.test)("exposes insertNodeAfter method with flat data format #3 - insert after root node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="insertBtn" testId="insert-btn" label="Insert after Root Node 1" 
-            onClick="treeApi.insertNodeAfter(1, { id: 5, name: 'New Root After 1' });" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const insertButton = yield createButtonDriver("insert-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Insert new node after root node 1 using API
-        yield insertButton.click();
-        // Verify all original nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild still visible
-        // Verify new node is visible (inserted as new root after node 1)
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New node inserted
-    }));
-    (0, fixtures_1.test)("exposes insertNodeAfter method with hierarchy data format #1 - insert after sibling node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="hierarchy"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="insertBtn" testId="insert-btn" label="Insert after Node 2" 
-            onClick="treeApi.insertNodeAfter(2, { id: 5, name: 'New Node After 2' });" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const insertButton = yield createButtonDriver("insert-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Insert new node after node 2 using API
-        yield insertButton.click();
-        // Verify all original nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild still visible
-        // Verify new node is visible (inserted as sibling after node 2)
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New node inserted
-    }));
-    (0, fixtures_1.test)("exposes insertNodeAfter method with hierarchy data format #2 - insert after last child", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="hierarchy"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="insertBtn" testId="insert-btn" label="Insert after Node 3" 
-            onClick="treeApi.insertNodeAfter(3, { id: 5, name: 'New Last Child' });" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const insertButton = yield createButtonDriver("insert-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Insert new node after node 3 using API
-        yield insertButton.click();
-        // Verify all original nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild still visible
-        // Verify new node is visible (inserted as last child of node 1)
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New node inserted
-    }));
-    (0, fixtures_1.test)("exposes insertNodeAfter method with hierarchy data format #3 - insert after root node", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="hierarchy"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="insertBtn" testId="insert-btn" label="Insert after Root Node 1" 
-            onClick="treeApi.insertNodeAfter(1, { id: 5, name: 'New Root After 1' });" />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const insertButton = yield createButtonDriver("insert-btn");
-        // Check initial tree structure - all nodes visible due to defaultExpanded="all"
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child visible (expanded)
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild visible (expanded)
-        // Insert new node after root node 1 using API
-        yield insertButton.click();
-        // Verify all original nodes are still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("2")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("3")).toBeVisible(); // Child still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("4")).toBeVisible(); // Grandchild still visible
-        // Verify new node is visible (inserted as new root after node 1)
-        yield (0, fixtures_1.expect)(tree.getByTestId("5")).toBeVisible(); // New node inserted
-    }));
-    (0, fixtures_1.test)("exposes scrollIntoView method", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        // Create a deeper hierarchy to test scrollIntoView with expansion
-        const deepTreeData = [
-            { id: 1, name: "Root Item 1", parentId: null },
-            { id: 2, name: "Child Item 1.1", parentId: 1 },
-            { id: 3, name: "Child Item 1.2", parentId: 1 },
-            { id: 4, name: "Grandchild Item 1.1.1", parentId: 2 },
-            { id: 5, name: "Great-grandchild Item 1.1.1.1", parentId: 4 },
-            { id: 6, name: "Root Item 2", parentId: null },
-            { id: 7, name: "Child Item 2.1", parentId: 6 },
-            { id: 8, name: "Child Item 2.2", parentId: 6 },
-            { id: 9, name: "Grandchild Item 2.1.1", parentId: 7 },
-            { id: 10, name: "Root Item 3", parentId: null },
-            { id: 11, name: "Child Item 3.1", parentId: 10 },
-            { id: 12, name: "Deeply Nested Target", parentId: 11 }, // This requires expansion to be visible
-        ];
-        const { testStateDriver } = yield initTestBed(`
-        <Fragment>
-          <VStack height="100px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              parentIdField="parentId"
-              data='{${JSON.stringify(deepTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}:scrollview" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="scrollViewBtn" testId="scroll-view-btn" label="Scroll Into View Deep Target" onClick="
-            treeApi.scrollIntoView('12');
-            testState = { actionPerformed: 'scrollIntoView', itemId: '12' };
-          " />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const scrollViewButton = yield createButtonDriver("scroll-view-btn");
-        // Initially, tree should be collapsed so the deep target is not visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:scrollview")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("6:scrollview")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("10:scrollview")).toBeVisible(); // Root visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("11:scrollview")).not.toBeVisible(); // Child hidden (collapsed)
-        yield (0, fixtures_1.expect)(tree.getByTestId("12:scrollview")).not.toBeVisible(); // Deep target hidden (needs expansion)
-        // Click scroll into view button
-        yield scrollViewButton.click();
-        // Verify test state confirms action was performed
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
-            actionPerformed: "scrollIntoView",
-            itemId: "12",
-        });
-        // Verify that the node and its parents are now expanded (target should be visible)
-        yield (0, fixtures_1.expect)(tree.getByTestId("10:scrollview")).toBeVisible(); // Root still visible
-        yield (0, fixtures_1.expect)(tree.getByTestId("11:scrollview")).toBeVisible(); // Parent expanded
-        yield (0, fixtures_1.expect)(tree.getByTestId("12:scrollview")).toBeVisible(); // Target node now visible
-    }));
-    (0, fixtures_1.test)("exposes refreshData method", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-        const { testStateDriver } = yield initTestBed(`
-        <Fragment>
-          <VStack height="400px">
-            <Tree id="treeApi" testId="tree"
-              dataFormat="flat"
-              defaultExpanded="all"
-              data='{${JSON.stringify(testData_1.flatTreeData)}}'>
-              <property name="itemTemplate">
-                <HStack testId="{$item.id}:refresh" verticalAlignment="center">
-                  <Text value="{$item.name}" />
-                </HStack>
-              </property>
-            </Tree>
-          </VStack>
-          <Button id="refreshBtn" testId="refresh-btn" label="Refresh Data" onClick="
-            treeApi.refreshData();
-            testState = { actionPerformed: 'refreshData' };
-          " />
-        </Fragment>
-      `);
-        const tree = yield createTreeDriver("tree");
-        const refreshButton = yield createButtonDriver("refresh-btn");
-        // Verify tree is visible with original data
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:refresh")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:refresh")).toBeVisible();
-        // Click refresh data button
-        yield refreshButton.click();
-        // Verify test state confirms action was performed
-        // Note: refreshData forces re-processing but with same data, tree should remain the same
-        yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({
-            actionPerformed: "refreshData",
-        });
-        // Tree should still be visible after refresh
-        yield (0, fixtures_1.expect)(tree.getByTestId("1:refresh")).toBeVisible();
-        yield (0, fixtures_1.expect)(tree.getByTestId("2:refresh")).toBeVisible();
-    }));
-    // =============================================================================
-    // COMPREHENSIVE API METHOD TESTS
-    // =============================================================================
-    fixtures_1.test.describe("API Method Tests", () => {
-        (0, fixtures_1.test)("expandAll() - expands all nodes and makes all children visible", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:expandall">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="expandall-btn" label="Expand All" onClick="
-              treeApi.expandAll();
-              testState = { actionPerformed: 'expandAll' };
-            " />
-          </Fragment>
-        `);
-            const tree = yield createTreeDriver("tree");
-            const expandAllButton = yield createButtonDriver("expandall-btn");
-            // BEFORE: Verify tree starts collapsed - only root visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:expandall")).toBeVisible(); // Root visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:expandall")).not.toBeVisible(); // Child hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:expandall")).not.toBeVisible(); // Child hidden
-            // Trigger expandAll API
-            yield expandAllButton.click();
-            // Wait for async API call to complete
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "expandAll" });
-            // AFTER: Verify all nodes are now visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:expandall")).toBeVisible(); // Root still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:expandall")).toBeVisible(); // Child now visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:expandall")).toBeVisible(); // Child now visible
-            // Note: For hierarchyTreeData, we only have 2 levels, so all should be visible after expandAll
-        }));
-        (0, fixtures_1.test)("collapseAll() - collapses all nodes and hides all children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-            const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="all"
-                data='{${JSON.stringify(testData_1.hierarchyTreeData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:collapseall">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="collapseall-btn" label="Collapse All" onClick="
-              treeApi.collapseAll();
-              testState = { actionPerformed: 'collapseAll' };
-            " />
-          </Fragment>
-        `);
-            const tree = yield createTreeDriver("tree");
-            const collapseAllButton = yield createButtonDriver("collapseall-btn");
-            // BEFORE: Verify tree starts expanded - all nodes visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:collapseall")).toBeVisible(); // Root visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:collapseall")).toBeVisible(); // Child visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:collapseall")).toBeVisible(); // Child visible
-            // Trigger collapseAll API
-            yield collapseAllButton.click();
-            // Wait for async API call to complete
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "collapseAll" });
-            // AFTER: Verify only root nodes are visible, children are hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:collapseall")).toBeVisible(); // Root still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:collapseall")).not.toBeVisible(); // Child now hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:collapseall")).not.toBeVisible(); // Child now hidden
-        }));
-        (0, fixtures_1.test)("expandAll() - with deep hierarchy (4+ levels)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-            // Create a deeper hierarchy for thorough testing
-            const deepHierarchyData = [
-                {
-                    id: 1,
-                    name: "Root Level 0",
-                    children: [
-                        {
-                            id: 2,
-                            name: "Level 1 - Branch A",
-                            children: [
-                                {
-                                    id: 3,
-                                    name: "Level 2 - Branch A.1",
-                                    children: [
-                                        { id: 4, name: "Level 3 - Leaf A.1.1", children: [] },
-                                        { id: 5, name: "Level 3 - Leaf A.1.2", children: [] },
-                                    ],
-                                },
-                                { id: 6, name: "Level 2 - Branch A.2", children: [] },
-                            ],
-                        },
-                        {
-                            id: 7,
-                            name: "Level 1 - Branch B",
-                            children: [{ id: 8, name: "Level 2 - Branch B.1", children: [] }],
-                        },
-                    ],
-                },
-            ];
-            const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                data='{${JSON.stringify(deepHierarchyData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:deep">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="expandall-deep-btn" label="Expand All Deep" onClick="
-              treeApi.expandAll();
-              testState = { actionPerformed: 'expandAllDeep' };
-            " />
-          </Fragment>
-        `);
-            const tree = yield createTreeDriver("tree");
-            const expandAllButton = yield createButtonDriver("expandall-deep-btn");
-            // BEFORE: Verify tree starts collapsed - only root visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:deep")).toBeVisible(); // Root (Level 0)
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:deep")).not.toBeVisible(); // Level 1 - Branch A (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:deep")).not.toBeVisible(); // Level 2 - Branch A.1 (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:deep")).not.toBeVisible(); // Level 3 - Leaf A.1.1 (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:deep")).not.toBeVisible(); // Level 1 - Branch B (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:deep")).not.toBeVisible(); // Level 2 - Branch B.1 (hidden)
-            // Trigger expandAll API
-            yield expandAllButton.click();
-            // Wait for async API call to complete
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "expandAllDeep" });
-            // AFTER: Verify ALL levels are now visible (4 levels deep)
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:deep")).toBeVisible(); // Root (Level 0) - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:deep")).toBeVisible(); // Level 1 - Branch A (now visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:deep")).toBeVisible(); // Level 2 - Branch A.1 (now visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:deep")).toBeVisible(); // Level 3 - Leaf A.1.1 (now visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("5:deep")).toBeVisible(); // Level 3 - Leaf A.1.2 (now visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("6:deep")).toBeVisible(); // Level 2 - Branch A.2 (now visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:deep")).toBeVisible(); // Level 1 - Branch B (now visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:deep")).toBeVisible(); // Level 2 - Branch B.1 (now visible)
-        }));
-        (0, fixtures_1.test)("collapseAll() - with deep hierarchy (4+ levels)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-            // Use the same deep hierarchy data
-            const deepHierarchyData = [
-                {
-                    id: 1,
-                    name: "Root Level 0",
-                    children: [
-                        {
-                            id: 2,
-                            name: "Level 1 - Branch A",
-                            children: [
-                                {
-                                    id: 3,
-                                    name: "Level 2 - Branch A.1",
-                                    children: [
-                                        { id: 4, name: "Level 3 - Leaf A.1.1", children: [] },
-                                        { id: 5, name: "Level 3 - Leaf A.1.2", children: [] },
-                                    ],
-                                },
-                                { id: 6, name: "Level 2 - Branch A.2", children: [] },
-                            ],
-                        },
-                        {
-                            id: 7,
-                            name: "Level 1 - Branch B",
-                            children: [{ id: 8, name: "Level 2 - Branch B.1", children: [] }],
-                        },
-                    ],
-                },
-            ];
-            const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="all"
-                data='{${JSON.stringify(deepHierarchyData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:deepcollapse">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="collapseall-deep-btn" label="Collapse All Deep" onClick="
-              treeApi.collapseAll();
-              testState = { actionPerformed: 'collapseAllDeep' };
-            " />
-          </Fragment>
-        `);
-            const tree = yield createTreeDriver("tree");
-            const collapseAllButton = yield createButtonDriver("collapseall-deep-btn");
-            // BEFORE: Verify tree starts fully expanded - all levels visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:deepcollapse")).toBeVisible(); // Root (Level 0)
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:deepcollapse")).toBeVisible(); // Level 1 - Branch A
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:deepcollapse")).toBeVisible(); // Level 2 - Branch A.1
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:deepcollapse")).toBeVisible(); // Level 3 - Leaf A.1.1
-            yield (0, fixtures_1.expect)(tree.getByTestId("5:deepcollapse")).toBeVisible(); // Level 3 - Leaf A.1.2
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:deepcollapse")).toBeVisible(); // Level 1 - Branch B
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:deepcollapse")).toBeVisible(); // Level 2 - Branch B.1
-            // Trigger collapseAll API
-            yield collapseAllButton.click();
-            // Wait for async API call to complete
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "collapseAllDeep" });
-            // AFTER: Verify only root level nodes are visible, all children hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:deepcollapse")).toBeVisible(); // Root (Level 0) - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:deepcollapse")).not.toBeVisible(); // Level 1 - Branch A (now hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:deepcollapse")).not.toBeVisible(); // Level 2 - Branch A.1 (now hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:deepcollapse")).not.toBeVisible(); // Level 3 - Leaf A.1.1 (now hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("5:deepcollapse")).not.toBeVisible(); // Level 3 - Leaf A.1.2 (now hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("6:deepcollapse")).not.toBeVisible(); // Level 2 - Branch A.2 (now hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:deepcollapse")).not.toBeVisible(); // Level 1 - Branch B (now hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:deepcollapse")).not.toBeVisible(); // Level 2 - Branch B.1 (now hidden)
-        }));
-        (0, fixtures_1.test)("expandToLevel(level) - expands nodes only to specified depth", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-            // Use deep hierarchy to test expandToLevel properly
-            const deepHierarchyData = [
-                {
-                    id: 1,
-                    name: "Root Level 0",
-                    children: [
-                        {
-                            id: 2,
-                            name: "Level 1 - Branch A",
-                            children: [
-                                {
-                                    id: 3,
-                                    name: "Level 2 - Branch A.1",
-                                    children: [
-                                        { id: 4, name: "Level 3 - Leaf A.1.1", children: [] },
-                                        { id: 5, name: "Level 3 - Leaf A.1.2", children: [] },
-                                    ],
-                                },
-                                { id: 6, name: "Level 2 - Branch A.2", children: [] },
-                            ],
-                        },
-                        {
-                            id: 7,
-                            name: "Level 1 - Branch B",
-                            children: [{ id: 8, name: "Level 2 - Branch B.1", children: [] }],
-                        },
-                    ],
-                },
-            ];
-            const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                data='{${JSON.stringify(deepHierarchyData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:level">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="expand-level0-btn" label="Expand to Level 0" onClick="
-              treeApi.expandToLevel(0);
-              testState = { actionPerformed: 'expandToLevel0' };
-            " />
-            <Button testId="expand-level1-btn" label="Expand to Level 1" onClick="
-              treeApi.expandToLevel(1);
-              testState = { actionPerformed: 'expandToLevel1' };
-            " />
-            <Button testId="expand-level2-btn" label="Expand to Level 2" onClick="
-              treeApi.expandToLevel(2);
-              testState = { actionPerformed: 'expandToLevel2' };
-            " />
-            <Button testId="expand-level3-btn" label="Expand to Level 3" onClick="
-              treeApi.expandToLevel(3);
-              testState = { actionPerformed: 'expandToLevel3' };
-            " />
-          </Fragment>
-        `);
-            const tree = yield createTreeDriver("tree");
-            const expandLevel0Button = yield createButtonDriver("expand-level0-btn");
-            const expandLevel1Button = yield createButtonDriver("expand-level1-btn");
-            const expandLevel2Button = yield createButtonDriver("expand-level2-btn");
-            const expandLevel3Button = yield createButtonDriver("expand-level3-btn");
-            // INITIAL STATE: Verify tree starts collapsed - only root visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Level 0 (Root)
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).not.toBeVisible(); // Level 1 (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).not.toBeVisible(); // Level 2 (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:level")).not.toBeVisible(); // Level 3 (hidden)
-            // TEST 1: expandToLevel(0) - should show only root level (no expansion)
-            yield expandLevel0Button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "expandToLevel0" });
-            // AFTER expandToLevel(0): Only Level 0 visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Level 0 (Root) - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).not.toBeVisible(); // Level 1 - Branch A (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:level")).not.toBeVisible(); // Level 1 - Branch B (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).not.toBeVisible(); // Level 2 - Branch A.1 (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:level")).not.toBeVisible(); // Level 2 - Branch B.1 (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:level")).not.toBeVisible(); // Level 3 - Leaf A.1.1 (hidden)
-            // TEST 2: expandToLevel(1) - should show Level 0 and Level 1 only
-            yield expandLevel1Button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "expandToLevel1" });
-            // AFTER expandToLevel(1): Level 0 and 1 visible, Level 2+ hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Level 0 (Root) - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - Branch A (now visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:level")).toBeVisible(); // Level 1 - Branch B (now visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).not.toBeVisible(); // Level 2 - Branch A.1 (still hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("6:level")).not.toBeVisible(); // Level 2 - Branch A.2 (still hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:level")).not.toBeVisible(); // Level 2 - Branch B.1 (still hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:level")).not.toBeVisible(); // Level 3 - Leaf A.1.1 (still hidden)
-            // TEST 3: expandToLevel(2) - should show Level 0, 1, and 2
-            yield expandLevel2Button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "expandToLevel2" });
-            // AFTER expandToLevel(2): Level 0, 1, and 2 visible, Level 3+ hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Level 0 (Root) - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - Branch A - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:level")).toBeVisible(); // Level 1 - Branch B - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).toBeVisible(); // Level 2 - Branch A.1 (now visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("6:level")).toBeVisible(); // Level 2 - Branch A.2 (now visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:level")).toBeVisible(); // Level 2 - Branch B.1 (now visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:level")).not.toBeVisible(); // Level 3 - Leaf A.1.1 (still hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("5:level")).not.toBeVisible(); // Level 3 - Leaf A.1.2 (still hidden)
-            // TEST 4: expandToLevel(3) - should show all levels (0, 1, 2, and 3)
-            yield expandLevel3Button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "expandToLevel3" });
-            // AFTER expandToLevel(3): All levels visible (complete expansion for this tree)
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Level 0 (Root) - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - Branch A - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:level")).toBeVisible(); // Level 1 - Branch B - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).toBeVisible(); // Level 2 - Branch A.1 - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("6:level")).toBeVisible(); // Level 2 - Branch A.2 - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:level")).toBeVisible(); // Level 2 - Branch B.1 - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:level")).toBeVisible(); // Level 3 - Leaf A.1.1 (now visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("5:level")).toBeVisible(); // Level 3 - Leaf A.1.2 (now visible)
-        }));
-        (0, fixtures_1.test)("expandNode(nodeId) - expands specific node and shows its children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-            // Use deep hierarchy to test individual node expansion
-            const deepHierarchyData = [
-                {
-                    id: 1,
-                    name: "Root Level 0",
-                    children: [
-                        {
-                            id: 2,
-                            name: "Level 1 - Branch A",
-                            children: [
-                                {
-                                    id: 3,
-                                    name: "Level 2 - Branch A.1",
-                                    children: [
-                                        { id: 4, name: "Level 3 - Leaf A.1.1", children: [] },
-                                        { id: 5, name: "Level 3 - Leaf A.1.2", children: [] },
-                                    ],
-                                },
-                                { id: 6, name: "Level 2 - Branch A.2", children: [] },
-                            ],
-                        },
-                        {
-                            id: 7,
-                            name: "Level 1 - Branch B",
-                            children: [{ id: 8, name: "Level 2 - Branch B.1", children: [] }],
-                        },
-                    ],
-                },
-            ];
-            const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                data='{${JSON.stringify(deepHierarchyData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:level">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="expand-root-btn" label="Expand Root" onClick="
-              treeApi.expandNode(1);
-              testState = { actionPerformed: 'expandRoot' };
-            " />
-            <Button testId="expand-node2-btn" label="Expand Node 2" onClick="
-              treeApi.expandNode(2);
-              testState = { actionPerformed: 'expandNode2' };
-            " />
-            <Button testId="expand-node3-btn" label="Expand Node 3" onClick="
-              treeApi.expandNode(3);
-              testState = { actionPerformed: 'expandNode3' };
-            " />
-            <Button testId="expand-node7-btn" label="Expand Node 7" onClick="
-              treeApi.expandNode(7);
-              testState = { actionPerformed: 'expandNode7' };
-            " />
-          </Fragment>
-        `);
-            const tree = yield createTreeDriver("tree");
-            const expandRootButton = yield createButtonDriver("expand-root-btn");
-            const expandNode2Button = yield createButtonDriver("expand-node2-btn");
-            const expandNode3Button = yield createButtonDriver("expand-node3-btn");
-            const expandNode7Button = yield createButtonDriver("expand-node7-btn");
-            // INITIAL STATE: Verify tree starts collapsed - only root visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Level 0 (Root) - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).not.toBeVisible(); // Level 1 - Branch A (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).not.toBeVisible(); // Level 2 - Branch A.1 (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:level")).not.toBeVisible(); // Level 3 - Leaf A.1.1 (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("6:level")).not.toBeVisible(); // Level 2 - Branch A.2 (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:level")).not.toBeVisible(); // Level 1 - Branch B (hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:level")).not.toBeVisible(); // Level 2 - Branch B.1 (hidden)
-            // FIRST: Expand root to make Level 1 nodes visible
-            yield expandRootButton.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "expandRoot" });
-            // AFTER expanding root: Level 1 nodes become visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Level 0 (Root) - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - Branch A (now visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:level")).toBeVisible(); // Level 1 - Branch B (now visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).not.toBeVisible(); // Level 2 - Branch A.1 (still hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:level")).not.toBeVisible(); // Level 3 - Leaf A.1.1 (still hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("6:level")).not.toBeVisible(); // Level 2 - Branch A.2 (still hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:level")).not.toBeVisible(); // Level 2 - Branch B.1 (still hidden)
-            // TEST 1: expandNode(2) - should expand "Level 1 - Branch A" and show its children
-            yield expandNode2Button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "expandNode2" });
-            // AFTER expandNode(2): Node 2's children become visible, others stay hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Level 0 (Root) - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - Branch A (still visible)
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).toBeVisible(); // Level 2 - Branch A.1 (now visible - child of node 2)
-            yield (0, fixtures_1.expect)(tree.getByTestId("6:level")).toBeVisible(); // Level 2 - Branch A.2 (now visible - child of node 2)
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:level")).not.toBeVisible(); // Level 3 - Leaf A.1.1 (still hidden - child of node 3)
-            yield (0, fixtures_1.expect)(tree.getByTestId("5:level")).not.toBeVisible(); // Level 3 - Leaf A.1.2 (still hidden - child of node 3)
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:level")).toBeVisible(); // Level 1 - Branch B (still visible from root expansion)
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:level")).not.toBeVisible(); // Level 2 - Branch B.1 (still hidden - child of node 7)
-            // TEST 2: expandNode(3) - should expand "Level 2 - Branch A.1" and show its children
-            yield expandNode3Button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "expandNode3" });
-            // AFTER expandNode(3): Node 3's children become visible, previous expansions remain
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Level 0 (Root) - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - Branch A - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).toBeVisible(); // Level 2 - Branch A.1 - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("6:level")).toBeVisible(); // Level 2 - Branch A.2 - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:level")).toBeVisible(); // Level 3 - Leaf A.1.1 (now visible - child of node 3)
-            yield (0, fixtures_1.expect)(tree.getByTestId("5:level")).toBeVisible(); // Level 3 - Leaf A.1.2 (now visible - child of node 3)
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:level")).toBeVisible(); // Level 1 - Branch B (still visible from root expansion)
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:level")).not.toBeVisible(); // Level 2 - Branch B.1 (still hidden - child of node 7)
-            // TEST 3: expandNode(7) - should expand "Level 1 - Branch B" and show its children
-            yield expandNode7Button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "expandNode7" });
-            // AFTER expandNode(7): Node 7's children become visible, all previous expansions remain
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Level 0 (Root) - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - Branch A - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).toBeVisible(); // Level 2 - Branch A.1 - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("6:level")).toBeVisible(); // Level 2 - Branch A.2 - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:level")).toBeVisible(); // Level 3 - Leaf A.1.1 - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("5:level")).toBeVisible(); // Level 3 - Leaf A.1.2 - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:level")).toBeVisible(); // Level 1 - Branch B - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:level")).toBeVisible(); // Level 2 - Branch B.1 (now visible - child of node 7)
-        }));
-        (0, fixtures_1.test)("expandNode(nodeId) - negative tests for invalid or inaccessible nodes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-            // Use simple hierarchy to test negative cases clearly
-            const simpleHierarchyData = [
-                {
-                    id: 1,
-                    name: "Root Level 0",
-                    children: [
-                        {
-                            id: 2,
-                            name: "Level 1 - Branch A",
-                            children: [{ id: 3, name: "Level 2 - Leaf A.1", children: [] }],
-                        },
-                    ],
-                },
-            ];
-            const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                data='{${JSON.stringify(simpleHierarchyData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:level">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="expand-nonexistent-btn" label="Expand Non-existent Node" onClick="
-              treeApi.expandNode(999);
-              testState = { actionPerformed: 'expandNonExistent' };
-            " />
-            <Button testId="expand-leaf-node3-btn" label="Expand Leaf Node 3" onClick="
-              treeApi.expandNode(3);
-              testState = { actionPerformed: 'expandLeafNode3' };
-            " />
-            <Button testId="expand-root-btn" label="Expand Root" onClick="
-              treeApi.expandNode(1);
-              testState = { actionPerformed: 'expandRoot' };
-            " />
-            <Button testId="expand-node2-btn" label="Expand Node 2" onClick="
-              treeApi.expandNode(2);
-              testState = { actionPerformed: 'expandNode2' };
-            " />
-          </Fragment>
-        `);
-            const tree = yield createTreeDriver("tree");
-            const expandNonExistentButton = yield createButtonDriver("expand-nonexistent-btn");
-            const expandLeafNode3Button = yield createButtonDriver("expand-leaf-node3-btn");
-            const expandRootButton = yield createButtonDriver("expand-root-btn");
-            const expandNode2Button = yield createButtonDriver("expand-node2-btn");
-            // INITIAL STATE: Only root visible, all children hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Root - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).not.toBeVisible(); // Level 1 - hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).not.toBeVisible(); // Level 2 - hidden
-            // NEGATIVE TEST 1: Try to expand non-existent node (ID 999)
-            yield expandNonExistentButton.click();
-            yield fixtures_1.expect
-                .poll(testStateDriver.testState)
-                .toEqual({ actionPerformed: "expandNonExistent" });
-            // AFTER expandNode(999): Should have no effect, tree state unchanged
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Root - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).not.toBeVisible(); // Level 1 - still hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).not.toBeVisible(); // Level 2 - still hidden
-            // NEGATIVE TEST 2: Try to expand leaf node 3 (which has no children) while it's hidden
-            yield expandLeafNode3Button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "expandLeafNode3" });
-            // AFTER expandNode(3) on hidden leaf: Should have no effect since node is not visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Root - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).not.toBeVisible(); // Level 1 - still hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).not.toBeVisible(); // Level 2 - still hidden
-            // Now expand the tree properly to make nodes visible
-            yield expandRootButton.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "expandRoot" });
-            yield expandNode2Button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "expandNode2" });
-            // After proper expansion: All nodes should be visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Root - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).toBeVisible(); // Level 2 - visible
-            // NEGATIVE TEST 3: Try to expand leaf node 3 again (now that it's visible but still has no children)
-            yield expandLeafNode3Button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "expandLeafNode3" });
-            // AFTER expandNode(3) on visible leaf: Should have no visible effect since leaf nodes can't expand
-            // Tree state should remain the same - all nodes still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Root - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).toBeVisible(); // Level 2 - still visible
-        }));
-        (0, fixtures_1.test)("collapseNode(nodeId) - collapses specific node and hides its children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-            // Use deep hierarchy to test individual node collapse
-            const deepHierarchyData = [
-                {
-                    id: 1,
-                    name: "Root Level 0",
-                    children: [
-                        {
-                            id: 2,
-                            name: "Level 1 - Branch A",
-                            children: [
-                                {
-                                    id: 3,
-                                    name: "Level 2 - Branch A.1",
-                                    children: [
-                                        { id: 4, name: "Level 3 - Leaf A.1.1", children: [] },
-                                        { id: 5, name: "Level 3 - Leaf A.1.2", children: [] },
-                                    ],
-                                },
-                                { id: 6, name: "Level 2 - Branch A.2", children: [] },
-                            ],
-                        },
-                        {
-                            id: 7,
-                            name: "Level 1 - Branch B",
-                            children: [{ id: 8, name: "Level 2 - Branch B.1", children: [] }],
-                        },
-                    ],
-                },
-            ];
-            const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="all"
-                data='{${JSON.stringify(deepHierarchyData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:level">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="collapse-node3-btn" label="Collapse Node 3" onClick="
-              treeApi.collapseNode(3);
-              testState = { actionPerformed: 'collapseNode3' };
-            " />
-            <Button testId="collapse-node2-btn" label="Collapse Node 2" onClick="
-              treeApi.collapseNode(2);
-              testState = { actionPerformed: 'collapseNode2' };
-            " />
-            <Button testId="collapse-root-btn" label="Collapse Root" onClick="
-              treeApi.collapseNode(1);
-              testState = { actionPerformed: 'collapseRoot' };
-            " />
-          </Fragment>
-        `);
-            const tree = yield createTreeDriver("tree");
-            const collapseNode3Button = yield createButtonDriver("collapse-node3-btn");
-            const collapseNode2Button = yield createButtonDriver("collapse-node2-btn");
-            const collapseRootButton = yield createButtonDriver("collapse-root-btn");
-            // INITIAL STATE: Tree starts fully expanded - all nodes visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Level 0 (Root) - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - Branch A - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).toBeVisible(); // Level 2 - Branch A.1 - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:level")).toBeVisible(); // Level 3 - Leaf A.1.1 - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("5:level")).toBeVisible(); // Level 3 - Leaf A.1.2 - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("6:level")).toBeVisible(); // Level 2 - Branch A.2 - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:level")).toBeVisible(); // Level 1 - Branch B - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:level")).toBeVisible(); // Level 2 - Branch B.1 - visible
-            // TEST 1: collapseNode(3) - should collapse "Level 2 - Branch A.1" and hide its children
-            yield collapseNode3Button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "collapseNode3" });
-            // AFTER collapseNode(3): Node 3's children become hidden, others remain visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Level 0 (Root) - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - Branch A - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).toBeVisible(); // Level 2 - Branch A.1 - still visible (but collapsed)
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:level")).not.toBeVisible(); // Level 3 - Leaf A.1.1 (now hidden - child of collapsed node 3)
-            yield (0, fixtures_1.expect)(tree.getByTestId("5:level")).not.toBeVisible(); // Level 3 - Leaf A.1.2 (now hidden - child of collapsed node 3)
-            yield (0, fixtures_1.expect)(tree.getByTestId("6:level")).toBeVisible(); // Level 2 - Branch A.2 - still visible (not child of node 3)
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:level")).toBeVisible(); // Level 1 - Branch B - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:level")).toBeVisible(); // Level 2 - Branch B.1 - still visible
-            // TEST 2: collapseNode(2) - should collapse "Level 1 - Branch A" and hide all its descendants
-            yield collapseNode2Button.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "collapseNode2" });
-            // AFTER collapseNode(2): Node 2's entire subtree becomes hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Level 0 (Root) - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - Branch A - still visible (but collapsed)
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).not.toBeVisible(); // Level 2 - Branch A.1 (now hidden - child of collapsed node 2)
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:level")).not.toBeVisible(); // Level 3 - Leaf A.1.1 (still hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("5:level")).not.toBeVisible(); // Level 3 - Leaf A.1.2 (still hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("6:level")).not.toBeVisible(); // Level 2 - Branch A.2 (now hidden - child of collapsed node 2)
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:level")).toBeVisible(); // Level 1 - Branch B - still visible (not descendant of node 2)
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:level")).toBeVisible(); // Level 2 - Branch B.1 - still visible
-            // TEST 3: collapseNode(1) - should collapse root and hide all children
-            yield collapseRootButton.click();
-            yield fixtures_1.expect.poll(testStateDriver.testState).toEqual({ actionPerformed: "collapseRoot" });
-            // AFTER collapseNode(1): All children of root become hidden
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Level 0 (Root) - still visible (but collapsed)
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).not.toBeVisible(); // Level 1 - Branch A (now hidden - child of collapsed root)
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).not.toBeVisible(); // Level 2 - Branch A.1 (still hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("4:level")).not.toBeVisible(); // Level 3 - Leaf A.1.1 (still hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("5:level")).not.toBeVisible(); // Level 3 - Leaf A.1.2 (still hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("6:level")).not.toBeVisible(); // Level 2 - Branch A.2 (still hidden)
-            yield (0, fixtures_1.expect)(tree.getByTestId("7:level")).not.toBeVisible(); // Level 1 - Branch B (now hidden - child of collapsed root)
-            yield (0, fixtures_1.expect)(tree.getByTestId("8:level")).not.toBeVisible(); // Level 2 - Branch B.1 (now hidden)
-        }));
-        (0, fixtures_1.test)("collapseNode(nodeId) - negative tests for invalid or leaf nodes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-            // Use simple hierarchy for negative tests
-            const simpleHierarchyData = [
-                {
-                    id: 1,
-                    name: "Root Level 0",
-                    children: [
-                        {
-                            id: 2,
-                            name: "Level 1 - Branch A",
-                            children: [{ id: 3, name: "Level 2 - Leaf A.1", children: [] }],
-                        },
-                    ],
-                },
-            ];
-            const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="all"
-                data='{${JSON.stringify(simpleHierarchyData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:level">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="collapse-nonexistent-btn" label="Collapse Non-existent Node" onClick="
-              treeApi.collapseNode(999);
-              testState = { actionPerformed: 'collapseNonExistent' };
-            " />
-            <Button testId="collapse-leaf-node3-btn" label="Collapse Leaf Node 3" onClick="
-              treeApi.collapseNode(3);
-              testState = { actionPerformed: 'collapseLeafNode3' };
-            " />
-          </Fragment>
-        `);
-            const tree = yield createTreeDriver("tree");
-            const collapseNonExistentButton = yield createButtonDriver("collapse-nonexistent-btn");
-            const collapseLeafNode3Button = yield createButtonDriver("collapse-leaf-node3-btn");
-            // INITIAL STATE: Tree starts fully expanded
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Root - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).toBeVisible(); // Level 2 - visible
-            // NEGATIVE TEST 1: Try to collapse non-existent node (ID 999)
-            yield collapseNonExistentButton.click();
-            yield fixtures_1.expect
-                .poll(testStateDriver.testState)
-                .toEqual({ actionPerformed: "collapseNonExistent" });
-            // AFTER collapseNode(999): Should have no effect, tree state unchanged
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Root - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).toBeVisible(); // Level 2 - still visible
-            // NEGATIVE TEST 2: Try to collapse leaf node 3 (which has no children to hide)
-            yield collapseLeafNode3Button.click();
-            yield fixtures_1.expect
-                .poll(testStateDriver.testState)
-                .toEqual({ actionPerformed: "collapseLeafNode3" });
-            // AFTER collapseNode(3) on leaf: Should have no visible effect since leaf nodes have no children
-            // Tree state should remain the same
-            yield (0, fixtures_1.expect)(tree.getByTestId("1:level")).toBeVisible(); // Root - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("2:level")).toBeVisible(); // Level 1 - still visible
-            yield (0, fixtures_1.expect)(tree.getByTestId("3:level")).toBeVisible(); // Level 2 - still visible
-        }));
-        (0, fixtures_1.test)("selectNode(nodeId) - API method executes without error", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createTreeDriver, createButtonDriver, }) {
-            // Use hierarchy for testing selectNode API
-            const selectableHierarchyData = [
-                {
-                    id: 1,
-                    name: "Root Level 0",
-                    children: [
-                        {
-                            id: 2,
-                            name: "Level 1 - Branch A",
-                            children: [{ id: 3, name: "Level 2 - Leaf A.1", children: [] }],
-                        },
-                    ],
-                },
-            ];
-            yield initTestBed(`
-          <Fragment>
-            <VStack height="400px" var.selectedNodeId="{null}">
-              <Text testId="selectedId">{selectedNodeId}</Text>
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="all"
-                onSelectionDidChange="node => {selectedNodeId = node.newNode.id}"
-                data='{${JSON.stringify(selectableHierarchyData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:selection">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="select-node2-btn" label="Select Node 2" onClick="treeApi.selectNode(2);" />
-            <Button testId="select-nonexistent-btn" label="Select Non-existent Node" onClick="
-              treeApi.selectNode('999');
-              const selectedNode = treeApi.getSelectedNode();
-              testState = { actionPerformed: 'selectNonExistent', selectedNodeData: selectedNode };
-            " />
-          </Fragment>
-        `);
-            const tree = yield createTreeDriver("tree");
-            const selectNode2Button = yield createButtonDriver("select-node2-btn");
-            const selectNonExistentButton = yield createButtonDriver("select-nonexistent-btn");
-            const selectedIdText = page.getByTestId("selectedId");
-            // INITIAL STATE: No selection
-            yield (0, fixtures_1.expect)(selectedIdText).toHaveText("");
-            // TEST 1: selectNode('2') API call completes without error
-            yield selectNode2Button.click();
-            yield (0, fixtures_1.expect)(selectedIdText).toHaveText("2");
-            // TEST 2: selectNode('999') with invalid ID completes without error
-            yield selectNonExistentButton.click();
-            yield (0, fixtures_1.expect)(selectedIdText).toHaveText("");
-        }));
-        (0, fixtures_1.test)("getSelectedNode() - returns correct selected node data", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-            // Simple hierarchy for testing getSelectedNode API
-            const simpleHierarchyData = [
-                {
-                    id: 1,
-                    name: "Root Level 0",
-                    children: [
-                        { id: 2, name: "Level 1 - Branch A", children: [] },
-                        { id: 3, name: "Level 1 - Branch B", children: [] },
-                    ],
-                },
-            ];
-            const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="all"
-                selectedValue="{2}"
-                data='{${JSON.stringify(simpleHierarchyData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:selection">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="get-selected-btn" label="Get Selected Node" onClick="
-              const selectedNode = treeApi.getSelectedNode();
-              testState = { 
-                actionPerformed: 'getSelected', 
-                selectedNodeData: selectedNode,
-                selectedKey: selectedNode?.key,
-                selectedName: selectedNode?.name
-              };
-            " />
-            <Button testId="get-selected-null-btn" label="Get Selected When None" onClick="
-              const selectedNode = treeApi.getSelectedNode();
-              testState = { 
-                actionPerformed: 'getSelectedNull', 
-                selectedNodeData: selectedNode 
-              };
-            " />
-          </Fragment>
-        `);
-            const getSelectedButton = yield createButtonDriver("get-selected-btn");
-            // TEST 1: getSelectedNode() returns correct node when selectedValue is set
-            yield getSelectedButton.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getSelected");
-            // Verify getSelectedNode returns the correct node data
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.selectedKey;
-            }))
-                .toBe(2);
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.selectedName;
-            }))
-                .toBe("Level 1 - Branch A");
-            // Verify the returned node is not null
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.selectedNodeData;
-            }))
-                .not.toBe(null);
-            // TEST 2: Test with no selection (update tree to have no selectedValue)
-            const { testStateDriver: testStateDriver2 } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="all"
-                data='{${JSON.stringify(simpleHierarchyData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:selection">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="get-selected-null-btn" label="Get Selected When None" onClick="
-              const selectedNode = treeApi.getSelectedNode();
-              testState = { 
-                actionPerformed: 'getSelectedNull', 
-                selectedNodeData: selectedNode 
-              };
-            " />
-          </Fragment>
-        `);
-            const getSelectedNullButton = yield createButtonDriver("get-selected-null-btn");
-            yield getSelectedNullButton.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver2.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getSelectedNull");
-            // Verify getSelectedNode returns null when no selection
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver2.testState();
-                return state.selectedNodeData;
-            }))
-                .toBe(null);
-        }));
-        (0, fixtures_1.test)("clearSelection() - API method executes without error", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-            // Simple hierarchy for testing clearSelection API
-            const simpleHierarchyData = [
-                {
-                    id: 1,
-                    name: "Root Level 0",
-                    children: [{ id: 2, name: "Level 1 - Branch A", children: [] }],
-                },
-            ];
-            const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="all"
-                data='{${JSON.stringify(simpleHierarchyData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:clear">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="clear-selection-btn" label="Clear Selection" onClick="
-              try {
-                treeApi.clearSelection();
-                testState = { 
-                  actionPerformed: 'clearSelection', 
-                  success: true,
-                  error: null
-                };
-              } catch (error) {
-                testState = { 
-                  actionPerformed: 'clearSelection', 
-                  success: false,
-                  error: error.message
-                };
-              }
-            " />
-            <Button testId="get-selected-btn" label="Get Selected Node" onClick="
-              try {
-                const selectedNode = treeApi.getSelectedNode();
-                testState = { 
-                  actionPerformed: 'getSelected', 
-                  success: true,
-                  selectedNodeData: selectedNode,
-                  error: null
-                };
-              } catch (error) {
-                testState = { 
-                  actionPerformed: 'getSelected', 
-                  success: false,
-                  error: error.message
-                };
-              }
-            " />
-          </Fragment>
-        `);
-            const clearSelectionButton = yield createButtonDriver("clear-selection-btn");
-            const getSelectedButton = yield createButtonDriver("get-selected-btn");
-            // TEST: clearSelection() API call completes without error
-            yield clearSelectionButton.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("clearSelection");
-            let currentState = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(currentState.success).toBe(true);
-            (0, fixtures_1.expect)(currentState.error).toBe(null);
-            // TEST: getSelectedNode() API call completes without error
-            yield getSelectedButton.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getSelected");
-            currentState = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(currentState.success).toBe(true);
-            (0, fixtures_1.expect)(currentState.error).toBe(null);
-            // When no selection is managed, getSelectedNode() returns null
-            (0, fixtures_1.expect)(currentState.selectedNodeData).toBe(null);
-        }));
-        (0, fixtures_1.test)("getNodeById() - returns correct node data or null for invalid keys", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-            // Rich hierarchy data for testing getNodeById API
-            const hierarchyData = [
-                {
-                    id: 1,
-                    name: "Root Level 0",
-                    children: [
-                        {
-                            id: 2,
-                            name: "Level 1 - Branch A",
-                            children: [
-                                { id: 4, name: "Level 2 - Leaf A1", children: [] },
-                                { id: 5, name: "Level 2 - Leaf A2", children: [] },
-                            ],
-                        },
-                        { id: 3, name: "Level 1 - Branch B", children: [] },
-                    ],
-                },
-                {
-                    id: 6,
-                    name: "Root Level 1",
-                    children: [{ id: 7, name: "Level 1 - Branch C", children: [] }],
-                },
-            ];
-            const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="all"
-                data='{${JSON.stringify(hierarchyData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:getById">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="get-node1-btn" label="Get Node 1" onClick="
-              const node = treeApi.getNodeById(1);
-              testState = { 
-                actionPerformed: 'getNode1', 
-                nodeData: node,
-                nodeKey: node?.key,
-                nodeName: node?.name
-              };
-            " />
-            <Button testId="get-node4-btn" label="Get Node 4" onClick="
-              const node = treeApi.getNodeById(4);
-              testState = { 
-                actionPerformed: 'getNode4', 
-                nodeData: node,
-                nodeKey: node?.key,
-                nodeName: node?.name
-              };
-            " />
-            <Button testId="get-node7-btn" label="Get Node 7" onClick="
-              const node = treeApi.getNodeById(7);
-              testState = { 
-                actionPerformed: 'getNode7', 
-                nodeData: node,
-                nodeKey: node?.key,
-                nodeName: node?.name
-              };
-            " />
-            <Button testId="get-invalid-btn" label="Get Invalid Node" onClick="
-              const node = treeApi.getNodeById(999);
-              testState = { 
-                actionPerformed: 'getInvalid', 
-                nodeData: node,
-                nodeExists: node !== null
-              };
-            " />
-          </Fragment>
-        `);
-            const getNode1Button = yield createButtonDriver("get-node1-btn");
-            const getNode4Button = yield createButtonDriver("get-node4-btn");
-            const getNode7Button = yield createButtonDriver("get-node7-btn");
-            const getInvalidButton = yield createButtonDriver("get-invalid-btn");
-            // TEST: getNodeById(1) should return root node data
-            yield getNode1Button.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getNode1");
-            let currentState = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(currentState.nodeKey).toBe(1);
-            (0, fixtures_1.expect)(currentState.nodeName).toBe("Root Level 0");
-            (0, fixtures_1.expect)(currentState.nodeData).not.toBe(null);
-            // TEST: getNodeById(4) should return deep nested node data
-            yield getNode4Button.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getNode4");
-            currentState = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(currentState.nodeKey).toBe(4);
-            (0, fixtures_1.expect)(currentState.nodeName).toBe("Level 2 - Leaf A1");
-            (0, fixtures_1.expect)(currentState.nodeData).not.toBe(null);
-            // TEST: getNodeById(7) should return node from second root
-            yield getNode7Button.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getNode7");
-            currentState = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(currentState.nodeKey).toBe(7);
-            (0, fixtures_1.expect)(currentState.nodeName).toBe("Level 1 - Branch C");
-            (0, fixtures_1.expect)(currentState.nodeData).not.toBe(null);
-            // TEST: getNodeById(999) should return null for non-existent node
-            yield getInvalidButton.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getInvalid");
-            currentState = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(currentState.nodeExists).toBe(false);
-            (0, fixtures_1.expect)(currentState.nodeData).toBe(null);
-        }));
-        (0, fixtures_1.test)("getNodeById() - can retrieve nodes within collapsed parents", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-            // Hierarchy with nested structure to test collapsed nodes
-            const hierarchyData = [
-                {
-                    id: 1,
-                    name: "Root Level 0",
-                    children: [
-                        {
-                            id: 2,
-                            name: "Level 1 - Branch A",
-                            children: [
-                                { id: 4, name: "Level 2 - Hidden Leaf A1", children: [] },
-                                { id: 5, name: "Level 2 - Hidden Leaf A2", children: [] },
-                            ],
-                        },
-                        { id: 3, name: "Level 1 - Branch B", children: [] },
-                    ],
-                },
-            ];
-            const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="all"
-                data='{${JSON.stringify(hierarchyData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:hidden">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="collapse-node2-btn" label="Collapse Node 2" onClick="
-              treeApi.collapseNode(2);
-              testState = { actionPerformed: 'collapseNode2' };
-            " />
-            <Button testId="get-visible-node1-btn" label="Get Visible Node 1" onClick="
-              const node = treeApi.getNodeById(1);
-              testState = { 
-                actionPerformed: 'getVisibleNode1', 
-                nodeData: node,
-                nodeKey: node?.key,
-                nodeName: node?.name,
-                nodeExists: node !== null
-              };
-            " />
-            <Button testId="get-hidden-node4-btn" label="Get Hidden Node 4" onClick="
-              const node = treeApi.getNodeById(4);
-              testState = { 
-                actionPerformed: 'getHiddenNode4', 
-                nodeData: node,
-                nodeKey: node?.key,
-                nodeName: node?.name,
-                nodeExists: node !== null
-              };
-            " />
-            <Button testId="get-hidden-node5-btn" label="Get Hidden Node 5" onClick="
-              const node = treeApi.getNodeById(5);
-              testState = { 
-                actionPerformed: 'getHiddenNode5', 
-                nodeData: node,
-                nodeKey: node?.key,
-                nodeName: node?.name,
-                nodeExists: node !== null
-              };
-            " />
-            <Button testId="expand-node2-btn" label="Expand Node 2" onClick="
-              treeApi.expandNode(2);
-              testState = { actionPerformed: 'expandNode2' };
-            " />
-            <Button testId="get-now-visible-node4-btn" label="Get Now Visible Node 4" onClick="
-              const node = treeApi.getNodeById(4);
-              testState = { 
-                actionPerformed: 'getNowVisibleNode4', 
-                nodeData: node,
-                nodeKey: node?.key,
-                nodeName: node?.name,
-                nodeExists: node !== null
-              };
-            " />
-          </Fragment>
-        `);
-            const tree = yield createTreeDriver("tree");
-            const collapseNode2Button = yield createButtonDriver("collapse-node2-btn");
-            const getVisibleNode1Button = yield createButtonDriver("get-visible-node1-btn");
-            const getHiddenNode4Button = yield createButtonDriver("get-hidden-node4-btn");
-            const getHiddenNode5Button = yield createButtonDriver("get-hidden-node5-btn");
-            const expandNode2Button = yield createButtonDriver("expand-node2-btn");
-            const getNowVisibleNode4Button = yield createButtonDriver("get-now-visible-node4-btn");
-            // INITIAL STATE: defaultExpanded="all", so all nodes are visible
-            // First, verify all nodes are visible initially
-            const node1Wrapper = tree.getNodeWrapperByTestId("1:hidden");
-            const node2Wrapper = tree.getNodeWrapperByTestId("2:hidden");
-            const node4Wrapper = tree.getNodeWrapperByTestId("4:hidden");
-            const node5Wrapper = tree.getNodeWrapperByTestId("5:hidden");
-            yield (0, fixtures_1.expect)(node1Wrapper).toBeVisible();
-            yield (0, fixtures_1.expect)(node2Wrapper).toBeVisible();
-            yield (0, fixtures_1.expect)(node4Wrapper).toBeVisible();
-            yield (0, fixtures_1.expect)(node5Wrapper).toBeVisible();
-            // Now collapse node 2 to hide its children
-            yield collapseNode2Button.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("collapseNode2");
-            // After collapse, node 2 is still visible but its children (4, 5) are hidden
-            yield (0, fixtures_1.expect)(node1Wrapper).toBeVisible();
-            yield (0, fixtures_1.expect)(node2Wrapper).toBeVisible();
-            yield (0, fixtures_1.expect)(node4Wrapper).not.toBeVisible();
-            yield (0, fixtures_1.expect)(node5Wrapper).not.toBeVisible();
-            // TEST: getNodeById(1) should work for visible node
-            yield getVisibleNode1Button.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getVisibleNode1");
-            let currentState = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(currentState.nodeKey).toBe(1);
-            (0, fixtures_1.expect)(currentState.nodeName).toBe("Root Level 0");
-            (0, fixtures_1.expect)(currentState.nodeExists).toBe(true);
-            // TEST: getNodeById(4) should work even though node 4 is hidden (collapsed parent)
-            // This tests whether the API can access data model nodes regardless of DOM visibility
-            yield getHiddenNode4Button.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getHiddenNode4");
-            currentState = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(currentState.nodeKey).toBe(4);
-            (0, fixtures_1.expect)(currentState.nodeName).toBe("Level 2 - Hidden Leaf A1");
-            (0, fixtures_1.expect)(currentState.nodeExists).toBe(true);
-            // TEST: getNodeById(5) should also work for another hidden node
-            yield getHiddenNode5Button.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getHiddenNode5");
-            currentState = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(currentState.nodeKey).toBe(5);
-            (0, fixtures_1.expect)(currentState.nodeName).toBe("Level 2 - Hidden Leaf A2");
-            (0, fixtures_1.expect)(currentState.nodeExists).toBe(true);
-            // Now expand the parent node to make children visible again
-            yield expandNode2Button.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("expandNode2");
-            // Verify nodes are now visible in DOM again
-            yield (0, fixtures_1.expect)(node4Wrapper).toBeVisible();
-            yield (0, fixtures_1.expect)(node5Wrapper).toBeVisible();
-            // TEST: getNodeById(4) should still work now that it's visible again
-            yield getNowVisibleNode4Button.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getNowVisibleNode4");
-            currentState = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(currentState.nodeKey).toBe(4);
-            (0, fixtures_1.expect)(currentState.nodeName).toBe("Level 2 - Hidden Leaf A1");
-            (0, fixtures_1.expect)(currentState.nodeExists).toBe(true);
-        }));
-        (0, fixtures_1.test)("getExpandedNodes() - returns array of expanded node keys", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTreeDriver, createButtonDriver, }) {
-            // Hierarchy data for testing expanded nodes tracking
-            const hierarchyData = [
-                {
-                    id: 1,
-                    name: "Root Level 0",
-                    children: [
-                        {
-                            id: 2,
-                            name: "Level 1 - Branch A",
-                            children: [
-                                { id: 4, name: "Level 2 - Leaf A1", children: [] },
-                                { id: 5, name: "Level 2 - Leaf A2", children: [] },
-                            ],
-                        },
-                        { id: 3, name: "Level 1 - Branch B", children: [] },
-                    ],
-                },
-                {
-                    id: 6,
-                    name: "Root Level 1",
-                    children: [{ id: 7, name: "Level 1 - Branch C", children: [] }],
-                },
-            ];
-            const { testStateDriver } = yield initTestBed(`
-          <Fragment>
-            <VStack height="400px">
-              <Tree id="treeApi" testId="tree"
-                dataFormat="hierarchy"
-                defaultExpanded="none"
-                data='{${JSON.stringify(hierarchyData)}}'>
-                <property name="itemTemplate">
-                  <HStack testId="{$item.id}:expand">
-                    <Text value="{$item.name}" />
-                  </HStack>
-                </property>
-              </Tree>
-            </VStack>
-            <Button testId="get-expanded-initial-btn" label="Get Expanded Initial" onClick="
-              const expanded = treeApi.getExpandedNodes();
-              testState = { 
-                actionPerformed: 'getExpandedInitial', 
-                expandedNodes: expanded,
-                expandedCount: expanded.length
-              };
-            " />
-            <Button testId="expand-node1-btn" label="Expand Node 1" onClick="
-              treeApi.expandNode(1);
-              testState = { actionPerformed: 'expandNode1' };
-            " />
-            <Button testId="get-expanded-after1-btn" label="Get Expanded After 1" onClick="
-              const expanded = treeApi.getExpandedNodes();
-              testState = { 
-                actionPerformed: 'getExpandedAfter1', 
-                expandedNodes: expanded,
-                expandedCount: expanded.length
-              };
-            " />
-            <Button testId="expand-node2-btn" label="Expand Node 2" onClick="
-              treeApi.expandNode(2);
-              testState = { actionPerformed: 'expandNode2' };
-            " />
-            <Button testId="get-expanded-after2-btn" label="Get Expanded After 2" onClick="
-              const expanded = treeApi.getExpandedNodes();
-              testState = { 
-                actionPerformed: 'getExpandedAfter2', 
-                expandedNodes: expanded,
-                expandedCount: expanded.length
-              };
-            " />
-            <Button testId="expand-all-btn" label="Expand All" onClick="
-              treeApi.expandAll();
-              testState = { actionPerformed: 'expandAll' };
-            " />
-            <Button testId="get-expanded-all-btn" label="Get Expanded All" onClick="
-              const expanded = treeApi.getExpandedNodes();
-              testState = { 
-                actionPerformed: 'getExpandedAll', 
-                expandedNodes: expanded,
-                expandedCount: expanded.length
-              };
-            " />
-            <Button testId="collapse-node2-btn" label="Collapse Node 2" onClick="
-              treeApi.collapseNode(2);
-              testState = { actionPerformed: 'collapseNode2' };
-            " />
-            <Button testId="get-expanded-after-collapse-btn" label="Get Expanded After Collapse" onClick="
-              const expanded = treeApi.getExpandedNodes();
-              testState = { 
-                actionPerformed: 'getExpandedAfterCollapse', 
-                expandedNodes: expanded,
-                expandedCount: expanded.length
-              };
-            " />
-          </Fragment>
-        `);
-            const getExpandedInitialButton = yield createButtonDriver("get-expanded-initial-btn");
-            const expandNode1Button = yield createButtonDriver("expand-node1-btn");
-            const getExpandedAfter1Button = yield createButtonDriver("get-expanded-after1-btn");
-            const expandNode2Button = yield createButtonDriver("expand-node2-btn");
-            const getExpandedAfter2Button = yield createButtonDriver("get-expanded-after2-btn");
-            const expandAllButton = yield createButtonDriver("expand-all-btn");
-            const getExpandedAllButton = yield createButtonDriver("get-expanded-all-btn");
-            const collapseNode2Button = yield createButtonDriver("collapse-node2-btn");
-            const getExpandedAfterCollapseButton = yield createButtonDriver("get-expanded-after-collapse-btn");
-            // INITIAL STATE: defaultExpanded="none", so no nodes should be expanded
-            yield getExpandedInitialButton.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getExpandedInitial");
-            let currentState = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(currentState.expandedCount).toBe(0);
-            (0, fixtures_1.expect)(currentState.expandedNodes).toEqual([]);
-            // EXPAND NODE 1: Should add node 1 to expanded list
-            yield expandNode1Button.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("expandNode1");
-            yield getExpandedAfter1Button.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getExpandedAfter1");
-            currentState = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(currentState.expandedCount).toBe(1);
-            (0, fixtures_1.expect)(currentState.expandedNodes).toEqual([1]);
-            // EXPAND NODE 2: Should add node 2 to expanded list (alongside node 1)
-            yield expandNode2Button.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("expandNode2");
-            yield getExpandedAfter2Button.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getExpandedAfter2");
-            currentState = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(currentState.expandedCount).toBe(2);
-            (0, fixtures_1.expect)(currentState.expandedNodes).toEqual(fixtures_1.expect.arrayContaining([1, 2]));
-            // EXPAND ALL: Should expand all nodes with children
-            yield expandAllButton.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("expandAll");
-            yield getExpandedAllButton.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getExpandedAll");
-            currentState = yield testStateDriver.testState();
-            // After expandAll, ALL nodes are added to the expanded list
-            // This includes leaf nodes, which is the current implementation behavior
-            (0, fixtures_1.expect)(currentState.expandedCount).toBe(7);
-            (0, fixtures_1.expect)(currentState.expandedNodes).toEqual(fixtures_1.expect.arrayContaining([1, 2, 3, 4, 5, 6, 7]));
-            // COLLAPSE NODE 2: Should remove node 2 from expanded list
-            yield collapseNode2Button.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("collapseNode2");
-            yield getExpandedAfterCollapseButton.click();
-            yield fixtures_1.expect
-                .poll(() => __awaiter(void 0, void 0, void 0, function* () {
-                const state = yield testStateDriver.testState();
-                return state.actionPerformed;
-            }))
-                .toBe("getExpandedAfterCollapse");
-            currentState = yield testStateDriver.testState();
-            (0, fixtures_1.expect)(currentState.expandedCount).toBe(4);
-            // When node 2 is collapsed, its descendants (4, 5) are also removed from expanded list
-            (0, fixtures_1.expect)(currentState.expandedNodes).toEqual(fixtures_1.expect.arrayContaining([1, 3, 6, 7]));
-            (0, fixtures_1.expect)(currentState.expandedNodes).not.toEqual(fixtures_1.expect.arrayContaining([2, 4, 5]));
-        }));
-    });
-});
-// =============================================================================
-// DYNAMIC FIELD SUPPORT TESTS
-// =============================================================================
-fixtures_1.test.describe("Dynamic Field Support", () => {
-    (0, fixtures_1.test)("should display expand/collapse icons for dynamic nodes even without children", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree testId="tree"
-          dataFormat="hierarchy"
-          data='{${JSON.stringify(testData_1.dynamicTreeData)}}'
-          defaultExpanded="none">
-          <property name="itemTemplate">
-            <HStack testId="{$item.id}:{$item.depth}">
-              <Text value="{$item.name}" />
-            </HStack>
-          </property>
-        </Tree>
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        // --- We see an extra icon because Node 3 is dynamic ---
-        yield (0, fixtures_1.expect)(tree.getIconsByName("chevronright")).toHaveCount(2);
-        // Verify tree items are rendered (only root level nodes should be visible initially)
-        yield (0, fixtures_1.expect)(page.getByTestId("1:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("3:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("4:0")).toBeVisible();
-        // Node 2 should not be visible initially as parent is collapsed
-        yield (0, fixtures_1.expect)(page.getByTestId("2:1")).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("should use custom dynamicField name", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createTreeDriver }) {
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree testId="tree"
-          dataFormat="hierarchy"
-          dynamicField="canLoadMore"
-          data='{${JSON.stringify(testData_1.customDynamicTreeData)}}'
-          defaultExpanded="none">
-          <property name="itemTemplate">
-            <HStack testId="{$item.id}:{$item.depth}">
-              <Text value="{$item.name}" />
-            </HStack>
-          </property>
-        </Tree>
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        // --- We see an extra icon because Node 3 is dynamic ---
-        yield (0, fixtures_1.expect)(tree.getIconsByName("chevronright")).toHaveCount(2);
-        // Verify tree items are rendered (only root level nodes should be visible initially)
-        yield (0, fixtures_1.expect)(page.getByTestId("1:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("3:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("4:0")).toBeVisible();
-        // Node 2 should not be visible initially as parent is collapsed
-        yield (0, fixtures_1.expect)(page.getByTestId("2:1")).not.toBeVisible();
-    }));
-    (0, fixtures_1.test)("should work with flat data format and dynamic field", (_a) => __awaiter(void 0, [_a], void 0, function* ({ page, initTestBed, createTreeDriver, }) {
-        yield initTestBed(`
-      <VStack height="400px">
-        <Tree testId="tree"
-          dataFormat="flat"
-          data='{${JSON.stringify(testData_1.dynamicFlatData)}}'
-          defaultExpanded="none">
-          <property name="itemTemplate">
-            <HStack testId="{$item.id}:{$item.depth}">
-              <Text value="{$item.name}" />
-            </HStack>
-          </property>
-        </Tree>
-      </VStack>
-    `);
-        const tree = yield createTreeDriver("tree");
-        yield (0, fixtures_1.expect)(tree.component).toBeVisible();
-        // --- We see an extra icon because Node 3 is dynamic ---
-        yield (0, fixtures_1.expect)(tree.getIconsByName("chevronright")).toHaveCount(2);
-        // Verify tree items are rendered (only root level nodes should be visible initially)
-        yield (0, fixtures_1.expect)(page.getByTestId("1:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("3:0")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByTestId("4:0")).toBeVisible();
-        // Node 2 should not be visible initially as parent is collapsed
-        yield (0, fixtures_1.expect)(page.getByTestId("2:1")).not.toBeVisible();
-    }));
-});