chore(edit-content): add loading in nodes #28645

dotCMS · Jun 7, 2024 · a9e75f1 · a9e75f1
1 parent c85ba34
commit a9e75f1
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 28 deletions.
diff --git a/...s/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.spec.ts b/...s/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.spec.ts
@@ -175,37 +175,75 @@ describe('DotEditContentHostFolderFieldComponent', () => {
     });
 
     describe('Expand level: onNodeExpand', () => {
-        it('should update the form value with the correct format with root path', () => {
+        it('should not call getFoldersTreeNode when it is a node with children', () => {
             spectator.detectChanges();
             const mockItem = {
-                originalEvent: createFakeEvent('input'),
-                node: { ...TREE_SELECT_MOCK[0] }
+                originalEvent: createFakeEvent('select'),
+                node: {
+                    ...TREE_SELECT_MOCK[0]
+                }
             };
-            component.onNodeSelect(mockItem);
-            const value = component.formControl.value;
-            expect(value).toBe('demo.dotcms.com:/');
+            component.onNodeExpand(mockItem);
+            expect(service.getFoldersTreeNode).not.toHaveBeenCalled();
         });
 
-        it('should update the form value with the correct format with one level', () => {
+        it('should not call getFoldersTreeNode when it is a node is loading', () => {
             spectator.detectChanges();
             const mockItem = {
-                originalEvent: createFakeEvent('input'),
-                node: { ...TREE_SELECT_MOCK[0].children[0] }
+                originalEvent: createFakeEvent('select'),
+                node: {
+                    ...TREE_SELECT_MOCK[0],
+                    icon: 'spinner'
+                }
             };
-            component.onNodeSelect(mockItem);
-            const value = component.formControl.value;
-            expect(value).toBe('demo.dotcms.com:/level1/');
+            component.onNodeExpand(mockItem);
+            expect(service.getFoldersTreeNode).not.toHaveBeenCalled();
         });
 
-        it('should update the form value with the correct format with two level', () => {
+        it('should call getFoldersTreeNode when it is a node with no children', async () => {
+            const response = TREE_SELECT_MOCK[0].children;
+            service.getFoldersTreeNode.mockReturnValue(of(response));
             spectator.detectChanges();
+
+            await spectator.fixture.whenStable();
+
+            const treeDetectChangesSpy = jest.spyOn(component.treeSelect.cd, 'detectChanges');
+            const mockNode = { ...TREE_SELECT_SITES_MOCK[0] };
             const mockItem = {
-                originalEvent: createFakeEvent('input'),
-                node: { ...TREE_SELECT_MOCK[0].children[0].children[0] }
+                originalEvent: createFakeEvent('select'),
+                node: mockNode
             };
-            component.onNodeSelect(mockItem);
-            const value = component.formControl.value;
-            expect(value).toBe('demo.dotcms.com:/level1/child1/');
+            component.onNodeExpand(mockItem);
+            const hostName = mockNode.data.hostname;
+            const path = mockNode.data.path;
+            expect(service.getFoldersTreeNode).toHaveBeenCalledWith(hostName, path);
+            expect(mockNode.children).toBe(response);
+            expect(mockNode.leaf).toBe(true);
+            expect(mockNode.icon).toBe('pi pi-folder-open');
+            expect(treeDetectChangesSpy).toHaveBeenCalled();
+        });
+
+        it('should call getFoldersTreeNode when it is a node with no children and empty response', async () => {
+            const response = [];
+            service.getFoldersTreeNode.mockReturnValue(of(response));
+            spectator.detectChanges();
+
+            await spectator.fixture.whenStable();
+
+            const treeDetectChangesSpy = jest.spyOn(component.treeSelect.cd, 'detectChanges');
+            const mockNode = { ...TREE_SELECT_SITES_MOCK[0] };
+            const mockItem = {
+                originalEvent: createFakeEvent('select'),
+                node: mockNode
+            };
+            component.onNodeExpand(mockItem);
+            const hostName = mockNode.data.hostname;
+            const path = mockNode.data.path;
+            expect(service.getFoldersTreeNode).toHaveBeenCalledWith(hostName, path);
+            expect(mockNode.children).toBe(response);
+            expect(mockNode.leaf).toBe(true);
+            expect(mockNode.icon).toBe('pi pi-folder-open');
+            expect(treeDetectChangesSpy).toHaveBeenCalled();
         });
     });
 });
diff --git a/...fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.ts b/...fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.ts
@@ -69,20 +69,18 @@ export class DotEditContentHostFolderFieldComponent implements OnInit {
     }
 
     onNodeExpand(event: TreeNodeSelectItem) {
-        const children = event.node.children;
-        if (children && children.length > 0) {
+        const { node } = event;
+        const { children, icon } = node;
+        if ((children && children.length > 0) || icon?.includes('spinner')) {
             return;
         }
 
-        const { hostname, path } = event.node.data;
+        const { hostname, path } = node.data;
+        node.icon = 'pi pi-spin pi-spinner';
         this.#editContentService.getFoldersTreeNode(hostname, path).subscribe((children) => {
-            if (children.length > 0) {
-                event.node.children = children;
-            } else {
-                event.node.leaf = true;
-                event.node.icon = 'pi pi-folder-open';
-            }
-
+            node.leaf = true;
+            node.icon = 'pi pi-folder-open';
+            node.children = children;
             this.treeSelect.cd.detectChanges();
         });
     }