Skip to content

Commit c19cd22

Browse files
mddragnevmddragnev
committed
test(*): Add a test
1 parent 375db85 commit c19cd22

File tree

1 file changed

+53
-37
lines changed

1 file changed

+53
-37
lines changed

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

Lines changed: 53 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Component, TemplateRef, ViewChild } from '@angular/core';
2-
import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
2+
import { TestBed, waitForAsync } from '@angular/core/testing';
33
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
4-
import { ByLevelTreeGridMergeStrategy, DefaultMergeStrategy, DefaultSortingStrategy, GridCellMergeMode, GridColumnDataType, GridType, IgxColumnComponent, IgxGridComponent, IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular';
4+
import { ByLevelTreeGridMergeStrategy, DefaultMergeStrategy, DefaultSortingStrategy, GridCellMergeMode, GridColumnDataType, GridType, IgxColumnComponent, IgxGridComponent, IgxHierarchicalGridComponent, IgxPaginatorComponent, IgxStringFilteringOperand, Size, SortingDirection } from 'igniteui-angular';
55
import { DataParent } from '../../test-utils/sample-test-data.spec';
66
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';
9-
import { hasClass } from '../../test-utils/helper-utils.spec';
9+
import { hasClass, setElementSize } from '../../test-utils/helper-utils.spec';
1010
import { ColumnLayoutTestComponent } from './grid.multi-row-layout.spec';
1111
import { IgxHierarchicalGridTestBaseComponent } from '../hierarchical-grid/hierarchical-grid.spec';
1212
import { IgxHierarchicalRowComponent } from '../hierarchical-grid/hierarchical-row.component';
@@ -205,7 +205,7 @@ describe('IgxGrid - Cell merging #grid', () => {
205205
fix.componentInstance.height = '300px';
206206
fix.detectChanges();
207207
});
208-
it('should retain rows with merged cells that span multiple rows in DOM as long as merged cell is still in view.', async() => {
208+
it('should retain rows with merged cells that span multiple rows in DOM as long as merged cell is still in view.', async () => {
209209
// initial row list is same as the virtualization chunk
210210
expect(grid.rowList.length).toBe(grid.virtualizationState.chunkSize);
211211

@@ -224,22 +224,22 @@ describe('IgxGrid - Cell merging #grid', () => {
224224
expect(grid.rowList.first.nativeElement.offsetTop).toBeLessThan(-50);
225225
});
226226

227-
it('should remove row from DOM when merged cell is no longer in view.', async() => {
227+
it('should remove row from DOM when merged cell is no longer in view.', async () => {
228228
// scroll so that first row with merged cell is not in view
229229
grid.navigateTo(grid.virtualizationState.chunkSize, 0);
230230
await wait(100);
231231
fix.detectChanges();
232232

233-
//virtualization starts from 2
234-
expect(grid.virtualizationState.startIndex).toBe(2);
233+
//virtualization starts from 2
234+
expect(grid.virtualizationState.startIndex).toBe(2);
235235

236-
// no merge cells from previous chunks
237-
expect(grid.rowList.length).toBe(grid.virtualizationState.chunkSize);
238-
// first row is from the virtualization
239-
expect(grid.rowList.first.index).toBe(grid.virtualizationState.startIndex);
236+
// no merge cells from previous chunks
237+
expect(grid.rowList.length).toBe(grid.virtualizationState.chunkSize);
238+
// first row is from the virtualization
239+
expect(grid.rowList.first.index).toBe(grid.virtualizationState.startIndex);
240240
});
241241

242-
it('horizontal virtualization should not be affected by vertically merged cells.', async() => {
242+
it('horizontal virtualization should not be affected by vertically merged cells.', async () => {
243243
let mergedCell = grid.rowList.first.cells.find(x => x.column.field === 'ProductName');
244244
expect(mergedCell.value).toBe('Ignite UI for JavaScript');
245245
expect(mergedCell.nativeElement.parentElement.style.gridTemplateRows).toBe("50px 50px");
@@ -392,7 +392,7 @@ describe('IgxGrid - Cell merging #grid', () => {
392392
fix.detectChanges();
393393

394394
expect(grid.pinnedRows.length).toBe(2);
395-
const pinnedRow = grid.pinnedRows[0];
395+
const pinnedRow = grid.pinnedRows[0];
396396
expect(pinnedRow.metaData.cellMergeMeta.get(col.field)?.rowSpan).toBe(2);
397397
const mergedPinnedCell = pinnedRow.cells.find(x => x.column.field === 'ProductName');
398398
expect(mergedPinnedCell.value).toBe('Ignite UI for JavaScript');
@@ -436,7 +436,7 @@ describe('IgxGrid - Cell merging #grid', () => {
436436

437437
describe('Activation', () => {
438438

439-
it('should interrupt merge sequence so that active row has no merging.', async() => {
439+
it('should interrupt merge sequence so that active row has no merging.', async () => {
440440
const col = grid.getColumnByName('ProductName');
441441
GridFunctions.verifyColumnMergedState(grid, col, [
442442
{ value: 'Ignite UI for JavaScript', span: 2 },
@@ -474,7 +474,7 @@ describe('IgxGrid - Cell merging #grid', () => {
474474
fix.detectChanges();
475475
});
476476

477-
it('should edit the individual row values for the active row.', async() => {
477+
it('should edit the individual row values for the active row.', async () => {
478478
const col = grid.getColumnByName('ProductName');
479479
grid.rowEditable = true;
480480
fix.detectChanges();
@@ -498,7 +498,7 @@ describe('IgxGrid - Cell merging #grid', () => {
498498
]);
499499

500500
// enter new val
501-
const cellInput = grid.gridAPI.get_cell_by_index(0, 'ProductName').nativeElement.querySelector('[igxinput]');
501+
const cellInput = grid.gridAPI.get_cell_by_index(0, 'ProductName').nativeElement.querySelector('[igxinput]');
502502
UIInteractions.setInputElementValue(cellInput, "NewValue");
503503
fix.detectChanges();
504504

@@ -529,15 +529,15 @@ describe('IgxGrid - Cell merging #grid', () => {
529529
expect(cell.editMode).toBe(true);
530530

531531
// enter new val
532-
const cellInput = grid.gridAPI.get_cell_by_index(0, 'ProductName').nativeElement.querySelector('[igxinput]');
532+
const cellInput = grid.gridAPI.get_cell_by_index(0, 'ProductName').nativeElement.querySelector('[igxinput]');
533533
UIInteractions.setInputElementValue(cellInput, "NewValue");
534534
fix.detectChanges();
535535

536536
UIInteractions.triggerEventHandlerKeyDown('enter', GridFunctions.getGridContent(fix));
537537
fix.detectChanges();
538538

539-
// row with edit cell is not merged anymore
540-
GridFunctions.verifyColumnMergedState(grid, col, [
539+
// row with edit cell is not merged anymore
540+
GridFunctions.verifyColumnMergedState(grid, col, [
541541
{ value: 'NewValue', span: 1 },
542542
{ value: 'Ignite UI for JavaScript', span: 1 },
543543
{ value: 'Ignite UI for Angular', span: 1 },
@@ -563,7 +563,7 @@ describe('IgxGrid - Cell merging #grid', () => {
563563

564564
const mergedIntersectedCell = grid.gridAPI.get_cell_by_index(0, 'ProductName');
565565
// check cell has selected style
566-
hasClass(mergedIntersectedCell.nativeElement,'igx-grid__td--merged-selected', true);
566+
hasClass(mergedIntersectedCell.nativeElement, 'igx-grid__td--merged-selected', true);
567567
});
568568

569569
});
@@ -603,7 +603,7 @@ describe('IgxGrid - Cell merging #grid', () => {
603603
// check api
604604
expect(grid.getSelectedData().length).toBe(5);
605605
expect(grid.getSelectedData()).toEqual(grid.data.slice(0, 5).map(x => {
606-
return { 'ID': x.ID, 'ProductName': x. ProductName};
606+
return { 'ID': x.ID, 'ProductName': x.ProductName };
607607
}));
608608
});
609609
});
@@ -630,7 +630,7 @@ describe('IgxGrid - Cell merging #grid', () => {
630630
fix.detectChanges();
631631

632632
expect(grid.getSelectedColumnsData()).toEqual(grid.data.map(x => {
633-
return {'ProductName': x. ProductName};
633+
return { 'ProductName': x.ProductName };
634634
}));
635635
});
636636
});
@@ -676,7 +676,7 @@ describe('IgxGrid - Cell merging #grid', () => {
676676
expect(activeHighlight[0].closest("igx-grid-cell")).toBe(cell0);
677677
});
678678

679-
it('should update matches if a cell becomes unmerged.', async() => {
679+
it('should update matches if a cell becomes unmerged.', async () => {
680680
let matches = grid.findNext('JavaScript');
681681
fix.detectChanges();
682682

@@ -710,55 +710,71 @@ describe('IgxGrid - Cell merging #grid', () => {
710710

711711
});
712712

713+
describe('Sizing', () => {
714+
it('should size correct when size is set to anything other than large', async () => {
715+
fix.componentInstance.cols = [{ field: 'ProductName', dataType: GridColumnDataType.String, merge: true }]
716+
fix.detectChanges();
717+
setElementSize(grid.nativeElement, Size.Small)
718+
fix.detectChanges();
719+
await wait(100);
720+
fix.detectChanges();
721+
const sizes = grid.rowList.map(x => parseFloat(getComputedStyle(x.nativeElement).getPropertyValue("height")));
722+
const expectedSizes = new Array(9).fill(32);
723+
724+
expect(sizes).toEqual(expectedSizes);
725+
});
726+
727+
});
728+
713729
describe('HierarchicalGrid', () => {
714730

715731
beforeEach(() => {
716732
fix = TestBed.createComponent(IgxHierarchicalGridTestBaseComponent);
717733
fix.componentInstance.data = [
718734
{
719-
ID: 1, ChildLevels: 1, ProductName: 'Product A' , Col1: 1,
735+
ID: 1, ChildLevels: 1, ProductName: 'Product A', Col1: 1,
720736
childData: [
721737
{
722-
ID: 1, ChildLevels: 2, ProductName: 'Product A' , Col1: 1,
738+
ID: 1, ChildLevels: 2, ProductName: 'Product A', Col1: 1,
723739
},
724740
{
725-
ID: 2, ChildLevels: 2, ProductName: 'Product A' , Col1: 1,
741+
ID: 2, ChildLevels: 2, ProductName: 'Product A', Col1: 1,
726742
},
727743
{
728-
ID: 3, ChildLevels: 2, ProductName: 'Product B' , Col1: 1,
744+
ID: 3, ChildLevels: 2, ProductName: 'Product B', Col1: 1,
729745
},
730746
{
731-
ID: 4, ChildLevels: 2, ProductName: 'Product A' , Col1: 1,
747+
ID: 4, ChildLevels: 2, ProductName: 'Product A', Col1: 1,
732748
}
733749
]
734750
},
735751
{
736-
ID: 2, ChildLevels: 1, ProductName: 'Product A' , Col1: 1, childData: [
752+
ID: 2, ChildLevels: 1, ProductName: 'Product A', Col1: 1, childData: [
737753
{
738-
ID: 1, ChildLevels: 2, ProductName: 'Product A' , Col1: 1,
754+
ID: 1, ChildLevels: 2, ProductName: 'Product A', Col1: 1,
739755
},
740756
{
741-
ID: 2, ChildLevels: 2, ProductName: 'Product A' , Col1: 1,
757+
ID: 2, ChildLevels: 2, ProductName: 'Product A', Col1: 1,
742758
},
743759
{
744-
ID: 3, ChildLevels: 2, ProductName: 'Product A' , Col1: 1,
760+
ID: 3, ChildLevels: 2, ProductName: 'Product A', Col1: 1,
745761
},
746762
{
747-
ID: 4, ChildLevels: 2, ProductName: 'Product A' , Col1: 1,
763+
ID: 4, ChildLevels: 2, ProductName: 'Product A', Col1: 1,
748764
}
749765
]
750766
},
751767
{
752-
ID: 3, ChildLevels: 1, ProductName: 'Product B' , Col1: 1
768+
ID: 3, ChildLevels: 1, ProductName: 'Product B', Col1: 1
753769
},
754770
{
755-
ID: 4, ChildLevels: 1, ProductName: 'Product B' , Col1: 1
771+
ID: 4, ChildLevels: 1, ProductName: 'Product B', Col1: 1
756772
},
757773
{
758-
ID: 5, ChildLevels: 1, ProductName: 'Product C' , Col1: 1
774+
ID: 5, ChildLevels: 1, ProductName: 'Product C', Col1: 1
759775
},
760776
{
761-
ID: 6, ChildLevels: 1, ProductName: 'Product B' , Col1: 1
777+
ID: 6, ChildLevels: 1, ProductName: 'Product B', Col1: 1
762778
}
763779
];
764780
fix.detectChanges();

0 commit comments

Comments
 (0)