feat(tests): start adding GridStateService unit tests

Author: Ghislain Beaulac

src/app/modules/angular-slickgrid/services/collection.service.spec.ts renamed to src/app/modules/angular-slickgrid/services/__tests__/collection.service.spec.ts

@@ -1,25 +1,20 @@
 import { TestBed } from '@angular/core/testing';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
-import { CollectionService } from './collection.service';
+import { CollectionService } from '../collection.service';
 import {
   CollectionFilterBy,
   CollectionSortBy,
   FilterMultiplePassType,
   OperatorType,
   Column,
   FieldType,
-} from './../models/index';
+} from '../../models/index';
 
 describe('CollectionService', () => {
   let collection = [];
   let translate: TranslateService;
   let service: CollectionService;
 
-  // stub some methods of the SlickGrid Grid instance
-  const gridStub = {
-    getOptions: jest.fn()
-  };
-
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [CollectionService],

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

@@ -0,0 +1,163 @@
+import { TestBed } from '@angular/core/testing';
+import { BackendServiceApi, BackendService, GridOption, CurrentPagination, CurrentSorter, CurrentFilter } from '../../models';
+import { FilterService } from '../filter.service';
+import { GridStateService } from '../gridState.service';
+import { ExtensionService } from '../extension.service';
+import { SortService } from '../sort.service';
+import { of } from 'rxjs';
+
+const gridOptionMock = {
+  enableAutoResize: true
+} as GridOption;
+
+const backendServiceStub = {
+  getCurrentFilters: () => { },
+  getCurrentPagination: () => { },
+  getCurrentSorters: () => { },
+} as BackendService;
+
+const gridStub = {
+  autosizeColumns: jest.fn(),
+  getScrollbarDimensions: jest.fn(),
+  getOptions: () => gridOptionMock
+};
+
+const extensionServiceStub = {
+  getExtensionByName: (name: string) => { }
+} as ExtensionService;
+
+const filterServiceStub = {
+  onFilterChanged: of([]),
+  onFilterCleared: of(false)
+} as FilterService;
+
+const sortServiceStub = {
+  onSortChanged: of([]),
+  onSortCleared: of(false)
+} as SortService;
+
+describe('GridStateService', () => {
+  let service: GridStateService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [GridStateService]
+    });
+    service = TestBed.get(GridStateService);
+    service.init(gridStub, extensionServiceStub, filterServiceStub, sortServiceStub);
+  });
+
+  afterEach(() => {
+    service.dispose();
+  });
+
+  it('should create the service', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should have called the "subscribeToAllGridChanges" method while initializing', () => {
+    const gridStateSpy = jest.spyOn(service, 'subscribeToAllGridChanges');
+    const filterSpy = jest.spyOn(filterServiceStub.onFilterChanged, 'subscribe');
+    const sortSpy = jest.spyOn(sortServiceStub.onSortChanged, 'subscribe');
+
+    service.init(gridStub, extensionServiceStub, filterServiceStub, sortServiceStub);
+
+    expect(gridStateSpy).toHaveBeenCalled();
+    expect(filterSpy).toHaveBeenCalled();
+    expect(sortSpy).toHaveBeenCalled();
+  });
+
+  describe('getCurrentPagination method', () => {
+    it('should call "getCurrentPagination" and return null when no BackendService is used', () => {
+      const output = service.getCurrentPagination();
+      expect(output).toBeNull();
+    });
+
+    it('should call "getCurrentPagination" and return Pagination when a BackendService is used', () => {
+      const gridOptionsMock = { backendServiceApi: { service: backendServiceStub } } as GridOption;
+      const paginationMock = { pageNumber: 2, pageSize: 50 } as CurrentPagination;
+      const gridSpy = jest.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock);
+      const backendSpy = jest.spyOn(backendServiceStub, 'getCurrentPagination').mockReturnValue(paginationMock);
+
+      const output = service.getCurrentPagination();
+
+      expect(gridSpy).toHaveBeenCalled();
+      expect(backendSpy).toHaveBeenCalled();
+      expect(output).toBe(paginationMock);
+    });
+  });
+
+  describe('getCurrentSorters method', () => {
+    it('should return null when no BackendService is used and SortService is missing the "getCurrentLocalSorters" method', () => {
+      const gridSpy = jest.spyOn(gridStub, 'getOptions').mockReturnValue({});
+
+      const output = service.getCurrentSorters();
+
+      expect(gridSpy).toHaveBeenCalled();
+      expect(output).toBeNull();
+    });
+
+    it('should return Sorters when a BackendService is used', () => {
+      const gridOptionsMock = { backendServiceApi: { service: backendServiceStub } } as GridOption;
+      const sorterMock = [{ columnId: 'field1', direction: 'ASC' }, { columnId: 'field2', direction: 'DESC' }] as CurrentSorter[];
+      const gridSpy = jest.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock);
+      const backendSpy = jest.spyOn(backendServiceStub, 'getCurrentSorters').mockReturnValue(sorterMock);
+
+      const output = service.getCurrentSorters();
+
+      expect(gridSpy).toHaveBeenCalled();
+      expect(backendSpy).toHaveBeenCalled();
+      expect(output).toBe(sorterMock);
+    });
+
+    it('should return Sorters when Local grid is set and no BackendService is used', () => {
+      const sorterMock = [{ columnId: 'field1', direction: 'ASC' }, { columnId: 'field2', direction: 'DESC' }] as CurrentSorter[];
+      sortServiceStub.getCurrentLocalSorters = () => sorterMock;
+      const gridSpy = jest.spyOn(gridStub, 'getOptions').mockReturnValue({});
+      const sortSpy = jest.spyOn(sortServiceStub, 'getCurrentLocalSorters').mockReturnValue(sorterMock);
+
+      const output = service.getCurrentSorters();
+
+      expect(gridSpy).toHaveBeenCalled();
+      expect(sortSpy).toHaveBeenCalled();
+      expect(output).toBe(sorterMock);
+    });
+  });
+
+  describe('getCurrentFilters method', () => {
+    it('should return null when no BackendService is used and FilterService is missing the "getCurrentLocalFilters" method', () => {
+      const gridSpy = jest.spyOn(gridStub, 'getOptions').mockReturnValue({});
+
+      const output = service.getCurrentFilters();
+
+      expect(gridSpy).toHaveBeenCalled();
+      expect(output).toBeNull();
+    });
+
+    it('should return Sorters when a BackendService is used', () => {
+      const gridOptionsMock = { backendServiceApi: { service: backendServiceStub } } as GridOption;
+      const filterMock = [{ columnId: 'field1', operator: 'EQ', searchTerms: [] }, { columnId: 'field2', operator: '>=', searchTerms: [2] }] as CurrentFilter[];
+      const gridSpy = jest.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock);
+      const backendSpy = jest.spyOn(backendServiceStub, 'getCurrentFilters').mockReturnValue(filterMock);
+
+      const output = service.getCurrentFilters();
+
+      expect(gridSpy).toHaveBeenCalled();
+      expect(backendSpy).toHaveBeenCalled();
+      expect(output).toBe(filterMock);
+    });
+
+    it('should return Sorters when Local grid is set and no BackendService is used', () => {
+      const filterMock = [{ columnId: 'field1', operator: 'EQ', searchTerms: [] }, { columnId: 'field2', operator: '>=', searchTerms: [2] }] as CurrentFilter[];
+      filterServiceStub.getCurrentLocalFilters = () => filterMock;
+      const gridSpy = jest.spyOn(gridStub, 'getOptions').mockReturnValue({});
+      const filterSpy = jest.spyOn(filterServiceStub, 'getCurrentLocalFilters').mockReturnValue(filterMock);
+
+      const output = service.getCurrentFilters();
+
+      expect(gridSpy).toHaveBeenCalled();
+      expect(filterSpy).toHaveBeenCalled();
+      expect(output).toBe(filterMock);
+    });
+  });
+});

src/app/modules/angular-slickgrid/services/resizer.service.spec.ts renamed to src/app/modules/angular-slickgrid/services/__tests__/resizer.service.spec.ts

@@ -1,5 +1,5 @@
-import { GridOption } from './../models/gridOption.interface';
-import { ResizerService } from './resizer.service';
+import { GridOption } from '../../models/gridOption.interface';
+import { ResizerService } from '../resizer.service';
 
 const DATAGRID_MIN_HEIGHT = 180;
 const DATAGRID_MIN_WIDTH = 300;

src/app/modules/angular-slickgrid/services/extension.service.ts

@@ -312,7 +312,7 @@ export class ExtensionService {
     }
   }
 
-  /** Translate the an array of items from an input key and assign to the output key */
+  /** Translate an array of items from an input key and assign translated value to the output key */
   private translateItems(items: any[], inputKey: string, outputKey: string) {
     for (const item of items) {
       if (item[inputKey]) {

src/app/modules/angular-slickgrid/services/gridState.service.ts

@@ -16,7 +16,6 @@ import { SortService } from './sort.service';
 import { Subject, Subscription } from 'rxjs';
 
 // using external non-typed js libraries
-declare var $: any;
 declare var Slick: any;
 
 export class GridStateService {
@@ -203,38 +202,6 @@ export class GridStateService {
     return null;
   }
 
-  /**
-   * Hook a SlickGrid Extension Event to a Grid State change event
-   * @param extension name
-   * @param grid
-   */
-  hookExtensionEventToGridStateChange(extensionName: ExtensionName, eventName: string) {
-    const extension = this.extensionService && this.extensionService.getExtensionByName(extensionName);
-
-    if (extension && extension.class && extension.class[eventName] && extension.class[eventName].subscribe) {
-      this._eventHandler.subscribe(extension.class[eventName], (e: Event, args: any) => {
-        const columns: Column[] = args && args.columns;
-        const currentColumns: CurrentColumn[] = this.getAssociatedCurrentColumns(columns);
-        this.onGridStateChanged.next({ change: { newValues: currentColumns, type: GridStateType.columns }, gridState: this.getCurrentGridState() });
-      });
-    }
-  }
-
-  /**
-   * Hook a Grid Event to a Grid State change event
-   * @param event name
-   * @param grid
-   */
-  hookSlickGridEventToGridStateChange(eventName: string, grid: any) {
-    if (grid && grid[eventName] && grid[eventName].subscribe) {
-      this._eventHandler.subscribe(grid[eventName], (e: Event, args: any) => {
-        const columns: Column[] = grid.getColumns();
-        const currentColumns: CurrentColumn[] = this.getAssociatedCurrentColumns(columns);
-        this.onGridStateChanged.next({ change: { newValues: currentColumns, type: GridStateType.columns }, gridState: this.getCurrentGridState() });
-      });
-    }
-  }
-
   resetColumns(columnDefinitions?: Column[]) {
     const columns: Column[] = columnDefinitions || this._columns;
     const currentColumns: CurrentColumn[] = this.getAssociatedCurrentColumns(columns);
@@ -289,11 +256,47 @@ export class GridStateService {
     );
 
     // Subscribe to ColumnPicker and/or GridMenu for show/hide Columns visibility changes
-    this.hookExtensionEventToGridStateChange(ExtensionName.columnPicker, 'onColumnsChanged');
-    this.hookExtensionEventToGridStateChange(ExtensionName.gridMenu, 'onColumnsChanged');
+    this.bindExtensionEventToGridStateChange(ExtensionName.columnPicker, 'onColumnsChanged');
+    this.bindExtensionEventToGridStateChange(ExtensionName.gridMenu, 'onColumnsChanged');
 
     // subscribe to Column Resize & Reordering
-    this.hookSlickGridEventToGridStateChange('onColumnsReordered', grid);
-    this.hookSlickGridEventToGridStateChange('onColumnsResized', grid);
+    this.bindSlickGridEventToGridStateChange('onColumnsReordered', grid);
+    this.bindSlickGridEventToGridStateChange('onColumnsResized', grid);
+  }
+
+  // --
+  // private methods
+  // ------------------
+
+  /**
+   * Bind a SlickGrid Extension Event to a Grid State change event
+   * @param extension name
+   * @param grid
+   */
+  private bindExtensionEventToGridStateChange(extensionName: ExtensionName, eventName: string) {
+    const extension = this.extensionService && this.extensionService.getExtensionByName && this.extensionService.getExtensionByName(extensionName);
+
+    if (extension && extension.class && extension.class[eventName] && extension.class[eventName].subscribe) {
+      this._eventHandler.subscribe(extension.class[eventName], (e: Event, args: any) => {
+        const columns: Column[] = args && args.columns;
+        const currentColumns: CurrentColumn[] = this.getAssociatedCurrentColumns(columns);
+        this.onGridStateChanged.next({ change: { newValues: currentColumns, type: GridStateType.columns }, gridState: this.getCurrentGridState() });
+      });
+    }
+  }
+
+  /**
+   * Bind a Grid Event to a Grid State change event
+   * @param event name
+   * @param grid
+   */
+  private bindSlickGridEventToGridStateChange(eventName: string, grid: any) {
+    if (grid && grid[eventName] && grid[eventName].subscribe) {
+      this._eventHandler.subscribe(grid[eventName], (e: Event, args: any) => {
+        const columns: Column[] = grid.getColumns();
+        const currentColumns: CurrentColumn[] = this.getAssociatedCurrentColumns(columns);
+        this.onGridStateChanged.next({ change: { newValues: currentColumns, type: GridStateType.columns }, gridState: this.getCurrentGridState() });
+      });
+    }
   }
 }