Skip to content

Commit

Permalink
feat(tree-grid): add cascade selection PF/FK tests
Browse files Browse the repository at this point in the history
  • Loading branch information
ddaribo committed Nov 10, 2021
1 parent 6e1a7f3 commit a4d0235
Show file tree
Hide file tree
Showing 2 changed files with 215 additions and 32 deletions.
237 changes: 207 additions & 30 deletions projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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);
Expand Down
10 changes: 8 additions & 2 deletions projects/igniteui-angular/src/lib/test-utils/tree-grid-components.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -906,7 +906,7 @@ export class IgxTreeGridCascadingSelectionComponent {
template: `
<igx-tree-grid #treeGrid [batchEditing]="true"
[data]="data" childDataKey="Employees" [rowSelection]="'multipleCascade'"
width="800px" height="600px" columnWidth="150px" primaryKey="ID">
width="800px" height="600px" columnWidth="150px" primaryKey="ID" [rowEditable]="true">
<igx-column [field]="'ID'" dataType="number"></igx-column>
<igx-column [field]="'Name'" dataType="string"></igx-column>
<igx-column [field]="'HireDate'" dataType="date"></igx-column>
Expand Down Expand Up @@ -975,15 +975,21 @@ export class IgxTreeGridGroupByAreaTestComponent {

@Component({
template: `
<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [allowFiltering]="true" [rowSelection]="'multipleCascade'" width="900px" height="600px">
<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [allowFiltering]="true"
[rowSelection]="'multipleCascade'" [rowEditable]="true" 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-action-strip #actionStrip>
<igx-grid-editing-actions [addRow]="true" [addChild]='true'></igx-grid-editing-actions>
</igx-action-strip>
</igx-tree-grid>
`
})
export class IgxTreeGridPrimaryForeignKeyCascadeSelectionComponent {
@ViewChild(IgxTreeGridComponent, { static: true }) public treeGrid: IgxTreeGridComponent;
@ViewChild('actionStrip', { read: IgxActionStripComponent, static: true })
public actionStrip: IgxActionStripComponent;
public data = SampleTestData.employeeSmallPrimaryForeignKeyTreeData();
}

0 comments on commit a4d0235

Please sign in to comment.