From a9e75f18619d13e5628062e9cd29a650362855c5 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Fri, 7 Jun 2024 09:22:36 -0400 Subject: [PATCH] chore(edit-content): add loading in nodes #28645 --- ...ontent-host-folder-field.component.spec.ts | 74 ++++++++++++++----- ...dit-content-host-folder-field.component.ts | 18 ++--- 2 files changed, 64 insertions(+), 28 deletions(-) diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.spec.ts index 67619fc8facb..698bac84f76c 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.spec.ts +++ b/core-web/libs/edit-content/src/lib/fields/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/core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.ts index a5d4ab2af653..4d0469ce8096 100644 --- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.ts +++ b/core-web/libs/edit-content/src/lib/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(); }); }