Merge pull request #218 from ghiscoding/feat/extension-tests

feat(tests): add some RowDetail Extension tests

Author: ghiscoding

src/app/modules/angular-slickgrid/extensions/__tests__/checkboxSelectorExtension.spec.ts

@@ -21,6 +21,7 @@ const mockAddon = jest.fn().mockImplementation(() => ({
   getColumnDefinition: jest.fn(),
   selectRows: jest.fn(),
 }));
+
 const mockSelectionModel = jest.fn().mockImplementation(() => ({
   init: jest.fn(),
   destroy: jest.fn()

src/app/modules/angular-slickgrid/extensions/__tests__/draggableGroupingExtension.spec.ts

@@ -45,7 +45,12 @@ describe('draggableGroupingExtension', () => {
     translate = TestBed.get(TranslateService);
   });
 
-  it('should return null when either the grid object or the grid options is missing', () => {
+  it('should return null after calling "create" method when the grid options is missing', () => {
+    const output = extension.create(null);
+    expect(output).toBeNull();
+  });
+
+  it('should return null after calling "register" method when either the grid object or the grid options is missing', () => {
     const output = extension.register();
     expect(output).toBeNull();
   });

src/app/modules/angular-slickgrid/extensions/__tests__/extensionUtility.spec.ts

@@ -1,18 +1,12 @@
 import { TestBed } from '@angular/core/testing';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { GridOption } from '../../models/gridOption.interface';
-import { AutoTooltipExtension } from '../autoTooltipExtension';
 import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
 import { ExtensionName } from '../../models';
 
 declare var Slick: any;
 
-const gridStub = {
-  getOptions: jest.fn(),
-  registerPlugin: jest.fn(),
-};
-
 const mockAddon = jest.fn().mockImplementation(() => ({
   init: jest.fn(),
   destroy: jest.fn()

src/app/modules/angular-slickgrid/extensions/__tests__/rowDetailViewExtension.spec.ts

@@ -34,13 +34,16 @@ export class DraggableGroupingExtension implements Extension {
    * For example the multi-select have to be added to the column definition before the grid is created to work properly
    */
   create(gridOptions: GridOption) {
-    // dynamically import the SlickGrid plugin (addon) with RequireJS
-    this.extensionUtility.loadExtensionDynamically(ExtensionName.draggableGrouping);
+    if (gridOptions) {
+      // dynamically import the SlickGrid plugin (addon) with RequireJS
+      this.extensionUtility.loadExtensionDynamically(ExtensionName.draggableGrouping);
 
-    if (!this._addon && gridOptions) {
-      this._addon = new Slick.DraggableGrouping(gridOptions.draggableGrouping || {});
+      if (!this._addon) {
+        this._addon = new Slick.DraggableGrouping(gridOptions.draggableGrouping || {});
+      }
+      return this._addon;
     }
-    return this._addon;
+    return null;
   }
 
   register(): any {

src/app/modules/angular-slickgrid/extensions/draggableGroupingExtension.ts

@@ -1,5 +1,5 @@
 import { ApplicationRef, ComponentRef, Injectable, Type, ViewContainerRef } from '@angular/core';
-import { Column, CurrentFilter, Extension, ExtensionName, GridOption } from '../models/index';
+import { Column, CurrentFilter, Extension, ExtensionName, GridOption, SlickEventHandler } from '../models/index';
 import { ExtensionUtility } from './extensionUtility';
 import { AngularUtilService } from '../services/angularUtilService';
 import { FilterService } from '../services/filter.service';
@@ -24,8 +24,8 @@ export interface CreatedView {
 @Injectable()
 export class RowDetailViewExtension implements Extension {
   rowDetailContainer: ViewContainerRef;
-  private _eventHandler: any = new Slick.EventHandler();
-  private _extension: any;
+  private _addon: any;
+  private _eventHandler: SlickEventHandler;
   private _preloadComponent: Type<object>;
   private _views: CreatedView[] = [];
   private _viewComponent: Type<object>;
@@ -38,14 +38,20 @@ export class RowDetailViewExtension implements Extension {
     private extensionUtility: ExtensionUtility,
     private filterService: FilterService,
     private sharedService: SharedService,
-  ) { }
+  ) {
+    this._eventHandler = new Slick.EventHandler();
+  }
+
+  get eventHandler(): SlickEventHandler {
+    return this._eventHandler;
+  }
 
   dispose() {
     // unsubscribe all SlickGrid events
     this._eventHandler.unsubscribeAll();
 
-    if (this._extension && this._extension.destroy) {
-      this._extension.destroy();
+    if (this._addon && this._addon.destroy) {
+      this._addon.destroy();
     }
 
     // also unsubscribe all RxJS subscriptions
@@ -67,7 +73,7 @@ export class RowDetailViewExtension implements Extension {
       }
 
       if (gridOptions && gridOptions.rowDetailView) {
-        if (!this._extension) {
+        if (!this._addon) {
           if (typeof gridOptions.rowDetailView.process === 'function') {
             // we need to keep the user "process" method and replace it with our own execution method
             // we do this because when we get the item detail, we need to call "onAsyncResponse.notify" for the plugin to work
@@ -89,25 +95,27 @@ export class RowDetailViewExtension implements Extension {
           }
 
           // finally register the Row Detail View Plugin
-          this._extension = new Slick.Plugins.RowDetailView(gridOptions.rowDetailView);
+          this._addon = new Slick.Plugins.RowDetailView(gridOptions.rowDetailView);
+        }
+        const selectionColumn: Column = this._addon.getColumnDefinition();
+        if (typeof selectionColumn === 'object') {
+          selectionColumn.excludeFromExport = true;
+          selectionColumn.excludeFromColumnPicker = true;
+          selectionColumn.excludeFromGridMenu = true;
+          selectionColumn.excludeFromQuery = true;
+          selectionColumn.excludeFromHeaderMenu = true;
+          columnDefinitions.unshift(selectionColumn);
         }
-        const selectionColumn: Column = this._extension.getColumnDefinition();
-        selectionColumn.excludeFromExport = true;
-        selectionColumn.excludeFromColumnPicker = true;
-        selectionColumn.excludeFromGridMenu = true;
-        selectionColumn.excludeFromQuery = true;
-        selectionColumn.excludeFromHeaderMenu = true;
-        columnDefinitions.unshift(selectionColumn);
       }
-      return this._extension;
+      return this._addon;
     }
     return null;
   }
 
   register(rowSelectionPlugin?: any) {
     if (this.sharedService && this.sharedService.grid && this.sharedService.gridOptions) {
       // the plugin has to be created BEFORE the grid (else it behaves oddly), but we can only watch grid events AFTER the grid is created
-      this.sharedService.grid.registerPlugin(this._extension);
+      this.sharedService.grid.registerPlugin(this._addon);
 
       // this also requires the Row Selection Model to be registered as well
       if (!rowSelectionPlugin || !this.sharedService.grid.getSelectionModel()) {
@@ -116,28 +124,25 @@ export class RowDetailViewExtension implements Extension {
         this.sharedService.grid.setSelectionModel(rowSelectionPlugin);
       }
 
-      // this._extension = this.create(this.sharedService.allColumns, this.sharedService.gridOptions);
-      this.sharedService.grid.registerPlugin(this._extension);
-
       // hook all events
       if (this.sharedService.grid && this.sharedService.gridOptions.rowDetailView) {
         if (this.sharedService.gridOptions.rowDetailView.onExtensionRegistered) {
-          this.sharedService.gridOptions.rowDetailView.onExtensionRegistered(this._extension);
+          this.sharedService.gridOptions.rowDetailView.onExtensionRegistered(this._addon);
         }
-        this._eventHandler.subscribe(this._extension.onAsyncResponse, (e: any, args: { item: any; detailView: any }) => {
+        this._eventHandler.subscribe(this._addon.onAsyncResponse, (e: any, args: { item: any; detailView: any }) => {
           if (this.sharedService.gridOptions.rowDetailView && typeof this.sharedService.gridOptions.rowDetailView.onAsyncResponse === 'function') {
             this.sharedService.gridOptions.rowDetailView.onAsyncResponse(e, args);
           }
         });
-        this._eventHandler.subscribe(this._extension.onAsyncEndUpdate, (e: any, args: { grid: any; item: any; }) => {
+        this._eventHandler.subscribe(this._addon.onAsyncEndUpdate, (e: any, args: { grid: any; item: any; }) => {
           // triggers after backend called "onAsyncResponse.notify()"
           this.renderViewModel(args && args.item);
 
           if (this.sharedService.gridOptions.rowDetailView && typeof this.sharedService.gridOptions.rowDetailView.onAsyncEndUpdate === 'function') {
             this.sharedService.gridOptions.rowDetailView.onAsyncEndUpdate(e, args);
           }
         });
-        this._eventHandler.subscribe(this._extension.onAfterRowDetailToggle, (e: any, args: { grid: any; item: any; expandedRows: any[]; }) => {
+        this._eventHandler.subscribe(this._addon.onAfterRowDetailToggle, (e: any, args: { grid: any; item: any; expandedRows: any[]; }) => {
           // display preload template & re-render all the other Detail Views after toggling
           // the preload View will eventually go away once the data gets loaded after the "onAsyncEndUpdate" event
           this.renderPreloadView();
@@ -147,23 +152,23 @@ export class RowDetailViewExtension implements Extension {
             this.sharedService.gridOptions.rowDetailView.onAfterRowDetailToggle(e, args);
           }
         });
-        this._eventHandler.subscribe(this._extension.onBeforeRowDetailToggle, (e: any, args: { grid: any; item: any; }) => {
+        this._eventHandler.subscribe(this._addon.onBeforeRowDetailToggle, (e: any, args: { grid: any; item: any; }) => {
           // before toggling row detail, we need to create View Component if it doesn't exist
           this.onBeforeRowDetailToggle(e, args);
 
           if (this.sharedService.gridOptions.rowDetailView && typeof this.sharedService.gridOptions.rowDetailView.onBeforeRowDetailToggle === 'function') {
             this.sharedService.gridOptions.rowDetailView.onBeforeRowDetailToggle(e, args);
           }
         });
-        this._eventHandler.subscribe(this._extension.onRowBackToViewportRange, (e: any, args: { grid: any; item: any; rowId: number; rowIndex: number; expandedRows: any[]; rowIdsOutOfViewport: number[]; }) => {
+        this._eventHandler.subscribe(this._addon.onRowBackToViewportRange, (e: any, args: { grid: any; item: any; rowId: number; rowIndex: number; expandedRows: any[]; rowIdsOutOfViewport: number[]; }) => {
           // when row is back to viewport range, we will re-render the View Component(s)
           this.onRowBackToViewportRange(e, args);
 
           if (this.sharedService.gridOptions.rowDetailView && typeof this.sharedService.gridOptions.rowDetailView.onRowBackToViewportRange === 'function') {
             this.sharedService.gridOptions.rowDetailView.onRowBackToViewportRange(e, args);
           }
         });
-        this._eventHandler.subscribe(this._extension.onRowOutOfViewportRange, (e: any, args: { grid: any; item: any; rowId: number; rowIndex: number; expandedRows: any[]; rowIdsOutOfViewport: number[]; }) => {
+        this._eventHandler.subscribe(this._addon.onRowOutOfViewportRange, (e: any, args: { grid: any; item: any; rowId: number; rowIndex: number; expandedRows: any[]; rowIdsOutOfViewport: number[]; }) => {
           if (this.sharedService.gridOptions.rowDetailView && typeof this.sharedService.gridOptions.rowDetailView.onRowOutOfViewportRange === 'function') {
             this.sharedService.gridOptions.rowDetailView.onRowOutOfViewportRange(e, args);
           }
@@ -182,7 +187,7 @@ export class RowDetailViewExtension implements Extension {
           this.filterService.onFilterChanged.subscribe((currentFilters: CurrentFilter[]) => this.redrawAllViewComponents())
         );
       }
-      return this._extension;
+      return this._addon;
     }
     return null;
   }
@@ -219,8 +224,8 @@ export class RowDetailViewExtension implements Extension {
    * @param item
    */
   private notifyTemplate(item: any) {
-    if (this._extension) {
-      this._extension.onAsyncResponse.notify({ item }, undefined, this);
+    if (this._addon) {
+      this._addon.onAsyncResponse.notify({ item }, undefined, this);
     }
   }
 
@@ -275,23 +280,19 @@ export class RowDetailViewExtension implements Extension {
     // expanding
     if (args && args.item && args.item.__collapsed) {
       // expanding row detail
-      if (args && args.item) {
-        const viewInfo: CreatedView = {
-          id: args.item.id,
-          dataContext: args.item
-        };
-        this.addToArrayWhenNotFound(this._views, viewInfo);
-      }
+      const viewInfo: CreatedView = {
+        id: args.item.id,
+        dataContext: args.item
+      };
+      this.addToArrayWhenNotFound(this._views, viewInfo);
     } else {
       // collapsing, so dispose of the View/Component
       const foundViewIndex = this._views.findIndex((view: CreatedView) => view.id === args.item.id);
-      if (foundViewIndex >= 0) {
-        if (this._views.hasOwnProperty(foundViewIndex)) {
-          const compRef = this._views[foundViewIndex].componentRef;
-          this.appRef.detachView(compRef.hostView);
-          compRef.destroy();
-          this._views.splice(foundViewIndex, 1);
-        }
+      if (foundViewIndex >= 0 && this._views.hasOwnProperty(foundViewIndex)) {
+        const compRef = this._views[foundViewIndex].componentRef;
+        this.appRef.detachView(compRef.hostView);
+        compRef.destroy();
+        this._views.splice(foundViewIndex, 1);
       }
     }
   }

src/app/modules/angular-slickgrid/extensions/rowDetailViewExtension.ts

@@ -41,10 +41,10 @@ export interface RowDetailView {
    */
   useSimpleViewportCalc?: boolean;
 
-  /** View Component of the preload template which shows after opening row detail & before row detail data shows up */
+  /** View Component of the preload template (typically a spinner) which shows after opening on the row detail but before the row detail is ready */
   preloadComponent?: Type<object>;
 
-  /** View Component that will be loaded once the async function finishes */
+  /** View Component that will be loaded in the row detail after the async function completed */
   viewComponent: Type<object>;
 
   // --
@@ -80,17 +80,17 @@ export interface RowDetailView {
   onAsyncResponse?: (e: Event, args: { item: any; detailView?: any }) => void;
 
   /** Fired when the async response finished */
-  onAsyncEndUpdate?: (e: Event, args: { grid: any; item: any }) => void;
+  onAsyncEndUpdate?: (e: Event, args: { item: any; grid: any; }) => void;
 
   /** Fired after the row detail gets toggled */
-  onAfterRowDetailToggle?: (e: Event, args: { grid: any; item: any; expandedRows: any[] }) => void;
+  onAfterRowDetailToggle?: (e: Event, args: { item: any; expandedRows: any[]; grid: any; }) => void;
 
   /** Fired before the row detail gets toggled */
-  onBeforeRowDetailToggle?: (e: Event, args: { grid: any; item: any }) => void;
+  onBeforeRowDetailToggle?: (e: Event, args: { item: any; grid: any; }) => void;
 
   /** Fired after the row detail gets toggled */
-  onRowBackToViewportRange?: (e: Event, args: { grid: any; item: any; rowId: number; rowIndex: number; expandedRows: any[]; rowIdsOutOfViewport: number[]; }) => void;
+  onRowBackToViewportRange?: (e: Event, args: { item: any; rowId: number; rowIndex: number; expandedRows: any[]; rowIdsOutOfViewport: number[]; grid: any; }) => void;
 
   /** Fired after a row becomes out of viewport range (user can't see the row anymore) */
-  onRowOutOfViewportRange?: (e: Event, args: { grid: any; item: any; rowId: number; rowIndex: number; expandedRows: any[]; rowIdsOutOfViewport: number[]; }) => void;
+  onRowOutOfViewportRange?: (e: Event, args: { item: any; rowId: number; rowIndex: number; expandedRows: any[]; rowIdsOutOfViewport: number[]; grid: any; }) => void;
 }