UNPKG

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
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