refactor(tests): test all with TestBed & add HeaderButton test

Author: Ghislain Beaulac

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

@@ -49,6 +49,7 @@ export class GridHeaderButtonComponent implements OnInit, OnDestroy {
       enableCellNavigation: true,
       headerButton: {
         onCommand: (e, args) => {
+          console.log(args)
           const column = args.column;
           const button = args.button;
           const command = args.command;

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

@@ -84,7 +84,7 @@ export class GridRowDetailComponent implements OnInit {
         selectActiveRow: true
       },
       rowDetailView: {
-        // We can load the "process" asynchronously in 3 different ways (aurelia-http-client, aurelia-fetch-client OR even Promise)
+        // We can load the "process" asynchronously in 2 different ways (httpClient OR even Promise)
         process: (item) => this.simulateServerAsyncCall(item),
         // process: this.httpFetch.fetch(`api/item/${item.id}`),
 

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

@@ -1,4 +1,5 @@
-import { I18N } from 'aurelia-i18n';
+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';
@@ -20,15 +21,17 @@ jest.mock('slickgrid/plugins/slick.autotooltips', () => mockAddon);
 Slick.AutoTooltips = mockAddon;
 
 describe('autoTooltipExtension', () => {
+  let translate: TranslateService;
   let extension: AutoTooltipExtension;
-  let extensionUtility: ExtensionUtility;
-  let sharedService: SharedService;
   const gridOptionsMock = { enableAutoTooltip: true } as GridOption;
 
   beforeEach(() => {
-    extensionUtility = new ExtensionUtility({} as I18N, sharedService);
-    sharedService = new SharedService();
-    extension = new AutoTooltipExtension(extensionUtility, sharedService);
+    TestBed.configureTestingModule({
+      providers: [AutoTooltipExtension, ExtensionUtility, SharedService],
+      imports: [TranslateModule.forRoot()]
+    });
+    extension = TestBed.get(AutoTooltipExtension);
+    translate = TestBed.get(TranslateService);
   });
 
   it('should return null when either the grid object or the grid options is missing', () => {

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

@@ -1,4 +1,5 @@
-import { I18N } from 'aurelia-i18n';
+import { TestBed } from '@angular/core/testing';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { GridOption } from '../../models/gridOption.interface';
 import { CellExternalCopyManagerExtension } from '../cellExternalCopyManagerExtension';
 import { ExtensionUtility } from '../extensionUtility';
@@ -33,13 +34,12 @@ jest.mock('slickgrid/plugins/slick.cellselectionmodel', () => mockSelectionModel
 Slick.CellSelectionModel = mockSelectionModel;
 
 describe('cellExternalCopyManagerExtension', () => {
+  let translate: TranslateService;
   const mockEventCallback = (e, args: { ranges: SelectedRange[] }) => { };
   const mockSelectRange = [{ fromCell: 1, fromRow: 1, toCell: 1, toRow: 1 }] as SelectedRange[];
   const mockSelectRangeEvent = { ranges: mockSelectRange };
 
   let extension: CellExternalCopyManagerExtension;
-  let extensionUtility: ExtensionUtility;
-  let sharedService: SharedService;
   const gridOptionsMock = {
     enableCheckboxSelector: true,
     excelCopyBufferOptions: {
@@ -51,9 +51,12 @@ describe('cellExternalCopyManagerExtension', () => {
   } as GridOption;
 
   beforeEach(() => {
-    extensionUtility = new ExtensionUtility({} as I18N, sharedService);
-    sharedService = new SharedService();
-    extension = new CellExternalCopyManagerExtension(extensionUtility, sharedService);
+    TestBed.configureTestingModule({
+      providers: [CellExternalCopyManagerExtension, ExtensionUtility, SharedService],
+      imports: [TranslateModule.forRoot()]
+    });
+    extension = TestBed.get(CellExternalCopyManagerExtension);
+    translate = TestBed.get(TranslateService);
   });
 
   afterEach(() => {

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

@@ -1,4 +1,5 @@
-import { I18N } from 'aurelia-i18n';
+import { TestBed } from '@angular/core/testing';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { GridOption } from '../../models/gridOption.interface';
 import { CheckboxSelectorExtension } from '../checkboxSelectorExtension';
 import { ExtensionUtility } from '../extensionUtility';
@@ -32,15 +33,17 @@ jest.mock('slickgrid/plugins/slick.rowselectionmodel', () => mockSelectionModel)
 Slick.RowSelectionModel = mockSelectionModel;
 
 describe('checkboxSelectorExtension', () => {
+  let translate: TranslateService;
   let extension: CheckboxSelectorExtension;
-  let extensionUtility: ExtensionUtility;
-  let sharedService: SharedService;
   const gridOptionsMock = { enableCheckboxSelector: true } as GridOption;
 
   beforeEach(() => {
-    extensionUtility = new ExtensionUtility({} as I18N, sharedService);
-    sharedService = new SharedService();
-    extension = new CheckboxSelectorExtension(extensionUtility, sharedService);
+    TestBed.configureTestingModule({
+      providers: [CheckboxSelectorExtension, ExtensionUtility, SharedService],
+      imports: [TranslateModule.forRoot()]
+    });
+    extension = TestBed.get(CheckboxSelectorExtension);
+    translate = TestBed.get(TranslateService);
   });
 
   it('should return null after calling "create" method when either the column definitions or the grid options is missing', () => {

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

@@ -0,0 +1,103 @@
+import { TestBed } from '@angular/core/testing';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { GridOption } from '../../models/gridOption.interface';
+import { HeaderButtonExtension } from '../headerButtonExtension';
+import { ExtensionUtility } from '../extensionUtility';
+import { SharedService } from '../../services/shared.service';
+import { HeaderButtonOnCommandArgs } from '../../models';
+
+declare var Slick: any;
+
+const gridStub = {
+  getOptions: jest.fn(),
+  registerPlugin: jest.fn(),
+};
+
+const mockAddon = jest.fn().mockImplementation(() => ({
+  onCommand: new Slick.Event(),
+  init: jest.fn(),
+  destroy: jest.fn()
+}));
+
+jest.mock('slickgrid/plugins/slick.headerbuttons', () => mockAddon);
+Slick.Plugins = {
+  HeaderButtons: mockAddon
+};
+
+describe('headerButtonExtension', () => {
+  let translate: TranslateService;
+  let extension: HeaderButtonExtension;
+  const mockOnCommandArgs = {
+    button: {
+      command: 'toggle-highlight',
+      cssClass: 'fa fa-circle red',
+      tooltip: 'Remove highlight.',
+    },
+    column: { id: 'field1', field: 'field1' },
+    command: 'toggle-highlight',
+    grid: gridStub
+  } as HeaderButtonOnCommandArgs;
+  const mockEventCallback = (e, args: HeaderButtonOnCommandArgs) => { };
+  const gridOptionsMock = {
+    enableHeaderButton: true,
+    headerButton: {
+      onExtensionRegistered: jest.fn(),
+      onCommand: mockEventCallback
+    }
+  } as GridOption;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [HeaderButtonExtension, ExtensionUtility, SharedService],
+      imports: [TranslateModule.forRoot()]
+    });
+    extension = TestBed.get(HeaderButtonExtension);
+    translate = TestBed.get(TranslateService);
+  });
+
+  it('should return null when either the grid object or the grid options is missing', () => {
+    const output = extension.register();
+    expect(output).toBeNull();
+  });
+
+  describe('registered addon', () => {
+    beforeEach(() => {
+      jest.spyOn(SharedService.prototype, 'grid', 'get').mockReturnValue(gridStub);
+      jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
+    });
+
+    it('should register the addon', () => {
+      const pluginSpy = jest.spyOn(SharedService.prototype.grid, 'registerPlugin');
+
+      const instance = extension.register();
+
+      expect(mockAddon).toHaveBeenCalledWith({
+        onCommand: expect.anything(),
+        onExtensionRegistered: expect.anything(),
+      });
+      expect(pluginSpy).toHaveBeenCalledWith(instance);
+    });
+
+    it('should call internal event handler subscribe and expect the "onCommand" option to be called when addon notify is called', () => {
+      const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
+      const onCopySpy = jest.spyOn(SharedService.prototype.gridOptions.headerButton, 'onCommand');
+      const instance = extension.register();
+      instance.onCommand.notify(mockOnCommandArgs, new Slick.EventData(), gridStub);
+
+      expect(handlerSpy).toHaveBeenCalledWith(
+        { notify: expect.anything(), subscribe: expect.anything(), unsubscribe: expect.anything(), },
+        expect.anything()
+      );
+      expect(onCopySpy).toHaveBeenCalledWith(expect.anything(), mockOnCommandArgs);
+    });
+
+    it('should dispose of the addon', () => {
+      const instance = extension.register();
+      const destroySpy = jest.spyOn(instance, 'destroy');
+
+      extension.dispose();
+
+      expect(destroySpy).toHaveBeenCalled();
+    });
+  });
+});

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

@@ -1,4 +1,5 @@
-import { I18N } from 'aurelia-i18n';
+import { TestBed } from '@angular/core/testing';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { GridOption } from '../../models/gridOption.interface';
 import { RowSelectionExtension } from '../rowSelectionExtension';
 import { ExtensionUtility } from '../extensionUtility';
@@ -22,15 +23,17 @@ jest.mock('slickgrid/plugins/slick.rowselectionmodel', () => mockAddon);
 Slick.RowSelectionModel = mockAddon;
 
 describe('rowSelectionExtension', () => {
+  let translate: TranslateService;
   let extension: RowSelectionExtension;
-  let extensionUtility: ExtensionUtility;
-  let sharedService: SharedService;
   const gridOptionsMock = { enableRowSelection: true } as GridOption;
 
   beforeEach(() => {
-    extensionUtility = new ExtensionUtility({} as I18N, sharedService);
-    sharedService = new SharedService();
-    extension = new RowSelectionExtension(extensionUtility, sharedService);
+    TestBed.configureTestingModule({
+      providers: [RowSelectionExtension, ExtensionUtility, SharedService],
+      imports: [TranslateModule.forRoot()]
+    });
+    extension = TestBed.get(RowSelectionExtension);
+    translate = TestBed.get(TranslateService);
   });
 
   it('should return null when either the grid object or the grid options is missing', () => {

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

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Extension, ExtensionName, HeaderButtonOnCommandArgs } from '../models/index';
+import { Extension, ExtensionName, HeaderButtonOnCommandArgs, SlickEventHandler } from '../models/index';
 import { ExtensionUtility } from './extensionUtility';
 import { SharedService } from '../services/shared.service';
 
@@ -8,17 +8,23 @@ declare var Slick: any;
 
 @Injectable()
 export class HeaderButtonExtension implements Extension {
-  private _eventHandler: any = new Slick.EventHandler();
-  private _extension: any;
+  private _eventHandler: SlickEventHandler;
+  private _addon: any;
 
-  constructor(private extensionUtility: ExtensionUtility, private sharedService: SharedService) { }
+  constructor(private extensionUtility: ExtensionUtility, 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();
     }
   }
 
@@ -27,21 +33,21 @@ export class HeaderButtonExtension implements Extension {
     if (this.sharedService && this.sharedService.grid && this.sharedService.gridOptions) {
       // dynamically import the SlickGrid plugin (addon) with RequireJS
       this.extensionUtility.loadExtensionDynamically(ExtensionName.headerButton);
-      this._extension = new Slick.Plugins.HeaderButtons(this.sharedService.gridOptions.headerButton || {});
-      this.sharedService.grid.registerPlugin(this._extension);
+      this._addon = new Slick.Plugins.HeaderButtons(this.sharedService.gridOptions.headerButton || {});
+      this.sharedService.grid.registerPlugin(this._addon);
 
       // hook all events
       if (this.sharedService.grid && this.sharedService.gridOptions.headerButton) {
         if (this.sharedService.gridOptions.headerButton.onExtensionRegistered) {
-          this.sharedService.gridOptions.headerButton.onExtensionRegistered(this._extension);
+          this.sharedService.gridOptions.headerButton.onExtensionRegistered(this._addon);
         }
-        this._eventHandler.subscribe(this._extension.onCommand, (e: any, args: HeaderButtonOnCommandArgs) => {
+        this._eventHandler.subscribe(this._addon.onCommand, (e: any, args: HeaderButtonOnCommandArgs) => {
           if (this.sharedService.gridOptions.headerButton && typeof this.sharedService.gridOptions.headerButton.onCommand === 'function') {
             this.sharedService.gridOptions.headerButton.onCommand(e, args);
           }
         });
       }
-      return this._extension;
+      return this._addon;
     }
     return null;
   }

src/app/modules/angular-slickgrid/filters/inputMaskFilter.ts

@@ -18,7 +18,7 @@ export class InputMaskFilter extends InputFilter {
    */
   init(args: FilterArguments) {
     if (!args) {
-      throw new Error('[Aurelia-SlickGrid] A filter must always have an "init()" with valid arguments.');
+      throw new Error('[Angular-SlickGrid] A filter must always have an "init()" with valid arguments.');
     }
     this.grid = args.grid;
     this.callback = args.callback;

src/app/modules/angular-slickgrid/models/index.ts

@@ -89,6 +89,7 @@ export * from './searchTerm.type';
 export * from './selectedRange.interface';
 export * from './selectOption.interface';
 export * from './slickEvent.interface';
+export * from './slickEventHandler.interface';
 export * from './sortChangedArgs.interface';
 export * from './sortDirection.enum';
 export * from './sortDirectionNumber.enum';