From 858082364d4593ae6f845e21d19e6fd9f50f0555 Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Wed, 18 Mar 2020 13:32:17 +0200 Subject: [PATCH 1/3] feat(igxGrid): Row pinning + MRL integration #6640 --- .../src/lib/grids/grid/row-pinning.spec.ts | 123 +++++++++++++++++- 1 file changed, 122 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts index 5177c0ff894..360dcda1ac8 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts @@ -8,6 +8,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { ColumnPinningPosition, RowPinningPosition } from '../common/enums'; import { IPinningConfig } from '../common/grid.interface'; import { SampleTestData } from '../../test-utils/sample-test-data.spec'; +import { verifyLayoutHeadersAreAligned, verifyDOMMatchesLayoutSettings } from '../../test-utils/helper-utils.spec'; describe('Row Pinning #grid', () => { const FIXED_ROW_CONTAINER = '.igx-grid__tr--pinned '; @@ -18,7 +19,8 @@ describe('Row Pinning #grid', () => { beforeAll(async(() => { TestBed.configureTestingModule({ declarations: [ - GridRowPinningComponent + GridRowPinningComponent, + GridRowPinningWithMRLComponent ], imports: [ NoopAnimationsModule, @@ -217,6 +219,92 @@ describe('Row Pinning #grid', () => { expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[1]); }); }); + describe('Row pinning with MRL', () => { + beforeEach(fakeAsync(() => { + fix = TestBed.createComponent(GridRowPinningWithMRLComponent); + fix.detectChanges(); + grid = fix.componentInstance.instance; + tick(); + fix.detectChanges(); + })); + + it('should pin/unpin correctly to top', () => { + // pin + grid.pinRow(fix.componentInstance.data[1]); + fix.detectChanges(); + + expect(grid.pinnedRecords.length).toBe(1); + const pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); + expect(pinRowContainer.length).toBe(1); + expect(pinRowContainer[0].children.length).toBe(1); + expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[1]); + expect(pinRowContainer[0].children[0].nativeElement).toBe(grid.getRowByIndex(0).nativeElement); + + expect(grid.getRowByIndex(0).pinned).toBeTruthy(); + const gridPinnedRow = grid.pinnedRows[0]; + const pinnedRowCells = gridPinnedRow.cells.toArray(); + const headerCells = grid.headerGroups.first.children.toArray(); + + // headers are aligned to cells + verifyLayoutHeadersAreAligned(headerCells, pinnedRowCells); + verifyDOMMatchesLayoutSettings(gridPinnedRow, fix.componentInstance.colGroups); + + // unpin + const row = grid.pinnedRows[0]; + row.pinned = false; + fix.detectChanges(); + + expect(grid.pinnedRecords.length).toBe(0); + expect(row.pinned).toBeFalsy(); + + const gridUnpinnedRow = grid.getRowByIndex(1); + const unpinnedRowCells = gridUnpinnedRow.cells.toArray(); + + verifyLayoutHeadersAreAligned(headerCells, unpinnedRowCells); + verifyDOMMatchesLayoutSettings(gridUnpinnedRow, fix.componentInstance.colGroups); + }); + + it('should pin/unpin correctly to bottom', () => { + + fix.componentInstance.pinningConfig = { columns: ColumnPinningPosition.Start, rows: RowPinningPosition.Bottom }; + fix.detectChanges(); + + // pin + grid.pinRow(fix.componentInstance.data[1]); + fix.detectChanges(); + + expect(grid.pinnedRecords.length).toBe(1); + const pinRowContainer = fix.debugElement.queryAll(By.css(FIXED_ROW_CONTAINER)); + expect(pinRowContainer.length).toBe(1); + expect(pinRowContainer[0].children.length).toBe(1); + expect(pinRowContainer[0].children[0].context.rowID).toBe(fix.componentInstance.data[1]); + expect(pinRowContainer[0].children[0].nativeElement) + .toBe(grid.getRowByIndex(fix.componentInstance.data.length - 1).nativeElement); + + expect(grid.getRowByIndex(fix.componentInstance.data.length - 1).pinned).toBeTruthy(); + const gridPinnedRow = grid.pinnedRows[0]; + const pinnedRowCells = gridPinnedRow.cells.toArray(); + const headerCells = grid.headerGroups.first.children.toArray(); + + // headers are aligned to cells + verifyLayoutHeadersAreAligned(headerCells, pinnedRowCells); + verifyDOMMatchesLayoutSettings(gridPinnedRow, fix.componentInstance.colGroups); + + // unpin + const row = grid.pinnedRows[0]; + row.pinned = false; + fix.detectChanges(); + + expect(grid.pinnedRecords.length).toBe(0); + expect(row.pinned).toBeFalsy(); + + const gridUnpinnedRow = grid.getRowByIndex(1); + const unpinnedRowCells = gridUnpinnedRow.cells.toArray(); + + verifyLayoutHeadersAreAligned(headerCells, unpinnedRowCells); + verifyDOMMatchesLayoutSettings(gridUnpinnedRow, fix.componentInstance.colGroups); + }); + }); }); @Component({ @@ -237,3 +325,36 @@ export class GridRowPinningComponent { @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) public instance: IgxGridComponent; } + +@Component({ + template: ` + + + + + + + + + + + + + ` +}) +export class GridRowPinningWithMRLComponent extends GridRowPinningComponent { + cols: Array = [ + { field: 'ID', rowStart: 1, colStart: 1 }, + { field: 'CompanyName', rowStart: 1, colStart: 2 }, + { field: 'ContactName', rowStart: 1, colStart: 3 }, + { field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd: 4 }, + ]; + colGroups = [ + { + group: 'group1', + columns: this.cols + } + ]; +} From ed891ba3c298dfe1566be501833e3f5b81dd611f Mon Sep 17 00:00:00 2001 From: Martin Dragnev Date: Wed, 18 Mar 2020 19:17:00 +0200 Subject: [PATCH 2/3] chore(*): removing column groups in the test template --- .../src/lib/grids/grid/row-pinning.spec.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts index 360dcda1ac8..0f6ff64605b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts @@ -219,7 +219,7 @@ describe('Row Pinning #grid', () => { expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[1]); }); }); - describe('Row pinning with MRL', () => { + fdescribe('Row pinning with MRL', () => { beforeEach(fakeAsync(() => { fix = TestBed.createComponent(GridRowPinningWithMRLComponent); fix.detectChanges(); @@ -329,13 +329,6 @@ export class GridRowPinningComponent { @Component({ template: ` - - - - - - - Date: Wed, 18 Mar 2020 19:18:15 +0200 Subject: [PATCH 3/3] chore(*): fixing a type mistake --- .../igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts index 0f6ff64605b..87efaadf715 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/row-pinning.spec.ts @@ -219,7 +219,7 @@ describe('Row Pinning #grid', () => { expect(grid.getRowByIndex(1).rowID).toBe(fix.componentInstance.data[1]); }); }); - fdescribe('Row pinning with MRL', () => { + describe('Row pinning with MRL', () => { beforeEach(fakeAsync(() => { fix = TestBed.createComponent(GridRowPinningWithMRLComponent); fix.detectChanges();