igniteui-angular-sovn
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
1,082 lines (839 loc) • 70.3 kB
text/typescript
import { configureTestSuite } from '../../test-utils/configure-suite';
import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { IgxHierarchicalGridComponent } from './hierarchical-grid.component';
import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
import { IgxHierarchicalRowComponent } from './hierarchical-row.component';
import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
import {
IgxHierarchicalGridTestBaseComponent,
IgxHierarchicalGridRowSelectionComponent,
IgxHierarchicalGridRowSelectionTestSelectRowOnClickComponent,
IgxHierarchicalGridCustomSelectorsComponent,
IgxHierarchicalGridRowSelectionNoTransactionsComponent
} from '../../test-utils/hierarchical-grid-components.spec';
import { GridSelectionFunctions, GridFunctions } from '../../test-utils/grid-functions.spec';
import { GridSelectionMode } from '../common/enums';
import { QueryList } from '@angular/core';
import { CellType } from '../public_api';
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
describe('IgxHierarchicalGrid selection #hGrid', () => {
let fix;
let hierarchicalGrid: IgxHierarchicalGridComponent;
let rowIsland1;
let rowIsland2;
const gridData = SampleTestData.generateHGridData(5, 3);
configureTestSuite();
beforeAll(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [
NoopAnimationsModule,
IgxHierarchicalGridTestBaseComponent,
IgxHierarchicalGridRowSelectionComponent,
IgxHierarchicalGridRowSelectionTestSelectRowOnClickComponent,
IgxHierarchicalGridCustomSelectorsComponent,
IgxHierarchicalGridRowSelectionNoTransactionsComponent
]
}).compileComponents();
}))
describe('Cell selection', () => {
beforeEach(() => {
fix = TestBed.createComponent(IgxHierarchicalGridTestBaseComponent);
fix.detectChanges();
hierarchicalGrid = fix.componentInstance.hgrid;
rowIsland1 = fix.componentInstance.rowIsland;
rowIsland2 = fix.componentInstance.rowIsland2;
});
it('should allow only one cell to be selected in the whole hierarchical grid.', () => {
hierarchicalGrid.height = '500px';
hierarchicalGrid.reflow();
fix.detectChanges();
let firstRow = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
firstRow.toggle();
expect(firstRow.expanded).toBeTruthy();
let fCell = firstRow.cells.toArray()[0];
// select parent cell
GridFunctions.focusCell(fix, fCell);
fix.detectChanges();
expect(fCell.selected).toBeTruthy();
const childGrid = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
const firstChildRow = childGrid.gridAPI.get_row_by_index(0);
const fChildCell = (firstChildRow.cells as QueryList<CellType>).toArray()[0];
// select child cell
GridFunctions.focusCell(fix, fChildCell);
fix.detectChanges();
expect(fChildCell.selected).toBeTruthy();
expect(fCell.selected).toBeFalsy();
// select parent cell
firstRow = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
fCell = firstRow.cells.toArray()[0];
GridFunctions.focusCell(fix, fCell);
fix.detectChanges();
expect(fChildCell.selected).toBeFalsy();
expect(fCell.selected).toBeTruthy();
});
it('should be able to set cellSelection mode per grid', () => {
hierarchicalGrid.displayDensity = 'compact';
fix.detectChanges();
const row = hierarchicalGrid.gridAPI.get_row_by_index(3) as IgxHierarchicalRowComponent;
row.toggle();
expect(row.expanded).toBeTruthy();
const childGridLevel1 = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
childGridLevel1.cellSelection = GridSelectionMode.single;
fix.detectChanges();
const startCell = hierarchicalGrid.gridAPI.get_cell_by_index(2, 'ID');
UIInteractions.simulatePointerOverElementEvent('pointerdown', startCell.nativeElement);
fix.detectChanges();
let cell = hierarchicalGrid.gridAPI.get_cell_by_index(2, 'ChildLevels');
UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyCellsRegionSelected(hierarchicalGrid, 2, 2, 0, 1);
cell = hierarchicalGrid.gridAPI.get_cell_by_index(3, 'ChildLevels');
UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
fix.detectChanges();
UIInteractions.simulatePointerOverElementEvent('pointerup', cell.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyCellsRegionSelected(hierarchicalGrid, 2, 3, 0, 1);
GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 2, 3, 0, 1);
expect(startCell.active).toBe(true);
cell = childGridLevel1.gridAPI.get_cell_by_index(0, 'ChildLevels');
UIInteractions.simulatePointerOverElementEvent('pointerdown', cell.nativeElement);
fix.detectChanges();
cell = childGridLevel1.gridAPI.get_cell_by_index(1, 'ChildLevels');
UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
fix.detectChanges();
cell = childGridLevel1.gridAPI.get_cell_by_index(3, 'ProductName');
UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
fix.detectChanges();
UIInteractions.simulatePointerOverElementEvent('pointerup', cell.nativeElement);
fix.detectChanges();
expect(hierarchicalGrid.getSelectedRanges().length).toBe(0);
GridSelectionFunctions.verifyCellsRegionSelected(childGridLevel1, 0, 0, 1, 1);
GridSelectionFunctions.verifySelectedRange(childGridLevel1, 0, 0, 1, 1);
expect(startCell.active).toBe(false);
childGridLevel1.cellSelection = GridSelectionMode.none;
fix.detectChanges();
cell = childGridLevel1.gridAPI.get_cell_by_index(2, 'ID');
UIInteractions.simulateClickAndSelectEvent(cell.nativeElement, true);
fix.detectChanges();
expect(cell.active).toBeTrue();
expect(cell.selected).toBeFalse();
expect(childGridLevel1.getSelectedRanges().length).toBe(0);
cell = hierarchicalGrid.gridAPI.get_cell_by_index(2, 'ID');
UIInteractions.simulatePointerOverElementEvent('pointerdown', cell.nativeElement);
fix.detectChanges();
cell = hierarchicalGrid.gridAPI.get_cell_by_index(2, 'ChildLevels');
UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
fix.detectChanges();
UIInteractions.simulatePointerOverElementEvent('pointerup', cell.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyCellsRegionSelected(hierarchicalGrid, 2, 2, 0, 1);
GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 2, 2, 0, 1);
});
it('should allow to select multiple cells in the same grid on mouse drag', () => {
hierarchicalGrid.displayDensity = 'compact';
fix.detectChanges();
const row = hierarchicalGrid.gridAPI.get_row_by_index(3) as IgxHierarchicalRowComponent;
row.toggle();
expect(row.expanded).toBeTruthy();
const startCell = hierarchicalGrid.gridAPI.get_cell_by_index(1, 'ID');
UIInteractions.simulatePointerOverElementEvent('pointerdown', startCell.nativeElement);
fix.detectChanges();
let cell = hierarchicalGrid.gridAPI.get_cell_by_index(1, 'ChildLevels');
UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyCellsRegionSelected(hierarchicalGrid, 1, 1, 0, 1);
cell = hierarchicalGrid.gridAPI.get_cell_by_index(2, 'ChildLevels');
UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyCellsRegionSelected(hierarchicalGrid, 1, 2, 0, 1);
cell = hierarchicalGrid.gridAPI.get_cell_by_index(3, 'ChildLevels');
UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyCellsRegionSelected(hierarchicalGrid, 1, 3, 0, 1);
hierarchicalGrid.navigateTo(5, -1);
fix.detectChanges();
cell = hierarchicalGrid.gridAPI.get_cell_by_index(5, 'ProductName');
UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
fix.detectChanges();
UIInteractions.simulatePointerOverElementEvent('pointerup', cell.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyCellsRegionSelected(hierarchicalGrid, 1, 5, 0, 2);
GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 1, 5, 0, 2);
});
it('should NOT allow to select multiple cells in multiple grids on mouse drag', () => {
hierarchicalGrid.displayDensity = 'compact';
fix.detectChanges();
const row = hierarchicalGrid.gridAPI.get_row_by_index(3) as IgxHierarchicalRowComponent;
row.toggle();
expect(row.expanded).toBeTruthy();
const startCell = hierarchicalGrid.gridAPI.get_cell_by_index(2, 'ID');
UIInteractions.simulatePointerOverElementEvent('pointerdown', startCell.nativeElement);
fix.detectChanges();
let cell = hierarchicalGrid.gridAPI.get_cell_by_index(2, 'ChildLevels');
UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyCellsRegionSelected(hierarchicalGrid, 2, 2, 0, 1);
cell = hierarchicalGrid.gridAPI.get_cell_by_index(3, 'ChildLevels');
UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyCellsRegionSelected(hierarchicalGrid, 2, 3, 0, 1);
const childGridLevel1 = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
cell = childGridLevel1.gridAPI.get_cell_by_index(0, 'ChildLevels');
UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
fix.detectChanges();
cell = childGridLevel1.gridAPI.get_cell_by_index(1, 'ChildLevels');
UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
fix.detectChanges();
cell = hierarchicalGrid.gridAPI.get_cell_by_index(3, 'ProductName');
UIInteractions.simulatePointerOverElementEvent('pointerenter', cell.nativeElement);
fix.detectChanges();
UIInteractions.simulatePointerOverElementEvent('pointerup', cell.nativeElement);
fix.detectChanges();
expect(childGridLevel1.getSelectedRanges().length).toBe(0);
GridSelectionFunctions.verifyCellsRegionSelected(hierarchicalGrid, 2, 3, 0, 2);
GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 2, 3, 0, 2);
expect(startCell.active).toBe(true);
});
it('should be able to select range with shift + arrow keys in the parent grid', fakeAsync(() => {
hierarchicalGrid.displayDensity = 'compact';
fix.detectChanges();
let cell = hierarchicalGrid.gridAPI.get_cell_by_index(1, 'ChildLevels');
UIInteractions.simulateClickAndSelectEvent(cell);
fix.detectChanges();
UIInteractions.triggerKeyDownEvtUponElem('arrowright', cell.nativeElement, true, false, true, false);
tick(100);
fix.detectChanges();
cell = hierarchicalGrid.gridAPI.get_cell_by_index(1, 'ProductName');
UIInteractions.triggerKeyDownEvtUponElem('arrowdown', cell.nativeElement, true, false, true, false);
tick(100);
fix.detectChanges();
cell = hierarchicalGrid.gridAPI.get_cell_by_index(2, 'ProductName');
UIInteractions.triggerKeyDownEvtUponElem('arrowdown', cell.nativeElement, true, false, true, false);
tick(100);
fix.detectChanges();
GridSelectionFunctions.verifyCellSelected(cell, true);
expect(cell.active).toBeFalse();
GridSelectionFunctions.verifyCellsRegionSelected(hierarchicalGrid, 1, 3, 1, 2);
GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 1, 3, 1, 2);
}));
it('should be able to select range with shift + arrow keys in the child grid', fakeAsync(() => {
hierarchicalGrid.displayDensity = 'compact';
fix.detectChanges();
const row = hierarchicalGrid.gridAPI.get_row_by_index(1) as IgxHierarchicalRowComponent;
row.toggle();
expect(row.expanded).toBeTruthy();
const childGridLevel1 = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
let cell = childGridLevel1.gridAPI.get_cell_by_index(1, 'ChildLevels');
UIInteractions.simulateClickAndSelectEvent(cell);
fix.detectChanges();
UIInteractions.triggerKeyDownEvtUponElem('arrowright', cell.nativeElement, true, false, true, false);
tick(100);
fix.detectChanges();
cell = childGridLevel1.gridAPI.get_cell_by_index(1, 'ProductName');
UIInteractions.triggerKeyDownEvtUponElem('arrowdown', cell.nativeElement, true, false, true, false);
tick(100);
fix.detectChanges();
cell = childGridLevel1.gridAPI.get_cell_by_index(2, 'ProductName');
UIInteractions.triggerKeyDownEvtUponElem('arrowdown', cell.nativeElement, true, false, true, false);
tick(100);
fix.detectChanges();
GridSelectionFunctions.verifyCellSelected(cell, true);
expect(cell.active).toBeFalse();
GridSelectionFunctions.verifyCellsRegionSelected(childGridLevel1, 1, 3, 1, 2);
GridSelectionFunctions.verifySelectedRange(childGridLevel1, 1, 3, 1, 2);
}));
it('should be able to select range with shift + mouse click and skip the child grid', () => {
hierarchicalGrid.displayDensity = 'compact';
fix.detectChanges();
const forthRow = hierarchicalGrid.gridAPI.get_row_by_index(2) as IgxHierarchicalRowComponent;
forthRow.toggle();
expect(forthRow.expanded).toBeTruthy();
let cell = hierarchicalGrid.gridAPI.get_cell_by_index(1, 'ChildLevels');
UIInteractions.simulateClickAndSelectEvent(cell);
fix.detectChanges();
expect(cell.selected).toBeTrue();
expect(cell.active).toBeTrue();
hierarchicalGrid.navigateTo(5, -1);
fix.detectChanges();
cell = hierarchicalGrid.gridAPI.get_cell_by_index(5, 'ProductName');
UIInteractions.simulateClickAndSelectEvent(cell, true);
fix.detectChanges();
GridSelectionFunctions.verifyCellSelected(cell, true);
expect(cell.active).toBeTrue();
GridSelectionFunctions.verifyCellsRegionSelected(hierarchicalGrid, 1, 5, 1, 2);
GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 1, 5, 1, 2);
});
it('should be able to select multiple ranges holding ctrl key', () => {
hierarchicalGrid.displayDensity = 'compact';
fix.detectChanges();
const forthRow = hierarchicalGrid.gridAPI.get_row_by_index(2) as IgxHierarchicalRowComponent;
forthRow.toggle();
expect(forthRow.expanded).toBeTruthy();
let cell = hierarchicalGrid.gridAPI.get_cell_by_index(1, 'ChildLevels');
UIInteractions.simulateClickAndSelectEvent(cell);
fix.detectChanges();
expect(cell.selected).toBeTrue();
expect(cell.active).toBeTrue();
hierarchicalGrid.navigateTo(5, -1);
fix.detectChanges();
cell = hierarchicalGrid.gridAPI.get_cell_by_index(5, 'ProductName');
UIInteractions.simulateClickAndSelectEvent(cell, true);
fix.detectChanges();
GridSelectionFunctions.verifyCellSelected(cell, true);
expect(cell.active).toBeTrue();
GridSelectionFunctions.verifyCellsRegionSelected(hierarchicalGrid, 1, 5, 1, 2);
GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 1, 5, 1, 2);
cell = hierarchicalGrid.gridAPI.get_cell_by_index(5, 'ID');
UIInteractions.simulateClickAndSelectEvent(cell, false, true);
fix.detectChanges();
GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 1, 5, 1, 2, 0, 2);
GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 5, 5, 0, 0, 1, 2);
});
it('should NOT be able to create multiple ranges in multiple grids holding ctrl key', () => {
hierarchicalGrid.displayDensity = 'compact';
fix.detectChanges();
const row = hierarchicalGrid.gridAPI.get_row_by_index(2) as IgxHierarchicalRowComponent;
row.toggle();
expect(row.expanded).toBeTruthy();
const childGridLevel1 = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
let cell = hierarchicalGrid.gridAPI.get_cell_by_index(2, 'ChildLevels');
UIInteractions.simulateClickAndSelectEvent(cell, false, true);
fix.detectChanges();
cell = childGridLevel1.gridAPI.get_cell_by_index(0, 'ProductName');
UIInteractions.simulateClickAndSelectEvent(cell, false, true);
fix.detectChanges();
expect(hierarchicalGrid.getSelectedRanges().length).toBe(0);
expect(cell.selected).toBeTrue();
GridSelectionFunctions.verifySelectedRange(childGridLevel1, 0, 0, 2, 2);
cell = hierarchicalGrid.gridAPI.get_cell_by_index(0, 'ProductName');
UIInteractions.simulateClickAndSelectEvent(cell, false, true);
fix.detectChanges();
expect(childGridLevel1.getSelectedRanges().length).toBe(0);
GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 0, 0, 2, 2);
});
it('should clear the selection in parent grid when continue navigation in the child grid', fakeAsync(() => {
hierarchicalGrid.displayDensity = 'compact';
fix.detectChanges();
const row = hierarchicalGrid.gridAPI.get_row_by_index(4) as IgxHierarchicalRowComponent;
row.toggle();
expect(row.expanded).toBeTruthy();
let cell = hierarchicalGrid.gridAPI.get_cell_by_index(1, 'ChildLevels');
UIInteractions.simulateClickAndSelectEvent(cell);
fix.detectChanges();
expect(cell.selected).toBeTrue();
expect(cell.active).toBeTrue();
cell = hierarchicalGrid.gridAPI.get_cell_by_index(4, 'ChildLevels');
UIInteractions.simulateClickAndSelectEvent(cell, true);
fix.detectChanges();
GridSelectionFunctions.verifyCellsRegionSelected(hierarchicalGrid, 1, 4, 1, 1);
GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 1, 4, 1, 1);
UIInteractions.triggerKeyDownEvtUponElem('arrowdown', cell.nativeElement, true, false, true, false);
tick(30);
fix.detectChanges();
expect(hierarchicalGrid.getSelectedRanges().length).toBe(0);
}));
it('should NOT be able to create range selection between parent and child grid on mouse click + shift key', fakeAsync(() => {
hierarchicalGrid.displayDensity = 'compact';
fix.detectChanges();
const row = hierarchicalGrid.gridAPI.get_row_by_index(2) as IgxHierarchicalRowComponent;
row.toggle();
expect(row.expanded).toBeTruthy();
let cell = hierarchicalGrid.gridAPI.get_cell_by_index(2, 'ChildLevels');
UIInteractions.simulateClickAndSelectEvent(cell);
fix.detectChanges();
GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 2, 2, 1, 1);
UIInteractions.triggerKeyDownEvtUponElem('arrowdown', cell.nativeElement, true, false, true, false);
tick(30);
fix.detectChanges();
expect(hierarchicalGrid.getSelectedRanges().length).toBe(0);
cell = hierarchicalGrid.gridAPI.get_cell_by_index(0, 'ProductName');
UIInteractions.simulateClickAndSelectEvent(cell, true);
fix.detectChanges();
GridSelectionFunctions.verifySelectedRange(hierarchicalGrid, 0, 0, 2, 2);
}));
});
describe('Row Selection', () => {
beforeEach(() => {
fix = TestBed.createComponent(IgxHierarchicalGridRowSelectionComponent);
fix.detectChanges();
hierarchicalGrid = fix.componentInstance.hgrid;
rowIsland1 = fix.componentInstance.rowIsland;
rowIsland2 = fix.componentInstance.rowIsland2;
});
it('should have checkboxes on each row', fakeAsync(() => {
hierarchicalGrid.expandChildren = true;
tick(100);
fix.detectChanges();
rowIsland1.expandChildren = true;
tick(100);
fix.detectChanges();
expect(hierarchicalGrid.rowSelection).toEqual(GridSelectionMode.multiple);
GridSelectionFunctions.verifyHeaderRowHasCheckbox(fix);
GridSelectionFunctions.verifySelectionCheckBoxesAlignment(hierarchicalGrid);
for (const r of hierarchicalGrid.dataRowList.toArray()) {
GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement);
}
let childGrid = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
expect(childGrid.rowSelection).toBe(GridSelectionMode.single);
GridSelectionFunctions.verifyHeaderRowHasCheckbox(childGrid, false);
GridSelectionFunctions.verifySelectionCheckBoxesAlignment(childGrid);
for (const r of childGrid.dataRowList.toArray()) {
GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement);
}
childGrid = childGrid.gridAPI.getChildGrids(false)[0];
expect(childGrid.rowSelection).toBe(GridSelectionMode.none);
GridSelectionFunctions.verifyHeaderRowHasCheckbox(childGrid, false, false);
for (const r of childGrid.dataRowList.toArray()) {
GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement, false, false);
}
}));
it('should able to change rowSelection at runtime', async() => {
hierarchicalGrid.width = '1000px';
fix.detectChanges();
hierarchicalGrid.expandChildren = true;
fix.detectChanges();
rowIsland1.expandChildren = true;
fix.detectChanges();
await wait(30);
fix.detectChanges();
const childGridLevel1 = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
const childGridLevel2 = childGridLevel1.gridAPI.getChildGrids(false)[0];
hierarchicalGrid.selectAllRows();
childGridLevel1.selectedRows = ['00'];
fix.detectChanges();
await wait(30);
fix.detectChanges();
// Change row selection for grids
hierarchicalGrid.rowSelection = GridSelectionMode.none;
rowIsland1.rowSelection = GridSelectionMode.multiple;
rowIsland2.rowSelection = GridSelectionMode.single;
fix.detectChanges();
await wait(30);
fix.detectChanges();
expect(hierarchicalGrid.rowSelection).toBe(GridSelectionMode.none);
expect(hierarchicalGrid.selectedRows).toEqual([]);
GridSelectionFunctions.verifyHeaderRowHasCheckbox(hierarchicalGrid, false, false);
for (const r of hierarchicalGrid.dataRowList.toArray()) {
GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement, false, false);
}
expect(childGridLevel1.rowSelection).toBe(GridSelectionMode.multiple);
expect(childGridLevel1.selectedRows).toEqual([]);
GridSelectionFunctions.verifyHeaderRowHasCheckbox(childGridLevel1);
for (const r of childGridLevel1.dataRowList.toArray()) {
GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement);
}
GridSelectionFunctions.verifySelectionCheckBoxesAlignment(childGridLevel1);
expect(childGridLevel2.rowSelection).toBe(GridSelectionMode.single);
expect(childGridLevel2.selectedRows).toEqual([]);
GridSelectionFunctions.verifyHeaderRowHasCheckbox(childGridLevel2, false);
for (const r of childGridLevel2.dataRowList.toArray()) {
GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement);
}
GridSelectionFunctions.verifySelectionCheckBoxesAlignment(childGridLevel2);
});
it('should able to change showRowCheckboxes at runtime', () => {
hierarchicalGrid.expandChildren = true;
fix.detectChanges();
hierarchicalGrid.hideRowSelectors = true;
rowIsland1.hideRowSelectors = true;
fix.detectChanges();
expect(hierarchicalGrid.hideRowSelectors).toBe(true);
GridSelectionFunctions.verifyHeaderRowHasCheckbox(hierarchicalGrid, false, false);
for (const r of hierarchicalGrid.dataRowList.toArray()) {
GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement, false, false);
}
const childGridLevel1 = hierarchicalGrid.gridAPI.getChildGrids(false)[0] as IgxHierarchicalGridComponent;
expect(childGridLevel1.hideRowSelectors).toBe(true);
GridSelectionFunctions.verifyHeaderRowHasCheckbox(childGridLevel1, false, false);
for (const r of childGridLevel1.dataRowList.toArray()) {
GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement, false, false);
}
hierarchicalGrid.hideRowSelectors = false;
rowIsland1.hideRowSelectors = false;
fix.detectChanges();
expect(hierarchicalGrid.hideRowSelectors).toBe(false);
GridSelectionFunctions.verifyHeaderRowHasCheckbox(hierarchicalGrid);
for (const r of hierarchicalGrid.dataRowList.toArray()) {
GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement);
}
expect(childGridLevel1.hideRowSelectors).toBe(false);
GridSelectionFunctions.verifyHeaderRowHasCheckbox(childGridLevel1, false);
for (const r of childGridLevel1.dataRowList.toArray()) {
GridSelectionFunctions.verifyRowHasCheckbox(r.nativeElement);
}
});
it('should have fire event rowSelectionChanging', () => {
hierarchicalGrid.expandChildren = true;
fix.detectChanges();
const childGrid = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
const secondChildGrid = hierarchicalGrid.gridAPI.getChildGrids(false)[1];
const parentSpy = spyOn<any>(hierarchicalGrid.rowSelectionChanging, 'emit').and.callThrough();
const childSpy = spyOn<any>(childGrid.rowSelectionChanging, 'emit').and.callThrough();
const secondChildSpy = spyOn<any>(secondChildGrid.rowSelectionChanging, 'emit').and.callThrough();
const mockEvent = new MouseEvent('click');
// Click on a row in child grid
let row = childGrid.gridAPI.get_row_by_index(0);
row.nativeElement.dispatchEvent(mockEvent);
fix.detectChanges();
expect(secondChildSpy).toHaveBeenCalledTimes(0);
expect(parentSpy).toHaveBeenCalledTimes(0);
expect(childSpy).toHaveBeenCalledTimes(1);
expect(childSpy).toHaveBeenCalledWith({
added: [gridData[0].childData[0]],
cancel: false,
event: mockEvent,
newSelection: [gridData[0].childData[0]],
oldSelection: [],
removed: [],
owner: childGrid,
allRowsSelected: false,
});
// Click on checkbox on second row
GridSelectionFunctions.getRowCheckboxDiv(childGrid.gridAPI.get_row_by_index(1).nativeElement).dispatchEvent(mockEvent);
fix.detectChanges();
expect(secondChildSpy).toHaveBeenCalledTimes(0);
expect(parentSpy).toHaveBeenCalledTimes(0);
expect(childSpy).toHaveBeenCalledTimes(2);
expect(childSpy).toHaveBeenCalledWith({
added: [gridData[0].childData[1]],
cancel: false,
event: mockEvent,
newSelection: [gridData[0].childData[1]],
oldSelection: [gridData[0].childData[0]],
removed: [gridData[0].childData[0]],
owner: childGrid,
allRowsSelected: false
});
// Click on a row in parent grid
row = hierarchicalGrid.gridAPI.get_row_by_index(2);
row.nativeElement.dispatchEvent(mockEvent);
fix.detectChanges();
expect(secondChildSpy).toHaveBeenCalledTimes(0);
expect(childSpy).toHaveBeenCalledTimes(2);
expect(parentSpy).toHaveBeenCalledTimes(1);
expect(parentSpy).toHaveBeenCalledWith({
added: [gridData[1]],
cancel: false,
event: mockEvent,
newSelection: [gridData[1]],
oldSelection: [],
removed: [],
allRowsSelected: false,
owner: hierarchicalGrid
});
// Click on a header checkbox in parent grid
GridSelectionFunctions.getRowCheckboxDiv(GridSelectionFunctions.getHeaderRow(hierarchicalGrid)).dispatchEvent(mockEvent);
fix.detectChanges();
expect(secondChildSpy).toHaveBeenCalledTimes(0);
expect(childSpy).toHaveBeenCalledTimes(2);
expect(parentSpy).toHaveBeenCalledTimes(2);
expect(parentSpy).toHaveBeenCalledWith({
added: [gridData[0], gridData[2], gridData[3], gridData[4]],
cancel: false,
event: mockEvent,
newSelection: [gridData[1], gridData[0], gridData[2], gridData[3], gridData[4]],
oldSelection: [gridData[1]],
removed: [],
allRowsSelected: true,
owner: hierarchicalGrid
});
});
it('should be able to select multiple rows only on checkbox click when selectRowOnClick is disabled', () => {
// Click first row expand button
hierarchicalGrid.selectRowOnClick = false;
const firstRow = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
firstRow.toggle();
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
// Click on the first row
UIInteractions.simulateClickEvent(firstRow.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
expect(hierarchicalGrid.selectedRows).toEqual([]);
// Click on the first row checkbox
GridSelectionFunctions.clickRowCheckbox(firstRow);
fix.detectChanges();
expect(hierarchicalGrid.selectedRows).toEqual(['0']);
const secondRow = hierarchicalGrid.gridAPI.get_row_by_index(4);
GridSelectionFunctions.clickRowCheckbox(secondRow);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(secondRow);
expect(hierarchicalGrid.selectedRows).toEqual(['0', '3']);
});
it('should able to select multiple rows with Shift and click', () => {
expect(hierarchicalGrid.selectRowOnClick).toBe(true);
// Click first row expand button
const firstRow = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
firstRow.toggle();
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
UIInteractions.simulateClickEvent(firstRow.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow);
expect(hierarchicalGrid.selectedRows).toEqual(['0']);
const fourthRow = hierarchicalGrid.gridAPI.get_row_by_index(4);
UIInteractions.simulateClickEvent(fourthRow.nativeElement, true);
fix.detectChanges();
GridSelectionFunctions.verifyRowsArraySelected(
[firstRow, hierarchicalGrid.gridAPI.get_row_by_index(2), hierarchicalGrid.gridAPI.get_row_by_index(3), fourthRow]);
expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3']);
// Verify no rows are selected in the child grid
const childGrid = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
expect(childGrid.selectedRows).toEqual([]);
for (const r of childGrid.dataRowList.toArray()) {
GridSelectionFunctions.verifyRowSelected(r, false);
}
});
it('should NOT be able to select multiple rows with Shift and click when selectRowOnClick is disabled', () => {
hierarchicalGrid.selectRowOnClick = false;
// Click first row expand button
const firstRow = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
firstRow.toggle();
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
UIInteractions.simulateClickEvent(firstRow.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
expect(hierarchicalGrid.selectedRows).toEqual([]);
const fourthRow = hierarchicalGrid.gridAPI.get_row_by_index(4);
UIInteractions.simulateClickEvent(fourthRow.nativeElement, true);
fix.detectChanges();
GridSelectionFunctions.verifyRowsArraySelected(
[firstRow, hierarchicalGrid.gridAPI.get_row_by_index(2), hierarchicalGrid.gridAPI.get_row_by_index(3), fourthRow], false);
expect(hierarchicalGrid.selectedRows).toEqual([]);
// Verify no rows are selected in the child grid
const childGrid = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
// Row Islands selectRowOnClick should be true by default
expect(childGrid.selectRowOnClick).toBe(true);
expect(childGrid.selectedRows).toEqual([]);
for (const r of childGrid.dataRowList.toArray()) {
GridSelectionFunctions.verifyRowSelected(r, false);
}
});
it('should able to select multiple rows with Ctrl and click', () => {
expect(hierarchicalGrid.selectRowOnClick).toBe(true);
// Expand first row
const firstRow = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
firstRow.toggle();
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
UIInteractions.simulateClickEvent(firstRow.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow);
expect(hierarchicalGrid.selectedRows).toEqual(['0']);
const fourthRow = hierarchicalGrid.gridAPI.get_row_by_index(4);
UIInteractions.simulateClickEvent(fourthRow.nativeElement, false, true);
fix.detectChanges();
GridSelectionFunctions.verifyRowsArraySelected([firstRow, fourthRow]);
expect(hierarchicalGrid.selectedRows).toEqual(['0', '3']);
UIInteractions.simulateClickEvent(fourthRow.nativeElement, false, true);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(fourthRow, false);
expect(hierarchicalGrid.selectedRows).toEqual(['0']);
// Click on a row in the child grid
const childGrid = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
expect(childGrid.selectedRows).toEqual([]);
const childGridFirstRow = childGrid.gridAPI.get_row_by_index(2);
UIInteractions.simulateClickEvent(childGridFirstRow.nativeElement, false, true);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow);
expect(hierarchicalGrid.selectedRows).toEqual(['0']);
GridSelectionFunctions.verifyRowSelected(childGridFirstRow);
expect(childGrid.selectedRows).toEqual(['02']);
});
it('should NOT be able to select multiple rows with Ctrl and click when selectRowOnClick is disabled', () => {
fix = TestBed.createComponent(IgxHierarchicalGridRowSelectionTestSelectRowOnClickComponent);
fix.detectChanges();
hierarchicalGrid = fix.componentInstance.hgrid;
rowIsland1 = fix.componentInstance.rowIsland;
rowIsland2 = fix.componentInstance.rowIsland2;
expect(hierarchicalGrid.selectRowOnClick).toBe(false);
// Expand first row
const firstRow = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
firstRow.toggle();
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
UIInteractions.simulateClickEvent(firstRow.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
expect(hierarchicalGrid.selectedRows).toEqual([]);
const fourthRow = hierarchicalGrid.gridAPI.get_row_by_index(4);
UIInteractions.simulateClickEvent(fourthRow.nativeElement, false, true);
fix.detectChanges();
GridSelectionFunctions.verifyRowsArraySelected([]);
expect(hierarchicalGrid.selectedRows).toEqual([]);
// Click on a row in the child grid
const childGrid1 = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
expect(childGrid1.selectedRows).toEqual([]);
// Row Islands selectRowOnClick should be true by default
expect(childGrid1.selectRowOnClick).toBe(true);
const childGrid1FirstRow = childGrid1.gridAPI.get_row_by_index(2);
UIInteractions.simulateClickEvent(childGrid1FirstRow.nativeElement, false, true);
fix.detectChanges();
GridSelectionFunctions.verifyRowsArraySelected([]);
expect(hierarchicalGrid.selectedRows).toEqual([]);
GridSelectionFunctions.verifyRowSelected(childGrid1FirstRow);
expect(childGrid1.selectedRows).toEqual(['02']);
// Deselect selected rows in the child grid
GridSelectionFunctions.clickRowCheckbox(childGrid1FirstRow);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(childGrid1FirstRow, false);
expect(childGrid1.selectedRows).toEqual([]);
// Disable the selectRowOnClick of the second child -> should not be able to select on click
childGrid1.selectRowOnClick = false;
UIInteractions.simulateClickEvent(childGrid1FirstRow.nativeElement, false, true);
fix.detectChanges();
GridSelectionFunctions.verifyRowsArraySelected([]);
expect(hierarchicalGrid.selectedRows).toEqual([]);
GridSelectionFunctions.verifyRowSelected(childGrid1FirstRow, false);
expect(childGrid1.selectedRows).toEqual([]);
});
it('should able to select only one row when rowSelection is single', () => {
expect(hierarchicalGrid.selectRowOnClick).toBe(true);
// Expand first row
const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
row.toggle();
fix.detectChanges();
// Click on a row in the child grid
const childGrid = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
expect(childGrid.selectedRows).toEqual([]);
const firstRow = childGrid.gridAPI.get_row_by_index(0);
const secondRow = childGrid.gridAPI.get_row_by_index(2);
UIInteractions.simulateClickEvent(firstRow.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow);
expect(childGrid.selectedRows).toEqual(['00']);
// Click on second row holding Ctrl
UIInteractions.simulateClickEvent(secondRow.nativeElement, false, true);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
GridSelectionFunctions.verifyRowSelected(secondRow);
expect(childGrid.selectedRows).toEqual(['02']);
// Click on first row holding Shift key
UIInteractions.simulateClickEvent(firstRow.nativeElement, true);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow);
GridSelectionFunctions.verifyRowSelected(secondRow, false);
expect(childGrid.selectedRows).toEqual(['00']);
// Click on second row checkbox
GridSelectionFunctions.clickRowCheckbox(secondRow);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
GridSelectionFunctions.verifyRowSelected(secondRow);
expect(childGrid.selectedRows).toEqual(['02']);
});
it('should NOT be able to select a row with click when rowSelection is single and selectRowOnClick is disabled', () => {
hierarchicalGrid.selectRowOnClick = false;
// Expand first row
const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
row.toggle();
fix.detectChanges();
expect(hierarchicalGrid.selectedRows).toEqual([]);
UIInteractions.simulateClickEvent(row.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(row, false);
expect(hierarchicalGrid.selectedRows).toEqual([]);
// Click on a row in the child grid
const childGrid = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
childGrid.selectRowOnClick = false;
expect(childGrid.selectedRows).toEqual([]);
const firstRow = childGrid.gridAPI.get_row_by_index(0);
const secondRow = childGrid.gridAPI.get_row_by_index(2);
UIInteractions.simulateClickEvent(firstRow.nativeElement);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
expect(childGrid.selectedRows).toEqual([]);
// Click on second row holding Ctrl
UIInteractions.simulateClickEvent(secondRow.nativeElement, false, true);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
GridSelectionFunctions.verifyRowSelected(secondRow, false);
expect(childGrid.selectedRows).toEqual([]);
// Click on first row holding Shift key
UIInteractions.simulateClickEvent(firstRow.nativeElement, true);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
GridSelectionFunctions.verifyRowSelected(secondRow, false);
expect(childGrid.selectedRows).toEqual([]);
// Click on second row checkbox
GridSelectionFunctions.clickRowCheckbox(secondRow);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
GridSelectionFunctions.verifyRowSelected(secondRow);
expect(childGrid.selectedRows).toEqual(['02']);
});
it('should able to select/deselect all rows by clicking on the header checkbox', () => {
// Set multiple selection to first row island
rowIsland1.rowSelection = GridSelectionMode.multiple;
fix.detectChanges();
// Expand first row
let row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
row.toggle();
fix.detectChanges();
// Expand second row
row = hierarchicalGrid.gridAPI.get_row_by_index(2) as IgxHierarchicalRowComponent;
row.toggle();
fix.detectChanges();
// Select all rows in parent
GridSelectionFunctions.clickHeaderRowCheckbox(hierarchicalGrid);
fix.detectChanges();
expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']);
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true);
const childGrid1 = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
const childGrid2 = hierarchicalGrid.gridAPI.getChildGrids(false)[1];
expect(childGrid1.selectedRows).toEqual([]);
expect(childGrid2.selectedRows).toEqual([]);
GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid1);
GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid2);
// Select all rows in child
GridSelectionFunctions.clickHeaderRowCheckbox(childGrid1);
fix.detectChanges();
expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']);
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid, true);
expect(childGrid1.selectedRows).toEqual(['00', '01', '02']);
GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid1, true);
expect(childGrid2.selectedRows).toEqual([]);
GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid2);
// Deselect all rows in parent
GridSelectionFunctions.clickHeaderRowCheckbox(hierarchicalGrid);
fix.detectChanges();
expect(hierarchicalGrid.selectedRows).toEqual([]);
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid);
expect(childGrid1.selectedRows).toEqual(['00', '01', '02']);
GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid1, true);
expect(childGrid2.selectedRows).toEqual([]);
GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid2);
// Deselect all rows in child
GridSelectionFunctions.clickHeaderRowCheckbox(childGrid1);
fix.detectChanges();
expect(hierarchicalGrid.selectedRows).toEqual([]);
GridSelectionFunctions.verifyHeaderRowCheckboxState(hierarchicalGrid);
expect(childGrid1.selectedRows).toEqual([]);
GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid1);
expect(childGrid2.selectedRows).toEqual([]);
GridSelectionFunctions.verifyHeaderRowCheckboxState(childGrid2);
});
it('should have correct header checkbox state when selecting rows', () => {
const firstRow = hierarchicalGrid.gridAPI.get_row_by_index(0);
const secondRow = hierarchicalGrid.gridAPI.get_row_by_index(1);
GridSelectionFunctions.verifyHeaderRowCheckboxState(fix);
// Select all rows
hierarchicalGrid.rowList.toArray().forEach(row => {
GridSelectionFunctions.clickRowCheckbox(row);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(row);
});
GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true);
expect(hierarchicalGrid.selectedRows).toEqual(['0', '1', '2', '3', '4']);
// Unselect a row
GridSelectionFunctions.clickRowCheckbox(firstRow);
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(firstRow, false);
GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, false, true);
expect(hierarchicalGrid.selectedRows).toEqual(['1', '2', '3', '4']);
// Click on a row
secondRow.onClick(UIInteractions.getMouseEvent('click'));
fix.detectChanges();
GridSelectionFunctions.verifyRowSelected(secondRow);
GridSe