Skip to content

Commit 0eea70e

Browse files
nrobakovanrobakova
committed
test(IgxGrid): Added column group pinning tests. #488 
1 parent 064c301 commit 0eea70e

File tree

1 file changed

+139
-3
lines changed

1 file changed

+139
-3
lines changed

‎projects/igniteui-angular/src/lib/grid/column-group.spec.ts

Lines changed: 139 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { By } from '@angular/platform-browser';
99
const GRID_COL_THEAD_TITLE_CLASS = 'igx-grid__th-title';
1010
const GRID_COL_GROUP_THEAD_TITLE_CLASS = 'igx-grid__thead-title';
1111
const GRID_COL_GROUP_THEAD_GROUP_CLASS = 'igx-grid__thead-group';
12+
const GRID_COL_THEAD_CLASS = '.igx-grid__th'
1213

1314
const expectedColumnGroups = 5;
1415
const expectedLevel = 2;
@@ -68,6 +69,81 @@ describe('IgxGrid - multi-column headers', () => {
6869
expect(addressGroup.children.first.children.toArray().every(c => c.hidden === true)).toEqual(true);
6970
});
7071

72+
it('column hiding - Verify column hiding of Individual column and Child column', () => {
73+
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
74+
fixture.detectChanges();
75+
const grid = fixture.componentInstance.grid;
76+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(18);
77+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(11);
78+
79+
//Hide individual column
80+
grid.getColumnByName('ID').hidden = true;
81+
fixture.detectChanges();
82+
83+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(17);
84+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(10);
85+
86+
//Hide column in goup
87+
grid.getColumnByName('CompanyName').hidden = true;
88+
fixture.detectChanges();
89+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(16);
90+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(9);
91+
92+
grid.getColumnByName('Address').hidden = true;
93+
fixture.detectChanges();
94+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(15);
95+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(8);
96+
});
97+
98+
it('column hiding - Verify when 2 of 2 child columns are hidden, the Grouped column would be hidden as well.', () => {
99+
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
100+
fixture.detectChanges();
101+
const grid = fixture.componentInstance.grid;
102+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(18);
103+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(11);
104+
105+
//Hide 2 columns in the group
106+
grid.getColumnByName('ContactName').hidden = true;
107+
grid.getColumnByName('ContactTitle').hidden = true;
108+
fixture.detectChanges();
109+
110+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(15);
111+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(9);
112+
expect(getColGroup(grid, 'Person Details').hidden).toEqual(true);
113+
114+
// Show one of the columns
115+
grid.getColumnByName('ContactName').hidden = false;
116+
fixture.detectChanges();
117+
118+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(17);
119+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(10);
120+
expect(getColGroup(grid, 'Person Details').hidden).toEqual(false);
121+
});
122+
123+
it('column hiding - Verify when 1 child column and 1 group are hidden, the Grouped column would be hidden as well.', () => {
124+
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
125+
fixture.detectChanges();
126+
const grid = fixture.componentInstance.grid;
127+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(18);
128+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(11);
129+
130+
//Hide 2 columns in the group
131+
grid.getColumnByName('CompanyName').hidden = true;
132+
getColGroup(grid, 'Person Details').hidden = true;
133+
fixture.detectChanges();
134+
135+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(13);
136+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(8);
137+
expect(getColGroup(grid, 'General Information').hidden).toEqual(true);
138+
139+
// Show the group
140+
getColGroup(grid, 'Person Details').hidden = false;
141+
fixture.detectChanges();
142+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(17);
143+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(10);
144+
expect(getColGroup(grid, 'General Information').hidden).toEqual(false);
145+
});
146+
71147
it('Width should be correct. Column group with column. No width.', () => {
72148
const fixture = TestBed.createComponent(OneGroupOneColGridComponent);
73149
fixture.detectChanges();
@@ -307,6 +383,9 @@ describe('IgxGrid - multi-column headers', () => {
307383
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
308384
fixture.detectChanges();
309385
const grid = fixture.componentInstance.grid;
386+
grid.getColumnByName('Fax').hidden = true;
387+
getColGroup(grid, 'Person Details').hidden=true;
388+
fixture.detectChanges();
310389

311390
expect(grid.columnList.filter(col => col.columnGroup).length).toEqual(7);
312391

@@ -335,6 +414,9 @@ describe('IgxGrid - multi-column headers', () => {
335414
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
336415
fixture.detectChanges();
337416
const grid = fixture.componentInstance.grid;
417+
grid.getColumnByName('Fax').hidden = true;
418+
getColGroup(grid, 'Person Details').hidden=true;
419+
fixture.detectChanges();
338420

339421
expect(grid.columnList.filter(col => col.columnGroup).length).toEqual(7);
340422
// Get columnGroup of column
@@ -354,6 +436,9 @@ describe('IgxGrid - multi-column headers', () => {
354436
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
355437
fixture.detectChanges();
356438
const grid = fixture.componentInstance.grid;
439+
grid.getColumnByName('Fax').hidden = true;
440+
getColGroup(grid, 'Person Details').hidden=true;
441+
fixture.detectChanges();
357442

358443
expect(grid.columnList.filter(col => col.columnGroup).length).toEqual(7);
359444
// Get allChildren of column
@@ -390,6 +475,9 @@ describe('IgxGrid - multi-column headers', () => {
390475
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
391476
fixture.detectChanges();
392477
const grid = fixture.componentInstance.grid;
478+
grid.getColumnByName('Fax').hidden = true;
479+
getColGroup(grid, 'Person Details').hidden=true;
480+
fixture.detectChanges();
393481

394482
expect(grid.columnList.filter(col => col.columnGroup).length).toEqual(7);
395483

@@ -412,6 +500,9 @@ describe('IgxGrid - multi-column headers', () => {
412500
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
413501
fixture.detectChanges();
414502
const grid = fixture.componentInstance.grid;
503+
grid.getColumnByName('Fax').hidden = true;
504+
getColGroup(grid, 'Person Details').hidden=true;
505+
fixture.detectChanges();
415506

416507
expect(grid.columnList.filter(col => col.columnGroup).length).toEqual(7);
417508

@@ -506,6 +597,51 @@ describe('IgxGrid - multi-column headers', () => {
506597
}, 200);
507598
});
508599
}));
600+
601+
it('column pinning - Pin a column in a group', () => {
602+
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
603+
fixture.detectChanges();
604+
const grid = fixture.componentInstance.grid;
605+
expect(grid.pinnedColumns.length).toEqual(0);
606+
expect(grid.unpinnedColumns.length).toEqual(18);
607+
608+
// Pin a column in a group
609+
const colContactTitle = grid.getColumnByName('ContactTitle');
610+
colContactTitle.pinned = true;
611+
fixture.detectChanges();
612+
613+
// Verify the topParent group is pinned
614+
const grGeneralInf = getColGroup(grid, 'General Information');
615+
expect(grGeneralInf.allChildren.every(c => c.pinned === true)).toEqual(true);
616+
617+
expect(colContactTitle.visibleIndex).toEqual(5);
618+
expect(grid.getColumnByName('CompanyName').visibleIndex).toEqual(0);
619+
620+
expect(grid.pinnedColumns.length).toEqual(5);
621+
expect(grid.unpinnedColumns.length).toEqual(13);
622+
});
623+
624+
it('column pinning - Pin a group in level one', () => {
625+
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
626+
fixture.detectChanges();
627+
const grid = fixture.componentInstance.grid;
628+
expect(grid.pinnedColumns.length).toEqual(0);
629+
expect(grid.unpinnedColumns.length).toEqual(18);
630+
631+
// Try to pin a column in a group
632+
const grGeneralInf = getColGroup(grid, 'General Information');
633+
grGeneralInf.pinned = true;
634+
fixture.detectChanges();
635+
636+
// Verify group and all its children are pinned
637+
expect(grGeneralInf.allChildren.every(c => c.pinned === true)).toEqual(true);
638+
639+
expect(grGeneralInf.visibleIndex).toEqual(-1);
640+
expect(grid.getColumnByName('CompanyName').visibleIndex).toEqual(0);
641+
642+
expect(grid.pinnedColumns.length).toEqual(5);
643+
expect(grid.unpinnedColumns.length).toEqual(13);
644+
});
509645
});
510646

511647
@Component({
@@ -584,11 +720,11 @@ export class ColumnGroupTestComponent {
584720

585721
@Component({
586722
template: `
587-
<igx-grid #grid [data]="data" height="600px">
723+
<igx-grid #grid [data]="data" height="600px" width="800px">
588724
<igx-column field="ID"></igx-column>
589725
<igx-column-group header="General Information">
590726
<igx-column field="CompanyName"></igx-column>
591-
<igx-column-group header="Person Details" hidden="true">
727+
<igx-column-group header="Person Details">
592728
<igx-column field="ContactName"></igx-column>
593729
<igx-column field="ContactTitle"></igx-column>
594730
</igx-column-group>
@@ -604,7 +740,7 @@ export class ColumnGroupTestComponent {
604740
</igx-column-group>
605741
<igx-column-group header="Contact Information">
606742
<igx-column field="Phone"></igx-column>
607-
<igx-column field="Fax" hidden="true"></igx-column>
743+
<igx-column field="Fax"></igx-column>
608744
</igx-column-group>
609745
<igx-column-group header="Postal Code">
610746
<igx-column field="PostalCode"></igx-column>

0 commit comments

Comments
 (0)