Skip to content

Commit 83e56a9

Browse files
viktorkombovviktorkombov
committed
feat(grid): add tests for summaryRowHeight and summaryTemplate
1 parent 926994d commit 83e56a9

File tree

5 files changed

+150
-34
lines changed

5 files changed

+150
-34
lines changed

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

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,15 @@ describe('IgxGrid - Column properties #grid', () => {
5656

5757
const headerSpans: DebugElement[] = fix.debugElement.queryAll(By.css('.header'));
5858
const cellSpans: DebugElement[] = fix.debugElement.queryAll(By.css('.cell'));
59+
const summarySpans: DebugElement[] = fix.debugElement.queryAll(By.css('.summary'));
5960

6061
grid.columnList.forEach((column) => expect(column.bodyTemplate).toBeDefined());
6162
grid.columnList.forEach((column) => expect(column.headerTemplate).toBeDefined());
63+
grid.columnList.forEach((column) => expect(column.summaryTemplate).toBeDefined());
6264

6365
headerSpans.forEach((span) => expect(span.nativeElement.textContent).toMatch('Header text'));
6466
cellSpans.forEach((span) => expect(span.nativeElement.textContent).toMatch('Cell text'));
67+
summarySpans.forEach((span) => expect(span.nativeElement.textContent).toMatch('Summarry text'));
6568
});
6669

6770
it('should provide a way to change templates dynamically', () => {
@@ -72,14 +75,17 @@ describe('IgxGrid - Column properties #grid', () => {
7275

7376
grid.columnList.forEach((column) => column.headerTemplate = fix.componentInstance.newHeaderTemplate);
7477
grid.columnList.forEach((column) => column.bodyTemplate = fix.componentInstance.newCellTemplate);
78+
grid.columnList.forEach((column) => column.summaryTemplate = fix.componentInstance.newSummaryTemplate);
7579

7680
fix.detectChanges();
7781

7882
const headerSpans: DebugElement[] = fix.debugElement.queryAll(By.css('.new-header'));
7983
const cellSpans: DebugElement[] = fix.debugElement.queryAll(By.css('.new-cell'));
84+
const summarySpans: DebugElement[] = fix.debugElement.queryAll(By.css('.new-summary'));
8085

8186
headerSpans.forEach((span) => expect(span.nativeElement.textContent).toMatch('New header text'));
8287
cellSpans.forEach((span) => expect(span.nativeElement.textContent).toMatch('New cell text'));
88+
summarySpans.forEach((span) => expect(span.nativeElement.textContent).toMatch('New summary text'));
8389
});
8490

8591
it('should reflect column hiding correctly in the DOM dynamically', () => {
@@ -221,12 +227,12 @@ describe('IgxGrid - Column properties #grid', () => {
221227
cityCol = grid.getColumnByName('City');
222228
expect(cityCol).not.toBeDefined();
223229

224-
// add to pinned area
230+
// add to pinned area
225231
fix.componentInstance.columns.push({ field: 'City', width: 150, movable: true, type: 'string', pinned: true });
226232
fix.detectChanges();
227233

228234
cityCol = grid.getColumnByName('City');
229-
expect(cityCol.visibleIndex).toEqual( 1);
235+
expect(cityCol.visibleIndex).toEqual(1);
230236
}));
231237

232238
it('should apply columnWidth on columns that don\'t have explicit width', () => {
@@ -321,6 +327,9 @@ describe('IgxGrid - Column properties #grid', () => {
321327
grid.headerCellList.forEach(header =>
322328
expect(header.nativeElement.querySelector('.customHeaderTemplate')).toBeDefined());
323329

330+
grid.summariesRowList.forEach(summary =>
331+
expect(summary.nativeElement.querySelector('.customSummaryTemplate')).not.toBeNull());
332+
324333
const cell = grid.getCellByColumn(0, 'ID');
325334
cell.editMode = true;
326335
fixture.detectChanges();
@@ -334,7 +343,7 @@ describe('IgxGrid - Column properties #grid', () => {
334343
fixture.detectChanges();
335344

336345
const grid = fixture.componentInstance.instance;
337-
const contextObject = {property1: 'cellContent', property2: 'cellContent1'};
346+
const contextObject = { property1: 'cellContent', property2: 'cellContent1' };
338347
const firstColumn = grid.columnList.get(0);
339348
const secondColumn = grid.columnList.get(1);
340349

@@ -624,7 +633,7 @@ describe('IgxGrid - Column properties #grid', () => {
624633
['Count', 'Min', 'Max', 'Sum', 'Avg'], ['10', '0 €', '20 000 €', '39 004 €', '3 900,4 €']);
625634
});
626635

627-
it('filtering UI list should be populated with correct values based on the currency code, locale and/or pipeArgs' ,fakeAsync(()=> {
636+
it('filtering UI list should be populated with correct values based on the currency code, locale and/or pipeArgs', fakeAsync(() => {
628637
const fix = TestBed.createComponent(IgxGridCurrencyColumnComponent);
629638
tick();
630639
fix.detectChanges();
@@ -653,7 +662,7 @@ describe('IgxGrid - Column properties #grid', () => {
653662
digitsInfo: '3.3-3',
654663
currencyCode: 'EUR',
655664
display: 'symbol-narrow'
656-
};
665+
};
657666
fix.detectChanges();
658667

659668
GridFunctions.clickExcelFilterIcon(fix, unitsColumn.field);
@@ -684,7 +693,7 @@ describe('IgxGrid - Column properties #grid', () => {
684693

685694
discountColumn.pipeArgs = {
686695
digitsInfo: '3.2-2',
687-
};
696+
};
688697
fix.detectChanges();
689698

690699
grid.sort({ fieldName: 'Discount', dir: SortingDirection.Desc, ignoreCase: false });
@@ -775,7 +784,7 @@ describe('IgxGrid - Column properties #grid', () => {
775784
['Count', 'Min', 'Max', 'Sum', 'Avg'], ['10', '-70%', '1,100%', '2,153.9%', '215.39%']);
776785
});
777786

778-
it('filtering UI list should be populated with correct values based on the currency code, locale and/or pipeArgs' ,fakeAsync(()=> {
787+
it('filtering UI list should be populated with correct values based on the currency code, locale and/or pipeArgs', fakeAsync(() => {
779788
const fix = TestBed.createComponent(IgxGridPercentColumnComponent);
780789
tick();
781790
fix.detectChanges();
@@ -804,7 +813,7 @@ describe('IgxGrid - Column properties #grid', () => {
804813
digitsInfo: '3.3-3',
805814
currencyCode: 'EUR',
806815
display: 'symbol-narrow'
807-
};
816+
};
808817
fix.detectChanges();
809818

810819
GridFunctions.clickExcelFilterIcon(fix, unitsColumn.field);
@@ -971,7 +980,7 @@ describe('IgxGrid - Column properties #grid', () => {
971980
['Count', 'Earliest', 'Latest'], ['10', '6:40 AM', '8:20 PM']);
972981
});
973982

974-
it('DateTime: filtering UI list should be populated with correct values based on the pipeArgs' ,fakeAsync(()=> {
983+
it('DateTime: filtering UI list should be populated with correct values based on the pipeArgs', fakeAsync(() => {
975984
const fix = TestBed.createComponent(IgxGridDateTimeColumnComponent);
976985
tick();
977986
fix.detectChanges();
@@ -998,7 +1007,7 @@ describe('IgxGrid - Column properties #grid', () => {
9981007

9991008
orderDateColumn.pipeArgs = {
10001009
format: 'short'
1001-
};
1010+
};
10021011
fix.detectChanges();
10031012

10041013
GridFunctions.clickExcelFilterIcon(fix, orderDateColumn.field);
@@ -1013,7 +1022,7 @@ describe('IgxGrid - Column properties #grid', () => {
10131022
expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('8/18/16, 11:17 AM');
10141023
}));
10151024

1016-
it('Time: filtering UI list should be populated with correct values based on the pipeArgs' ,fakeAsync(()=> {
1025+
it('Time: filtering UI list should be populated with correct values based on the pipeArgs', fakeAsync(() => {
10171026
const fix = TestBed.createComponent(IgxGridDateTimeColumnComponent);
10181027
tick();
10191028
fix.detectChanges();
@@ -1054,7 +1063,7 @@ describe('IgxGrid - Column properties #grid', () => {
10541063
expect((checkBoxes[3].querySelector('.igx-checkbox__label') as HTMLElement).innerText).toEqual('12:12 PM');
10551064
}));
10561065

1057-
it('DateTime: dateTime input should be disabled when try to filter based on unary conditions - today or etc. #ivy' ,fakeAsync(()=> {
1066+
it('DateTime: dateTime input should be disabled when try to filter based on unary conditions - today or etc. #ivy', fakeAsync(() => {
10581067
const fix = TestBed.createComponent(IgxGridDateTimeColumnComponent);
10591068
tick();
10601069
fix.detectChanges();
@@ -1090,9 +1099,9 @@ describe('IgxGrid - Column properties #grid', () => {
10901099
fix.detectChanges();
10911100

10921101
const sortedValues = [new Date(2015, 2, 12, 21, 31, 22), new Date(2015, 9, 1, 11, 37, 22), new Date(2016, 7, 18, 11, 17, 22),
1093-
new Date(2018, 6, 14, 17, 27, 23), new Date(2019, 3, 17, 5, 5, 15), new Date(2019, 9, 30, 16, 17, 27),
1094-
new Date(2021, 4, 11, 7, 47, 1), new Date(2021, 4, 11, 18, 37, 2),
1095-
new Date(2021, 7, 3, 15, 15, 0), new Date(2021, 7, 3, 15, 15, 0)];
1102+
new Date(2018, 6, 14, 17, 27, 23), new Date(2019, 3, 17, 5, 5, 15), new Date(2019, 9, 30, 16, 17, 27),
1103+
new Date(2021, 4, 11, 7, 47, 1), new Date(2021, 4, 11, 18, 37, 2),
1104+
new Date(2021, 7, 3, 15, 15, 0), new Date(2021, 7, 3, 15, 15, 0)];
10961105

10971106
expect(grid.rowList.length).toEqual(sortedValues.length);
10981107
sortedValues.forEach((value, index) => {
@@ -1119,7 +1128,7 @@ describe('IgxGrid - Column properties #grid', () => {
11191128
fix.detectChanges();
11201129

11211130
const sortedValues = ['6:40:18 AM', '8:37:11 AM', '12:12:02 PM', '12:47:42 PM', '12:47:42 PM', '2:07:12 PM',
1122-
'2:30:00 PM', '3:30:22 PM', '3:30:30 PM', '8:20:24 PM'];
1131+
'2:30:00 PM', '3:30:22 PM', '3:30:30 PM', '8:20:24 PM'];
11231132

11241133
expect(grid.rowList.length).toEqual(sortedValues.length);
11251134
sortedValues.forEach((value, index) => {
@@ -1158,6 +1167,10 @@ export class ColumnsFromIterableComponent {
11581167
11591168
<ng-template #newCell>
11601169
<span class="new-cell">New cell text</span>
1170+
</ng-template>
1171+
1172+
<ng-template #newSummary>
1173+
<span class="new-summary">New summary text</span>
11611174
</ng-template>`
11621175
})
11631176
export class TemplatedColumnsComponent {
@@ -1170,6 +1183,9 @@ export class TemplatedColumnsComponent {
11701183
@ViewChild('newCell', { read: TemplateRef, static: true })
11711184
public newCellTemplate: TemplateRef<any>;
11721185

1186+
@ViewChild('newSummary', { read: TemplateRef, static: true })
1187+
public newSummaryTemplate: TemplateRef<any>;
1188+
11731189
public data = SampleTestData.personIDNameData();
11741190
}
11751191

@@ -1178,7 +1194,7 @@ export class TemplatedColumnsComponent {
11781194
<igx-grid [data]="data">
11791195
<igx-column *ngFor="let field of columns" [field]="field" [editable]="true"
11801196
[cellTemplate]="cell" [headerTemplate]="header"
1181-
[cellEditorTemplate]="editor">
1197+
[cellEditorTemplate]="editor" [hasSummary]="true" [summaryTemplate]="summary">
11821198
</igx-column>
11831199
</igx-grid>
11841200
@@ -1193,6 +1209,10 @@ export class TemplatedColumnsComponent {
11931209
<ng-template #editor let-value>
11941210
<span class="customEditorTemplate">{{ value }}</span>
11951211
</ng-template>
1212+
1213+
<ng-template #summaryTemplate igxSummary let-summaryResults>
1214+
<span class="customSummaryTemplate">{{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }}</span>
1215+
</ng-template>
11961216
`
11971217
})
11981218
export class TemplatedInputColumnsComponent {
@@ -1223,7 +1243,7 @@ export class TemplatedInputColumnsComponent {
12231243
export class TemplatedContextInputColumnsComponent {
12241244
@ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
12251245
public instance: IgxGridComponent;
1226-
public contextObject = {property1: 'cellContent', property2: 'cellContent1'};
1246+
public contextObject = { property1: 'cellContent', property2: 'cellContent1' };
12271247

12281248
public data = SampleTestData.personNameAgeData();
12291249
}

0 commit comments

Comments
 (0)