feat(filter): add SliderRange Filter unit tests & fix searchTerms input

- refactor other tests as well - refactor numberFilterConditions so that it accept a searchTerms array so that we can pass an array of multiple values to the SliderRange filter
ghiscoding · Aug 16, 2019 · be136be · be136be
1 parent d5e0a26
commit be136be
Show file tree

Hide file tree

Showing 11 changed files with 312 additions and 134 deletions.
diff --git a/src/app/modules/angular-slickgrid/filter-conditions/__tests__/numberFilterCondition.spec.ts b/src/app/modules/angular-slickgrid/filter-conditions/__tests__/numberFilterCondition.spec.ts
@@ -69,27 +69,51 @@ describe('numberFilterCondition method', () => {
     expect(output).toBe(false);
   });
 
-  it('should return True when input value is in the range of search terms', () => {
+  it('should return True when input value is in the range of search terms using 2 dots (..) notation', () => {
     const options = { dataKey: '', operator: 'EQ', cellValue: '3', fieldType: FieldType.number, searchTerms: ['1..5'] } as FilterConditionOption;
     const output = numberFilterCondition(options);
     expect(output).toBe(true);
   });
 
-  it('should return False when input value is not in the range of search terms', () => {
+  it('should return False when input value is not in the range of search terms using 2 dots (..) notation', () => {
     const options = { dataKey: '', operator: 'EQ', cellValue: '15', fieldType: FieldType.number, searchTerms: ['1..5'] } as FilterConditionOption;
     const output = numberFilterCondition(options);
     expect(output).toBe(false);
   });
 
-  it('should return True when input value equals the search terms min inclusive value and operator is set to "rangeInclusive"', () => {
+  it('should return True when input value equals the search terms min inclusive value and operator is set to "rangeInclusive" using 2 dots (..) notation', () => {
     const options = { dataKey: '', operator: 'RangeInclusive', cellValue: '1', fieldType: FieldType.number, searchTerms: ['1..5'] } as FilterConditionOption;
     const output = numberFilterCondition(options);
     expect(output).toBe(true);
   });
 
-  it('should return False when input value equals the search terms min inclusive value and operator is set to "RangeExclusive"', () => {
+  it('should return False when input value equals the search terms min inclusive value and operator is set to "RangeExclusive" using 2 dots (..) notation', () => {
     const options = { dataKey: '', operator: 'RangeExclusive', cellValue: '1', fieldType: FieldType.number, searchTerms: ['1..5'] } as FilterConditionOption;
     const output = numberFilterCondition(options);
     expect(output).toBe(false);
   });
+
+  it('should return True when input value is in the range of search terms array', () => {
+    const options = { dataKey: '', operator: 'EQ', cellValue: '3', fieldType: FieldType.number, searchTerms: [1, 5] } as FilterConditionOption;
+    const output = numberFilterCondition(options);
+    expect(output).toBe(true);
+  });
+
+  it('should return False when input value is not in the range of search terms array', () => {
+    const options = { dataKey: '', operator: 'EQ', cellValue: '15', fieldType: FieldType.number, searchTerms: [1, 5] } as FilterConditionOption;
+    const output = numberFilterCondition(options);
+    expect(output).toBe(false);
+  });
+
+  it('should return True when input value equals the search terms min (first array term) inclusive value and operator is set to "rangeInclusive"', () => {
+    const options = { dataKey: '', operator: 'RangeInclusive', cellValue: '1', fieldType: FieldType.number, searchTerms: [1, 5] } as FilterConditionOption;
+    const output = numberFilterCondition(options);
+    expect(output).toBe(true);
+  });
+
+  it('should return False when input value equals the search terms min (first array term) inclusive value and operator is set to "RangeExclusive"', () => {
+    const options = { dataKey: '', operator: 'RangeExclusive', cellValue: '1', fieldType: FieldType.number, searchTerms: [1, 5] } as FilterConditionOption;
+    const output = numberFilterCondition(options);
+    expect(output).toBe(false);
+  });
 });
diff --git a/src/app/modules/angular-slickgrid/filter-conditions/numberFilterCondition.ts b/src/app/modules/angular-slickgrid/filter-conditions/numberFilterCondition.ts
@@ -3,26 +3,22 @@ import { testFilterCondition } from './filterUtilities';
 
 export const numberFilterCondition: FilterCondition = (options: FilterConditionOption) => {
   const cellValue = parseFloat(options.cellValue);
-  const searchTerm = (Array.isArray(options.searchTerms) && options.searchTerms[0]) || 0;
+  const searchTerms = Array.isArray(options.searchTerms) && options.searchTerms || [0];
 
   let isRangeSearch = false;
   let searchValue1;
   let searchValue2;
 
-  if (typeof searchTerm === 'string') {
-    if (searchTerm.indexOf('..') >= 0) {
-      isRangeSearch = true;
-      const searchValues = searchTerm.split('..');
-      searchValue1 = parseFloat(Array.isArray(searchValues) && searchValues[0]);
-      searchValue2 = parseFloat(Array.isArray(searchValues) && searchValues[1]);
-    } else {
-      searchValue1 = parseFloat(searchTerm);
-    }
+  if (searchTerms.length === 2 || (typeof searchTerms[0] === 'string' && (searchTerms[0] as string).indexOf('..') > 0)) {
+    isRangeSearch = true;
+    const searchValues = (searchTerms.length === 2) ? searchTerms : (searchTerms[0] as string).split('..');
+    searchValue1 = parseFloat(Array.isArray(searchValues) && searchValues[0] + '');
+    searchValue2 = parseFloat(Array.isArray(searchValues) && searchValues[1] + '');
   } else {
-    searchValue1 = searchTerm;
+    searchValue1 = searchTerms[0];
   }
 
-  if (!searchTerm && !options.operator) {
+  if (!searchValue1 && !options.operator) {
     return true;
   }
 

diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/compoundInputFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/compoundInputFilter.spec.ts
@@ -7,8 +7,7 @@ import { CompoundInputFilter } from '../compoundInputFilter';
 const containerId = 'demo-container';
 
 // define a <div> container to simulate the grid container
-const template =
-  `<div id="${containerId}"></div>`;
+const template = `<div id="${containerId}"></div>`;
 
 const gridOptionMock = {
   enableFiltering: true,
@@ -100,11 +99,7 @@ describe('CompoundInputFilter', () => {
     const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
 
     filterInputElm.focus();
-    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.search-filter.filter-duration.filled');
 
     expect(filterFilledElms.length).toBe(1);
@@ -121,11 +116,7 @@ describe('CompoundInputFilter', () => {
     const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
 
     filterInputElm.focus();
-    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '>', searchTerms: ['9'], shouldTriggerQuery: true });
   });
@@ -155,11 +146,7 @@ describe('CompoundInputFilter', () => {
     const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
 
     filterInputElm.focus();
-    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '>', searchTerms: ['987'], shouldTriggerQuery: true });
   });
@@ -176,11 +163,7 @@ describe('CompoundInputFilter', () => {
     const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
 
     filterInputElm.focus();
-    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '>', searchTerms: ['987'], shouldTriggerQuery: true });
   });
@@ -193,11 +176,7 @@ describe('CompoundInputFilter', () => {
 
     filterInputElm.focus();
     filterInputElm.value = 'a';
-    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['a'], shouldTriggerQuery: true });
   });

diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/compoundInputNumberFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/compoundInputNumberFilter.spec.ts
@@ -7,8 +7,7 @@ import { CompoundInputNumberFilter } from '../compoundInputNumberFilter';
 const containerId = 'demo-container';
 
 // define a <div> container to simulate the grid container
-const template =
-  `<div id="${containerId}"></div>`;
+const template = `<div id="${containerId}"></div>`;
 
 const gridOptionMock = {
   enableFiltering: true,

diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/compoundInputPasswordFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/compoundInputPasswordFilter.spec.ts
@@ -7,8 +7,7 @@ import { CompoundInputPasswordFilter } from '../compoundInputPasswordFilter';
 const containerId = 'demo-container';
 
 // define a <div> container to simulate the grid container
-const template =
-  `<div id="${containerId}"></div>`;
+const template = `<div id="${containerId}"></div>`;
 
 const gridOptionMock = {
   enableFiltering: true,

diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/inputFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/inputFilter.spec.ts
@@ -5,8 +5,7 @@ import { Filters } from '..';
 const containerId = 'demo-container';
 
 // define a <div> container to simulate the grid container
-const template =
-  `<div id="${containerId}"></div>`;
+const template = `<div id="${containerId}"></div>`;
 
 const gridOptionMock = {
   enableFiltering: true,
@@ -78,11 +77,7 @@ describe('InputFilter', () => {
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-duration');
 
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('input.filter-duration.filled');
 
     expect(filterFilledElms.length).toBe(1);
@@ -98,11 +93,7 @@ describe('InputFilter', () => {
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-duration');
 
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('input.filter-duration.filled');
 
     expect(filterFilledElms.length).toBe(1);
@@ -119,11 +110,7 @@ describe('InputFilter', () => {
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-duration');
 
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('input.filter-duration.filled');
 
     expect(filterFilledElms.length).toBe(1);
@@ -138,11 +125,7 @@ describe('InputFilter', () => {
 
     filterElm.focus();
     filterElm.value = 'a';
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['a'], shouldTriggerQuery: true });
   });

diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/inputMaskFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/inputMaskFilter.spec.ts
@@ -5,8 +5,7 @@ import { Filters } from '..';
 const containerId = 'demo-container';
 
 // define a <div> container to simulate the grid container
-const template =
-  `<div id="${containerId}"></div>`;
+const template = `<div id="${containerId}"></div>`;
 
 const gridOptionMock = {
   enableFiltering: true,
@@ -84,11 +83,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('1234567890');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['1234567890'], shouldTriggerQuery: true });
   });
@@ -101,11 +96,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('1234567890');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(filterElm.value).toBe('(123) 456-7890');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['1234567890'], shouldTriggerQuery: true });
@@ -119,11 +110,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('1234567890abc');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(filterElm.value).toBe('(123) 456-7890');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['1234567890'], shouldTriggerQuery: true });
@@ -137,11 +124,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('1234567890');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(filterElm.value).toBe('(123) 456-7890');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['1234567890'], shouldTriggerQuery: true });
@@ -155,11 +138,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('H1H1H1');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(filterElm.value).toBe('H1H 1H1');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['H1H1H1'], shouldTriggerQuery: true });
@@ -174,11 +153,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('   1234567890  ');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(filterElm.value).toBe('(123) 456-7890');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['1234567890'], shouldTriggerQuery: true });
@@ -194,11 +169,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('   1234567890  ');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(filterElm.value).toBe('(123) 456-7890');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['1234567890'], shouldTriggerQuery: true });
@@ -212,11 +183,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('abc');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(filterElm.value).toBe('() -');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: [''], shouldTriggerQuery: true });
@@ -231,11 +198,7 @@ describe('InputMaskFilter', () => {
 
     filterElm.focus();
     filterElm.value = '1';
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', {
-      keyCode: 97,
-      bubbles: true,
-      cancelable: true
-    }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['1'], shouldTriggerQuery: true });
   });

diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/inputNumberFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/inputNumberFilter.spec.ts
@@ -5,8 +5,7 @@ import { Filters } from '..';
 const containerId = 'demo-container';
 
 // define a <div> container to simulate the grid container
-const template =
-  `<div id="${containerId}"></div>`;
+const template = `<div id="${containerId}"></div>`;
 
 const gridOptionMock = {
   enableFiltering: true,

diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/inputPasswordFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/inputPasswordFilter.spec.ts
@@ -5,8 +5,7 @@ import { Filters } from '..';
 const containerId = 'demo-container';
 
 // define a <div> container to simulate the grid container
-const template =
-  `<div id="${containerId}"></div>`;
+const template = `<div id="${containerId}"></div>`;
 
 const gridOptionMock = {
   enableFiltering: true,