diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index 621c29b03ed..7baeae45b31 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/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: ` +
+ + This is Tab 1 content. + This is Tab 2 content. + + + + + + + +
+ ` +}) +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; + } +}