Merge pull request #273 from ghiscoding/feat/multiple-select-filter-tests

feat(tests): add unit tests for SingleSelect & MultipleSelect Filters

Author: ghiscoding

README.md

@@ -31,7 +31,7 @@ You like and use this great library `Angular-Slickgrid`? Please upvote :star: an
 - version `2.x.x` for Angular 7+
 
 #### Angular 8
-When running `ng update` to upgrade to Angular 8, one of the biggest change that is noticeable is that they change the target to `ES2015`, which does not play well with SlickGrid core library (which is all written in plain ES5 javascript). So for that reason, you need to switch back the `target` to `ES5` in your `tsconfig.json` file (`"target": "es5"`). This might be fixeable in the future, but for now that is the quick fix to get Angular 8 to work.
+When running `ng update` to upgrade to Angular 8, one of the biggest change that is noticeable is that they change the target to `ES2015`, which does not play well with SlickGrid core library (which is all written in plain ES5 javascript). So for that reason, you need to switch back the `target` to `ES5` in your `tsconfig.json` file (`"target": "es5"`). This might be fixable in the future, but for now that is the quick fix to get Angular 8 to work.
 
 ### Installation
 Refer to the [Wiki - HOWTO Step by Step](https://github.com/ghiscoding/angular-slickgrid/wiki/HOWTO---Step-by-Step)

src/app/modules/angular-slickgrid/editors/selectEditor.ts

@@ -432,8 +432,9 @@ export class SelectEditor implements Editor {
   }
 
   protected renderDomElement(collection: any[]) {
-    if (!Array.isArray(collection) && this.collectionOptions && this.collectionOptions.collectionInObjectProperty) {
-      collection = getDescendantProperty(collection, this.collectionOptions.collectionInObjectProperty);
+    if (!Array.isArray(collection) && this.collectionOptions && (this.collectionOptions.collectionInsideObjectProperty || this.collectionOptions.collectionInObjectProperty)) {
+      const collectionInsideObjectProperty = this.collectionOptions.collectionInsideObjectProperty || this.collectionOptions.collectionInObjectProperty;
+      collection = getDescendantProperty(collection, collectionInsideObjectProperty);
     }
     if (!Array.isArray(collection)) {
       throw new Error('The "collection" passed to the Select Editor is not a valid array');

src/app/modules/angular-slickgrid/filters/__tests__/multipleSelectFilter.spec.ts

@@ -0,0 +1,79 @@
+// import 3rd party lib multiple-select for the tests
+import '../../../../../assets/lib/multiple-select/multiple-select';
+
+import { TestBed } from '@angular/core/testing';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { Column, FilterArguments, GridOption } from '../../models';
+import { CollectionService } from '../../services/collection.service';
+import { Filters } from '..';
+import { MultipleSelectFilter } from '../multipleSelectFilter';
+import { of, Subject } from 'rxjs';
+
+const containerId = 'demo-container';
+
+// define a <div> container to simulate the grid container
+const template = `<div id="${containerId}"></div>`;
+
+const gridOptionMock = {
+  enableFiltering: true,
+  enableFilterTrimWhiteSpace: true,
+} as GridOption;
+
+const gridStub = {
+  getOptions: () => gridOptionMock,
+  getColumns: jest.fn(),
+  getHeaderRowColumn: jest.fn(),
+  render: jest.fn(),
+};
+
+describe('MultipleSelectFilter', () => {
+  let divContainer: HTMLDivElement;
+  let filter: MultipleSelectFilter;
+  let filterArguments: FilterArguments;
+  let spyGetHeaderRow;
+  let mockColumn: Column;
+  let collectionService: CollectionService;
+  let translate: TranslateService;
+
+  beforeEach(() => {
+    divContainer = document.createElement('div');
+    divContainer.innerHTML = template;
+    document.body.appendChild(divContainer);
+    spyGetHeaderRow = jest.spyOn(gridStub, 'getHeaderRowColumn').mockReturnValue(divContainer);
+
+    mockColumn = {
+      id: 'gender', field: 'gender', filterable: true,
+      filter: {
+        model: Filters.multipleSelect,
+      }
+    };
+    filterArguments = {
+      grid: gridStub,
+      columnDef: mockColumn,
+      callback: jest.fn()
+    };
+
+    TestBed.configureTestingModule({
+      providers: [CollectionService],
+      imports: [TranslateModule.forRoot()]
+    });
+    collectionService = TestBed.get(CollectionService);
+    translate = TestBed.get(TranslateService);
+    filter = new MultipleSelectFilter(translate, collectionService);
+  });
+
+  afterEach(() => {
+    filter.destroy();
+  });
+
+  it('should be a multiple-select filter', () => {
+    mockColumn.filter.collection = [{ value: 'male', label: 'male' }, { value: 'female', label: 'female' }];
+    filter = new MultipleSelectFilter(translate, collectionService);
+    filter.init(filterArguments, true);
+    const filterCount = divContainer.querySelectorAll('select.ms-filter.search-filter.filter-gender').length;
+
+    expect(spyGetHeaderRow).toHaveBeenCalled();
+    expect(filterCount).toBe(1);
+    expect(filter.isMultipleSelect).toBe(true);
+  });
+});