feat(tree-view): fixes and add tests

projects/ui/src/lib/components/po-tree-view/po-tree-view-base.component.spec.ts

@@ -68,6 +68,10 @@ describe('PoTreeViewBaseComponent:', () => {
   });
 
   describe('Methods: ', () => {
+    beforeEach(() => {
+      component.singleSelect = false;
+    });
+
     it('emitExpanded: should call collapsed.emit with tree view item if treeViewItem.expanded is false', () => {
       const treeViewItem = { label: 'Nível 01', value: 1, expanded: false };
 
@@ -112,6 +116,21 @@ describe('PoTreeViewBaseComponent:', () => {
       expect(spyUpdateItemsOnSelect).toHaveBeenCalledWith(treeViewItem);
     });
 
+    it('emitSelected: should emit without treeViewItem.subItems if is `singleSelect`', () => {
+      const treeViewItem = { label: 'Nível 01', value: 1, selected: true, subItems: [{ label: 'Nivel 02', value: 2 }] };
+      const expected = { label: 'Nível 01', value: 1, selected: true };
+
+      const spyUpdateItemsOnSelect = spyOn(component, <any>'updateItemsOnSelect');
+      const spySelectedEmit = spyOn(component['selected'], 'emit');
+
+      component.singleSelect = true;
+      component['emitSelected'](treeViewItem);
+
+      expect(component.singleSelect).toEqual(true);
+      expect(spySelectedEmit).toHaveBeenCalledWith(expected);
+      expect(spyUpdateItemsOnSelect).toHaveBeenCalledWith(expected);
+    });
+
     it('getItemsByMaxLevel: should return and not call addItem if level is 4', () => {
       const items = [];
 
@@ -228,6 +247,23 @@ describe('PoTreeViewBaseComponent:', () => {
       expect(spyExpandParentItem).not.toHaveBeenCalledWith(childItem, parentItem);
     });
 
+    it('addItem: shouldn`t call selectItemBySubItems if is `singleSelect`', () => {
+      const childItem = { label: 'Nível 02', value: 2 };
+      const parentItem = { label: 'Nível 01', value: 1 };
+      const items = [];
+
+      const expectedValue = [parentItem];
+
+      const spySelectItemBySubItems = spyOn(component, <any>'selectItemBySubItems');
+
+      component.singleSelect = true;
+      component['addItem'](items, childItem, parentItem);
+
+      expect(items.length).toBe(1);
+      expect(items).toEqual(expectedValue);
+      expect(spySelectItemBySubItems).not.toHaveBeenCalled();
+    });
+
     it('addItem: should add parentItem in items and call expandParentItem, addChildItemInParent and selectItemBySubItems', () => {
       const childItem = { label: 'Nível 02', value: 2 };
       const parentItem = { label: 'Nível 01', value: 1 };
@@ -338,7 +374,6 @@ describe('PoTreeViewBaseComponent:', () => {
       };
       const items = [selectedItem];
 
-      component.singleSelect = false;
       component.items = items;
 
       const spyGetItemsWithParentSelected = spyOn(component, <any>'getItemsWithParentSelected').and.returnValue(items);

projects/ui/src/lib/components/po-tree-view/po-tree-view-base.component.ts

@@ -150,9 +150,13 @@ export class PoTreeViewBaseComponent {
 
     this.selectedValue = treeViewItem.value;
 
-    this.updateItemsOnSelect(treeViewItem);
+    // Não emitir subItems quando for singleSelect
+    const { subItems, ...rest } = treeViewItem;
+    const treeViewToEmit = this.singleSelect ? { ...rest } : treeViewItem;
 
-    this[event].emit({ ...treeViewItem });
+    this.updateItemsOnSelect(treeViewToEmit);
+
+    this[event].emit({ ...treeViewToEmit });
   }
 
   private addChildItemInParent(childItem: PoTreeViewItem, parentItem: PoTreeViewItem) {
@@ -173,8 +177,10 @@ export class PoTreeViewBaseComponent {
       if (isNewItem) {
         this.expandParentItem(childItem, parentItem);
       }
+
       this.addChildItemInParent(childItem, parentItem);
-      this.selectItemBySubItems(parentItem);
+
+      if (!this.singleSelect) this.selectItemBySubItems(parentItem);
 
       items.push(parentItem);
     } else {
@@ -240,7 +246,7 @@ export class PoTreeViewBaseComponent {
 
       if (Array.isArray(subItems)) {
         // caso um item pai iniciar selecionado, deve selecionar os filhos.
-        if (currentItem.selected && !this.singleSelect) {
+        if (currentItem.selected) {
           this.selectAllItems(subItems, currentItem.selected);
         }
 

projects/ui/src/lib/components/po-tree-view/samples/sample-po-tree-view-labs/sample-po-tree-view-labs.component.html

@@ -16,21 +16,12 @@
   <po-info p-label="Event" [p-value]="event"> </po-info>
 </div>
 
-<div class="po-row">
-  <po-switch class="po-md-2" name="selectable" [(ngModel)]="selectable" p-label="Selectable"> </po-switch>
-</div>
-
 <po-divider p-label="Po Tree View Config"></po-divider>
 
 <div class="po-row">
-  <po-input class="po-md-4" name="level" [(ngModel)]="maxLevel" p-label="Nível máximo"> </po-input>
-  <po-switch
-    class="po-md-4"
-    name="singleSelect"
-    [(ngModel)]="singleSelect"
-    p-label="Selecionar somente um item na árvore"
-  >
-  </po-switch>
+  <po-input class="po-md-4" name="level" [(ngModel)]="maxLevel" p-label="Max Level"> </po-input>
+  <po-switch class="po-md-4" name="selectable" [(ngModel)]="selectable" p-label="Selectable"> </po-switch>
+  <po-switch class="po-md-4" name="singleSelect" [(ngModel)]="singleSelect" p-label="Single Select"> </po-switch>
 </div>
 
 <po-divider p-label="Po Tree View Item"></po-divider>
@@ -54,7 +45,7 @@
 
   <div class="po-row">
     <po-checkbox-group
-      class="po-md-6"
+      class="po-md-9"
       name="itemProperties"
       [(ngModel)]="itemProperties"
       p-columns="3"