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 index 0d522285032..7dcb6f5f02e 100644 --- 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 @@ -1043,7 +1043,7 @@ describe('IgxTreeGrid - Selection #tGrid', () => { })); }); - describe('Cascading Row Selection', () => { + describe('Cascading Row Selection - Child collection data', () => { beforeEach(fakeAsync(() => { fix = TestBed.createComponent(IgxTreeGridCascadingSelectionComponent); fix.detectChanges(); @@ -1505,35 +1505,6 @@ 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(() => { @@ -1815,6 +1786,212 @@ describe('IgxTreeGrid - Selection #tGrid', () => { }); }); + describe('Cascading Row Selection - Primary/Foreign key data', () => { + beforeEach(fakeAsync(() => { + fix = TestBed.createComponent(IgxTreeGridPrimaryForeignKeyCascadeSelectionComponent); + fix.detectChanges(); + treeGrid = fix.componentInstance.treeGrid; + actionStrip = fix.componentInstance.actionStrip; + })); + + it(`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 () => { + treeGrid.filter('ID', 475, IgxNumberFilteringOperand.instance().condition('equals')); + await wait(100); + fix.detectChanges(); + + treeGrid.selectRows([475], true); + await wait(100); + fix.detectChanges(); + + expect(getVisibleSelectedRows(fix).length).toBe(2); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, true, true); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 1, true, true); + + treeGrid.clearFilter(); + await wait(100); + fix.detectChanges(); + + expect(getVisibleSelectedRows(fix).length).toBe(1); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, false, null); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 1, true, true); + }); + + it(`If there is only one selected leaf row for a particular parent and we filter it out parent's checkbox state -> non-selected. + All non-direct parents’ checkbox states should be set correctly as well`, async () => { + treeGrid.selectRows([711], true); + fix.detectChanges(); + + expect(getVisibleSelectedRows(fix).length).toBe(1); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, false, null); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 3, false, null); + + treeGrid.filter('ID', 711, IgxNumberFilteringOperand.instance().condition('doesNotEqual')); + fix.detectChanges(); + + await wait(100); + fix.detectChanges(); + + expect(getVisibleSelectedRows(fix).length).toBe(0); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, false, false); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 3, false, false); + }); + + it(`If there is only one non-selected row for a particular parent and we filter it out parent's checkbox state -> selected. + All non-direct parents’ checkbox states should be set correctly as well`, async () => { + treeGrid.selectRows([711, 998], true); + fix.detectChanges(); + + expect(getVisibleSelectedRows(fix).length).toBe(2); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, false, null); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 3, false, null); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 4, true, true); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 5, true, true); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 6, false, false); + + treeGrid.filter('ID', 299, IgxNumberFilteringOperand.instance().condition('doesNotEqual')); + fix.detectChanges(); + + 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('After adding a new child row to a selected parent its checkbox state SHOULD be indeterminate.', async () => { + treeGrid.selectRows([847], true); + fix.detectChanges(); + expect(getVisibleSelectedRows(fix).length).toBe(2); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 8, true, true); + TreeGridFunctions.verifyHeaderCheckboxSelection(fix, null); + + const row = treeGrid.gridAPI.get_row_by_index(8); + actionStrip.show(row); + fix.detectChanges(); + + // add new child through the UI + const editActions = fix.debugElement.queryAll(By.css(`igx-grid-action-button`)); + const addChildBtn = editActions[2].componentInstance; + addChildBtn.actionClick.emit(); + fix.detectChanges(); + endTransition(); + + const addRow = treeGrid.gridAPI.get_row_by_index(9); + expect(addRow.addRowUI).toBeTrue(); + + treeGrid.gridAPI.crudService.endEdit(true); + await wait(100); + fix.detectChanges(); + const addedRow = treeGrid.gridAPI.get_row_by_index(10); + expect(addedRow.rowData.Name).toBe(undefined); + + TreeGridFunctions.verifyDataRowsSelection(fix, [9], true); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 8, false, null); + TreeGridFunctions.verifyHeaderCheckboxSelection(fix, null); + }); + + it('If parent and its children are selected and we delete a child, parent SHOULD be still selected.', async () => { + treeGrid.selectRows([147], true); + fix.detectChanges(); + expect(getVisibleSelectedRows(fix).length).toBe(7); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, true, true); + TreeGridFunctions.verifyHeaderCheckboxSelection(fix, null); + + expect(treeGrid.dataRowList.length).toBe(10); + + const childRow = treeGrid.gridAPI.get_row_by_index(5); + actionStrip.show(childRow); + fix.detectChanges(); + + // delete the child through the UI + const editActions = fix.debugElement.queryAll(By.css(`igx-grid-action-button`)); + const deleteBtn = editActions[2].componentInstance; + deleteBtn.actionClick.emit(); + fix.detectChanges(); + + await wait(100); + fix.detectChanges(); + + expect(treeGrid.dataRowList.length).toBe(9); + expect(getVisibleSelectedRows(fix).length).toBe(6); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 3, true, true); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, true, true); + TreeGridFunctions.verifyHeaderCheckboxSelection(fix, null); + }); + + it('If we delete the only selected child of a parent row, the parent checkbox state SHOULD be deselected', async () => { + treeGrid.selectRows([711], true); + fix.detectChanges(); + expect(getVisibleSelectedRows(fix).length).toBe(1); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 3, false, null); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, false, null); + TreeGridFunctions.verifyHeaderCheckboxSelection(fix, null); + + expect(treeGrid.dataRowList.length).toBe(10); + + // delete the child through the API + const childRow = treeGrid.gridAPI.get_row_by_index(4); + childRow.delete(); + fix.detectChanges(); + + await wait(100); + fix.detectChanges(); + + expect(treeGrid.dataRowList.length).toBe(9); + expect(getVisibleSelectedRows(fix).length).toBe(0); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 3, false, false); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, false, false); + TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false); + }); + + it(`Set nested child row, that has its own children, as initially selected and verify + that both direct and indirect parent's checkboxes are set in the correct state.`, fakeAsync(() => { + treeGrid.selectedRows = [317]; + fix.detectChanges(); + tick(100); + fix.detectChanges(); + + expect(getVisibleSelectedRows(fix).length).toBe(4); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, false, null); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 3, true, true); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 4, true, true); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 5, true, true); + TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 6, true, true); + })); + }); + describe('Cascading Row Selection with Transaction', () => { beforeEach(fakeAsync(() => { fix = TestBed.createComponent(IgxTreeGridCascadingSelectionTransactionComponent); 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 index fbb7bfb945e..2239802455d 100644 --- 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 @@ -906,7 +906,7 @@ export class IgxTreeGridCascadingSelectionComponent { template: ` + width="800px" height="600px" columnWidth="150px" primaryKey="ID" [rowEditable]="true"> @@ -975,15 +975,21 @@ export class IgxTreeGridGroupByAreaTestComponent { @Component({ template: ` - + + + + ` }) export class IgxTreeGridPrimaryForeignKeyCascadeSelectionComponent { @ViewChild(IgxTreeGridComponent, { static: true }) public treeGrid: IgxTreeGridComponent; + @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true }) + public actionStrip: IgxActionStripComponent; public data = SampleTestData.employeeSmallPrimaryForeignKeyTreeData(); }