fix(grid): check if data is defined in the pagingPipe #5949

Author: nrobakova

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

@@ -1,7 +1,12 @@
 import { async, TestBed, fakeAsync, tick, ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { IgxGridModule } from './index';
-import { ReorderedColumnsComponent, PagingAndEditingComponent, GridIDNameJobTitleComponent } from '../../test-utils/grid-samples.spec';
+import {
+    ReorderedColumnsComponent,
+    PagingAndEditingComponent,
+    GridIDNameJobTitleComponent,
+    GridWithUndefinedDataComponent
+} from '../../test-utils/grid-samples.spec';
 import { PagingComponent } from '../../test-utils/grid-base-components.spec';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxGridComponent } from './grid.component';
@@ -21,7 +26,8 @@ describe('IgxGrid - Grid Paging', () => {
                 ReorderedColumnsComponent,
                 PagingComponent,
                 PagingAndEditingComponent,
-                GridIDNameJobTitleComponent
+                GridIDNameJobTitleComponent,
+                GridWithUndefinedDataComponent
             ],
             imports: [IgxGridModule, NoopAnimationsModule]
         }).compileComponents();
@@ -63,7 +69,7 @@ describe('IgxGrid - Grid Paging', () => {
         verifyGridPager(fix, 3, '1', '1 of 4', [true, true, false, false]);
     }));
 
-    it('should paginate data API', fakeAsync (() => {
+    it('should paginate data API', fakeAsync(() => {
         const fix = TestBed.createComponent(PagingComponent);
         fix.detectChanges();
 
@@ -281,7 +287,7 @@ describe('IgxGrid - Grid Paging', () => {
         verifyGridPager(fix, 2, '9', '3 of 3', []);
     });
 
-    it('activate/deactivate paging',  fakeAsync(() => {
+    it('activate/deactivate paging', fakeAsync(() => {
         const fix = TestBed.createComponent(ReorderedColumnsComponent);
         const grid = fix.componentInstance.grid;
         fix.detectChanges();
@@ -461,6 +467,27 @@ describe('IgxGrid - Grid Paging', () => {
         expect(gridElement.querySelector(PAGER_CLASS)).not.toBeNull();
     }));
 
+    it('should not throw error when data is undefined', fakeAsync(() => {
+        let errorMessage = '';
+        const fix = TestBed.createComponent(GridWithUndefinedDataComponent);
+        try {
+            fix.detectChanges();
+        } catch (ex) {
+            errorMessage = ex.message;
+        }
+        expect(errorMessage).toBe('');
+        const grid = fix.componentInstance.grid;
+        let paginator = grid.nativeElement.querySelector(PAGER_CLASS);
+        expect(paginator).toBeNull();
+        expect(grid.rowList.length).toBe(0);
+        tick(305);
+        fix.detectChanges();
+
+        paginator = grid.nativeElement.querySelector(PAGER_CLASS);
+        expect(paginator).toBeDefined();
+        expect(grid.rowList.length).toBe(11);
+    }));
+
     function verifyGridPager(fix, rowsCount, firstCellValue, pagerText, buttonsVisibility) {
         const disabled = 'igx-button--disabled';
         const grid = fix.componentInstance.grid;

projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts

@@ -104,7 +104,7 @@ export class IgxGridPagingPipe implements PipeTransform {
             index: page,
             recordsPerPage: perPage
         };
-        DataUtil.correctPagingState(state, collection.data.length);
+        DataUtil.correctPagingState(state, collection.data ? collection.data.length : 0);
 
         const result = {
             data: DataUtil.page(cloneArray(collection.data), state),