feat(tree-grid): add cascade selection flat ds test

IgniteUI · Nov 9, 2021 · 6e1a7f3 · 6e1a7f3
1 parent f800a30
commit 6e1a7f3
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 4 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts
@@ -11,7 +11,8 @@ import {
     IgxTreeGridRowEditingTransactionComponent,
     IgxTreeGridCustomRowSelectorsComponent,
     IgxTreeGridCascadingSelectionComponent,
-    IgxTreeGridCascadingSelectionTransactionComponent
+    IgxTreeGridCascadingSelectionTransactionComponent,
+    IgxTreeGridPrimaryForeignKeyCascadeSelectionComponent
 } from '../../test-utils/tree-grid-components.spec';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
@@ -31,6 +32,7 @@ import { By } from '@angular/platform-browser';
 import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
 import { IRowSelectionEventArgs } from '../common/events';
+import { constants } from 'fs';
 
 describe('IgxTreeGrid - Selection #tGrid', () => {
     configureTestSuite();
@@ -53,7 +55,8 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
                 IgxTreeGridRowEditingTransactionComponent,
                 IgxTreeGridCustomRowSelectorsComponent,
                 IgxTreeGridCascadingSelectionComponent,
-                IgxTreeGridCascadingSelectionTransactionComponent
+                IgxTreeGridCascadingSelectionTransactionComponent,
+                IgxTreeGridPrimaryForeignKeyCascadeSelectionComponent
             ],
             imports: [IgxTreeGridModule, NoopAnimationsModule, IgxGridSelectionModule, IgxActionStripModule]
         })
@@ -1366,14 +1369,42 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
             treeGrid.filter('ID', 299, IgxNumberFilteringOperand.instance().condition('doesNotEqual'));
             fix.detectChanges();
 
-            await wait(100);
+            await wait(200);
             fix.detectChanges();
 
             expect(getVisibleSelectedRows(fix).length).toBe(3);
             TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, false, null);
             TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 3, true, true);
             TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 4, true, true);
             TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 5, true, true);
+
+            // test this scenario whith tree bound to flat data
+            const fix2 = TestBed.createComponent(IgxTreeGridPrimaryForeignKeyCascadeSelectionComponent);
+            fix2.detectChanges();
+            const treeGridPKFK = fix2.componentInstance.treeGrid;
+
+            treeGridPKFK.selectRows([711, 998], true);
+            fix2.detectChanges();
+
+            expect(getVisibleSelectedRows(fix2).length).toBe(2);
+            TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix2, 0, false, null);
+            TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix2, 3, false, null);
+            TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix2, 4, true, true);
+            TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix2, 5, true, true);
+            TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix2, 6, false, false);
+
+            treeGridPKFK.filter('ID', 299, IgxNumberFilteringOperand.instance().condition('doesNotEqual'));
+            fix2.detectChanges();
+
+            await wait(200);
+            fix2.detectChanges();
+
+            expect(getVisibleSelectedRows(fix2).length).toBe(3);
+            TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix2, 0, false, null);
+            TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix2, 3, true, true);
+            TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix2, 4, true, true);
+            TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix2, 5, true, true);
+
         });
 
         it(`No rows are selected. Filter out all children for certain parent. Select this parent. It should be the only one within
@@ -1474,6 +1505,35 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
             TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 3, true, true);
         });
 
+        it(`Tree Grid with flat data. Filter out all children for a certain parent, except for one. Select it. 
+        Parent should also become selected. Clear filters. Parent should become in
+        indeterminate state as there are non-selected children.`, async () => {
+            // test this scenario whith tree bound to flat data
+            const fix2 = TestBed.createComponent(IgxTreeGridPrimaryForeignKeyCascadeSelectionComponent);
+            fix2.detectChanges();
+            const treeGridPKFK = fix2.componentInstance.treeGrid;
+
+            treeGridPKFK.filter('ID', 475, IgxNumberFilteringOperand.instance().condition('equals'));
+            await wait(100);
+            fix2.detectChanges();
+
+            treeGridPKFK.selectRows([475], true);
+            await wait(100);
+            fix2.detectChanges();
+
+            expect(getVisibleSelectedRows(fix2).length).toBe(2);
+            TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix2, 0, true, true);
+            TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix2, 1, true, true);
+
+            treeGridPKFK.clearFilter();
+            await wait(100);
+            fix2.detectChanges();
+
+            expect(getVisibleSelectedRows(fix2).length).toBe(1);
+            TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix2, 0, false, null);
+            TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix2, 1, true, true);
+        });
+
         it(`Parent in indeterminate state. Filter out its children -> parent not selected. Select parent and add new child.
         Parent -> not selected. Revert filtering so that previous records are back in the view and parent should become in
         indeterminate state because one of it children is selected`, fakeAsync(() => {
@@ -1981,3 +2041,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
 
 const getVisibleSelectedRows = (fix) => TreeGridFunctions.getAllRows(fix).filter(
     (row) => row.nativeElement.classList.contains(TREE_ROW_SELECTION_CSS_CLASS));
+function аsync(): (done: DoneFn) => Promise<void> {
+    throw new Error('Function not implemented.');
+}
+
diff --git a/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts b/projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts
@@ -1142,6 +1142,79 @@ export class SampleTestData {
         }
     ]);
 
+    public static employeeSmallPrimaryForeignKeyTreeData = () => ([
+        {
+            ID: 147,
+            ParentID: -1,
+            Name: 'John Winchester',
+            HireDate: new Date(2008, 3, 20),
+            Age: 55,
+        },
+        {
+            ID: 475,
+            ParentID: 147,
+            Name: 'Michael Langdon',
+            HireDate: new Date(2011, 6, 3),
+            Age: 30,
+        },
+        {
+            ID: 957,
+            ParentID: 147,
+            Name: 'Thomas Hardy',
+            HireDate: new Date(2009, 6, 19),
+            Age: 29,
+        },
+        {
+            ID: 317,
+            ParentID: 147,
+            Name: 'Monica Reyes',
+            HireDate: new Date(2014, 8, 18),
+            Age: 31,
+        },
+        {
+            ID: 711,
+            ParentID: 317,
+            Name: 'Roland Mendel',
+            HireDate: new Date(2015, 9, 17),
+            Age: 35
+        },
+        {
+            ID: 998,
+            ParentID: 317,
+            Name: 'Sven Ottlieb',
+            HireDate: new Date(2009, 10, 11),
+            Age: 44
+        },
+        {
+            ID: 299,
+            ParentID: 317,
+            Name: 'Peter Lewis',
+            HireDate: new Date(2018, 3, 18),
+            Age: 25
+        },
+        {
+            ID: 19,
+            ParentID: -1,
+            Name: 'Yang Wang',
+            HireDate: new Date(2010, 1, 1),
+            Age: 61,
+        },
+        {
+            ID: 847,
+            ParentID: -1,
+            Name: 'Ana Sanders',
+            HireDate: new Date(2014, 1, 22),
+            Age: 42,
+        },
+        {
+            ID: 663,
+            ParentID: 847,
+            Name: 'Elizabeth Richards',
+            HireDate: new Date(2017, 11, 9),
+            Age: 25
+        }
+    ]);
+
     /* Search tree data: Every employee node has ID, Name, HireDate, Age, JobTitle and Employees */
     public static employeeSearchTreeData = () => ([
         {
@@ -1399,7 +1472,6 @@ export class SampleTestData {
             Age: 25,
             OnPTO: false
         },
-
         {
             ID: 141,
             ParentID: 663,

diff --git a/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts b/projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts
@@ -973,3 +973,17 @@ export class IgxTreeGridGroupByAreaTestComponent {
     @ViewChild(IgxTreeGridGroupByAreaComponent, { static: true }) public groupByArea: IgxTreeGridGroupByAreaComponent;
 }
 
+@Component({
+    template: `
+    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [allowFiltering]="true" [rowSelection]="'multipleCascade'"  width="900px" height="600px">
+        <igx-column [field]="'ID'" dataType="number"></igx-column>
+        <igx-column [field]="'Name'" dataType="string"></igx-column>
+        <igx-column [field]="'HireDate'" dataType="date"></igx-column>
+        <igx-column [field]="'Age'" dataType="number"></igx-column>
+    </igx-tree-grid>
+    `
+})
+export class IgxTreeGridPrimaryForeignKeyCascadeSelectionComponent {
+    @ViewChild(IgxTreeGridComponent, { static: true }) public treeGrid: IgxTreeGridComponent;
+    public data = SampleTestData.employeeSmallPrimaryForeignKeyTreeData();
+}