test: fix loading state unit test

Author: leonardomendix

packages/pluggableWidgets/tree-node-web/src/components/v2/TreeNode.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import { ValueStatus } from "mendix";
-import { ReactElement, useCallback, useMemo, useState, KeyboardEvent } from "react";
+import { ReactElement, useCallback, useMemo, useState, KeyboardEvent, Fragment } from "react";
 import "./ui/TreeNodeV2.scss";
 import { renderTreeNodeHeaderIcon, TreeNodeHeaderIcon } from "../common/HeaderIcon";
 import { TreeNodeState } from "../common/TreeNodeState";
@@ -66,16 +66,20 @@ function renderRecursiveNode(
                 >
                     <div>{children?.get(node.item)}</div>
                     <ul role="group">
-                        {node.children.map(child =>
-                            renderRecursiveNode(
-                                child,
-                                renderHeaderIcon,
-                                iconPlacement,
-                                openNodeOn,
-                                onNodeClick,
-                                children
-                            )
-                        )}
+                        {node.children.map(child => {
+                            return (
+                                <Fragment key={child.id}>
+                                    {renderRecursiveNode(
+                                        child,
+                                        renderHeaderIcon,
+                                        iconPlacement,
+                                        openNodeOn,
+                                        onNodeClick,
+                                        children
+                                    )}
+                                </Fragment>
+                            );
+                        })}
                     </ul>
                 </div>
             ) : null}

packages/pluggableWidgets/tree-node-web/src/components/v2/hooks/__tests__/useIncrementalTreeData.spec.ts

@@ -72,17 +72,31 @@ describe("useIncrementalTreeData", () => {
             expect(result.current[0].children[0].id).toBe("child");
         });
 
-        it("assigns COLLAPSED_WITH_JS when startExpanded is false", () => {
+        it("assigns LOADING on first render, then COLLAPSED_WITH_JS when startExpanded is false", () => {
             const items = [makeItem("a")];
             const config = makeConfig({ startExpanded: false });
-            const { result } = renderHook(() => useIncrementalTreeData(items, config));
+            const { result, rerender } = renderHook(
+                ({ items, config }: { items: ObjectItem[]; config: TreeConfigRef }) =>
+                    useIncrementalTreeData(items, config),
+                { initialProps: { items, config } }
+            );
+            expect(result.current[0].treeNodeState).toBe(TreeNodeState.LOADING);
+            // Simulate Mendix re-providing items (new array reference)
+            rerender({ items: [...items], config });
             expect(result.current[0].treeNodeState).toBe(TreeNodeState.COLLAPSED_WITH_JS);
         });
 
-        it("assigns EXPANDED when startExpanded is true", () => {
+        it("assigns LOADING on first render, then EXPANDED when startExpanded is true", () => {
             const items = [makeItem("a")];
             const config = makeConfig({ startExpanded: true });
-            const { result } = renderHook(() => useIncrementalTreeData(items, config));
+            const { result, rerender } = renderHook(
+                ({ items, config }: { items: ObjectItem[]; config: TreeConfigRef }) =>
+                    useIncrementalTreeData(items, config),
+                { initialProps: { items, config } }
+            );
+            expect(result.current[0].treeNodeState).toBe(TreeNodeState.LOADING);
+            // Simulate Mendix re-providing items (new array reference)
+            rerender({ items: [...items], config });
             expect(result.current[0].treeNodeState).toBe(TreeNodeState.EXPANDED);
         });
     });