Skip to content

IgxTreeGrid - Adding more tests #2910

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Nov 2, 2018
Merged

IgxTreeGrid - Adding more tests #2910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
879f277
test(tree-grid): adding more tree-grid tests #2530
Nov 2, 2018
73b5ca4
chore(tree-grid): changing fdescribe -> describe #2530
Nov 2, 2018
fae8a83
test(tree-grid): make beforeEach async #2530
Nov 2, 2018
52cca8b
chore(tree-grid): "should emits" -> "should emit" #2530
Nov 2, 2018
f837a83
Merge branch 'master' into rkolev/treeGridTests
rmkrmk Nov 2, 2018
acead4f
Merge branch 'master' into rkolev/treeGridTests
rmkrmk Nov 2, 2018
0fc6e78
chore(tree-grid): removing redundant code from the tests #2530
Nov 2, 2018
12b7d81
Merge branch 'rkolev/treeGridTests' of https://github.com/IgniteUI/ig…
Nov 2, 2018
7d0c6ee
test(tree-grid): adding "fix.detectChanges()" when filtering #2530
Nov 2, 2018
7b0c6b0
Merge branch 'master' into rkolev/treeGridTests
gedinakova Nov 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
246 changes: 240 additions & 6 deletions projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-expanding.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,22 @@ describe('IgxTreeGrid - Expanding / Collapsing', () => {
expect(rows.length).toBe(4, 'root level row collapsing problem');
});

it('should emits an event when expanding rows (API)', (done) => {
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 emit an event when expanding rows (API)', (done) => {
const aRow = treeGrid.getRowByIndex(0);
treeGrid.onRowToggle.pipe(first()).subscribe((args) => {
expect(args.cancel).toBe(false);
Expand All @@ -226,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) => {
Expand All @@ -239,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();
Expand All @@ -252,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'));
Expand Down Expand Up @@ -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);

Expand All @@ -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);

Expand All @@ -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 emit 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 emit 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 emit 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 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'));
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
Expand Down
21 changes: 11 additions & 10 deletions projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,13 @@ 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();
});

Expand Down Expand Up @@ -133,13 +133,15 @@ 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.
TreeGridFunctions.verifyDataRowsSelection(fix, [0, 2, 4], true);
TreeGridFunctions.verifyHeaderCheckboxSelection(fix, null);

treeGrid.clearFilter();
fix.detectChanges();
tick(100);

TreeGridFunctions.verifyDataRowsSelection(fix, [0, 5, 8], true);
Expand Down Expand Up @@ -196,13 +198,13 @@ 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();
});

Expand Down Expand Up @@ -293,13 +295,15 @@ 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.
TreeGridFunctions.verifyDataRowsSelection(fix, [0, 2, 4], true);
TreeGridFunctions.verifyHeaderCheckboxSelection(fix, null);

treeGrid.clearFilter();
fix.detectChanges();
tick(100);

TreeGridFunctions.verifyDataRowsSelection(fix, [0, 5, 8], true);
Expand Down Expand Up @@ -380,9 +384,6 @@ describe('IgxTreeGrid - Selection', () => {
fix.detectChanges();

treeGrid = fix.componentInstance.treeGrid;
treeGrid.rowSelectable = true;
treeGrid.primaryKey = 'ID';
treeGrid.rowSelectable = false;
fix.detectChanges();
});

Expand Down Expand Up @@ -490,19 +491,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);
Expand Down