Merge pull request #275 from ghiscoding/feat/filters-tests

feat(filter): add unit test suite for multiple Filters

Author: ghiscoding

.circleci/config.yml

@@ -47,7 +47,10 @@ jobs:
           command: |
             cd test/cypress
             yarn cypress:ci:mochawesome
-      - store_test_results:
-          path: reports/junit
-      - store_artifacts:
-          path: reports/junit
+      # - run:
+      #     name: Build Demo Site
+      #     command: NODE_ENV=production npx ng build --prod
+      # - store_test_results:
+      #     path: reports/junit
+      # - store_artifacts:
+      #     path: reports/junit

.gitignore

@@ -44,6 +44,7 @@ Thumbs.db
 
 # Distribution folder
 dist
+dist-demo
 
 # Tests Report & Coverage
 **/node_modules

CHANGELOG.md

@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.10.4](https://github.com/ghiscoding/angular-slickgrid/compare/v2.10.3...v2.10.4) (2019-08-29)
+
+### [2.10.3](https://github.com/ghiscoding/angular-slickgrid/compare/v2.10.2...v2.10.3) (2019-08-29)
+
+
+### Bug Fixes
+
+* **core:** dowgrade to previous SlickGrid version to fix issues ([1fd11ab](https://github.com/ghiscoding/angular-slickgrid/commit/1fd11ab))
+
+
+### Features
+
+* **filter:** add CompoundDate Filter unit tests ([45348a0](https://github.com/ghiscoding/angular-slickgrid/commit/45348a0))
+* **filter:** add CompoundSlider Filter unit tests ([06abb3d](https://github.com/ghiscoding/angular-slickgrid/commit/06abb3d))
+* **filter:** add NativeSelect Filter unit tests & tweak some Filters ([4b952c9](https://github.com/ghiscoding/angular-slickgrid/commit/4b952c9))
+* **filter:** add slider unit tests ([5ae1a85](https://github.com/ghiscoding/angular-slickgrid/commit/5ae1a85))
+
 ### [2.10.2](https://github.com/ghiscoding/angular-slickgrid/compare/v2.10.1...v2.10.2) (2019-08-26)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-slickgrid",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "description": "Slickgrid components made available in Angular",
   "keywords": [
     "angular",

src/app/examples/custom-angularComponentFilter.ts

@@ -62,7 +62,7 @@ export class CustomAngularComponentFilter implements Filter {
     this.grid = args.grid;
     this.callback = args.callback;
     this.columnDef = args.columnDef;
-    this.searchTerms = args.searchTerms || [];
+    this.searchTerms = (args.hasOwnProperty('searchTerms') ? args.searchTerms : []) || [];
 
     if (!this.columnFilter || !this.columnFilter.params.component || !(this.angularUtilService instanceof AngularUtilService)) {
       throw new Error(`[Angular-Slickgrid] For Filter with Angular Component to work properly, you need to provide your component to the "component" property and make sure to add it to your "entryComponents" array.

src/app/examples/custom-inputFilter.ts

@@ -42,10 +42,10 @@ export class CustomInputFilter implements Filter {
     this.grid = args.grid;
     this.callback = args.callback;
     this.columnDef = args.columnDef;
-    this.searchTerms = args.searchTerms || [];
+    this.searchTerms = (args.hasOwnProperty('searchTerms') ? args.searchTerms : []) || [];
 
     // filter input can only have 1 search term, so we will use the 1st array index if it exist
-    const searchTerm = (Array.isArray(this.searchTerms) && this.searchTerms[0]) || '';
+    const searchTerm = (Array.isArray(this.searchTerms) && this.searchTerms.length >= 0) ? this.searchTerms[0] : '';
 
     // step 1, create HTML string template
     const filterTemplate = this.buildTemplateHtmlString();

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

@@ -40,7 +40,7 @@ export class GridMenuComponent implements OnInit {
       { id: 'title', name: 'Title', field: 'title', headerKey: 'TITLE', filterable: true, type: FieldType.string },
       { id: 'duration', name: 'Duration', field: 'duration', headerKey: 'DURATION', sortable: true, filterable: true, type: FieldType.string },
       {
-        id: '%', name: '% Complete', field: 'percentComplete', headerKey: 'PERCENT_COMPLETE', sortable: true, filterable: true,
+        id: 'percentComplete', name: '% Complete', field: 'percentComplete', headerKey: 'PERCENT_COMPLETE', sortable: true, filterable: true,
         type: FieldType.number,
         formatter: Formatters.percentCompleteBar,
         filter: { model: Filters.compoundSlider, params: { hideSliderNumber: false } }

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

@@ -0,0 +1,276 @@
+
+import { TestBed } from '@angular/core/testing';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { Column, FilterArguments, GridOption, FieldType } from '../../models';
+import { Filters } from '..';
+import { CompoundDateFilter } from '../compoundDateFilter';
+
+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('CompoundDateFilter', () => {
+  let divContainer: HTMLDivElement;
+  let filter: CompoundDateFilter;
+  let filterArguments: FilterArguments;
+  let spyGetHeaderRow;
+  let mockColumn: Column;
+  let translate: TranslateService;
+
+  beforeEach(() => {
+    divContainer = document.createElement('div');
+    divContainer.innerHTML = template;
+    document.body.appendChild(divContainer);
+    spyGetHeaderRow = jest.spyOn(gridStub, 'getHeaderRowColumn').mockReturnValue(divContainer);
+
+    mockColumn = { id: 'finish', field: 'finish', filterable: true, outputType: FieldType.dateIso, filter: { model: Filters.compoundDate, operator: '>' } };
+    filterArguments = {
+      grid: gridStub,
+      columnDef: mockColumn,
+      callback: jest.fn()
+    };
+
+    TestBed.configureTestingModule({
+      providers: [],
+      imports: [TranslateModule.forRoot()]
+    });
+    translate = TestBed.get(TranslateService);
+
+    translate.setTranslation('en', {
+      CONTAINS: 'Contains',
+      EQUALS: 'Equals',
+      ENDS_WITH: 'Ends With',
+      STARTS_WITH: 'Starts With',
+    });
+    translate.setTranslation('fr', {
+      CONTAINS: 'Contient',
+      EQUALS: 'Égale',
+      ENDS_WITH: 'Se termine par',
+      STARTS_WITH: 'Commence par',
+    });
+    translate.setDefaultLang('en');
+
+    filter = new CompoundDateFilter(translate);
+  });
+
+  afterEach(() => {
+    filter.destroy();
+  });
+
+  it('should throw an error when trying to call init without any arguments', () => {
+    expect(() => filter.init(null)).toThrowError('[Angular-SlickGrid] A filter must always have an "init()" with valid arguments.');
+  });
+
+  it('should initialize the filter', () => {
+    filter.init(filterArguments);
+    const filterCount = divContainer.querySelectorAll('.form-group.search-filter.filter-finish').length;
+
+    expect(spyGetHeaderRow).toHaveBeenCalled();
+    expect(filterCount).toBe(1);
+  });
+
+  it('should have a placeholder when defined in its column definition', () => {
+    const testValue = 'test placeholder';
+    mockColumn.filter.placeholder = testValue;
+
+    filter.init(filterArguments);
+    const filterElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+
+    expect(filterElm.placeholder).toBe(testValue);
+  });
+
+  it('should be able to retrieve default flatpickr options through the Getter', () => {
+    filter.init(filterArguments);
+
+    expect(filter.flatInstance).toBeTruthy();
+    expect(filter.flatpickrOptions).toEqual({
+      altFormat: 'Y-m-d',
+      altInput: true,
+      closeOnSelect: true,
+      dateFormat: 'Y-m-d',
+      defaultDate: '',
+      locale: 'en',
+      onChange: expect.anything(),
+      wrap: true,
+    });
+  });
+
+  it('should be able to call "setValues" and have that value set in the picker', () => {
+    const mockDate = '2001-01-02T16:02:02.239Z';
+    filter.init(filterArguments);
+    filter.setValues(mockDate);
+    expect(filter.currentDate).toEqual(mockDate);
+  });
+
+  it('should be able to call "setValues" as an array and have that value set in the picker', () => {
+    const mockDate = '2001-01-02T16:02:02.239Z';
+    filter.init(filterArguments);
+    filter.setValues([mockDate]);
+    expect(filter.currentDate).toEqual(mockDate);
+  });
+
+  it('should trigger input change event and expect the callback to be called with the date provided in the input', () => {
+    mockColumn.filter.filterOptions = { allowInput: true }; // change to allow input value only for testing purposes
+    mockColumn.filter.operator = '>';
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+
+    filter.init(filterArguments);
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    filterInputElm.value = '2001-01-02T16:02:02.239Z';
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true }));
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.form-group.search-filter.filter-finish.filled');
+
+    expect(filterFilledElms.length).toBe(1);
+    expect(spyCallback).toHaveBeenCalledWith(undefined, {
+      columnDef: mockColumn, operator: '>', searchTerms: ['2001-01-02'], shouldTriggerQuery: true
+    });
+  });
+
+  it('should pass a different operator then trigger an input change event and expect the callback to be called with the date provided in the input', () => {
+    mockColumn.filter.filterOptions = { allowInput: true }; // change to allow input value only for testing purposes
+    mockColumn.filter.operator = '>';
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+
+    filter.init(filterArguments);
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    filterInputElm.value = '2001-01-02T16:02:02.239Z';
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true }));
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.form-group.search-filter.filter-finish.filled');
+
+    expect(filterFilledElms.length).toBe(1);
+    expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, operator: '>', searchTerms: ['2001-01-02'], shouldTriggerQuery: true });
+  });
+
+  it('should create the input filter with a default search term when passed as a filter argument', () => {
+    filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z'];
+    mockColumn.filter.operator = '<=';
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+
+    filter.init(filterArguments);
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+
+    filterInputElm.focus();
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.form-group.search-filter.filter-finish.filled');
+
+    expect(filterFilledElms.length).toBe(1);
+    expect(filter.currentDate).toBe('2000-01-01T05:00:00.000Z');
+    expect(filterInputElm.value).toBe('2000-01-01');
+    expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '<=', searchTerms: ['2000-01-01T05:00:00.000Z'], shouldTriggerQuery: true });
+  });
+
+  it('should trigger an operator change event and expect the callback to be called with the searchTerms and operator defined', () => {
+    filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z'];
+    mockColumn.filter.operator = '>';
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+
+    filter.init(filterArguments);
+    const filterSelectElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish select');
+
+    filterSelectElm.value = '<=';
+    filterSelectElm.dispatchEvent(new Event('change'));
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.form-group.search-filter.filter-finish.filled');
+
+    expect(filterFilledElms.length).toBe(1);
+    expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '<=', searchTerms: ['2000-01-01T05:00:00.000Z'], shouldTriggerQuery: true });
+  });
+
+  it('should work with different locale when locale is changed', () => {
+    translate.use('fr-CA');
+    filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z'];
+    mockColumn.filter.operator = '<=';
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+
+    filter.init(filterArguments);
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+
+    filterInputElm.focus();
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.form-group.search-filter.filter-finish.filled');
+
+    expect(filterFilledElms.length).toBe(1);
+    expect(filter.currentDate).toBe('2000-01-01T05:00:00.000Z');
+    expect(filterInputElm.value).toBe('2000-01-01');
+    expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '<=', searchTerms: ['2000-01-01T05:00:00.000Z'], shouldTriggerQuery: true });
+  });
+
+  it('should trigger a callback with the clear filter set when calling the "clear" method', () => {
+    filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z'];
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+
+    filter.init(filterArguments);
+    filter.clear();
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.form-group.search-filter.filter-finish.filled');
+
+    expect(filterInputElm.value).toBe('');
+    expect(filterFilledElms.length).toBe(0);
+    expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: true });
+  });
+
+  it('should trigger a callback with the clear filter but without querying when when calling the "clear" method with False as argument', () => {
+    filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z'];
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+
+    filter.init(filterArguments);
+    filter.clear(false);
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.form-group.search-filter.filter-finish.filled');
+
+    expect(filterInputElm.value).toBe('');
+    expect(filterFilledElms.length).toBe(0);
+    expect(spyCallback).toHaveBeenCalledWith(undefined, { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: false });
+  });
+
+  it('should have a value with date & time in the picker when "enableTime" option is set and we trigger a change', () => {
+    mockColumn.filter.filterOptions = { enableTime: true, allowInput: true }; // change to allow input value only for testing purposes
+    mockColumn.outputType = FieldType.dateTimeIsoAmPm;
+    mockColumn.filter.operator = '>';
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+
+    filter.init(filterArguments);
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+    filterInputElm.value = '2001-01-02T16:02:02.000+05:00';
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true }));
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.form-group.search-filter.filter-finish.filled');
+
+    expect(filterFilledElms.length).toBe(1);
+    // expect(filter.currentDate.toISOString()).toBe('2001-01-02T21:02:02.000Z');
+    expect(filterInputElm.value).toBe('2001-01-02 4:02:02 PM');
+    expect(spyCallback).toHaveBeenCalledWith(expect.anything(), {
+      columnDef: mockColumn, operator: '>', searchTerms: ['2001-01-02'], shouldTriggerQuery: true
+    });
+  });
+
+  it('should have a value with date & time in the picker when using no "outputType" which will default to UTC date', () => {
+    mockColumn.outputType = null;
+    filterArguments.searchTerms = ['2000-01-01T05:00:00.000Z'];
+    mockColumn.filter.operator = '<=';
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+
+    filter.init(filterArguments);
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-finish .flatpickr input.flatpickr');
+
+    filterInputElm.focus();
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.form-group.search-filter.filter-finish.filled');
+
+    expect(filterFilledElms.length).toBe(1);
+    expect(filter.currentDate).toBe('2000-01-01T05:00:00.000Z');
+    expect(filterInputElm.value).toBe('2000-01-01T05:00:00.000Z');
+    expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '<=', searchTerms: ['2000-01-01T05:00:00.000Z'], shouldTriggerQuery: true });
+  });
+});

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

@@ -190,6 +190,17 @@ describe('CompoundInputFilter', () => {
     expect(filterInputElm.value).toBe('xyz');
   });
 
+  it('should expect the input not to have the "filled" css class when the search term provided is an empty string', () => {
+    filterArguments.searchTerms = [''];
+
+    filter.init(filterArguments);
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.search-filter.filter-duration.filled');
+
+    expect(filterInputElm.value).toBe('');
+    expect(filterFilledElms.length).toBe(0);
+  });
+
   it('should create the input filter with operator dropdown options related to numbers when column definition type is FieldType.number', () => {
     mockColumn.type = FieldType.number;
     filterArguments.searchTerms = ['9'];