Skip to content

Commit

Permalink
perf(filters): merge all date range & compound filters into one class (…
Browse files Browse the repository at this point in the history 
…#812)
  • Loading branch information
@ghiscoding
ghiscoding committed Nov 12, 2022
1 parent 4370364 commit ca9adfa
Show file tree
Hide file tree
Showing 6 changed files with 451 additions and 652 deletions.
17 changes: 9 additions & 8 deletions packages/common/src/filters/__tests__/compoundDateFilter.spec.ts
View file
Expand Up @@ -112,6 +112,7 @@ describe('CompoundDateFilter', () => {
defaultDate: '',
errorHandler: expect.toBeFunction(),
locale: 'en',
mode: 'single',
onChange: expect.anything(),
wrap: true,
});
Expand All @@ -121,14 +122,14 @@ describe('CompoundDateFilter', () => {
const mockDate = '2001-01-02T16:02:02.239Z';
filter.init(filterArguments);
filter.setValues(mockDate);
expect(filter.currentDate).toEqual(mockDate);
expect(filter.currentDateOrDates).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);
expect(filter.currentDateOrDates).toEqual(mockDate);
});

it('should be able to call "setValues" with a value and an extra operator and expect it to be set as new operator', () => {
Expand All @@ -138,7 +139,7 @@ describe('CompoundDateFilter', () => {

const filterOperatorElm = divContainer.querySelector('.input-group-prepend.operator select') as HTMLInputElement;

expect(filter.currentDate).toEqual(mockDate);
expect(filter.currentDateOrDates).toEqual(mockDate);
expect(filterOperatorElm.value).toBe('>=');
});

Expand Down Expand Up @@ -218,7 +219,7 @@ describe('CompoundDateFilter', () => {
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(filter.currentDateOrDates).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 });
});
Expand All @@ -245,7 +246,7 @@ describe('CompoundDateFilter', () => {
filter.setValues(mockDate);
let filledInputElm = divContainer.querySelector('.search-filter.filter-finish .filled') as HTMLInputElement;

expect(filter.currentDate).toEqual(mockDate);
expect(filter.currentDateOrDates).toEqual(mockDate);
expect(filledInputElm).toBeTruthy();

filter.setValues('');
Expand Down Expand Up @@ -273,7 +274,7 @@ describe('CompoundDateFilter', () => {
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(filter.currentDateOrDates).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 });
expect(calendarElm).toBeTruthy();
Expand Down Expand Up @@ -347,7 +348,7 @@ describe('CompoundDateFilter', () => {
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(filter.currentDateOrDates.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
Expand All @@ -368,7 +369,7 @@ describe('CompoundDateFilter', () => {
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(filter.currentDateOrDates).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 });
});
Expand Down
11 changes: 6 additions & 5 deletions packages/common/src/filters/__tests__/dateRangeFilter.spec.ts
View file
@@ -1,3 +1,4 @@
import 'jest-extended';
import { FieldType } from '../../enums/index';
import { Column, FilterArguments, GridOption, SlickGrid } from '../../interfaces/index';
import { Filters } from '../filters.index';
Expand Down Expand Up @@ -117,14 +118,14 @@ describe('DateRangeFilter', () => {
const mockDates = ['2001-01-02T16:02:02.239Z', '2001-01-31T16:02:02.239Z'];
filter.init(filterArguments);
filter.setValues(mockDates);
expect(filter.currentDates).toEqual(mockDates);
expect(filter.currentDateOrDates).toEqual(mockDates);
});

it('should be able to call "setValues" with 2 dots (..) notation and have them set in the picker', () => {
const mockDate = '2001-01-02T16:02:02.239Z..2001-01-31T16:02:02.239Z';
filter.init(filterArguments);
filter.setValues([mockDate]);
expect(filter.currentDates).toEqual(mockDate.split('..'));
expect(filter.currentDateOrDates).toEqual(mockDate.split('..'));
});

it('should trigger input change event and expect the callback to be called with the date provided in the input', () => {
Expand Down Expand Up @@ -199,7 +200,7 @@ describe('DateRangeFilter', () => {
filter.setValues(mockDates);
let filledInputElm = divContainer.querySelector('.search-filter.filter-finish.filled') as HTMLInputElement;

expect(filter.currentDates).toEqual(mockDates);
expect(filter.currentDateOrDates).toEqual(mockDates);
expect(filledInputElm).toBeTruthy();

filter.setValues('');
Expand Down Expand Up @@ -300,7 +301,7 @@ describe('DateRangeFilter', () => {
const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.flatpickr.search-filter.filter-finish.filled');

expect(filterFilledElms.length).toBe(1);
// expect(filter.currentDates.map((date) => date.toISOString())).toEqual(['2000-01-01T05:00:00.000Z', '2000-01-31T05:00:00.000Z']);
// expect(filter.currentDateOrDates.map((date) => date.toISOString())).toEqual(['2000-01-01T05:00:00.000Z', '2000-01-31T05:00:00.000Z']);
expect(filterInputElm.value).toBe('2000-01-01 5:00:00 AM to 2000-01-31 5:00:00 AM');
expect(spyCallback).toHaveBeenCalledWith(expect.anything(), {
columnDef: mockColumn, operator: '>', searchTerms: ['2000-01-01 05:00:00 am', '2000-01-31 05:00:00 am'], shouldTriggerQuery: true
Expand All @@ -321,7 +322,7 @@ describe('DateRangeFilter', () => {
const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.flatpickr.search-filter.filter-finish.filled');

expect(filterFilledElms.length).toBe(1);
expect(filter.currentDates).toEqual(['2000-01-01T05:00:00.000Z', '2000-01-31T05:00:00.000Z']);
expect(filter.currentDateOrDates).toEqual(['2000-01-01T05:00:00.000Z', '2000-01-31T05:00:00.000Z']);
expect(filterInputElm.value).toBe('2000-01-01 to 2000-01-31');
expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '<=', searchTerms: ['2000-01-01', '2000-01-31'], shouldTriggerQuery: true });
});
Expand Down

0 comments on commit ca9adfa

Please sign in to comment.