Skip to content

Commit e8e56d4

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Add some tests for pin on both sides.
1 parent 4100594 commit e8e56d4

File tree

3 files changed

+207
-14
lines changed

3 files changed

+207
-14
lines changed

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

Lines changed: 179 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
GridPinningMRLComponent,
2020
MultiColumnHeadersWithGroupingComponent,
2121
PinningComponent,
22+
PinOnBothSidesInitComponent,
2223
PinOnInitAndSelectionComponent
2324
} from '../../test-utils/grid-samples.spec';
2425
import { IgxGridComponent } from './grid.component';
@@ -39,7 +40,8 @@ describe('IgxGrid - Column Pinning #grid', () => {
3940
PinOnInitAndSelectionComponent,
4041
GridFeaturesComponent,
4142
MultiColumnHeadersWithGroupingComponent,
42-
GridPinningMRLComponent
43+
GridPinningMRLComponent,
44+
PinOnBothSidesInitComponent
4345
]
4446
}).compileComponents();
4547
}))
@@ -78,7 +80,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
7880
expect(GridFunctions.isHeaderPinned(headers[1].parent)).toBe(true);
7981

8082
// verify container widths
81-
GridFunctions.verifyPinnedAreaWidth(grid, 400);
83+
GridFunctions.verifyPinnedStartAreaWidth(grid, 400);
8284
GridFunctions.verifyUnpinnedAreaWidth(grid, 400);
8385
});
8486

@@ -107,7 +109,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
107109
expect(GridFunctions.isHeaderPinned(thirdHeader)).toBe(false);
108110

109111
// verify container widths
110-
GridFunctions.verifyPinnedAreaWidth(grid, 200);
112+
GridFunctions.verifyPinnedStartAreaWidth(grid, 200);
111113
GridFunctions.verifyUnpinnedAreaWidth(grid, 600);
112114

113115
// pin back the column.
@@ -119,7 +121,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
119121
expect(grid.unpinnedColumns.length).toEqual(9);
120122

121123
// verify container widths
122-
GridFunctions.verifyPinnedAreaWidth(grid, 400);
124+
GridFunctions.verifyPinnedStartAreaWidth(grid, 400);
123125
GridFunctions.verifyUnpinnedAreaWidth(grid, 400);
124126

125127
expect(col.pinned).toBe(true);
@@ -130,7 +132,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
130132
expect(GridFunctions.isCellPinned(cell)).toBe(true);
131133
});
132134

133-
it('should allow pinning/unpinning via the column API', () => {
135+
it('should allow pinning/unpinning via the column API', () => {
134136
const col = grid.getColumnByName('ID');
135137

136138
col.pinned = true;
@@ -144,7 +146,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
144146
expect(grid.unpinnedColumns.length).toEqual(8);
145147

146148
// verify container widths
147-
GridFunctions.verifyPinnedAreaWidth(grid, 600);
149+
GridFunctions.verifyPinnedStartAreaWidth(grid, 600);
148150
GridFunctions.verifyUnpinnedAreaWidth(grid, 200);
149151

150152
col.pinned = false;
@@ -158,7 +160,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
158160
expect(grid.unpinnedColumns.length).toEqual(9);
159161

160162
// verify container widths
161-
GridFunctions.verifyPinnedAreaWidth(grid, 400);
163+
GridFunctions.verifyPinnedStartAreaWidth(grid, 400);
162164
GridFunctions.verifyUnpinnedAreaWidth(grid, 400);
163165
});
164166

@@ -516,7 +518,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
516518
expect(lastColumnHeader.column.field).toEqual('ContactName');
517519

518520
// verify container widths
519-
GridFunctions.verifyPinnedAreaWidth(grid, 400);
521+
GridFunctions.verifyPinnedEndAreaWidth(grid, 400);
520522
GridFunctions.verifyUnpinnedAreaWidth(grid, 400);
521523
});
522524

@@ -545,7 +547,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
545547
expect(GridFunctions.isHeaderPinned(secondHeader)).toBe(false);
546548

547549
// verify container widths
548-
GridFunctions.verifyPinnedAreaWidth(grid, 200);
550+
GridFunctions.verifyPinnedEndAreaWidth(grid, 200);
549551
GridFunctions.verifyUnpinnedAreaWidth(grid, 600);
550552

551553
// pin back the column.
@@ -557,7 +559,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
557559
expect(grid.unpinnedColumns.length).toEqual(9);
558560

559561
// verify container widths
560-
GridFunctions.verifyPinnedAreaWidth(grid, 400);
562+
GridFunctions.verifyPinnedEndAreaWidth(grid, 400);
561563
GridFunctions.verifyUnpinnedAreaWidth(grid, 400);
562564

563565
expect(col.pinned).toBe(true);
@@ -569,7 +571,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
569571
});
570572

571573
it('should correctly pin column to right when row selectors are enabled.', () => {
572-
grid.rowSelection = GridSelectionMode.multiple;
574+
grid.rowSelection = GridSelectionMode.multiple;
573575
fix.detectChanges();
574576

575577
// check row DOM
@@ -586,7 +588,7 @@ describe('IgxGrid - Column Pinning #grid', () => {
586588
// The default pinned-border-width in px
587589
expect(scrBarStartSection.nativeElement.offsetWidth).toEqual(grid.featureColumnsWidth());
588590

589-
GridFunctions.verifyPinnedAreaWidth(grid, scrBarEndSection.nativeElement.offsetWidth);
591+
GridFunctions.verifyPinnedEndAreaWidth(grid, scrBarEndSection.nativeElement.offsetWidth);
590592
GridFunctions.verifyUnpinnedAreaWidth(grid, scrBarMainSection.nativeElement.offsetWidth, false);
591593
});
592594

@@ -739,4 +741,169 @@ describe('IgxGrid - Column Pinning #grid', () => {
739741
});
740742
});
741743
});
744+
745+
describe('Both', () => {
746+
let fix;
747+
let grid: IgxGridComponent;
748+
beforeEach(fakeAsync(() => {
749+
// ContactName pinned to start, CompanyName pinned to end
750+
fix = TestBed.createComponent(PinOnBothSidesInitComponent);
751+
fix.detectChanges();
752+
grid = fix.componentInstance.grid;
753+
}));
754+
755+
it('should correctly initialize when there are initially pinned columns.', () => {
756+
757+
// verify pinned/unpinned collections
758+
expect(grid.pinnedColumns.length).toEqual(2);
759+
expect(grid.pinnedStartColumns.length).toEqual(1);
760+
expect(grid.pinnedEndColumns.length).toEqual(1);
761+
expect(grid.unpinnedColumns.length).toEqual(9);
762+
763+
// verify DOM
764+
// ContactName first, CompanyName last
765+
const companyNameCell = grid.gridAPI.get_cell_by_index(0, 'CompanyName');
766+
expect(companyNameCell.visibleColumnIndex)
767+
.toEqual(grid.pinnedStartColumns.length + grid.unpinnedColumns.length);
768+
expect(GridFunctions.isCellPinned(companyNameCell)).toBe(true);
769+
770+
const contactNameCell = grid.gridAPI.get_cell_by_index(0, 'ContactName');
771+
expect(contactNameCell.visibleColumnIndex).toEqual(0);
772+
expect(GridFunctions.isCellPinned(contactNameCell)).toBe(true);
773+
774+
const headers = grid.headerCellList;
775+
const lastColumnHeader = headers[headers.length - 1];
776+
const firstColumnHeader = headers[0];
777+
expect(lastColumnHeader.column.field).toEqual('CompanyName');
778+
expect(firstColumnHeader.column.field).toEqual('ContactName');
779+
780+
// verify container widths
781+
GridFunctions.verifyPinnedStartAreaWidth(grid, 200);
782+
GridFunctions.verifyPinnedEndAreaWidth(grid, 200);
783+
GridFunctions.verifyUnpinnedAreaWidth(grid, 400);
784+
});
785+
786+
it('should allow pinning/unpinning via the grid API', () => {
787+
const col = grid.getColumnByName('ID');
788+
expect(col.pinned).toBe(false);
789+
expect(col.visibleIndex).toEqual(1);
790+
791+
// pin ID to end, after CompanyName
792+
grid.pinColumn('ID', null, ColumnPinningPosition.End);
793+
fix.detectChanges();
794+
795+
// verify column is pinned to end
796+
expect(grid.pinnedColumns.length).toEqual(3);
797+
expect(grid.pinnedStartColumns.length).toEqual(1);
798+
expect(grid.pinnedEndColumns.length).toEqual(2);
799+
expect(grid.unpinnedColumns.length).toEqual(8);
800+
801+
// verify container widths
802+
GridFunctions.verifyPinnedStartAreaWidth(grid, 200);
803+
GridFunctions.verifyPinnedEndAreaWidth(grid, 400);
804+
GridFunctions.verifyUnpinnedAreaWidth(grid, 200);
805+
806+
expect(col.pinned).toBe(true);
807+
expect(col.visibleIndex)
808+
.toEqual(grid.pinnedStartColumns.length + grid.unpinnedColumns.length + 1);
809+
expect(col.pinningPosition).toBe(ColumnPinningPosition.End);
810+
811+
let cell = grid.gridAPI.get_cell_by_index(0, 'ID');
812+
expect(cell.visibleColumnIndex)
813+
.toEqual(grid.pinnedStartColumns.length + grid.unpinnedColumns.length + 1);
814+
expect(GridFunctions.isCellPinned(cell)).toBe(true);
815+
816+
// unpin ID
817+
grid.unpinColumn('ID');
818+
fix.detectChanges();
819+
820+
// verify column is unpinned
821+
expect(grid.pinnedColumns.length).toEqual(2);
822+
expect(grid.pinnedStartColumns.length).toEqual(1);
823+
expect(grid.pinnedEndColumns.length).toEqual(1);
824+
expect(grid.unpinnedColumns.length).toEqual(9);
825+
826+
expect(col.pinned).toBe(false);
827+
expect(col.visibleIndex).toEqual(1);
828+
829+
// verify container widths
830+
GridFunctions.verifyPinnedStartAreaWidth(grid, 200);
831+
GridFunctions.verifyPinnedEndAreaWidth(grid, 200);
832+
GridFunctions.verifyUnpinnedAreaWidth(grid, 400);
833+
});
834+
835+
it('should pin an unpinned column when drag/drop it among pinned columns.', fakeAsync(() => {
836+
// move 'ID' column to the right pinned area, before CompanyName
837+
grid.moveColumn(grid.getColumnByName('ID'), grid.getColumnByName('CompanyName'), DropPosition.BeforeDropTarget);
838+
tick();
839+
fix.detectChanges();
840+
841+
// verify column is pinned at the correct place
842+
expect(grid.pinnedEndColumns[0].field).toEqual('ID');
843+
expect(grid.pinnedEndColumns[1].field).toEqual('CompanyName');
844+
expect(grid.getColumnByName('ID').pinned).toBeTruthy();
845+
// move ID to unpinned area
846+
grid.moveColumn(grid.getColumnByName('ID'), grid.getColumnByName('ContactTitle'), DropPosition.AfterDropTarget);
847+
tick();
848+
fix.detectChanges();
849+
850+
// verify column is unpinned at the correct place
851+
expect(grid.unpinnedColumns[0].field).toEqual('ContactTitle');
852+
expect(grid.unpinnedColumns[1].field).toEqual('ID');
853+
expect(grid.getColumnByName('ID').pinned).toBeFalsy();
854+
855+
// move 'ID' column to the left pinned area, before ContractName
856+
grid.moveColumn(grid.getColumnByName('ID'), grid.getColumnByName('ContactName'), DropPosition.BeforeDropTarget);
857+
tick();
858+
fix.detectChanges();
859+
860+
// verify column is pinned at the correct place
861+
expect(grid.pinnedStartColumns[0].field).toEqual('ID');
862+
expect(grid.pinnedStartColumns[1].field).toEqual('ContactName');
863+
expect(grid.getColumnByName('ID').pinned).toBeTruthy();
864+
}));
865+
866+
it('should allow navigating to/from pinned areas', (async () => {
867+
setupGridScrollDetection(fix, grid);
868+
869+
// navigate from right pinned area into unpinned and back
870+
const cellCompanyName = grid.gridAPI.get_cell_by_index(0, 'CompanyName');
871+
grid.navigation.activeNode = { row: 0, column: 10 };
872+
fix.detectChanges();
873+
expect(cellCompanyName.active).toBe(true);
874+
875+
grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowLeft'));
876+
await wait(DEBOUNCETIME);
877+
fix.detectChanges();
878+
const cellFax = grid.gridAPI.get_cell_by_index(0, 'Fax');
879+
expect(cellFax.active).toBe(true);
880+
expect(cellCompanyName.active).toBe(false);
881+
882+
grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowRight'));
883+
await wait(DEBOUNCETIME);
884+
fix.detectChanges();
885+
expect(cellFax.active).toBe(false);
886+
expect(cellCompanyName.active).toBe(true);
887+
888+
// navigate from left pinned area into unpinned and back
889+
grid.navigation.activeNode = { row: 0, column: 0 };
890+
fix.detectChanges();
891+
expect(grid.getCellByColumn(0, "ContactName").active).toBe(true);
892+
893+
grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowRight'));
894+
await wait(DEBOUNCETIME);
895+
fix.detectChanges();
896+
const cellID = grid.gridAPI.get_cell_by_index(0, 'ID');
897+
expect(grid.getCellByColumn(0, "ContactName").active).toBe(false);
898+
expect(cellID.active).toBe(true);
899+
900+
grid.navigation.dispatchEvent(UIInteractions.getKeyboardEvent('keydown', 'ArrowLeft'));
901+
await wait(DEBOUNCETIME);
902+
fix.detectChanges();
903+
expect(grid.getCellByColumn(0, "ContactName").active).toBe(true);
904+
expect(cellID.active).toBe(false);
905+
906+
clearGridSubs();
907+
}));
908+
});
742909
});

‎projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -315,11 +315,16 @@ export class GridFunctions {
315315
expect(tolerance).toBeLessThanOrEqual(1);
316316
}
317317

318-
public static verifyPinnedAreaWidth(grid: GridType, expectedWidth: number) {
318+
public static verifyPinnedStartAreaWidth(grid: GridType, expectedWidth: number) {
319319
const tolerance = Math.abs(expectedWidth - grid.pinnedStartWidth);
320320
expect(tolerance).toBeLessThanOrEqual(1);
321321
}
322322

323+
public static verifyPinnedEndAreaWidth(grid: GridType, expectedWidth: number) {
324+
const tolerance = Math.abs(expectedWidth - grid.pinnedEndWidth);
325+
expect(tolerance).toBeLessThanOrEqual(1);
326+
}
327+
323328
/* Filtering-related methods */
324329
public static verifyFilterUIPosition(filterUIContainer, grid) {
325330
const filterUiRightBorder = filterUIContainer.nativeElement.offsetParent.offsetLeft +

‎projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { IgxColumnComponent } from '../grids/columns/column.component';
1313
import { IgxFilteringOperand, IgxNumberFilteringOperand } from '../data-operations/filtering-condition';
1414
import { IFilteringExpressionsTree, FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
1515
import { FilteringStrategy, IgxFilterItem } from '../data-operations/filtering-strategy';
16-
import { ISortingOptions, IgxExcelStyleHeaderIconDirective, IgxGridToolbarAdvancedFilteringComponent, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective } from '../grids/public_api';
16+
import { ColumnPinningPosition, ISortingOptions, IgxExcelStyleHeaderIconDirective, IgxGridToolbarAdvancedFilteringComponent, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective } from '../grids/public_api';
1717
import { IgxRowAddTextDirective, IgxRowEditActionsDirective, IgxRowEditTabStopDirective, IgxRowEditTemplateDirective, IgxRowEditTextDirective } from '../grids/grid.rowEdit.directive';
1818
import { IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxGridExcelStyleFilteringComponent } from '../grids/filtering/excel-style/excel-style-filtering.component';
1919
import { FilteringLogic } from '../data-operations/filtering-expression.interface';
@@ -225,6 +225,27 @@ export class PinOnInitAndSelectionComponent extends GridWithSizeComponent {
225225
}
226226
}
227227

228+
@Component({
229+
template: GridTemplateStrings.declareGrid(` [autoGenerate]="autoGenerate" [height]="height" [width]="width"`, `${EventSubscriptions.columnInit}`, ''),
230+
imports: [IgxGridComponent]
231+
})
232+
export class PinOnBothSidesInitComponent extends GridWithSizeComponent {
233+
public override data = SampleTestData.contactInfoDataFull();
234+
public override width = '800px';
235+
public override height = '300px';
236+
237+
public selectedCell;
238+
public columnInit(column) {
239+
if (column.field === 'CompanyName' || column.field === 'ContactName') {
240+
column.pinned = true;
241+
}
242+
if (column.field === 'CompanyName') {
243+
column.pinningPosition = ColumnPinningPosition.End;
244+
}
245+
column.width = '200px';
246+
}
247+
}
248+
228249
@Component({
229250
template: `
230251
<igx-grid

0 commit comments

Comments
 (0)