igniteui-angular-sovn

import { TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxTreeGridExpandingComponent, IgxTreeGridPrimaryForeignKeyComponent, IgxTreeGridRowEditingComponent, IgxTreeGridLoadOnDemandComponent, IgxTreeGridLoadOnDemandHasChildrenComponent, IgxTreeGridLoadOnDemandChildDataComponent, IgxTreeGridCustomExpandersTemplateComponent } from '../../test-utils/tree-grid-components.spec'; import { TreeGridFunctions } from '../../test-utils/tree-grid-functions.spec'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { first } from 'rxjs/operators'; import { wait } from '../../test-utils/ui-interactions.spec'; import { GridFunctions } from '../../test-utils/grid-functions.spec'; import { GridSelectionMode } from '../common/enums'; import { IgxTreeGridComponent } from './tree-grid.component'; import { QueryList } from '@angular/core'; import { IgxTreeGridAPIService } from './tree-grid-api.service'; import { CellType } from '../public_api'; describe('IgxTreeGrid - Expanding / Collapsing #tGrid', () => { configureTestSuite(); let fix; let treeGrid: IgxTreeGridComponent; beforeAll(waitForAsync(() => { TestBed.configureTestingModule({ imports: [ NoopAnimationsModule, IgxTreeGridExpandingComponent, IgxTreeGridPrimaryForeignKeyComponent, IgxTreeGridLoadOnDemandComponent, IgxTreeGridLoadOnDemandHasChildrenComponent, IgxTreeGridLoadOnDemandChildDataComponent, IgxTreeGridCustomExpandersTemplateComponent, IgxTreeGridRowEditingComponent ] }).compileComponents(); })); describe('Child Collection', () => { beforeEach(() => { fix = TestBed.createComponent(IgxTreeGridExpandingComponent); fix.detectChanges(); treeGrid = fix.componentInstance.treeGrid; }); it('check row expanding and collapsing are changing rows count (UI)', () => { let rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(4); const firstRow = rows[0]; const indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(firstRow); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(7); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(4); }); it('check row expanding and collapsing are changing rows count (API)', () => { let rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(4); treeGrid.toggleRow(treeGrid.gridAPI.get_row_by_index(0).key); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(7); treeGrid.toggleRow(treeGrid.gridAPI.get_row_by_index(0).key); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(4); }); it('check expand/collapse indicator changes (UI)', () => { const rows = TreeGridFunctions.getAllRows(fix); rows.forEach(row => { TreeGridFunctions.verifyTreeRowHasCollapsedIcon(row); }); for (let rowToToggle = 0; rowToToggle < rows.length; rowToToggle++) { const indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(rows[rowToToggle]); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); for (let rowToCheck = 0; rowToCheck < rows.length; rowToCheck++) { if (rowToCheck === rowToToggle) { TreeGridFunctions.verifyTreeRowHasExpandedIcon(rows[rowToCheck]); } else { TreeGridFunctions.verifyTreeRowHasCollapsedIcon(rows[rowToCheck]); } } indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); } rows.forEach(row => { TreeGridFunctions.verifyTreeRowHasCollapsedIcon(row); }); }); it('check expand/collapse indicator changes (API)', () => { fix.detectChanges(); const rows = TreeGridFunctions.getAllRows(fix); rows.forEach(row => { TreeGridFunctions.verifyTreeRowHasCollapsedIcon(row); }); for (let rowToToggle = 0; rowToToggle < rows.length; rowToToggle++) { treeGrid.toggleRow(treeGrid.getRowByIndex(rowToToggle).key); fix.detectChanges(); for (let rowToCheck = 0; rowToCheck < rows.length; rowToCheck++) { if (rowToCheck === rowToToggle) { TreeGridFunctions.verifyTreeRowHasExpandedIcon(rows[rowToCheck]); } else { TreeGridFunctions.verifyTreeRowHasCollapsedIcon(rows[rowToCheck]); } } treeGrid.toggleRow(treeGrid.getRowByIndex(rowToToggle).key); fix.detectChanges(); } rows.forEach(row => { TreeGridFunctions.verifyTreeRowHasCollapsedIcon(row); }); fix.detectChanges(); }); it('check second level records are having the correct indentation (UI)', () => { const rows = TreeGridFunctions.getAllRows(fix); const indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(rows[0]); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 1, 1); // fix, rowIndex, expectedLevel TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 2, 1); TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 3, 1); }); it('check second level records are having the correct indentation (API)', () => { treeGrid.toggleRow(treeGrid.getRowByIndex(0).key); fix.detectChanges(); TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 1, 1); // fix, rowIndex, expectedLevel TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 2, 1); TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 3, 1); }); it('check third level records are having the correct indentation (UI)', () => { // expand second level records let rows = TreeGridFunctions.getAllRows(fix); let indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(rows[0]); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); // expand third level record rows = TreeGridFunctions.getAllRows(fix); indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(rows[3]); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); // check third level records indentation TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 4, 2); // fix, rowIndex, expectedLevel TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 5, 2); }); it('check third level records are having the correct indentation (API)', () => { // expand second level records treeGrid.toggleRow(treeGrid.getRowByIndex(0).key); fix.detectChanges(); // expand third level record treeGrid.toggleRow(treeGrid.getRowByIndex(3).key); fix.detectChanges(); // check third level records indentation TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 4, 2); // fix, rowIndex, expectedLevel TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 5, 2); }); it('check grand children are not visible when collapsing their grand parent', () => { let rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(4); // expand second level records treeGrid.toggleRow(treeGrid.getRowByIndex(0).key); fix.detectChanges(); // expand third level record treeGrid.toggleRow(treeGrid.getRowByIndex(3).key); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(9); // collapse first row with all its children and grand children treeGrid.toggleRow(treeGrid.getRowByIndex(0).key); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(4); }); it('should expand/collapse rows when changing the \'expanded\' property', () => { let rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(4); // expand a root level row let aRow = treeGrid.gridAPI.get_row_by_index(0); let cells = (aRow.cells as QueryList<CellType>).toArray(); expect(cells[0].value).toBe(147, 'wrong root level row'); expect(aRow.expanded).toBe(false); aRow.expanded = true; fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(7, 'root level row expanding problem'); // expand a second level row aRow = treeGrid.gridAPI.get_row_by_index(3); cells = (aRow.cells as QueryList<CellType>).toArray(); expect(cells[0].value).toBe(317, 'wrong second level row'); expect(aRow.expanded).toBe(false); aRow.expanded = true; fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(9, 'second level row expanding problem'); // check third level rows are having the correct values aRow = treeGrid.gridAPI.get_row_by_index(4); cells = (aRow.cells as QueryList<CellType>).toArray(); expect(cells[0].value).toBe(711, 'wrong third level row'); aRow = treeGrid.gridAPI.get_row_by_index(5); cells = (aRow.cells as QueryList<CellType>).toArray(); expect(cells[0].value).toBe(998, 'wrong third level row'); // collapse a second level row aRow = treeGrid.gridAPI.get_row_by_index(3); aRow.expanded = false; fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(7, 'second level row collapsing problem'); // collapse a root level row aRow = treeGrid.gridAPI.get_row_by_index(0); aRow.expanded = false; fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(4, 'root level row collapsing problem'); }); it('should expand/collapse when using \'expandAll\' and \'collapseAll\' methods', () => { treeGrid.paginator.perPage = 50; fix.detectChanges(); let rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(4); treeGrid.expandAll(); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBeGreaterThan(10); expect(rows.length).toBeLessThan(14); treeGrid.collapseAll(); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(4); }); it('should emit an event when expanding rows (API)', (done) => { const aRow = treeGrid.gridAPI.get_row_by_index(0); treeGrid.rowToggle.pipe(first()).subscribe((args) => { expect(args.cancel).toBe(false); expect(args.event).toBeUndefined(); expect(args.expanded).toBe(true); expect(args.rowID.ID).toBe(147); done(); }); aRow.expanded = true; }); it('should emit an event when collapsing rows (API)', (done) => { const aRow = treeGrid.gridAPI.get_row_by_index(0); aRow.expanded = true; fix.detectChanges(); treeGrid.rowToggle.pipe(first()).subscribe((args) => { expect(args.cancel).toBe(false); expect(args.event).toBeUndefined(); expect(args.expanded).toBe(false); expect(args.rowID.ID).toBe(147); done(); }); aRow.expanded = false; fix.detectChanges(); }); it('should emit an event when expanding rows (UI)', (done) => { treeGrid.rowToggle.pipe(first()).subscribe((args) => { expect(args.cancel).toBe(false); expect(args.event).toBeDefined(); expect(args.expanded).toBe(true); expect(args.rowID.ID).toBe(147); done(); }); const rowsDOM = TreeGridFunctions.getAllRows(fix); const indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[0]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); }); it('should emit an event when collapsing rows (UI)', (done) => { const rowsDOM = TreeGridFunctions.getAllRows(fix); const indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[0]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); treeGrid.rowToggle.pipe(first()).subscribe((args) => { expect(args.cancel).toBe(false); expect(args.event).toBeDefined(); expect(args.expanded).toBe(false); expect(args.rowID.ID).toBe(147); done(); }); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); }); it('should update current page when \'collapseAll\' ', () => { // Test prerequisites treeGrid.paginator.perPage = 4; fix.detectChanges(); treeGrid.expandAll(); fix.detectChanges(); // Verify current page verifyGridPager(fix, 4, '147', '1\xA0of\xA05', [true, true, false, false]); expect(treeGrid.paginator.totalPages).toBe(5); // Go to fourth page treeGrid.paginator.page = 3; fix.detectChanges(); // Verify current page verifyGridPager(fix, 4, '17', '4\xA0of\xA05', [false, false, false, false]); expect(treeGrid.paginator.totalPages).toBe(5); treeGrid.collapseAll(); fix.detectChanges(); // Verify current page is the first one and only root rows are visible. verifyGridPager(fix, 4, '147', '1\xA0of\xA01', [true, true, true, true]); expect(treeGrid.paginator.totalPages).toBe(1); }); it('Should update the paginator when a row of any level is expanded', fakeAsync(() => { // Test prerequisites treeGrid.paginator.perPage = 5; fix.detectChanges(); tick(16); treeGrid.collapseAll(); fix.detectChanges(); tick(16); // Verify current page verifyGridPager(fix, 4, '147', '1\xA0of\xA01', [true, true, true, true]); expect(treeGrid.paginator.totalPages).toBe(1); // Expand a row const rowsDOM = TreeGridFunctions.getAllRows(fix); let indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[3]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); // Verify current page verifyGridPager(fix, 5, '147', '1\xA0of\xA02', [true, true, false, false]); expect(treeGrid.paginator.totalPages).toBe(2); // Expand another row indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[1]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); treeGrid.page = 1; fix.detectChanges(); tick(16); indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[1]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); // Verify current page verifyGridPager(fix, 5, '17', '2\xA0of\xA03', [false, false, false, false]); expect(treeGrid.paginator.totalPages).toBe(3); })); it('Should update the paginator when a row of any level is collapsed', () => { // Test prerequisites treeGrid.paginator.perPage = 5; fix.detectChanges(); treeGrid.expandAll(); fix.detectChanges(); // Verify current page verifyGridPager(fix, 5, '147', '1\xA0of\xA04', [true, true, false, false]); expect(treeGrid.paginator.totalPages).toBe(4); // Go to third page treeGrid.paginator.page = 2; fix.detectChanges(); verifyGridPager(fix, 5, '19', '3\xA0of\xA04', [false, false, false, false]); expect(treeGrid.paginator.totalPages).toBe(4); const rowsDOM = TreeGridFunctions.getAllRows(fix); let indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[0]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[2]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); // // Verify current page verifyGridPager(fix, 4, '19', '3\xA0of\xA03', [false, false, true, true]); expect(treeGrid.paginator.totalPages).toBe(3); treeGrid.paginator.page = 0; fix.detectChanges(); indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[0]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); // // Verify current page verifyGridPager(fix, 5, '147', '1\xA0of\xA02', [true, true, false, false]); expect(treeGrid.paginator.totalPages).toBe(2); }); it('Should update the paginator when navigating through pages', async () => { // Async tick is required for the pager to be rendered fix.detectChanges(); await wait(); // Verify current page verifyGridPager(fix, 4, '147', '1\xA0of\xA01', [true, true, true, true]); expect(treeGrid.paginator.totalPages).toBe(1); // Go to third page const rowsDOM = TreeGridFunctions.getAllRows(fix); let indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[3]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[1]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[0]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); const tGrid: HTMLElement = treeGrid.nativeElement; GridFunctions.navigateToNextPage(tGrid); fix.detectChanges(); // Verify current page verifyGridPager(fix, 1, '101', '2\xA0of\xA02', [false, false, true, true]); expect(treeGrid.paginator.totalPages).toBe(2); GridFunctions.navigateToFirstPage(tGrid); fix.detectChanges(); // Verify current page verifyGridPager(fix, 10, '147', '1\xA0of\xA02', [true, true, false, false]); expect(treeGrid.paginator.totalPages).toBe(2); }); }); describe('Primary/Foreign key', () => { beforeEach(() => { fix = TestBed.createComponent(IgxTreeGridPrimaryForeignKeyComponent); treeGrid = fix.componentInstance.treeGrid; treeGrid.expansionDepth = 0; fix.detectChanges(); }); it('check row expanding and collapsing are changing rows count (UI)', () => { let rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(3); const firstRow = rows[0]; const indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(firstRow); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(5); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(3); }); it('check row expanding and collapsing are changing rows count (API)', () => { let rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(3); treeGrid.toggleRow(treeGrid.getRowByIndex(0).key); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(5); treeGrid.toggleRow(treeGrid.getRowByIndex(0).key); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(3); }); it('check expand/collapse indicator changes (UI)', () => { const rows = TreeGridFunctions.getAllRows(fix); rows.forEach(row => { TreeGridFunctions.verifyTreeRowHasCollapsedIcon(row); }); for (let rowToToggle = 0; rowToToggle < rows.length; rowToToggle++) { if (rowToToggle === 1) { continue; } const indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(rows[rowToToggle]); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); for (let rowToCheck = 0; rowToCheck < rows.length; rowToCheck++) { if (rowToCheck === rowToToggle) { TreeGridFunctions.verifyTreeRowHasExpandedIcon(rows[rowToCheck]); } else { TreeGridFunctions.verifyTreeRowHasCollapsedIcon(rows[rowToCheck]); } } indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); } rows.forEach(row => { TreeGridFunctions.verifyTreeRowHasCollapsedIcon(row); }); }); it('check expand/collapse indicator changes (API)', () => { const rows = TreeGridFunctions.getAllRows(fix); rows.forEach(row => { TreeGridFunctions.verifyTreeRowHasCollapsedIcon(row); }); for (let rowToToggle = 0; rowToToggle < rows.length; rowToToggle++) { const ri = treeGrid.getRowByIndex(rowToToggle).key; treeGrid.toggleRow(ri); fix.detectChanges(); for (let rowToCheck = 0; rowToCheck < rows.length; rowToCheck++) { if (rowToCheck === rowToToggle && (treeGrid.gridAPI as IgxTreeGridAPIService).allow_expansion_state_change(ri, false)) { TreeGridFunctions.verifyTreeRowHasExpandedIcon(rows[rowToCheck]); } else { TreeGridFunctions.verifyTreeRowHasCollapsedIcon(rows[rowToCheck]); } } treeGrid.toggleRow(treeGrid.getRowByIndex(rowToToggle).key); fix.detectChanges(); } rows.forEach(row => { TreeGridFunctions.verifyTreeRowHasCollapsedIcon(row); }); }); it('check second level records are having the correct indentation (UI)', () => { const rows = TreeGridFunctions.getAllRows(fix); const indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(rows[0]); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 1, 1); // fix, rowIndex, expectedLevel TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 2, 1); TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 3, 0); }); it('check second level records are having the correct indentation (API)', () => { treeGrid.toggleRow(treeGrid.getRowByIndex(0).key); fix.detectChanges(); TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 1, 1); // fix, rowIndex, expectedLevel TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 2, 1); TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 3, 0); }); it('check third level records are having the correct indentation (UI)', () => { // expand second level records let rows = TreeGridFunctions.getAllRows(fix); let indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(rows[0]); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); // expand third level record rows = TreeGridFunctions.getAllRows(fix); indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(rows[1]); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); // check third level records indentation TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 2, 2); // fix, rowIndex, expectedLevel TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 3, 2); }); it('check third level records are having the correct indentation (API)', () => { // expand second level records treeGrid.toggleRow(treeGrid.getRowByIndex(0).key); fix.detectChanges(); // expand third level record treeGrid.toggleRow(treeGrid.getRowByIndex(1).key); fix.detectChanges(); // check third level records indentation TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 2, 2); // fix, rowIndex, expectedLevel TreeGridFunctions.verifyRowIndentationLevelByIndex(fix, 3, 2); }); it('check grand children are not visible when collapsing their grand parent', () => { let rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(3); // expand second level records treeGrid.toggleRow(treeGrid.getRowByIndex(0).key); fix.detectChanges(); // expand third level record treeGrid.toggleRow(treeGrid.getRowByIndex(1).key); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(7); // collapse first row with all its children and grand children treeGrid.toggleRow(treeGrid.getRowByIndex(0).key); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(3); }); it('should expand/collapse rows when changing the \'expanded\' property', () => { let rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(3); // expand a root level row let aRow = treeGrid.gridAPI.get_row_by_index(0); let cells = (aRow.cells as QueryList<CellType>).toArray(); expect(cells[0].value).toBe(1, 'wrong root level row'); expect(aRow.expanded).toBe(false); aRow.expanded = true; fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(5, 'root level row expanding problem'); // expand a second level row aRow = treeGrid.gridAPI.get_row_by_index(1); cells = (aRow.cells as QueryList<CellType>).toArray(); expect(cells[0].value).toBe(2, 'wrong second level row'); expect(aRow.expanded).toBe(false); aRow.expanded = true; fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(7, 'second level row expanding problem'); // check third level rows are having the correct values aRow = treeGrid.gridAPI.get_row_by_index(2); cells = (aRow.cells as QueryList<CellType>).toArray(); expect(cells[0].value).toBe(3, 'wrong third level row'); aRow = treeGrid.gridAPI.get_row_by_index(3); cells = (aRow.cells as QueryList<CellType>).toArray(); expect(cells[0].value).toBe(7, 'wrong third level row'); // collapse a second level row aRow = treeGrid.gridAPI.get_row_by_index(1); aRow.expanded = false; fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(5, 'second level row collapsing problem'); // collapse a root level row aRow = treeGrid.gridAPI.get_row_by_index(0); aRow.expanded = false; fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(3, 'root level row collapsing problem'); }); it('should expand/collapse when using \'expandAll\' and \'collapseAll\' methods', () => { let rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(3); treeGrid.expandAll(); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(8); treeGrid.collapseAll(); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(3); }); it('should emit an event when expanding rows (API)', (done) => { const aRow = treeGrid.getRowByIndex(0); treeGrid.rowToggle.pipe(first()).subscribe((args) => { expect(args.cancel).toBe(false); expect(args.event).toBeUndefined(); expect(args.expanded).toBe(true); expect(args.rowID).toBe(1); done(); }); aRow.expanded = true; }); it('should emit an event when collapsing rows (API)', (done) => { const aRow = treeGrid.getRowByIndex(0); aRow.expanded = true; fix.detectChanges(); treeGrid.rowToggle.pipe(first()).subscribe((args) => { expect(args.cancel).toBe(false); expect(args.event).toBeUndefined(); expect(args.expanded).toBe(false); expect(args.rowID).toBe(1); done(); }); aRow.expanded = false; }); it('should emit an event when expanding rows (UI)', (done) => { treeGrid.rowToggle.pipe(first()).subscribe((args) => { expect(args.cancel).toBe(false); expect(args.event).toBeDefined(); expect(args.expanded).toBe(true); expect(args.rowID).toBe(1); done(); }); const rowsDOM = TreeGridFunctions.getAllRows(fix); const indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[0]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); }); it('should emit an event when collapsing rows (UI)', (done) => { const rowsDOM = TreeGridFunctions.getAllRows(fix); const indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[0]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); treeGrid.rowToggle.pipe(first()).subscribe((args) => { expect(args.cancel).toBe(false); expect(args.event).toBeDefined(); expect(args.expanded).toBe(false); expect(args.rowID).toBe(1); done(); }); indicatorDivDOM.triggerEventHandler('click', new Event('click')); }); it('should update current page when \'collapseAll\' ', () => { // Test prerequisites fix.componentInstance.paging = true; fix.detectChanges(); treeGrid.paginator.perPage = 2; fix.detectChanges(); treeGrid.expandAll(); fix.detectChanges(); // Verify current page verifyGridPager(fix, 2, '1', '1\xA0of\xA04', [true, true, false, false]); expect(treeGrid.paginator.totalPages).toBe(4); // Go to fourth page treeGrid.paginator.page = 3; fix.detectChanges(); // Verify current page verifyGridPager(fix, 2, '10', '4\xA0of\xA04', [false, false, true, true]); expect(treeGrid.paginator.totalPages).toBe(4); treeGrid.collapseAll(); fix.detectChanges(); // Verify current page is the last one and only root rows are visible. verifyGridPager(fix, 1, '10', '2\xA0of\xA02', [false, false, true, true]); expect(treeGrid.paginator.totalPages).toBe(2); }); it('Should update the paginator when a row of any level is expanded', () => { // Test prerequisites fix.componentInstance.paging = true; fix.detectChanges(); treeGrid.paginator.perPage = 5; fix.detectChanges(); treeGrid.collapseAll(); fix.detectChanges(); // Verify current page verifyGridPager(fix, 3, '1', '1\xA0of\xA01', [true, true, true, true]); expect(treeGrid.paginator.totalPages).toBe(1); // Expand a row const rowsDOM = TreeGridFunctions.getAllRows(fix); let indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[0]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); // Verify current page verifyGridPager(fix, 5, '1', '1\xA0of\xA01', [true, true, true, true]); expect(treeGrid.paginator.totalPages).toBe(1); // Expand another row indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[1]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); // Verify current page verifyGridPager(fix, 5, '1', '1\xA0of\xA02', [true, true, false, false]); expect(treeGrid.paginator.totalPages).toBe(2); treeGrid.paginator.page = 1; fix.detectChanges(); indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[1]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); // Verify current page verifyGridPager(fix, 3, '6', '2\xA0of\xA02', [false, false, true, true]); expect(treeGrid.paginator.totalPages).toBe(2); }); it('Should update the paginator when a row of any level is collapsed', () => { // Test prerequisites fix.componentInstance.paging = true; fix.detectChanges(); treeGrid.paginator.perPage = 5; fix.detectChanges(); treeGrid.expandAll(); fix.detectChanges(); // Verify current page verifyGridPager(fix, 5, '1', '1\xA0of\xA02', [true, true, false, false]); expect(treeGrid.paginator.totalPages).toBe(2); // Go to third page fix.detectChanges(); const rowsDOM = TreeGridFunctions.getAllRows(fix); let indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[0]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[2]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); // // Verify current page verifyGridPager(fix, 3, '1', '1\xA0of\xA01', [true, true, true, true]); expect(treeGrid.paginator.totalPages).toBe(1); }); it('Should update the paginator when navigating through pages', () => { // Test prerequisites fix.componentInstance.paging = true; fix.detectChanges(); treeGrid.paginator.perPage = 5; fix.detectChanges(); // Verify current page verifyGridPager(fix, 3, '1', '1\xA0of\xA01', [true, true, true, true]); expect(treeGrid.paginator.totalPages).toBe(1); // Go to third page const rowsDOM = TreeGridFunctions.getAllRows(fix); let indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[2]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[0]); indicatorDivDOM.triggerEventHandler('click', new Event('click')); fix.detectChanges(); // Verify current page verifyGridPager(fix, 5, '1', '1\xA0of\xA02', [true, true, false, false]); expect(treeGrid.paginator.totalPages).toBe(2); const tGrid: HTMLElement = treeGrid.nativeElement; GridFunctions.navigateToLastPage(tGrid); fix.detectChanges(); // Verify current page verifyGridPager(fix, 1, '9', '2\xA0of\xA02', [false, false, true, true]); expect(treeGrid.paginator.totalPages).toBe(2); GridFunctions.navigateToPrevPage(tGrid); fix.detectChanges(); // Verify current page verifyGridPager(fix, 5, '1', '1\xA0of\xA02', [true, true, false, false]); expect(treeGrid.paginator.totalPages).toBe(2); }); }); describe('Load On Demand', () => { describe('Primary/Foreign key', () => { beforeEach(() => { fix = TestBed.createComponent(IgxTreeGridLoadOnDemandComponent); fix.detectChanges(); treeGrid = fix.componentInstance.treeGrid; }); it('check expanding and collapsing a row with children', fakeAsync(() => { let rows = TreeGridFunctions.getAllRows(fix); const row = rows[0]; TreeGridFunctions.verifyTreeRowIndicator(row, false); expect(rows.length).toBe(3); let indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(row); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); TreeGridFunctions.verifyTreeRowIndicator(row, true); expect(rows.length).toBe(3); // Wait for loading RAF on first expand to complete (RAF is in test component) tick(16); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); TreeGridFunctions.verifyTreeRowIndicator(row, false); expect(rows.length).toBe(5); indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(row); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); TreeGridFunctions.verifyTreeRowIndicator(row, false); expect(rows.length).toBe(3); })); it('check expanding and collapsing a row without children', fakeAsync(() => { let rows = TreeGridFunctions.getAllRows(fix); const row = rows[1]; const indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(row); TreeGridFunctions.verifyTreeRowIndicator(row, false); expect(rows.length).toBe(3); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); TreeGridFunctions.verifyTreeRowIndicator(row, true); expect(rows.length).toBe(3); // Wait for loading RAF on first expand to complete (RAF is in test component) tick(16); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); TreeGridFunctions.verifyTreeRowIndicator(row, false, false); expect(rows.length).toBe(3); })); it('check row selection when expand a row', fakeAsync(() => { treeGrid.rowSelection = GridSelectionMode.multiple; fix.detectChanges(); treeGrid.selectAllRows(); fix.detectChanges(); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true); expect(treeGrid.selectedRows).toEqual([1, 6, 10]); let rows = TreeGridFunctions.getAllRows(fix); const row = rows[0]; expect(rows.length).toBe(3); const indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(row); indicatorDiv.triggerEventHandler('click', new Event('click')); // Wait for loading RAF on first expand to complete (RAF is in test component) tick(16); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(5); TreeGridFunctions.verifyHeaderCheckboxSelection(fix, null); TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 0, true); TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 1, false); TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 2, false); TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 3, true); TreeGridFunctions.verifyTreeRowSelectionByIndex(fix, 4, true); expect(treeGrid.selectedRows).toEqual([1, 6, 10]); })); it('check row selection within multipleCascade selection mode when expand a row', fakeAsync(() => { treeGrid.rowSelection = GridSelectionMode.multipleCascade; fix.detectChanges(); treeGrid.selectRows([1]); fix.detectChanges(); expect(treeGrid.selectedRows).toEqual([1]); TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, true, true); treeGrid.expandRow(1); // Wait for loading RAF on first expand to complete (RAF is in test component) tick(16); fix.detectChanges(); expect(treeGrid.rowList.length).toBe(5); expect(treeGrid.selectedRows.length).toBe(3); TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, true, true); TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 1, true, true); TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 2, true, true); treeGrid.expandRow(2); // Wait for loading RAF on first expand to complete (RAF is in test component) tick(16); fix.detectChanges(); expect(treeGrid.rowList.length).toBe(7); expect(treeGrid.selectedRows.length).toBe(5); TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 0, true, true); TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 1, true, true); TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 2, true, true); TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 3, true, true); TreeGridFunctions.verifyRowByIndexSelectionAndCheckboxState(fix, 4, true, true); })); }); describe('ChildDataKey', () => { beforeEach(() => { fix = TestBed.createComponent(IgxTreeGridLoadOnDemandChildDataComponent); fix.detectChanges(); treeGrid = fix.componentInstance.treeGrid; }); it('check expanding and collapsing a row with children', fakeAsync(() => { let rows = TreeGridFunctions.getAllRows(fix); const row = rows[0]; TreeGridFunctions.verifyTreeRowIndicator(row, false); expect(rows.length).toBe(3); let indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(row); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); TreeGridFunctions.verifyTreeRowIndicator(row, true); expect(rows.length).toBe(3); // Wait for loading RAF on first expand to complete (RAF is in test component) tick(16); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); TreeGridFunctions.verifyTreeRowIndicator(row, false); expect(rows.length).toBe(5); indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(row); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); TreeGridFunctions.verifyTreeRowIndicator(row, false); expect(rows.length).toBe(3); })); it('check expanding and collapsing a row without children', fakeAsync(() => { let rows = TreeGridFunctions.getAllRows(fix); const row = rows[1]; const indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(row); TreeGridFunctions.verifyTreeRowIndicator(row, false); expect(rows.length).toBe(3); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); TreeGridFunctions.verifyTreeRowIndicator(row, true); expect(rows.length).toBe(3); // Wait for loading RAF on first expand to complete (RAF is in test component) tick(16); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); TreeGridFunctions.verifyTreeRowIndicator(row, false, false); expect(rows.length).toBe(3); })); }); describe('HasChildrenKey', () => { beforeEach(() => { fix = TestBed.createComponent(IgxTreeGridLoadOnDemandHasChildrenComponent); fix.detectChanges(); treeGrid = fix.componentInstance.treeGrid; }); it('check expanding and collapsing a row with children', fakeAsync(() => { let rows = TreeGridFunctions.getAllRows(fix); const firstRow = rows[0]; const secondRow = rows[1]; TreeGridFunctions.verifyTreeRowIndicator(firstRow, false); TreeGridFunctions.verifyTreeRowIndicator(secondRow, false, false); expect(rows.length).toBe(3); let indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(firstRow); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); TreeGridFunctions.verifyTreeRowIndicator(firstRow, true); expect(rows.length).toBe(3); // Wait for loading RAF on first expand to complete (RAF is in test component) tick(16); fix.detectChanges(); rows = TreeGridFunctions.getAllRows(fix); TreeGridFunctions.verifyTreeRowIndicator(firstRow, false); expect(rows.length).toBe(5); indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(firstRow); indicatorDiv.triggerEventHandler('click', new Event('click')); fix.detectChanges();