feat(filter): add NativeSelect Filter unit tests & tweak some Filters

- some of the Filters were not handling well searchTerms that could be the false boolean, this was resulting as not being a searchTerm while in fact it could be a valid entry

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/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'];

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

@@ -139,6 +139,17 @@ describe('InputFilter', () => {
     expect(filterElm.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 filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-duration');
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('input.filter-duration.filled');
+
+    expect(filterElm.value).toBe('');
+    expect(filterFilledElms.length).toBe(0);
+  });
+
   it('should trigger a callback with the clear filter set when calling the "clear" method', () => {
     const spyCallback = jest.spyOn(filterArguments, 'callback');
     filterArguments.searchTerms = ['xyz'];
@@ -148,7 +159,6 @@ describe('InputFilter', () => {
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-duration');
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('input.filter-duration.filled');
 
-
     expect(filterElm.value).toBe('');
     expect(filterFilledElms.length).toBe(0);
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, clearFilterTriggered: true, shouldTriggerQuery: true });