From 0d766cb9f2b37de3cf714f8641161ba9e9646aab Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Thu, 10 Oct 2019 09:43:40 +0300 Subject: [PATCH 1/3] fix(grid): check if data is defined in the pagingPipe #5949 --- .../lib/grids/grid/grid.pagination.spec.ts | 35 ++++++++++++++++--- .../src/lib/grids/grid/grid.pipes.ts | 2 +- 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts index 5f9e74f3aee..9aabf82601c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts +++ b/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; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts index 9c6e3a2f524..515075a23f0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts +++ b/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), From e66f30cc1c7554bcf2f9304481f3fdc266ef6677 Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Thu, 10 Oct 2019 09:58:17 +0300 Subject: [PATCH 2/3] chore(*): add missed component --- .../lib/grids/grid/grid.pagination.spec.ts | 2 +- .../src/lib/test-utils/grid-samples.spec.ts | 23 ++++++++++++++++++- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts index 9aabf82601c..2274a5d1fb4 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.pagination.spec.ts @@ -485,7 +485,7 @@ describe('IgxGrid - Grid Paging', () => { paginator = grid.nativeElement.querySelector(PAGER_CLASS); expect(paginator).toBeDefined(); - expect(grid.rowList.length).toBe(11); + expect(grid.rowList.length).toBe(5); })); function verifyGridPager(fix, rowsCount, firstCellValue, pagerText, buttonsVisibility) { diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index 44aea88428b..bcf95b90fa5 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/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: `
@@ -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.productBasicNumberID) +}) +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); + } +} From 97d19afc0e9f3ae7776deadc2f9463e09f36a6fa Mon Sep 17 00:00:00 2001 From: Nadia Robakova Date: Thu, 10 Oct 2019 10:52:03 +0300 Subject: [PATCH 3/3] chore(*): update sample columns --- .../igniteui-angular/src/lib/test-utils/grid-samples.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts index bcf95b90fa5..4d47d0edbb5 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts @@ -1124,7 +1124,7 @@ export class DynamicColumnsComponent extends GridWithSizeComponent { @Component({ template: GridTemplateStrings.declareGrid( ` [width]="width" [height]="height" [paging]="'true'" [perPage]="perPage" [primaryKey]="'ProductID'"`, - '', ColumnDefinitions.productBasicNumberID) + '', ColumnDefinitions.productBasic) }) export class GridWithUndefinedDataComponent implements OnInit { @ViewChild(IgxGridComponent, { static: true })