Skip to content

Commit 46ea7ae

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Add more integration tests.
1 parent a5c5566 commit 46ea7ae

File tree

2 files changed

+186
-2
lines changed

2 files changed

+186
-2
lines changed

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

Lines changed: 185 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
33
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
44
import { DefaultMergeStrategy, DefaultSortingStrategy, GridCellMergeMode, GridColumnDataType, GridType, IgxColumnComponent, IgxGridComponent, IgxPaginatorComponent, SortingDirection } from 'igniteui-angular';
55
import { DataParent } from '../../test-utils/sample-test-data.spec';
6-
import { GridFunctions } from '../../test-utils/grid-functions.spec';
6+
import { GridFunctions, GridSelectionFunctions } from '../../test-utils/grid-functions.spec';
77
import { By } from '@angular/platform-browser';
88
import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
99
import { hasClass } from '../../test-utils/helper-utils.spec';
@@ -353,6 +353,190 @@ describe('IgxGrid - Cell merging #grid', () => {
353353
});
354354
});
355355

356+
describe('Row Pinning', () => {
357+
it('should merge adjacent pinned rows in pinned row area.', () => {
358+
const row1 = grid.rowList.toArray()[0];
359+
const row2 = grid.rowList.toArray()[1];
360+
const col = grid.getColumnByName('ProductName');
361+
row1.pin();
362+
row2.pin();
363+
fix.detectChanges();
364+
365+
expect(grid.pinnedRows.length).toBe(2);
366+
const pinnedRow = grid.pinnedRows[0];
367+
expect(pinnedRow.metaData.cellMergeMeta.get(col.field)?.rowSpan).toBe(2);
368+
const mergedPinnedCell = pinnedRow.cells.find(x => x.column.field === 'ProductName');
369+
expect(mergedPinnedCell.value).toBe('Ignite UI for JavaScript');
370+
expect(mergedPinnedCell.nativeElement.parentElement.style.gridTemplateRows).toBe("51px 51px");
371+
});
372+
373+
it('should merge adjacent ghost rows in unpinned area.', () => {
374+
const row1 = grid.rowList.toArray()[0];
375+
const row2 = grid.rowList.toArray()[1];
376+
const col = grid.getColumnByName('ProductName');
377+
row1.pin();
378+
row2.pin();
379+
fix.detectChanges();
380+
381+
const ghostRows = grid.rowList.filter(x => x.disabled);
382+
expect(ghostRows.length).toBe(2);
383+
const ghostRow = ghostRows[0];
384+
expect(ghostRow.metaData.cellMergeMeta.get(col.field)?.rowSpan).toBe(2);
385+
const mergedPinnedCell = ghostRow.cells.find(x => x.column.field === 'ProductName');
386+
expect(mergedPinnedCell.value).toBe('Ignite UI for JavaScript');
387+
expect(mergedPinnedCell.nativeElement.parentElement.style.gridTemplateRows).toBe("51px 51px");
388+
});
389+
390+
it('should not merge ghost and data rows together.', () => {
391+
const col = grid.getColumnByName('ProductName');
392+
const row1 = grid.rowList.toArray()[0];
393+
row1.pin();
394+
fix.detectChanges();
395+
GridFunctions.verifyColumnMergedState(grid, col, [
396+
{ value: 'Ignite UI for JavaScript', span: 1 },
397+
{ value: 'Ignite UI for JavaScript', span: 1 },
398+
{ value: 'Ignite UI for JavaScript', span: 1 },
399+
{ value: 'Ignite UI for Angular', span: 1 },
400+
{ value: 'Ignite UI for JavaScript', span: 1 },
401+
{ value: 'Ignite UI for Angular', span: 2 },
402+
{ value: null, span: 1 },
403+
{ value: 'NetAdvantage', span: 2 }
404+
]);
405+
});
406+
});
407+
408+
describe('Activation', () => {
409+
410+
it('should interrupt merge sequence so that active row has no merging.', () => {
411+
const col = grid.getColumnByName('ProductName');
412+
GridFunctions.verifyColumnMergedState(grid, col, [
413+
{ value: 'Ignite UI for JavaScript', span: 2 },
414+
{ value: 'Ignite UI for Angular', span: 1 },
415+
{ value: 'Ignite UI for JavaScript', span: 1 },
416+
{ value: 'Ignite UI for Angular', span: 2 },
417+
{ value: null, span: 1 },
418+
{ value: 'NetAdvantage', span: 2 }
419+
]);
420+
421+
const row1 = grid.rowList.toArray()[0];
422+
423+
UIInteractions.simulateClickAndSelectEvent(row1.cells.toArray()[1].nativeElement);
424+
fix.detectChanges();
425+
426+
GridFunctions.verifyColumnMergedState(grid, col, [
427+
{ value: 'Ignite UI for JavaScript', span: 1 },
428+
{ value: 'Ignite UI for JavaScript', span: 1 },
429+
{ value: 'Ignite UI for Angular', span: 1 },
430+
{ value: 'Ignite UI for JavaScript', span: 1 },
431+
{ value: 'Ignite UI for Angular', span: 2 },
432+
{ value: null, span: 1 },
433+
{ value: 'NetAdvantage', span: 2 }
434+
]);
435+
});
436+
437+
});
438+
439+
describe('Updating', () => {
440+
441+
beforeEach(() => {
442+
grid.primaryKey = 'ID';
443+
grid.columns.forEach(x => x.editable = true);
444+
fix.detectChanges();
445+
});
446+
447+
it('should edit the individual row values for the active row.', () => {
448+
const col = grid.getColumnByName('ProductName');
449+
grid.rowEditable = true;
450+
fix.detectChanges();
451+
452+
const row = grid.gridAPI.get_row_by_index(0);
453+
const cell = grid.gridAPI.get_cell_by_index(0, 'ProductName');
454+
UIInteractions.simulateDoubleClickAndSelectEvent(cell.nativeElement);
455+
fix.detectChanges();
456+
expect(row.inEditMode).toBe(true);
457+
458+
// row in edit is not merged anymore
459+
GridFunctions.verifyColumnMergedState(grid, col, [
460+
{ value: 'Ignite UI for JavaScript', span: 1 },
461+
{ value: 'Ignite UI for JavaScript', span: 1 },
462+
{ value: 'Ignite UI for Angular', span: 1 },
463+
{ value: 'Ignite UI for JavaScript', span: 1 },
464+
{ value: 'Ignite UI for Angular', span: 2 },
465+
{ value: null, span: 1 },
466+
{ value: 'NetAdvantage', span: 2 }
467+
]);
468+
469+
// enter new val
470+
const cellInput = grid.gridAPI.get_cell_by_index(0, 'ProductName').nativeElement.querySelector('[igxinput]');
471+
UIInteractions.setInputElementValue(cellInput, "NewValue");
472+
fix.detectChanges();
473+
474+
// Done button click
475+
const doneButtonElement = GridFunctions.getRowEditingDoneButton(fix);
476+
doneButtonElement.click();
477+
fix.detectChanges();
478+
479+
GridFunctions.verifyColumnMergedState(grid, col, [
480+
{ value: 'NewValue', span: 1 },
481+
{ value: 'Ignite UI for JavaScript', span: 1 },
482+
{ value: 'Ignite UI for Angular', span: 1 },
483+
{ value: 'Ignite UI for JavaScript', span: 1 },
484+
{ value: 'Ignite UI for Angular', span: 2 },
485+
{ value: null, span: 1 },
486+
{ value: 'NetAdvantage', span: 2 }
487+
]);
488+
});
489+
490+
it('should edit the individual cell value for the active row.', () => {
491+
const col = grid.getColumnByName('ProductName');
492+
let cell = grid.gridAPI.get_cell_by_index(0, 'ProductName');
493+
494+
UIInteractions.simulateDoubleClickAndSelectEvent(cell.nativeElement);
495+
fix.detectChanges();
496+
497+
cell = grid.gridAPI.get_cell_by_index(0, 'ProductName');
498+
expect(cell.editMode).toBe(true);
499+
500+
// enter new val
501+
const cellInput = grid.gridAPI.get_cell_by_index(0, 'ProductName').nativeElement.querySelector('[igxinput]');
502+
UIInteractions.setInputElementValue(cellInput, "NewValue");
503+
fix.detectChanges();
504+
505+
UIInteractions.triggerEventHandlerKeyDown('enter', GridFunctions.getGridContent(fix));
506+
fix.detectChanges();
507+
508+
// row with edit cell is not merged anymore
509+
GridFunctions.verifyColumnMergedState(grid, col, [
510+
{ value: 'NewValue', span: 1 },
511+
{ value: 'Ignite UI for JavaScript', span: 1 },
512+
{ value: 'Ignite UI for Angular', span: 1 },
513+
{ value: 'Ignite UI for JavaScript', span: 1 },
514+
{ value: 'Ignite UI for Angular', span: 2 },
515+
{ value: null, span: 1 },
516+
{ value: 'NetAdvantage', span: 2 }
517+
]);
518+
});
519+
});
520+
describe('Row Selection', () => {
521+
522+
it('should mark all merged cells that intersect with a selected row as selected.', () => {
523+
grid.rowSelection = 'multiple';
524+
fix.detectChanges();
525+
526+
const secondRow = grid.rowList.toArray()[1];
527+
GridSelectionFunctions.clickRowCheckbox(secondRow);
528+
fix.detectChanges();
529+
530+
expect(secondRow.selected).toBe(true);
531+
grid.markForCheck();
532+
533+
const mergedIntersectedCell = grid.gridAPI.get_cell_by_index(0, 'ProductName');
534+
// check cell has selected style
535+
hasClass(mergedIntersectedCell.nativeElement,'igx-grid__td--merged-selected', true);
536+
});
537+
538+
});
539+
356540
});
357541
});
358542

‎projects/igniteui-angular/src/lib/grids/row.directive.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -628,7 +628,7 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
628628
if (mergeMeta && rowCount > 1) {
629629
const indexInData = this.pinned && this.grid.isRowPinningToTop ? this.index - this.grid.pinnedRecordsCount : this.index;
630630
const range = this.grid.verticalScrollContainer.igxForOf.slice(indexInData, indexInData + rowCount);
631-
const inRange = range.filter(x => this.selectionService.isRowSelected(this.grid.primaryKey ? (x.recordRef || x)[this.grid.primaryKey] : (x.recordRef || x).recordRef)).length > 0;
631+
const inRange = range.filter(x => this.selectionService.isRowSelected(this.grid.primaryKey ? (x.recordRef || x)[this.grid.primaryKey] : (x.recordRef || x))).length > 0;
632632
return inRange;
633633
}
634634
return false;

0 commit comments

Comments
 (0)