Merge pull request #5957 from IgniteUI/nrobakova/fix-issue-5949-81

Check if data is undefined in the paging pipe

Author: rkaraivanov

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(5);
+    }));
+
     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),

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -1,4 +1,4 @@
-import { Component, TemplateRef, ViewChild, Input, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { Component, TemplateRef, ViewChild, Input, AfterViewInit, ChangeDetectorRef, OnInit } from '@angular/core';
 import { IgxGridCellComponent } from '../grids/cell.component';
 import { IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxSummaryResult } from '../grids/summaries/grid-summary';
 import { IGridCellEventArgs, IGridEditEventArgs, IgxGridTransaction } from '../grids/grid-base.component';
@@ -11,6 +11,7 @@ import { IgxColumnComponent } from '../grids/column.component';
 import { IgxTransactionService } from '../services';
 import { IgxFilteringOperand } from '../data-operations/filtering-condition';
 import { ExpressionUI } from '../grids/filtering/grid-filtering.service';
+import { IgxGridComponent } from '../grids/grid';
 
 @Component({
     template: `<div style="width: 800px; height: 600px;">
@@ -1119,3 +1120,23 @@ export class DynamicColumnsComponent extends GridWithSizeComponent {
     width = '800px';
     height = '800px';
 }
+
+@Component({
+    template: GridTemplateStrings.declareGrid(
+            ` [width]="width" [height]="height" [paging]="'true'" [perPage]="perPage" [primaryKey]="'ProductID'"`,
+            '', ColumnDefinitions.productBasic)
+})
+export class GridWithUndefinedDataComponent implements OnInit  {
+    @ViewChild(IgxGridComponent, { static: true })
+    public grid: IgxGridComponent;
+    public data ;
+    public perPage = 5;
+    public width = '800px';
+    public height = '600px';
+
+    public ngOnInit(): void {
+        setTimeout(() => {
+           this.data = SampleTestData.foodProductDataExtended();
+        }, 300);
+    }
+}