test(grid): #3047 igxGrid isn't displayed properly in IE11 when in ig…

…xTabs

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

@@ -26,10 +26,11 @@ import { IgxGridCellComponent } from '../cell.component';
 import { TransactionType, Transaction } from '../../services';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy';
+import { IgxTabsModule, IgxTabsComponent } from '../../tabs';
 
 const DEBOUNCETIME = 30;
 
-describe('IgxGrid Component Tests', () => {
+fdescribe('IgxGrid Component Tests', () => {
     const MIN_COL_WIDTH = '136px';
     const COLUMN_HEADER_CLASS = '.igx-grid__th';
     const COLUMN_HEADER_GROUP_CLASS = '.igx-grid__thead-item';
@@ -2984,6 +2985,35 @@ describe('IgxGrid Component Tests', () => {
             }));
         });
     });
+
+    fdescribe('IgxGrid - Integration with other Igx Controls', () => {
+        configureTestSuite();
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    IgxGridInsideIgxTabs
+                ],
+                imports: [
+                    NoopAnimationsModule, IgxGridModule, IgxTabsModule]
+            }).compileComponents();
+        }));
+
+        it('IgxTabs: should initialize a grid with correct width/height', fakeAsync(() => {
+            const fix = TestBed.createComponent(IgxGridInsideIgxTabs);
+            fix.detectChanges();
+
+            const grid = fix.componentInstance.grid;
+            const tab = fix.componentInstance.tabs;
+            tab.tabs.toArray()[2].select();
+            tick(100);
+            fix.detectChanges();
+            const gridHeader = fix.debugElement.query(By.css(".igx-grid__thead"));
+            const gridBody = fix.debugElement.query(By.css(".igx-grid__tbody"));
+            expect(parseInt(window.getComputedStyle(gridHeader.nativeElement).width, 10)).toBe(400);
+            expect(parseInt(window.getComputedStyle(gridBody.nativeElement).width, 10)).toBe(400);
+            expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(500);
+        }));
+    });
 });
 
 @Component({
@@ -3507,3 +3537,56 @@ export class IgxGridRowEditingWithFeaturesComponent extends DataParent {
         this.currentSortExpressions = sortExpr;
     }
 }
+
+@Component({
+    template: `
+    <div style="width: 400px; height: 400px;">
+    <igx-tabs #tabs>
+      <igx-tabs-group label="Tab 1">This is Tab 1 content.</igx-tabs-group>
+      <igx-tabs-group label="Tab 2">This is Tab 2 content.</igx-tabs-group>
+      <igx-tabs-group label="Tab 3">
+        <igx-grid #grid [data]="data" [primaryKey]="'id'" width="'null'">
+          <igx-column
+            *ngFor="let column of columns"
+            [field]="column.field"
+            [header]="column.field"
+            [width]="column.width"
+          >
+          </igx-column>
+        </igx-grid>
+      </igx-tabs-group>
+    </igx-tabs>
+  </div>
+    `
+})
+export class IgxGridInsideIgxTabs {
+
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent })
+    public grid: IgxGridComponent;
+
+    @ViewChild(IgxTabsComponent, { read: IgxTabsComponent })
+    public tabs: IgxTabsComponent;
+
+    public columns = [
+        { field: "id", width: 100},
+        { field: "1", width: 100},
+        { field: "2", width: 100},
+        { field: "3", width: 100}
+    ];
+
+    public data = [];
+
+    constructor() {
+        const data = [];
+        for (let j = 1; j <= 10; j++) {
+          const item = {};
+          item['id'] = j;
+          for (let k = 2, len = this.columns.length; k <= len; k++) {
+            const field = this.columns[k - 1].field;
+            item[field] = `item${j}-${k}`;
+          }
+          data.push(item);
+        }
+        this.data = data;
+    }
+}