feat(filters): convert jQuery to native element on more filters

Author: ghiscoding

src/app/modules/angular-slickgrid/editors/__tests__/dualInputEditor.spec.ts

@@ -1,4 +1,4 @@
-import { GridOption, FilterArguments, Column } from '../../models';
+import { GridOption, FilterArguments, Column, ColumnFilter } from '../../models';
 import { Filters } from '..';
 import { SliderFilter } from '../sliderFilter';
 
@@ -23,7 +23,7 @@ describe('SliderFilter', () => {
   let divContainer: HTMLDivElement;
   let filter: SliderFilter;
   let filterArguments: FilterArguments;
-  let spyGetHeaderRow;
+  let spyGetHeaderRow: jest.SpyInstance<any, any>;
   let mockColumn: Column;
 
   beforeEach(() => {
@@ -47,7 +47,7 @@ describe('SliderFilter', () => {
   });
 
   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.');
+    expect(() => filter.init(null as any)).toThrowError('[Angular-Slickgrid] A filter must always have an "init()" with valid arguments.');
   });
 
   it('should initialize the filter', () => {
@@ -63,7 +63,7 @@ describe('SliderFilter', () => {
 
     filter.init(filterArguments);
     filter.setValues(['2']);
-    const filterElm = divContainer.querySelector('.search-filter.slider-container.filter-duration input');
+    const filterElm = divContainer.querySelector('.search-filter.slider-container.filter-duration input') as HTMLInputElement;
     filterElm.dispatchEvent(new CustomEvent('change'));
 
     expect(spyCallback).toHaveBeenLastCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['2'], shouldTriggerQuery: true });
@@ -74,7 +74,7 @@ describe('SliderFilter', () => {
 
     filter.init(filterArguments);
     filter.setValues(3);
-    const filterElm = divContainer.querySelector('.search-filter.slider-container.filter-duration input');
+    const filterElm = divContainer.querySelector('.search-filter.slider-container.filter-duration input') as HTMLInputElement;
     const mockEvent = new Event('change');
     Object.defineProperty(mockEvent, 'target', { writable: true, configurable: true, value: { value: '13' } });
     filterElm.dispatchEvent(mockEvent);
@@ -88,7 +88,7 @@ describe('SliderFilter', () => {
     filterArguments.searchTerms = [3];
 
     filter.init(filterArguments);
-    const filterNumberElm = divContainer.querySelector<HTMLInputElement>('.input-group-text');
+    const filterNumberElm = divContainer.querySelector('.input-group-text') as HTMLInputElement;
     const filterFilledElms = divContainer.querySelectorAll('.search-filter.slider-container.filter-duration.filled');
 
     expect(filterFilledElms.length).toBe(1);
@@ -98,11 +98,11 @@ describe('SliderFilter', () => {
 
   it('should create the input filter with default search terms and a different step size when "valueStep" is provided', () => {
     filterArguments.searchTerms = [15];
-    mockColumn.filter.valueStep = 5;
+    (mockColumn.filter as ColumnFilter).valueStep = 5;
 
     filter.init(filterArguments);
-    const filterNumberElm = divContainer.querySelector<HTMLInputElement>('.input-group-text');
-    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.slider-container.filter-duration input');
+    const filterNumberElm = divContainer.querySelector('.input-group-text') as HTMLInputElement;
+    const filterInputElm = divContainer.querySelector('.search-filter.slider-container.filter-duration input') as HTMLInputElement;
 
     expect(filterInputElm.step).toBe('5');
     expect(filterNumberElm.textContent).toBe('15');
@@ -117,7 +117,7 @@ describe('SliderFilter', () => {
 
     filter.init(filterArguments);
 
-    const filterNumberElm = divContainer.querySelector<HTMLInputElement>('.input-group-text');
+    const filterNumberElm = divContainer.querySelector('.input-group-text') as HTMLInputElement;
 
     expect(filterNumberElm.textContent).toBe('4');
     expect(filter.getValues()).toEqual(4);
@@ -133,15 +133,15 @@ describe('SliderFilter', () => {
 
     filter.init(filterArguments);
 
-    const filterNumberElm = divContainer.querySelector<HTMLInputElement>('.input-group-text');
+    const filterNumberElm = divContainer.querySelector('.input-group-text') as HTMLInputElement;
 
     expect(filterNumberElm.textContent).toBe('4');
     expect(filter.getValues()).toEqual(4);
   });
 
   it('should create the input filter with default search terms range but without showing side numbers when "hideSliderNumber" is set in params', () => {
     filterArguments.searchTerms = [3];
-    mockColumn.filter.params = { hideSliderNumber: true };
+    (mockColumn.filter as ColumnFilter).params = { hideSliderNumber: true };
 
     filter.init(filterArguments);
 

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

@@ -42,12 +42,12 @@ export class CompoundInputFilter implements Filter {
 
   /** Getter for the Grid Options pulled through the Grid Object */
   protected get gridOptions(): GridOption {
-    return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
+    return this.grid?.getOptions?.() ?? {};
   }
 
   /** Getter for the Column Filter */
   get columnFilter(): ColumnFilter {
-    return this.columnDef && this.columnDef.filter || {};
+    return this.columnDef?.filter ?? {};
   }
 
   /** Getter to know what would be the default operator when none is specified */
@@ -121,7 +121,7 @@ export class CompoundInputFilter implements Filter {
       this._clearFilterTriggered = true;
       this._shouldTriggerQuery = shouldTriggerQuery;
       this.searchTerms = [];
-      this._selectOperatorElm.value = '';
+      this._selectOperatorElm.selectedIndex = 0;
       this._filterInputElm.value = '';
       this.onTriggerEvent(undefined);
     }
@@ -132,8 +132,8 @@ export class CompoundInputFilter implements Filter {
    */
   destroy() {
     this._bindEventService.unbindAll();
-    this._filterElm?.remove?.();
     this._selectOperatorElm?.remove?.();
+    this._filterElm?.remove?.();
   }
 
   /** Set value(s) on the DOM element */