Skip to content

Commit 86bc021

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Add basic merging tests.
1 parent 7db787a commit 86bc021

File tree

2 files changed

+243
-1
lines changed

2 files changed

+243
-1
lines changed

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

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
import { Component, ViewChild } from '@angular/core';
2+
import { TestBed, waitForAsync } from '@angular/core/testing';
3+
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
4+
import { DefaultMergeStrategy, GridCellMergeMode, GridColumnDataType, GridType, IgxColumnComponent, IgxGridComponent, SortingDirection } from 'igniteui-angular';
5+
import { DataParent } from '../../test-utils/sample-test-data.spec';
6+
import { GridFunctions } from '../../test-utils/grid-functions.spec';
7+
8+
describe('IgxGrid - Cell merging #grid', () => {
9+
let fix;
10+
let grid: IgxGridComponent;
11+
beforeEach(waitForAsync(() => {
12+
TestBed.configureTestingModule({
13+
imports: [
14+
NoopAnimationsModule, DefaultCellMergeGridComponent
15+
]
16+
}).compileComponents();
17+
}));
18+
19+
beforeEach(() => {
20+
fix = TestBed.createComponent(DefaultCellMergeGridComponent);
21+
fix.detectChanges();
22+
grid = fix.componentInstance.grid;
23+
});
24+
25+
describe('Basic', () => {
26+
it('should allow enabling/disabling merging per column.', () => {
27+
28+
const col = grid.getColumnByName('ProductName');
29+
GridFunctions.verifyColumnMergedState(grid, col, [
30+
{ value: 'Ignite UI for JavaScript', span: 2 },
31+
{ value: 'Ignite UI for Angular', span: 1 },
32+
{ value: 'Ignite UI for JavaScript', span: 1 },
33+
{ value: 'Ignite UI for Angular', span: 2 },
34+
{ value: null , span: 1 },
35+
{ value: 'NetAdvantage' , span: 2 }
36+
]);
37+
38+
// disable merge
39+
col.merge = false;
40+
fix.detectChanges();
41+
42+
GridFunctions.verifyColumnMergedState(grid, col, [
43+
{ value: 'Ignite UI for JavaScript', span: 1 },
44+
{ value: 'Ignite UI for JavaScript', span: 1 },
45+
{ value: 'Ignite UI for Angular', span: 1 },
46+
{ value: 'Ignite UI for JavaScript', span: 1 },
47+
{ value: 'Ignite UI for Angular', span: 1 },
48+
{ value: 'Ignite UI for Angular', span: 1 },
49+
{ value: null , span: 1 },
50+
{ value: 'NetAdvantage' , span: 1 },
51+
{ value: 'NetAdvantage' , span: 1 }
52+
]);
53+
});
54+
55+
it('should always merge columns if mergeMode is always.', () => {
56+
const col = grid.getColumnByName('Released');
57+
col.merge = true;
58+
fix.detectChanges();
59+
GridFunctions.verifyColumnMergedState(grid, col, [
60+
{ value: true, span: 9 }
61+
]);
62+
});
63+
64+
it('should merge only sorted columns if mergeMode is onSort.', () => {
65+
grid.cellMergeMode = 'onSort';
66+
fix.detectChanges();
67+
const col = grid.getColumnByName('ProductName');
68+
//nothing is merged initially
69+
GridFunctions.verifyColumnMergedState(grid, col, [
70+
{ value: 'Ignite UI for JavaScript', span: 1 },
71+
{ value: 'Ignite UI for JavaScript', span: 1 },
72+
{ value: 'Ignite UI for Angular', span: 1 },
73+
{ value: 'Ignite UI for JavaScript', span: 1 },
74+
{ value: 'Ignite UI for Angular', span: 1 },
75+
{ value: 'Ignite UI for Angular', span: 1 },
76+
{ value: null , span: 1 },
77+
{ value: 'NetAdvantage' , span: 1 },
78+
{ value: 'NetAdvantage' , span: 1 }
79+
]);
80+
81+
grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: false });
82+
fix.detectChanges();
83+
84+
// merge only after sorted
85+
GridFunctions.verifyColumnMergedState(grid, col, [
86+
{ value: 'NetAdvantage' , span: 2 },
87+
{ value: 'Ignite UI for JavaScript', span: 3 },
88+
{ value: 'Ignite UI for Angular', span: 3 },
89+
{ value: null , span: 1 }
90+
]);
91+
});
92+
93+
it('should allow setting a custom merge strategy via mergeStrategy on grid.', () => {
94+
grid.mergeStrategy = new NoopMergeStrategy();
95+
fix.detectChanges();
96+
const col = grid.getColumnByName('ProductName');
97+
// this strategy does no merging
98+
GridFunctions.verifyColumnMergedState(grid, col, [
99+
{ value: 'Ignite UI for JavaScript', span: 1 },
100+
{ value: 'Ignite UI for JavaScript', span: 1 },
101+
{ value: 'Ignite UI for Angular', span: 1 },
102+
{ value: 'Ignite UI for JavaScript', span: 1 },
103+
{ value: 'Ignite UI for Angular', span: 1 },
104+
{ value: 'Ignite UI for Angular', span: 1 },
105+
{ value: null , span: 1 },
106+
{ value: 'NetAdvantage' , span: 1 },
107+
{ value: 'NetAdvantage' , span: 1 }
108+
]);
109+
});
110+
111+
it('should allow setting a custom comparer for merging on particular column via mergingComparer.', () => {
112+
const col = grid.getColumnByName('ProductName');
113+
// all are same and should merge
114+
col.mergingComparer = (prev:any, rec: any, field: string) => {
115+
return true;
116+
};
117+
grid.pipeTrigger += 1;
118+
fix.detectChanges();
119+
GridFunctions.verifyColumnMergedState(grid, col, [
120+
{ value: 'Ignite UI for JavaScript', span: 9 }
121+
]);
122+
});
123+
});
124+
});
125+
126+
@Component({
127+
template: `
128+
<igx-grid [data]="data" [cellMergeMode]="mergeMode" #grid>
129+
@for(col of cols; track col) {
130+
<igx-column width="100px" [field]="col.field" [dataType]="col.dataType" [merge]="col.merge"></igx-column>
131+
}
132+
</igx-grid>
133+
`,
134+
imports: [IgxGridComponent, IgxColumnComponent]
135+
})
136+
export class DefaultCellMergeGridComponent extends DataParent {
137+
public mergeMode: GridCellMergeMode = GridCellMergeMode.always;
138+
@ViewChild('grid', { read: IgxGridComponent, static: true })
139+
public grid: IgxGridComponent;
140+
public cols = [
141+
{ field:'ID', merge: false },
142+
{ field:'ProductName', dataType: GridColumnDataType.String, merge: true },
143+
{ field:'Downloads', dataType: GridColumnDataType.Number, merge: false },
144+
{ field:'Released', dataType: GridColumnDataType.Boolean, merge: false },
145+
{ field:'ReleaseDate', dataType: GridColumnDataType.Date, merge: false }
146+
];
147+
148+
public override data = [
149+
{
150+
Downloads: 254,
151+
ID: 1,
152+
ProductName: 'Ignite UI for JavaScript',
153+
ReleaseDate: this.today,
154+
Released: true
155+
},
156+
{
157+
Downloads: 1000,
158+
ID: 2,
159+
ProductName: 'Ignite UI for JavaScript',
160+
ReleaseDate: this.nextDay,
161+
Released: true
162+
},
163+
{
164+
Downloads: 20,
165+
ID: 3,
166+
ProductName: 'Ignite UI for Angular',
167+
ReleaseDate: null,
168+
Released: true
169+
},
170+
{
171+
Downloads: null,
172+
ID: 4,
173+
ProductName: 'Ignite UI for JavaScript',
174+
ReleaseDate: this.prevDay,
175+
Released: true
176+
},
177+
{
178+
Downloads: 100,
179+
ID: 5,
180+
ProductName: 'Ignite UI for Angular',
181+
ReleaseDate: null,
182+
Released: true
183+
},
184+
{
185+
Downloads: 1000,
186+
ID: 6,
187+
ProductName: 'Ignite UI for Angular',
188+
ReleaseDate: this.nextDay,
189+
Released: true
190+
},
191+
{
192+
Downloads: 0,
193+
ID: 7,
194+
ProductName: null,
195+
ReleaseDate: this.prevDay,
196+
Released: true
197+
},
198+
{
199+
Downloads: 1000,
200+
ID: 8,
201+
ProductName: 'NetAdvantage',
202+
ReleaseDate: this.today,
203+
Released: true
204+
},
205+
{
206+
Downloads: 1000,
207+
ID: 9,
208+
ProductName: 'NetAdvantage',
209+
ReleaseDate: this.prevDay,
210+
Released: true
211+
}
212+
];
213+
214+
}
215+
216+
class NoopMergeStrategy extends DefaultMergeStrategy {
217+
public override merge(
218+
data: any[],
219+
field: string,
220+
comparer: (prevRecord: any, record: any, field: string) => boolean = this.comparer,
221+
result: any[],
222+
activeRowIndexes : number[],
223+
grid?: GridType
224+
) {
225+
return data;
226+
}
227+
}

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { IgxGridCellComponent } from '../grids/cell.component';
1919
import { IgxPivotRowComponent } from '../grids/pivot-grid/pivot-row.component';
2020
import { SortingDirection } from '../data-operations/sorting-strategy';
2121
import { IgxRowDirective } from '../grids/row.directive';
22-
import { CellType, GridType, RowType } from '../grids/common/grid.interface';
22+
import { CellType, ColumnType, GridType, RowType } from '../grids/common/grid.interface';
2323
import { IgxTreeNodeComponent } from '../tree/tree-node/tree-node.component';
2424
import { IgxColumnComponent } from '../grids/columns/column.component';
2525
import { IgxPivotGridComponent } from '../grids/pivot-grid/pivot-grid.component';
@@ -104,6 +104,21 @@ export const SAFE_DISPOSE_COMP_ID = 'root';
104104

105105
export class GridFunctions {
106106

107+
public static verifyColumnMergedState(grid: GridType, col: ColumnType, state: any[]) {
108+
const dataRows = grid.dataRowList.toArray();
109+
let totalSpan = 0;
110+
for (let index = 0; index < dataRows.length - 1; index++) {
111+
const row = dataRows[index];
112+
const cellValue = row.cells.toArray().find(x => x.column === col).value;
113+
const rowSpan = row.metaData?.cellMergeMeta.get(col.field)?.rowSpan || 1;
114+
const currState = state[index - totalSpan];
115+
expect(cellValue).toBe(currState.value);
116+
expect(rowSpan).toBe(currState.span);
117+
totalSpan += (rowSpan - 1);
118+
index += (rowSpan - 1);
119+
}
120+
}
121+
107122
public static getRows(fix): DebugElement[] {
108123
const rows: DebugElement[] = fix.debugElement.queryAll(By.css(ROW_CSS_CLASS));
109124
rows.shift();

0 commit comments

Comments
 (0)