Skip to content

Commit 4f5c2c2

Browse files
ChronosSFChronosSF
authored
Merge pull request #7116 from IgniteUI/sstoychev/paging-ghost-rows-fixes
tests(grid): adding paging tests with pinning
2 parents d780004 + 68d72ab commit 4f5c2c2

File tree

4 files changed

+179
-49
lines changed

4 files changed

+179
-49
lines changed

projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts renamed to projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts

Lines changed: 69 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { DebugElement, ViewChild, Component } from '@angular/core';
1+
import { ViewChild, Component } from '@angular/core';
22
import { TestBed, async, fakeAsync, tick } from '@angular/core/testing';
33
import { By } from '@angular/platform-browser';
44
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -365,7 +365,7 @@ describe('Row Pinning #grid', () => {
365365
let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
366366
expect(pinRowContainer.length).toBe(1);
367367

368-
let expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
368+
let expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
369369
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
370370

371371
grid.filter('ID', 'B', IgxStringFilteringOperand.instance().condition('startsWith'), false);
@@ -375,7 +375,7 @@ describe('Row Pinning #grid', () => {
375375
expect(pinRowContainer.length).toBe(0);
376376

377377
expect(grid.pinnedRowHeight).toBe(0);
378-
expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
378+
expectedHeight = parseInt(grid.height, 10) - grid.pinnedRowHeight - 18 - grid.theadRow.nativeElement.offsetHeight;
379379
expect(grid.calcHeight - expectedHeight).toBeLessThanOrEqual(1);
380380
});
381381

@@ -402,47 +402,6 @@ describe('Row Pinning #grid', () => {
402402
expect(gridFilterData[1].ID).toBe('BERGS');
403403
});
404404

405-
it('should page through unpinned collection with modified pageSize = pageSize - pinnedRows.lenght.', () => {
406-
// pin 2nd row
407-
grid.paging = true;
408-
grid.perPage = 5;
409-
fix.detectChanges();
410-
const paginator = fix.debugElement.query(By.directive(IgxPaginatorComponent));
411-
expect(paginator.componentInstance.totalPages).toEqual(6);
412-
413-
grid.getRowByIndex(1).pin();
414-
fix.detectChanges();
415-
416-
expect(grid.pinnedRows.length).toBe(1);
417-
let pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
418-
expect(pinRowContainer.length).toBe(1);
419-
expect(grid.dataView.length).toBe(5);
420-
expect(paginator.componentInstance.totalPages).toEqual(6);
421-
422-
grid.getRowByIndex(3).pin();
423-
fix.detectChanges();
424-
425-
expect(grid.pinnedRows.length).toBe(2);
426-
pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
427-
expect(pinRowContainer.length).toBe(1);
428-
expect(grid.dataView.length).toBe(5);
429-
expect(paginator.componentInstance.totalPages).toEqual(6);
430-
431-
// unpin
432-
grid.getRowByIndex(0).unpin();
433-
fix.detectChanges();
434-
435-
grid.getRowByIndex(0).unpin();
436-
fix.detectChanges();
437-
438-
expect(grid.pinnedRows.length).toBe(0);
439-
pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER));
440-
expect(pinRowContainer.length).toBe(0);
441-
442-
expect(grid.dataView.length).toBe(5);
443-
expect(paginator.componentInstance.totalPages).toEqual(6);
444-
});
445-
446405
it('should apply sorting to both pinned and unpinned rows.', () => {
447406
grid.getRowByIndex(1).pin();
448407
grid.getRowByIndex(5).pin();
@@ -463,6 +422,7 @@ describe('Row Pinning #grid', () => {
463422
expect(grid.getRowByIndex(2).rowID).toBe(fix.componentInstance.data[lastIndex]);
464423
});
465424
});
425+
466426
describe('Row pinning with Master Detail View', () => {
467427
beforeEach(fakeAsync(() => {
468428
fix = TestBed.createComponent(GridRowPinningWithMDVComponent);
@@ -564,6 +524,62 @@ describe('Row Pinning #grid', () => {
564524
});
565525
});
566526

527+
describe('Paging', () => {
528+
let paginator: IgxPaginatorComponent;
529+
530+
beforeEach(fakeAsync(() => {
531+
fix = TestBed.createComponent(GridRowPinningComponent);
532+
fix.componentInstance.createSimpleData(12);
533+
grid = fix.componentInstance.instance;
534+
grid.paging = true;
535+
grid.perPage = 5;
536+
537+
fix.detectChanges();
538+
tick();
539+
540+
paginator = fix.debugElement.query(By.directive(IgxPaginatorComponent)).componentInstance;
541+
}));
542+
543+
it('should correctly apply paging state for grid and paginator when there are pinned rows.', () => {
544+
// pin the first row
545+
grid.getRowByIndex(0).pin();
546+
fix.detectChanges();
547+
548+
expect(grid.rowList.length).toEqual(6);
549+
expect(grid.perPage).toEqual(5);
550+
expect(paginator.perPage).toEqual(5);
551+
expect(paginator.totalRecords).toEqual(12);
552+
expect(paginator.totalPages).toEqual(3);
553+
554+
// pin the second row
555+
grid.getRowByIndex(2).pin();
556+
fix.detectChanges();
557+
558+
expect(grid.rowList.length).toEqual(7);
559+
expect(grid.perPage).toEqual(5);
560+
expect(paginator.perPage).toEqual(5);
561+
expect(paginator.totalRecords).toEqual(12);
562+
expect(paginator.totalPages).toEqual(3);
563+
});
564+
565+
it('should have the correct records shown for pages with pinned rows', () => {
566+
grid.getRowByIndex(0).pin();
567+
grid.getRowByIndex(1).pin();
568+
fix.detectChanges();
569+
570+
let rows = grid.rowList.toArray();
571+
572+
[1, 2, 1, 2, 3, 4, 5].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
573+
574+
grid.paginate(2);
575+
fix.detectChanges();
576+
577+
rows = grid.rowList.toArray();
578+
579+
[1, 2, 11, 12].forEach((x, index) => expect(rows[index].cells.first.value).toEqual(x));
580+
});
581+
});
582+
567583
describe(' Editing ', () => {
568584
beforeEach(fakeAsync(() => {
569585
fix = TestBed.createComponent(GridRowPinningWithTransactionsComponent);
@@ -642,6 +658,7 @@ describe('Row Pinning #grid', () => {
642658
});
643659

644660
});
661+
645662
describe('Row pinning with MRL', () => {
646663
beforeEach(fakeAsync(() => {
647664
fix = TestBed.createComponent(GridRowPinningWithMRLComponent);
@@ -728,6 +745,7 @@ describe('Row Pinning #grid', () => {
728745
verifyDOMMatchesLayoutSettings(gridUnpinnedRow, fix.componentInstance.colGroups);
729746
});
730747
});
748+
731749
describe(' Hiding', () => {
732750
beforeEach(fakeAsync(() => {
733751
fix = TestBed.createComponent(GridRowPinningComponent);
@@ -789,11 +807,15 @@ describe('Row Pinning #grid', () => {
789807
`
790808
})
791809
export class GridRowPinningComponent {
792-
public data = SampleTestData.contactInfoDataFull();
810+
public data: any[] = SampleTestData.contactInfoDataFull();
793811
public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Top };
794812

795813
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
796814
public instance: IgxGridComponent;
815+
816+
public createSimpleData(count: number) {
817+
this.data = Array(count).fill({}).map((x, idx) => x = { 'idx': idx + 1 });
818+
}
797819
}
798820

799821
@Component({
@@ -839,7 +861,7 @@ export class GridRowPinningWithMRLComponent extends GridRowPinningComponent {
839861
</ng-template>
840862
</igx-grid>`
841863
})
842-
export class GridRowPinningWithMDVComponent extends GridRowPinningComponent {}
864+
export class GridRowPinningWithMDVComponent extends GridRowPinningComponent { }
843865

844866

845867
@Component({
@@ -855,4 +877,4 @@ export class GridRowPinningWithMDVComponent extends GridRowPinningComponent {}
855877
`,
856878
providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }]
857879
})
858-
export class GridRowPinningWithTransactionsComponent extends GridRowPinningComponent {}
880+
export class GridRowPinningWithTransactionsComponent extends GridRowPinningComponent { }

‎projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export class IgxGridSortingPipe implements PipeTransform {
2929
}
3030

3131
public transform(collection: any[], expressions: ISortingExpression[], sorting: IGridSortingStrategy,
32-
id: string, pipeTrigger: number, pinned?): any[] {
32+
id: string, pipeTrigger: number, pinned?): any[] {
3333
const grid = this.gridAPI.grid;
3434
let result: any[];
3535

@@ -151,4 +151,3 @@ export class IgxGridFilteringPipe implements PipeTransform {
151151
return result;
152152
}
153153
}
154-

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -990,5 +990,65 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
990990
expect(gridFilterData[1].ID).toBe('11');
991991
expect(gridFilterData[2].ID).toBe('1');
992992
});
993+
994+
it('should correctly apply paging state for grid and paginator when there are pinned rows.', fakeAsync(() => {
995+
hierarchicalGrid.paging = true;
996+
hierarchicalGrid.perPage = 5;
997+
hierarchicalGrid.height = '700px';
998+
fixture.detectChanges();
999+
const paginator = fixture.debugElement.query(By.directive(IgxPaginatorComponent)).componentInstance;
1000+
// pin the first row
1001+
hierarchicalGrid.getRowByIndex(0).pin();
1002+
fixture.detectChanges();
1003+
1004+
expect(hierarchicalGrid.rowList.length).toEqual(6);
1005+
expect(hierarchicalGrid.perPage).toEqual(5);
1006+
expect(paginator.perPage).toEqual(5);
1007+
expect(paginator.totalRecords).toEqual(40);
1008+
expect(paginator.totalPages).toEqual(8);
1009+
1010+
// pin the second row
1011+
hierarchicalGrid.getRowByIndex(2).pin();
1012+
fixture.detectChanges();
1013+
1014+
expect(hierarchicalGrid.rowList.length).toEqual(7);
1015+
expect(hierarchicalGrid.perPage).toEqual(5);
1016+
expect(paginator.perPage).toEqual(5);
1017+
expect(paginator.totalRecords).toEqual(40);
1018+
expect(paginator.totalPages).toEqual(8);
1019+
1020+
// expand the first row
1021+
hierarchicalGrid.expandRow(hierarchicalGrid.dataRowList.first.rowID);
1022+
1023+
expect(hierarchicalGrid.rowList.length).toEqual(8);
1024+
expect(hierarchicalGrid.perPage).toEqual(5);
1025+
expect(paginator.perPage).toEqual(5);
1026+
expect(paginator.totalRecords).toEqual(40);
1027+
expect(paginator.totalPages).toEqual(8);
1028+
1029+
expect(hierarchicalGrid.rowList.toArray()[1] instanceof IgxChildGridRowComponent).toBeFalsy();
1030+
expect(hierarchicalGrid.rowList.toArray()[3] instanceof IgxChildGridRowComponent).toBeTruthy();
1031+
}));
1032+
1033+
it('should have the correct records shown for pages with pinned rows', () => {
1034+
hierarchicalGrid.paging = true;
1035+
hierarchicalGrid.perPage = 6;
1036+
hierarchicalGrid.height = '700px';
1037+
fixture.detectChanges();
1038+
hierarchicalGrid.getRowByIndex(0).pin();
1039+
hierarchicalGrid.getRowByIndex(1).pin();
1040+
fixture.detectChanges();
1041+
1042+
let rows = hierarchicalGrid.rowList.toArray();
1043+
1044+
[0, 1, 0, 1, 2, 3, 4].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
1045+
1046+
hierarchicalGrid.paginate(6);
1047+
fixture.detectChanges();
1048+
1049+
rows = hierarchicalGrid.rowList.toArray();
1050+
1051+
[0, 1, 36, 37, 38, 39].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
1052+
});
9931053
});
9941054
});

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-integration.spec.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { IgxNumberFilteringOperand, IgxStringFilteringOperand } from '../../data
2121
import { IgxHierarchicalTransactionService } from '../../services/transaction/igx-hierarchical-transaction';
2222
import { IgxGridTransaction } from '../grid-base.directive';
2323
import { IgxGridCellComponent } from '../grid';
24+
import { IgxPaginatorComponent } from '../../paginator/paginator.component';
2425

2526
const CSS_CLASS_BANNER = 'igx-banner';
2627
const CSS_CLASS_ROW_EDITED = 'igx-grid__tr--edited';
@@ -1572,6 +1573,54 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
15721573
expect(treeGrid.dataView.length).toBe(10);
15731574
});
15741575

1576+
it('should correctly apply paging state for grid and paginator when there are pinned rows.', fakeAsync(() => {
1577+
treeGrid.paging = true;
1578+
treeGrid.perPage = 3;
1579+
treeGrid.height = '700px';
1580+
fix.detectChanges();
1581+
const paginator = fix.debugElement.query(By.directive(IgxPaginatorComponent)).componentInstance;
1582+
// pin the first row
1583+
treeGrid.getRowByIndex(0).pin();
1584+
fix.detectChanges();
1585+
1586+
expect(treeGrid.rowList.length).toEqual(4);
1587+
expect(treeGrid.perPage).toEqual(3);
1588+
expect(paginator.perPage).toEqual(3);
1589+
expect(paginator.totalRecords).toEqual(10);
1590+
expect(paginator.totalPages).toEqual(4);
1591+
1592+
// pin the second row
1593+
treeGrid.getRowByIndex(2).pin();
1594+
fix.detectChanges();
1595+
1596+
expect(treeGrid.rowList.length).toEqual(5);
1597+
expect(treeGrid.perPage).toEqual(3);
1598+
expect(paginator.perPage).toEqual(3);
1599+
expect(paginator.totalRecords).toEqual(10);
1600+
expect(paginator.totalPages).toEqual(4);
1601+
}));
1602+
1603+
it('should have the correct records shown for pages with pinned rows', () => {
1604+
treeGrid.paging = true;
1605+
treeGrid.perPage = 6;
1606+
treeGrid.height = '700px';
1607+
fix.detectChanges();
1608+
treeGrid.getRowByIndex(0).pin();
1609+
treeGrid.getRowByIndex(1).pin();
1610+
fix.detectChanges();
1611+
1612+
let rows = treeGrid.rowList.toArray();
1613+
1614+
[147, 475, 147, 475, 957, 317, 711, 998].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
1615+
1616+
treeGrid.paginate(1);
1617+
fix.detectChanges();
1618+
1619+
rows = treeGrid.rowList.toArray();
1620+
1621+
[147, 475, 299, 19, 847, 663].forEach((x, index) => expect(parseInt(rows[index].cells.first.value, 10)).toEqual(x));
1622+
});
1623+
15751624
it('should make a correct selection', () => {
15761625
treeGrid.pinRow(147);
15771626
fix.detectChanges();

0 commit comments

Comments
 (0)