Merge pull request #5567 from IgniteUI/SKrastev/fix-mrl-tests-8.1.x

Update evaluating of 'grid-template-rows' style to reflect how chrome 76 sets it now.

Author: kdinev

projects/igniteui-angular/src/lib/core/utils.ts

@@ -170,7 +170,7 @@ export const enum KEYS {
  */
 export function getNodeSizeViaRange(range: Range, node: any): number {
     let overflow = null;
-    if (isIE() || isEdge()) {
+    if (!isFirefox()) {
         overflow = node.style.overflow;
         // we need that hack - otherwise content won't be measured correctly in IE/Edge
         node.style.overflow = 'visible';
@@ -179,7 +179,7 @@ export function getNodeSizeViaRange(range: Range, node: any): number {
     range.selectNodeContents(node);
     const width = range.getBoundingClientRect().width;
 
-    if (isIE() || isEdge()) {
+    if (!isFirefox()) {
         // we need that hack - otherwise content won't be measured correctly in IE/Edge
         node.style.overflow = overflow;
     }

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

@@ -687,7 +687,8 @@ describe('IgxGrid - Deferred Column Resizing', () => {
 
         column.autosize();
         fixture.detectChanges();
-        expect(column.width).toEqual('119px');
+        // the exact width is different between chrome and chrome headless so an exact match is erroneous
+        expect(Math.abs(parseInt(column.width, 10) - 120)).toBeLessThan(2);
 
         // height/width setter rAF
         await wait(16);

projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts

@@ -166,9 +166,8 @@ describe('IgxGrid - multi-row-layout', () => {
         verifyLayoutHeadersAreAligned(headerCells, firstRowCells);
 
         // verify block style
-        let groupHeaderBlocks = fixture.debugElement.query(By.css('.igx-grid__thead')).queryAll(By.css(GRID_MRL_BLOCK));
-        expect(groupHeaderBlocks[0].nativeElement.style.gridTemplateColumns).toBe('200px 200px 200px');
-        expect(groupHeaderBlocks[0].nativeElement.style.gridTemplateRows).toBe('1fr 1fr 1fr');
+        expect(grid.columnList.first.getGridTemplate(false, false)).toBe('200px 200px 200px');
+        expect(grid.columnList.first.getGridTemplate(true, false)).toBe('repeat(3,1fr)');
 
         // creating an incomplete layout 2
         fixture.componentInstance.colGroups = [{
@@ -183,9 +182,8 @@ describe('IgxGrid - multi-row-layout', () => {
         fixture.componentInstance.grid.width = '617px';
         fixture.detectChanges();
 
-        groupHeaderBlocks = fixture.debugElement.query(By.css('.igx-grid__thead')).queryAll(By.css(GRID_MRL_BLOCK));
-        expect(groupHeaderBlocks[0].nativeElement.style.gridTemplateColumns).toBe('200px 200px 200px');
-        expect(groupHeaderBlocks[0].nativeElement.style.gridTemplateRows).toBe('1fr 1fr 1fr');
+        expect(grid.columnList.first.getGridTemplate(false, false)).toBe('200px 200px 200px');
+        expect(grid.columnList.first.getGridTemplate(true, false)).toBe('repeat(3,1fr)');
 
     });
     it('should initialize correctly when no column widths are set.', () => {
@@ -854,14 +852,16 @@ describe('IgxGrid - multi-row-layout', () => {
 
         // check first group has height of 2 row spans in header and rows but the header itself should span 1 row
         // check group block and column header height
-        const groupHeaderBlocks = fixture.debugElement.query(By.css('.igx-grid__thead')).queryAll(By.css(GRID_MRL_BLOCK));
+        const firstLayout = grid.columnList.toArray()[0];
         expect(grid.multiRowLayoutRowSize).toEqual(2);
-        expect(groupHeaderBlocks[0].nativeElement.style.gridTemplateRows).toEqual('1fr 1fr');
-        expect(groupHeaderBlocks[0].nativeElement.offsetHeight).toBe((grid.rowHeight + 1) * 2);
+        expect(firstLayout.getGridTemplate(true, false)).toEqual('repeat(2,1fr)');
+        expect(firstLayout.headerGroup.element.nativeElement.offsetHeight).toBe((grid.rowHeight + 1) * 2);
         expect(grid.getColumnByName('Fax').headerCell.elementRef.nativeElement.offsetHeight).toBe(grid.rowHeight + 1);
 
-        expect(groupHeaderBlocks[1].nativeElement.style.gridTemplateRows).toEqual('1fr 1fr');
-        expect(groupHeaderBlocks[1].nativeElement.offsetHeight).toBe((grid.rowHeight + 1) * 2);
+        const secondLayout = grid.columnList.toArray()[2];
+        const contactNameColumn = grid.getColumnByName('ContactName');
+        expect(contactNameColumn.getGridTemplate(true, false)).toEqual('repeat(2,1fr)');
+        expect(secondLayout.headerGroup.element.nativeElement.offsetHeight).toBe((grid.rowHeight + 1) * 2);
 
         // check cell height in row. By default should span 1 row
         const firstCell = grid.getCellByColumn(0, 'Fax').nativeElement;