test(grid): Solving a scenario where the grid height is in % #3950

IgniteUI · Feb 24, 2019 · d9a7d9c · d9a7d9c
1 parent 8ef86c0
commit d9a7d9c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -3536,7 +3536,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
                 this.scr.nativeElement.clientHeight);
 
         if (height === 0 || isNaN(gridHeight)) {
-            return this.defaultTargetBodyHeight;
+            const bodyHeight = this.defaultTargetBodyHeight;
+            return bodyHeight > 0 ? bodyHeight : null;
         }
 
         return height;

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
@@ -49,7 +49,8 @@ describe('IgxGrid Component Tests', () => {
                 declarations: [
                     IgxGridTestComponent,
                     IgxGridMarkupDeclarationComponent,
-                    IgxGridRemoteVirtualizationComponent
+                    IgxGridRemoteVirtualizationComponent,
+                    IgxGridEmptyMessage100PercentComponent
                 ],
                 imports: [
                     NoopAnimationsModule, IgxGridModule.forRoot()]
@@ -304,6 +305,22 @@ describe('IgxGrid Component Tests', () => {
 
             expect(gridBody.nativeElement.innerText).toMatch(grid.emptyGridMessage);
         }));
+
+        it('should render empty message when grid height is 100%', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxGridEmptyMessage100PercentComponent);
+            fixture.detectChanges();
+
+            const grid = fixture.componentInstance.grid;
+            const gridBody = fixture.debugElement.query(By.css(TBODY_CLASS));
+            const domGrid = fixture.debugElement.query(By.css('igx-grid')).nativeElement;
+
+            // make sure default width/height are applied when there is no data
+            expect(domGrid.style.height).toBe('100%');
+            expect(domGrid.style.width).toBe('100%');
+
+            expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBeGreaterThan(0);
+            expect(gridBody.nativeElement.innerText).toMatch(grid.emptyGridMessage);
+        }));
     });
 
     describe('IgxGrid - default rendering for rows and columns', () => {
@@ -3494,6 +3511,21 @@ export class IgxGridMarkupDeclarationComponent extends IgxGridTestComponent {
     public instance: IgxGridComponent;
 }
 
+@Component({
+    template: `<div>
+        <igx-grid [data]="data" (onColumnInit)="columnCreated($event)">
+            <igx-column field="ID"></igx-column>
+            <igx-column field="Name"></igx-column>
+        </igx-grid>
+        </div>
+    `
+})
+export class IgxGridEmptyMessage100PercentComponent extends IgxGridTestComponent {
+    public data = [];
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent })
+    public grid: IgxGridComponent;
+}
+
 @Injectable()
 export class LocalService {
     public records: Observable<any[]>;