feat(tests): add Cypress E2E for Local Pagination and fix new bugs found

Author: ghiscoding-SE

src/app/examples/grid-state.component.ts

@@ -17,6 +17,7 @@ function randomBetween(min, max) {
 }
 const LOCAL_STORAGE_KEY = 'gridState';
 const NB_ITEMS = 500;
+const DEFAULT_PAGE_SIZE = 25;
 
 @Component({
   templateUrl: './grid-state.component.html'
@@ -66,6 +67,7 @@ export class GridStateComponent implements OnInit {
   clearGridStateFromLocalStorage() {
     localStorage[LOCAL_STORAGE_KEY] = null;
     this.angularGrid.gridService.resetGrid(this.columnDefinitions);
+    this.angularGrid.paginationService.changeItemPerPage(DEFAULT_PAGE_SIZE);
   }
 
   /* Define grid Options and Columns */
@@ -153,7 +155,7 @@ export class GridStateComponent implements OnInit {
       enablePagination: true,
       pagination: {
         pageSizes: [5, 10, 15, 20, 25, 30, 40, 50, 75, 100],
-        pageSize: 25
+        pageSize: DEFAULT_PAGE_SIZE
       },
     };
 

src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts

@@ -154,6 +154,7 @@ const mockDataView = {
   getItem: jest.fn(),
   getItems: jest.fn(),
   getItemMetadata: jest.fn(),
+  getPagingInfo: jest.fn(),
   onRowsChanged: jest.fn(),
   onRowCountChanged: jest.fn(),
   onSetItemsCalled: jest.fn(),
@@ -586,12 +587,39 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
       });
 
       it('should refresh a local grid and change pagination options pagination when a preset for it is defined in grid options', (done) => {
+        const expectedPageNumber = 2;
+        const expectedTotalItems = 2;
+        const refreshSpy = jest.spyOn(component, 'refreshGridData');
+
+        const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }];
+        component.gridOptions = {
+          enablePagination: true,
+          presets: { pagination: { pageSize: 2, pageNumber: expectedPageNumber } }
+        };
+        component.paginationOptions = { pageSize: 2, pageNumber: 2, pageSizes: [2, 10, 25, 50], totalItems: 100 };
+
+        component.dataset = mockData;
+        component.ngAfterViewInit();
+
+        setTimeout(() => {
+          expect(component.paginationOptions.pageSize).toBe(2);
+          expect(component.paginationOptions.pageNumber).toBe(expectedPageNumber);
+          expect(component.paginationOptions.totalItems).toBe(expectedTotalItems);
+          expect(refreshSpy).toHaveBeenCalledWith(mockData);
+          done();
+        });
+      });
+
+      it('should refresh a local grid defined and change pagination options pagination when a preset is defined in grid options and total rows is different when Filters are applied', (done) => {
         const expectedPageNumber = 3;
+        const expectedTotalItems = 15;
         const refreshSpy = jest.spyOn(component, 'refreshGridData');
+        const getPagingSpy = jest.spyOn(mockDataView, 'getPagingInfo').mockReturnValue({ pageNum: 1, totalRows: expectedTotalItems });
 
         const mockData = [{ firstName: 'John', lastName: 'Doe' }, { firstName: 'Jane', lastName: 'Smith' }];
         component.gridOptions = {
           enablePagination: true,
+          enableFiltering: true,
           presets: { pagination: { pageSize: 10, pageNumber: expectedPageNumber } }
         };
         component.paginationOptions = { pageSize: 10, pageNumber: 2, pageSizes: [10, 25, 50], totalItems: 100 };
@@ -600,8 +628,10 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         component.dataset = mockData;
 
         setTimeout(() => {
+          expect(getPagingSpy).toHaveBeenCalled();
           expect(component.paginationOptions.pageSize).toBe(10);
           expect(component.paginationOptions.pageNumber).toBe(expectedPageNumber);
+          expect(component.paginationOptions.totalItems).toBe(expectedTotalItems);
           expect(refreshSpy).toHaveBeenCalledWith(mockData);
           done();
         });

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -119,6 +119,8 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
   private _fixedHeight: number | null;
   private _fixedWidth: number | null;
   private _hideHeaderRowAfterPageLoad = false;
+  private _isGridInitialized = false;
+  private _isPaginationInitialized = false;
   dataView: any;
   grid: any;
   gridHeightString: string;
@@ -133,7 +135,6 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
   showCustomFooter = false;
   showPagination = false;
   totalItems = 0;
-  isGridInitialized = false;
   subscriptions: Subscription[] = [];
 
   @Output() onAngularGridCreated = new EventEmitter<AngularGridInstance>();
@@ -164,7 +165,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
   @Input()
   set columnDefinitions(columnDefinitions: Column[]) {
     this._columnDefinitions = columnDefinitions;
-    if (this.isGridInitialized) {
+    if (this._isGridInitialized) {
       this.updateColumnDefinitionsList(columnDefinitions);
     }
   }
@@ -206,7 +207,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
 
   ngAfterViewInit() {
     this.initialization();
-    this.isGridInitialized = true;
+    this._isGridInitialized = true;
 
     // user must provide a "gridHeight" or use "autoResize: true" in the grid options
     if (!this._fixedHeight && !this.gridOptions.enableAutoResize) {
@@ -344,11 +345,9 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
         }
 
         // initialize the Pagination Service with new pagination options (which might have presets)
-        // with a delay so that presets are properly reflected in the grid
-        setTimeout(() => this.initializePaginationService(paginationOptions));
-      } else {
-        // without backend service, we'll assume the total of items is the dataset size
-        this.totalItems = dataset.length;
+        if (!this._isPaginationInitialized) {
+          this.initializePaginationService(paginationOptions);
+        }
       }
 
       // resize the grid inside a slight timeout, in case other DOM element changed prior to the resize (like a filter/pagination changed)
@@ -636,6 +635,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
 
   private initializePaginationService(paginationOptions: Pagination) {
     this.paginationService.init(this.grid, this.dataView, paginationOptions, this.backendServiceApi);
+    this._isPaginationInitialized = true;
     this.cd.detectChanges();
   }
 
@@ -751,11 +751,10 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
 
     // local grid, check if we need to show the Pagination
     // if so then also check if there's any presets and finally initialize the PaginationService
+    // a local grid with Pagination presets will potentially have a different total of items, we'll need to get it from the DataView and update our total
     if (this.gridOptions && this.gridOptions.enablePagination && !this.gridOptions.backendServiceApi) {
-      this.totalItems = this.dataset.length;
       this.showPagination = true;
-      const paginationOptions = this.setPaginationOptionsWhenPresetDefined(this.gridOptions, this.paginationOptions);
-      this.initializePaginationService(paginationOptions);
+      this.loadLocalGridPagination();
     }
 
     this.onAngularGridCreated.emit({
@@ -798,6 +797,26 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     }
   }
 
+  /**
+   * local grid, check if we need to show the Pagination
+   * if so then also check if there's any presets and finally initialize the PaginationService
+   * a local grid with Pagination presets will potentially have a different total of items, we'll need to get it from the DataView and update our total
+   */
+  private loadLocalGridPagination() {
+    if (this.gridOptions) {
+      this.totalItems = this.dataset.length;
+      if (this.paginationOptions && this.dataView && this.dataView.getPagingInfo) {
+        const slickPagingInfo = this.dataView.getPagingInfo() || {};
+        if (slickPagingInfo.hasOwnProperty('totalRows') && this.paginationOptions.totalItems !== slickPagingInfo.totalRows) {
+          this.totalItems = slickPagingInfo.totalRows;
+        }
+      }
+      this.paginationOptions.totalItems = this.totalItems;
+      const paginationOptions = this.setPaginationOptionsWhenPresetDefined(this.gridOptions, this.paginationOptions);
+      this.initializePaginationService(paginationOptions);
+    }
+  }
+
   private mergeGridOptions(gridOptions): GridOption {
     gridOptions.gridId = this.gridId;
     gridOptions.gridContainerId = `slickGridContainer-${this.gridId}`;

src/app/modules/angular-slickgrid/services/__tests__/pagination.service.spec.ts

@@ -97,16 +97,12 @@ describe('PaginationService', () => {
 
   it('should initialize the service and call "refreshPagination" and trigger "onPaginationChanged" event', () => {
     const refreshSpy = jest.spyOn(service, 'refreshPagination');
-    const paginationSpy = jest.spyOn(service.onPaginationChanged, 'next');
     service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
 
     expect(service.paginationOptions).toEqual(mockGridOption.pagination);
     expect(service.pager).toBeTruthy();
     expect(refreshSpy).toHaveBeenCalled();
     expect(service.getCurrentPageNumber()).toBe(2);
-    expect(paginationSpy).toHaveBeenCalledWith({
-      from: 26, to: 50, itemsPerPage: 25, pageCount: 4, pageNumber: 2, totalItems: 85, availablePageSizes: mockGridOption.pagination.pageSizes
-    });
   });
 
   it('should initialize the service and be able to change the grid options by the SETTER and expect the GETTER to have updated options', () => {
@@ -126,7 +122,7 @@ describe('PaginationService', () => {
     expect(service.totalItems).toEqual(125);
     expect(service.pager).toBeTruthy();
     expect(service.getCurrentPageNumber()).toBe(2);
-    expect(spy).toHaveBeenCalledTimes(1); // called 1x time inside the init() only
+    expect(spy).toHaveBeenCalledWith(false, false);
   });
 
   it('should be able to change the totalItems by the SETTER after the initialization and expect the "refreshPagination" method to be called', () => {
@@ -494,31 +490,43 @@ describe('PaginationService', () => {
     });
 
     it('should call refreshPagination when "onFilterCleared" is triggered', () => {
-      const spy = jest.spyOn(service, 'refreshPagination');
+      const resetSpy = jest.spyOn(service, 'resetPagination');
+      const refreshSpy = jest.spyOn(service, 'refreshPagination');
 
       service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       filterServiceStub.onFilterCleared.next(true);
 
-      expect(spy).toHaveBeenCalledWith(true);
+      expect(resetSpy).toHaveBeenCalled();
+      expect(refreshSpy).toHaveBeenCalledWith(true, true);
     });
 
     it('should call refreshPagination when "onFilterChanged" is triggered', () => {
+      const resetSpy = jest.spyOn(service, 'resetPagination');
       const spy = jest.spyOn(service, 'refreshPagination');
 
       service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       filterServiceStub.onFilterChanged.next([{ columnId: 'field1', operator: '=', searchTerms: [] }]);
 
-      expect(spy).toHaveBeenCalledWith(true);
+      expect(resetSpy).toHaveBeenCalled();
+      expect(spy).toHaveBeenCalledWith(true, true);
     });
   });
 
   describe('resetPagination method', () => {
-    it('should call "refreshPagination" with argument True when calling the method', () => {
+    it('should call "refreshPagination" with 2 arguments True when calling the method', () => {
       const spy = jest.spyOn(service, 'refreshPagination');
       service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.resetPagination();
 
-      expect(spy).toHaveBeenCalledWith(true);
+      expect(spy).toHaveBeenCalledWith(true, true);
+    });
+
+    it('should call "refreshPagination" with True and False arguments when calling the method with False being passed as input argument', () => {
+      const spy = jest.spyOn(service, 'refreshPagination');
+      service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
+      service.resetPagination(false);
+
+      expect(spy).toHaveBeenCalledWith(true, false);
     });
   });
 
@@ -540,8 +548,7 @@ describe('PaginationService', () => {
       gridServiceStub.onItemAdded.next(mockItems);
 
       setTimeout(() => {
-        // called 2x times by init() then by processOnItemAddedOrRemoved()
-        expect(paginationSpy).toHaveBeenCalledTimes(2);
+        expect(paginationSpy).toHaveBeenCalledTimes(1);
         expect(recalculateSpy).toHaveBeenCalledTimes(2);
         expect(service.pager.from).toBe(26);
         expect(service.pager.to).toBe(50 + 1);
@@ -558,8 +565,7 @@ describe('PaginationService', () => {
       gridServiceStub.onItemAdded.next(mockItems);
 
       setTimeout(() => {
-        // called 2x times by init() then by processOnItemAddedOrRemoved()
-        expect(paginationSpy).toHaveBeenCalledTimes(2);
+        expect(paginationSpy).toHaveBeenCalledTimes(1);
         expect(recalculateSpy).toHaveBeenCalledTimes(2);
         expect(service.pager.from).toBe(26);
         expect(service.pager.to).toBe(50 + mockItems.length);
@@ -575,8 +581,7 @@ describe('PaginationService', () => {
       gridServiceStub.onItemAdded.next(null);
 
       setTimeout(() => {
-        // called 1x time by init() only
-        expect(paginationSpy).toHaveBeenCalledTimes(1);
+        expect(paginationSpy).not.toHaveBeenCalled();
         expect(recalculateSpy).toHaveBeenCalledTimes(1);
         expect(service.pager.from).toBe(26);
         expect(service.pager.to).toBe(50);
@@ -593,8 +598,7 @@ describe('PaginationService', () => {
       gridServiceStub.onItemDeleted.next(mockItems);
 
       setTimeout(() => {
-        // called 2x times by init() then by processOnItemAddedOrRemoved()
-        expect(paginationSpy).toHaveBeenCalledTimes(2);
+        expect(paginationSpy).toHaveBeenCalledTimes(1);
         expect(recalculateSpy).toHaveBeenCalledTimes(2);
         expect(service.pager.from).toBe(26);
         expect(service.pager.to).toBe(50 - 1);
@@ -611,8 +615,7 @@ describe('PaginationService', () => {
       gridServiceStub.onItemDeleted.next(mockItems);
 
       setTimeout(() => {
-        // called 2x times by init() then by processOnItemAddedOrRemoved()
-        expect(paginationSpy).toHaveBeenCalledTimes(2);
+        expect(paginationSpy).toHaveBeenCalledTimes(1);
         expect(recalculateSpy).toHaveBeenCalledTimes(2);
         expect(service.pager.from).toBe(26);
         expect(service.pager.to).toBe(50 - mockItems.length);
@@ -629,8 +632,7 @@ describe('PaginationService', () => {
       gridServiceStub.onItemDeleted.next(null);
 
       setTimeout(() => {
-        // called 1x time by init() only
-        expect(paginationSpy).toHaveBeenCalledTimes(1);
+        expect(paginationSpy).not.toHaveBeenCalled();
         expect(recalculateSpy).toHaveBeenCalledTimes(1);
         expect(service.pager.from).toBe(26);
         expect(service.pager.to).toBe(50);
@@ -662,7 +664,6 @@ describe('PaginationService', () => {
 
     it('should initialize the service and call "refreshPagination" with some DataView calls', () => {
       const refreshSpy = jest.spyOn(service, 'refreshPagination');
-      const paginationSpy = jest.spyOn(service.onPaginationChanged, 'next');
       const onPagingSpy = jest.spyOn(dataviewStub.onPagingInfoChanged, 'subscribe');
       const setRefreshSpy = jest.spyOn(dataviewStub, 'setRefreshHints');
       const setPagingSpy = jest.spyOn(dataviewStub, 'setPagingOptions');
@@ -675,9 +676,6 @@ describe('PaginationService', () => {
       expect(setRefreshSpy).toHaveBeenCalled();
       expect(setPagingSpy).toHaveBeenCalledWith({ pageSize: 25, pageNum: 0 });
       expect(service.getCurrentPageNumber()).toBe(2);
-      expect(paginationSpy).toHaveBeenCalledWith({
-        from: 26, to: 50, itemsPerPage: 25, pageCount: 4, pageNumber: 2, totalItems: 85, availablePageSizes: mockGridOption.pagination.pageSizes
-      });
     });
 
     it('should change the totalItems when "onPagingInfoChanged" from the DataView is triggered with a different total', () => {