From 879f2774fc4e168d93833e8d1648ee774eb7dc09 Mon Sep 17 00:00:00 2001 From: Radko Kolev Date: Fri, 2 Nov 2018 09:16:34 +0200 Subject: [PATCH 1/6] test(tree-grid): adding more tree-grid tests #2530 --- .../tree-grid/tree-grid-expanding.spec.ts | 240 +++++++++++++++++- 1 file changed, 237 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts index c2405a9daf4..7ed281e94e5 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts @@ -6,7 +6,7 @@ import { TreeGridFunctions } from '../../test-utils/tree-grid-functions.spec'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { first } from 'rxjs/operators'; -describe('IgxTreeGrid - Expanding / Collapsing', () => { +fdescribe('IgxTreeGrid - Expanding / Collapsing', () => { configureTestSuite(); let fix; let treeGrid; @@ -214,6 +214,21 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => { expect(rows.length).toBe(4, 'root level row collapsing problem'); }); + it('should expand/collapse when using \'expandAll\' and \'collapseAll\' methods', () => { + treeGrid.perPage = 50; + + let rows = TreeGridFunctions.getAllRows(fix); + expect(rows.length).toBe(4); + + treeGrid.expandAll(); + rows = TreeGridFunctions.getAllRows(fix); + expect(rows.length).toBe(12); + + treeGrid.collapseAll(); + rows = TreeGridFunctions.getAllRows(fix); + expect(rows.length).toBe(4); + }); + it('should emits an event when expanding rows (API)', (done) => { const aRow = treeGrid.getRowByIndex(0); treeGrid.onRowToggle.pipe(first()).subscribe((args) => { @@ -305,7 +320,7 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => { fix.detectChanges(); }); - it('check row expanding and collapsing are changing rows count using flat data source (UI)', () => { + it('check row expanding and collapsing are changing rows count (UI)', () => { let rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(3); @@ -321,7 +336,7 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => { expect(rows.length).toBe(3); }); - it('check row expanding and collapsing are changing rows count using flat data source (API)', () => { + it('check row expanding and collapsing are changing rows count (API)', () => { let rows = TreeGridFunctions.getAllRows(fix); expect(rows.length).toBe(3); @@ -334,6 +349,225 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => { 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++) { + const indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(rows[rowToToggle]); + indicatorDiv.triggerEventHandler('click', new Event('click')); + + 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')); + } + + 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++) { + treeGrid.toggleRow(treeGrid.getRowByIndex(rowToToggle).rowID); + 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).rowID); + } + + 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')); + + 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).rowID); + + 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')); + + // expand third level record + rows = TreeGridFunctions.getAllRows(fix); + indicatorDiv = TreeGridFunctions.getExpansionIndicatorDiv(rows[1]); + indicatorDiv.triggerEventHandler('click', new Event('click')); + + // 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).rowID); + + // expand third level record + treeGrid.toggleRow(treeGrid.getRowByIndex(1).rowID); + + // 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).rowID); + + // expand third level record + treeGrid.toggleRow(treeGrid.getRowByIndex(1).rowID); + + rows = TreeGridFunctions.getAllRows(fix); + expect(rows.length).toBe(7); + + // collapse first row with all its children and grand children + treeGrid.toggleRow(treeGrid.getRowByIndex(0).rowID); + + 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.getRowByIndex(0); + expect(aRow.cells.first.value).toBe(1, 'wrong root level row'); + expect(aRow.expanded).toBe(false); + aRow.expanded = true; + rows = TreeGridFunctions.getAllRows(fix); + expect(rows.length).toBe(5, 'root level row expanding problem'); + + // expand a second level row + aRow = treeGrid.getRowByIndex(1); + expect(aRow.cells.first.value).toBe(2, 'wrong second level row'); + expect(aRow.expanded).toBe(false); + aRow.expanded = true; + 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.getRowByIndex(2); + expect(aRow.cells.first.value).toBe(3, 'wrong third level row'); + aRow = treeGrid.getRowByIndex(3); + expect(aRow.cells.first.value).toBe(7, 'wrong third level row'); + + // collapse a second level row + aRow = treeGrid.getRowByIndex(1); + aRow.expanded = false; + rows = TreeGridFunctions.getAllRows(fix); + expect(rows.length).toBe(5, 'second level row collapsing problem'); + + // collapse a root level row + aRow = treeGrid.getRowByIndex(0); + aRow.expanded = false; + 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(); + rows = TreeGridFunctions.getAllRows(fix); + expect(rows.length).toBe(8); + + treeGrid.collapseAll(); + rows = TreeGridFunctions.getAllRows(fix); + expect(rows.length).toBe(3); + }); + + it('should emits an event when expanding rows (API)', (done) => { + const aRow = treeGrid.getRowByIndex(0); + treeGrid.onRowToggle.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 emits an event when collapsing rows (API)', (done) => { + const aRow = treeGrid.getRowByIndex(0); + aRow.expanded = true; + treeGrid.onRowToggle.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 emits an event when expanding rows (UI)', (done) => { + treeGrid.onRowToggle.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 emits an event when collapsing rows (UI)', (done) => { + const rowsDOM = TreeGridFunctions.getAllRows(fix); + const indicatorDivDOM = TreeGridFunctions.getExpansionIndicatorDiv(rowsDOM[0]); + indicatorDivDOM.triggerEventHandler('click', new Event('click')); + treeGrid.onRowToggle.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\' ', () => { pending('Tree Grid issue: curent page is not updated when collapseAll'); // Test prerequisites From 73b5ca42ce220b9f13ef4bc0967e41145b0cfbfc Mon Sep 17 00:00:00 2001 From: Radko Kolev Date: Fri, 2 Nov 2018 09:18:25 +0200 Subject: [PATCH 2/6] chore(tree-grid): changing fdescribe -> describe #2530 --- .../src/lib/grids/tree-grid/tree-grid-expanding.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts index 7ed281e94e5..9afd6f10ed1 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts @@ -6,7 +6,7 @@ import { TreeGridFunctions } from '../../test-utils/tree-grid-functions.spec'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { first } from 'rxjs/operators'; -fdescribe('IgxTreeGrid - Expanding / Collapsing', () => { +describe('IgxTreeGrid - Expanding / Collapsing', () => { configureTestSuite(); let fix; let treeGrid; From fae8a83e9fa7a148e4988cc7bb31fc14fa41831f Mon Sep 17 00:00:00 2001 From: Tacho Date: Fri, 2 Nov 2018 13:29:43 +0200 Subject: [PATCH 3/6] test(tree-grid): make beforeEach async #2530 --- .../grids/tree-grid/tree-grid-selection.spec.ts | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts index 567c7ea1585..85821688423 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts @@ -29,13 +29,14 @@ describe('IgxTreeGrid - Selection', () => { describe('API Row Selection', () => { configureTestSuite(); - beforeEach(() => { + beforeEach(async() => { fix = TestBed.createComponent(IgxTreeGridSimpleComponent); fix.detectChanges(); treeGrid = fix.componentInstance.treeGrid; treeGrid.rowSelectable = true; treeGrid.primaryKey = 'ID'; + await wait(); fix.detectChanges(); }); @@ -196,13 +197,14 @@ describe('IgxTreeGrid - Selection', () => { describe('UI Row Selection', () => { configureTestSuite(); - beforeEach(() => { + beforeEach(async() => { fix = TestBed.createComponent(IgxTreeGridSimpleComponent); fix.detectChanges(); treeGrid = fix.componentInstance.treeGrid; treeGrid.rowSelectable = true; treeGrid.primaryKey = 'ID'; + await wait(); fix.detectChanges(); }); @@ -380,9 +382,6 @@ describe('IgxTreeGrid - Selection', () => { fix.detectChanges(); treeGrid = fix.componentInstance.treeGrid; - treeGrid.rowSelectable = true; - treeGrid.primaryKey = 'ID'; - treeGrid.rowSelectable = false; fix.detectChanges(); }); @@ -490,19 +489,19 @@ describe('IgxTreeGrid - Selection', () => { const rows = TreeGridFunctions.getAllRows(fix); const treeGridCell = TreeGridFunctions.getTreeCell(rows[0]); treeGridCell.triggerEventHandler('focus', new Event('focus')); - await wait(); + await wait(100); fix.detectChanges(); // scroll down 150 pixels treeGrid.verticalScrollContainer.getVerticalScroll().scrollTop = 150; treeGrid.parentVirtDir.getHorizontalScroll().dispatchEvent(new Event('scroll')); - await wait(); + await wait(100); fix.detectChanges(); // then scroll back to top treeGrid.verticalScrollContainer.getVerticalScroll().scrollTop = 0; treeGrid.parentVirtDir.getHorizontalScroll().dispatchEvent(new Event('scroll')); - await wait(); + await wait(100); fix.detectChanges(); expect(treeGrid.selectedCells.length).toBe(1); From 52cca8b08dcbabd6462ad27e402b7e11adb5a54a Mon Sep 17 00:00:00 2001 From: Radko Kolev Date: Fri, 2 Nov 2018 13:42:42 +0200 Subject: [PATCH 4/6] chore(tree-grid): "should emits" -> "should emit" #2530 --- .../grids/tree-grid/tree-grid-expanding.spec.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts index 9afd6f10ed1..bbe3afd4470 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts @@ -229,7 +229,7 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => { expect(rows.length).toBe(4); }); - it('should emits an event when expanding rows (API)', (done) => { + it('should emit an event when expanding rows (API)', (done) => { const aRow = treeGrid.getRowByIndex(0); treeGrid.onRowToggle.pipe(first()).subscribe((args) => { expect(args.cancel).toBe(false); @@ -241,7 +241,7 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => { aRow.expanded = true; }); - it('should emits an event when collapsing rows (API)', (done) => { + it('should emit an event when collapsing rows (API)', (done) => { const aRow = treeGrid.getRowByIndex(0); aRow.expanded = true; treeGrid.onRowToggle.pipe(first()).subscribe((args) => { @@ -254,7 +254,7 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => { aRow.expanded = false; }); - it('should emits an event when expanding rows (UI)', (done) => { + it('should emit an event when expanding rows (UI)', (done) => { treeGrid.onRowToggle.pipe(first()).subscribe((args) => { expect(args.cancel).toBe(false); expect(args.event).toBeDefined(); @@ -267,7 +267,7 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => { indicatorDivDOM.triggerEventHandler('click', new Event('click')); }); - it('should emits an event when collapsing rows (UI)', (done) => { + 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')); @@ -516,7 +516,7 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => { expect(rows.length).toBe(3); }); - it('should emits an event when expanding rows (API)', (done) => { + it('should emit an event when expanding rows (API)', (done) => { const aRow = treeGrid.getRowByIndex(0); treeGrid.onRowToggle.pipe(first()).subscribe((args) => { expect(args.cancel).toBe(false); @@ -528,7 +528,7 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => { aRow.expanded = true; }); - it('should emits an event when collapsing rows (API)', (done) => { + it('should emit an event when collapsing rows (API)', (done) => { const aRow = treeGrid.getRowByIndex(0); aRow.expanded = true; treeGrid.onRowToggle.pipe(first()).subscribe((args) => { @@ -541,7 +541,7 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => { aRow.expanded = false; }); - it('should emits an event when expanding rows (UI)', (done) => { + it('should emit an event when expanding rows (UI)', (done) => { treeGrid.onRowToggle.pipe(first()).subscribe((args) => { expect(args.cancel).toBe(false); expect(args.event).toBeDefined(); @@ -554,7 +554,7 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => { indicatorDivDOM.triggerEventHandler('click', new Event('click')); }); - it('should emits an event when collapsing rows (UI)', (done) => { + 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')); From 0fc6e782d307a4fbd0af25f7c2f5f79d7d8b101a Mon Sep 17 00:00:00 2001 From: Radko Kolev Date: Fri, 2 Nov 2018 13:54:46 +0200 Subject: [PATCH 5/6] chore(tree-grid): removing redundant code from the tests #2530 --- .../src/lib/grids/tree-grid/tree-grid-selection.spec.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts index 85821688423..15e4845276f 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts @@ -35,7 +35,6 @@ describe('IgxTreeGrid - Selection', () => { treeGrid = fix.componentInstance.treeGrid; treeGrid.rowSelectable = true; - treeGrid.primaryKey = 'ID'; await wait(); fix.detectChanges(); }); @@ -203,7 +202,6 @@ describe('IgxTreeGrid - Selection', () => { treeGrid = fix.componentInstance.treeGrid; treeGrid.rowSelectable = true; - treeGrid.primaryKey = 'ID'; await wait(); fix.detectChanges(); }); From 7d0c6ee75955303fa86c188bd2fb41e43b7fd867 Mon Sep 17 00:00:00 2001 From: Radko Kolev Date: Fri, 2 Nov 2018 14:37:02 +0200 Subject: [PATCH 6/6] test(tree-grid): adding "fix.detectChanges()" when filtering #2530 --- .../src/lib/grids/tree-grid/tree-grid-selection.spec.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts index 15e4845276f..7a9314f7640 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts @@ -133,6 +133,7 @@ describe('IgxTreeGrid - Selection', () => { fix.detectChanges(); treeGrid.filter('Age', 40, IgxNumberFilteringOperand.instance().condition('greaterThan')); + fix.detectChanges(); tick(100); // Verification indices are different since the sorting changes rows' positions. @@ -140,6 +141,7 @@ describe('IgxTreeGrid - Selection', () => { TreeGridFunctions.verifyHeaderCheckboxSelection(fix, null); treeGrid.clearFilter(); + fix.detectChanges(); tick(100); TreeGridFunctions.verifyDataRowsSelection(fix, [0, 5, 8], true); @@ -293,6 +295,7 @@ describe('IgxTreeGrid - Selection', () => { TreeGridFunctions.clickRowSelectionCheckbox(fix, 8); treeGrid.filter('Age', 40, IgxNumberFilteringOperand.instance().condition('greaterThan')); + fix.detectChanges(); tick(100); // Verification indices are different since the sorting changes rows' positions. @@ -300,6 +303,7 @@ describe('IgxTreeGrid - Selection', () => { TreeGridFunctions.verifyHeaderCheckboxSelection(fix, null); treeGrid.clearFilter(); + fix.detectChanges(); tick(100); TreeGridFunctions.verifyDataRowsSelection(fix, [0, 5, 8], true);