@zeedhi/teknisa-components-common 1.107.2 → 1.108.0

package/tests/unit/components/tek-grid/grid-filter-button.spec.ts

@@ -1,967 +1,967 @@
-/* eslint-disable no-underscore-dangle */
-
-import {
-  Button, Date, Form, IButton, IForm, IModal, ISelectMultiple, Modal, ModalService, SelectMultiple,
-} from '@zeedhi/common';
-import {
-  Http, Metadata, DateHelper, Config,
-} from '@zeedhi/core';
-import {
-  IFilterPropsComponent,
-  ITekGridFilterButton,
-  TekGrid, TekGridColumn, TekGridFilterButton, TekRestDatasource,
-} from '../../../../src';
-import { setClick, getChild } from '../../../__helpers__';
-
-jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
-
-jest.useFakeTimers();
-
-const clickOnFilterButton = (grid: TekGrid, event?: any) => {
-  const buttonProps = getChild<ITekGridFilterButton>(grid.toolbarSlot, `${grid.name}_filterButton`);
-  const filterButton = new TekGridFilterButton(buttonProps);
-  setClick(filterButton, event);
-
-  return filterButton;
-};
-
-describe('TekGridFilterButton', () => {
-  beforeEach(() => {
-    // clear all metadata instances before testing
-    const { instances } = Metadata as any;
-    Object.keys(instances).forEach((key) => {
-      Metadata.clearInstance(key, instances[key].componentId);
-    });
-
-    jest.clearAllTimers();
-  });
-
-  describe('loadGrid()', () => {
-    it('should load grid by the gridName', () => {
-      const instance = new TekGrid({
-        name: 'grid-1',
-        component: 'TekGrid',
-      });
-      instance.onCreated();
-
-      const filterButton = new TekGridFilterButton({
-        name: 'columns-button-1',
-        component: 'TekGridColumnsButton',
-        gridName: 'grid-1',
-      });
-
-      expect(filterButton.grid).toEqual(instance);
-    });
-
-    it('should load grid by the gridName', () => {
-      const instance = new TekGrid({
-        name: 'grid-1',
-        component: 'TekGrid',
-      });
-      instance.onCreated();
-
-      const filterButton = new TekGridFilterButton({
-        name: 'columns-button-1',
-        component: 'TekGridColumnsButton',
-        grid: instance,
-      });
-
-      expect(filterButton.grid).toEqual(instance);
-    });
-
-    it('should load grid by the gridName', () => {
-      const instance = new TekGrid({
-        name: 'grid-1',
-        component: 'TekGrid',
-      });
-      instance.onCreated();
-      const filterButton = new TekGridFilterButton({
-        name: 'columns-button-1',
-        component: 'TekGridColumnsButton',
-      });
-
-      filterButton.loadGrid('grid-1');
-
-      expect(filterButton.grid).toEqual(instance);
-    });
-  });
-
-  describe('filterClick()', () => {
-    it('should call createFilterFromColumns', () => {
-      const instance = new TekGrid({
-        name: 'grid_filterClick1',
-        component: 'TekGrid',
-      });
-
-      const formInstance = new Form({
-        name: 'form',
-        component: 'ZdForm',
-      });
-
-      const spy = jest.spyOn(ModalService, 'create');
-      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => formInstance);
-      instance.onCreated();
-
-      const button = clickOnFilterButton(instance);
-      button.onCreated();
-
-      expect(spy).toBeCalledTimes(1);
-      button.click();
-      expect(spy).toBeCalledTimes(1);
-      expect(button.isVisible).toBeFalsy();
-      (instance as any).gridBase.hideFilterModal();
-
-      button.onBeforeDestroy();
-
-      spy.mockReset();
-      spyMetadata.mockReset();
-    });
-
-    it('should call events', () => {
-      let filterClickCalled = false;
-      const instance = new TekGrid({
-        name: 'grid_filterClick2',
-        component: 'TekGrid',
-        events: {
-          filterClick: () => { filterClickCalled = true; },
-        },
-      });
-
-      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal) => new Modal(modal));
-
-      instance.onCreated();
-      clickOnFilterButton(instance);
-
-      expect(filterClickCalled).toBeTruthy();
-
-      spy.mockReset();
-    });
-
-    it('should not call saveEditedRows if filterClick call preventDefault', () => {
-      let filterClickCalled = false;
-      const instance = new TekGrid({
-        name: 'grid_filterClick3',
-        component: 'TekGrid',
-        events: {
-          filterClick: () => { filterClickCalled = true; },
-        },
-      });
-
-      const spy = jest.spyOn(ModalService, 'create');
-
-      instance.onCreated();
-      clickOnFilterButton(instance, { defaultPrevented: true });
-
-      expect(filterClickCalled).toBeTruthy();
-      expect(spy).not.toBeCalled();
-
-      spy.mockReset();
-    });
-
-    it('should create modal with no form elements', () => {
-      const instance = new TekGrid({
-        name: 'grid_filterClick4',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name', filterable: false, filterProps: { name: 'name_edit', label: 'name' } },
-        ],
-      });
-
-      let formElements: any = [];
-      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
-        formElements = form.children;
-
-        return new Modal(modal);
-      });
-      instance.onCreated();
-      clickOnFilterButton(instance);
-
-      expect(formElements).toEqual([]);
-      spy.mockReset();
-    });
-
-    it('should create modal with filterable form elements', () => {
-      const instance = new TekGrid({
-        name: 'grid_filterClick5',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name', filterable: true, filterProps: [{ name: 'name_edit', label: 'name' }] },
-        ],
-      });
-
-      let formElements: any = [];
-      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
-        formElements = form.children;
-
-        return new Modal(modal);
-      });
-      instance.onCreated();
-      clickOnFilterButton(instance);
-
-      expect(formElements[0].name).toBe('grid_filterClick5-filter-AND-CONTAINS-name-0');
-
-      spy.mockReset();
-    });
-
-    it('when creating a SelectMultiple filter, default should not add showCheckboxAll prop', () => {
-      const instance = new TekGrid({
-        name: 'grid_filterClick5',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-            filterable: true,
-            filterProps: [{
-              name: 'id_edit', label: 'id', component: 'ZdSelectMultiple', showCheckboxAll: false,
-            }],
-          },
-          {
-            name: 'name',
-            filterable: true,
-            filterProps: [{ name: 'name_edit', label: 'name', component: 'ZdSelectMultiple' }],
-          },
-        ],
-      });
-
-      let formElements: any = [];
-      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
-        formElements = form.children;
-
-        return new Modal(modal);
-      });
-      instance.onCreated();
-      clickOnFilterButton(instance);
-
-      expect(formElements[0].showCheckboxAll).toBeFalsy();
-      expect(formElements[1].showCheckboxAll).toBeFalsy();
-
-      spy.mockReset();
-    });
-
-    it('when using the prop showCheckboxAllFilter, should add showCheckboxAll prop to SelectMultiple filters', () => {
-      const instance = new TekGrid({
-        name: 'grid_filterClick5',
-        component: 'TekGrid',
-        showCheckboxAllFilter: true,
-        columns: [
-          {
-            name: 'id',
-            filterable: true,
-            filterProps: [{
-              name: 'id_edit', label: 'id', component: 'ZdSelectMultiple', showCheckboxAll: false,
-            }],
-          },
-          {
-            name: 'name',
-            filterable: true,
-            filterProps: [{ name: 'name_edit', label: 'name', component: 'ZdSelectMultiple' }],
-          },
-        ],
-      });
-
-      let formElements: any = [];
-      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
-        formElements = form.children;
-
-        return new Modal(modal);
-      });
-      instance.onCreated();
-      clickOnFilterButton(instance);
-
-      expect(formElements[0].showCheckboxAll).toBeFalsy();
-      expect(formElements[1].showCheckboxAll).toBeTruthy();
-
-      spy.mockReset();
-    });
-
-    it('when creating a SelectMultiple filter, should change the filter value depending on checkboxAll', () => {
-      const instance = new TekGrid({
-        name: 'grid_filterClick5',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-            filterable: true,
-            filterProps: [{
-              name: 'id_edit', label: 'id', component: 'ZdSelectMultiple', showCheckboxAll: false,
-            }],
-          },
-        ],
-      });
-
-      let form: IForm = { name: 'form', component: 'ZdForm' };
-      let select: ISelectMultiple = { name: 'select', component: 'ZdSelectMultiple' };
-      let applyButton: IButton = { name: 'apply', component: 'ZdButton' };
-      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        const modalFooter = getChild(modal.children || [], `${instance.name}-filter-footer`);
-        form = getChild(modal.children || [], `${instance.name}-filter-form`);
-        select = getChild(form.children || [], `${instance.name}-filter-AND-CONTAINS-id-0`);
-        applyButton = getChild(modalFooter.rightSlot, `${instance.name}-filter-okButton`);
-
-        return new Modal(modal);
-      });
-      instance.onCreated();
-      clickOnFilterButton(instance);
-      const applyButtonObject = new Button(applyButton);
-
-      const formObject = new Form(form);
-      const selectObject = new SelectMultiple(select);
-      jest.spyOn(Metadata, 'getInstance').mockReturnValue(formObject);
-      jest.spyOn(formObject, 'getChildInstance').mockReturnValue(selectObject);
-
-      formObject.value['grid_filterClick5-filter-AND-CONTAINS-id-0'] = ['example'];
-      setClick(applyButtonObject);
-
-      expect(instance.datasource.filter).toEqual({});
-
-      selectObject.checkboxAll = true;
-      setClick(applyButtonObject);
-
-      expect(instance.datasource.filter).toEqual({});
-
-      (Config as any).set({ selectAllCompatibilityMode: true });
-      setClick(applyButtonObject);
-      expect(instance.datasource.filter).toEqual({});
-
-      spy.mockReset();
-    });
-
-    it('should create modal with filterable and ordered form elements', () => {
-      const instance = new TekGrid({
-        name: 'grid-filter-order',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          {
-            name: 'first_name',
-            filterable: true,
-            filterProps: [{ name: 'first_name_edit', label: 'first_name' }],
-          },
-          {
-            name: 'last_name',
-            filterable: true,
-            filterIndex: 1,
-            filterProps: [{ name: 'last_name_edit', label: 'last_name' }],
-          },
-          {
-            name: 'dob',
-            filterable: true,
-            filterIndex: 0,
-            filterProps: [{ name: 'dob_edit', label: 'dob' }],
-          },
-        ],
-      });
-
-      let formElements: any = [];
-      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
-        formElements = form.children;
-
-        return new Modal(modal);
-      });
-      instance.onCreated();
-
-      clickOnFilterButton(instance);
-
-      expect(formElements[0].name).toBe('grid-filter-order-filter-AND-CONTAINS-dob-0');
-      expect(formElements[1].name).toBe('grid-filter-order-filter-AND-CONTAINS-last_name-0');
-      expect(formElements[2].name).toBe('grid-filter-order-filter-AND-CONTAINS-first_name-0');
-
-      spy.mockReset();
-    });
-
-    it('should create modal with filterable form elements and TekRestDatasource', () => {
-      const instance = new TekGrid({
-        name: 'grid_filterClick6',
-        component: 'TekGrid',
-        datasource: {
-          type: 'tek-rest',
-          lazyLoad: true,
-        },
-        columns: [
-          {
-            name: 'id',
-            filterProps: [{ name: 'id_edit' }],
-          },
-          {
-            name: 'name',
-            componentProps: { name: 'name_edit', component: 'ZdSelect' },
-            filterProps: [{
-              name: 'name_edit', label: 'name', operation: 'NOT_EQUALS', relation: 'OR',
-            }],
-          },
-        ],
-      });
-
-      let formElements: any = [];
-      let form: IForm;
-      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
-        formElements = form.children;
-
-        return new Modal(modal);
-      });
-      instance.onCreated();
-
-      clickOnFilterButton(instance);
-
-      expect(formElements[0].name).toBe('grid_filterClick6-filter-AND-CONTAINS-id-0');
-      expect(formElements[1].name).toBe('grid_filterClick6-filter-OR-NOT_EQUALS-name-0');
-      expect(formElements[1].component).toBe('ZdSelect');
-
-      spy.mockReset();
-    });
-
-    it('should create modal with helper component', () => {
-      const instance = new TekGrid({
-        name: 'grid_filterClick7',
-        component: 'TekGrid',
-        datasource: {
-          type: 'tek-rest',
-          lazyLoad: true,
-        },
-        columns: [
-          {
-            name: 'id',
-            filterProps: [{ name: 'id_edit' }],
-          },
-          {
-            name: 'date',
-            componentProps: { name: 'date_edit', component: 'ZdDate' },
-            filterProps: [
-              {
-                name: 'date_edit1',
-                label: 'date1',
-                operation: 'NOT_EQUALS',
-                relation: 'OR',
-                helperOptions: [
-                  'TODAY',
-                  'TOMORROW',
-                ],
-              },
-              {
-                name: 'date_edit2',
-                label: 'date2',
-                showLabel: false,
-                operation: 'NOT_EQUALS',
-                relation: 'OR',
-                helperOptions: [
-                  'TODAY',
-                  'TOMORROW',
-                ],
-              },
-            ],
-          },
-        ],
-      });
-
-      let formElements: any = [];
-      let form: IForm;
-      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
-        formElements = form.children;
-
-        return new Modal(modal);
-      });
-      const dateHelperSpy = jest.spyOn(DateHelper, 'getLabel').mockImplementation((name: string) => name);
-
-      instance.onCreated();
-      clickOnFilterButton(instance);
-
-      expect(formElements[0].name).toBe('grid_filterClick7-filter-AND-CONTAINS-id-0');
-      expect(formElements[1].name).toBe('grid_filterClick7-filter-OR-NOT_EQUALS-date-0');
-      expect(formElements[2].name).toBe('grid_filterClick7-filter-OR-NOT_EQUALS-date-1');
-
-      spy.mockReset();
-      dateHelperSpy.mockReset();
-    });
-
-    it('should apply helper value', () => {
-      const instance = new TekGrid({
-        name: 'grid_filterClick8',
-        component: 'TekGrid',
-        datasource: {
-          type: 'tek-rest',
-          lazyLoad: true,
-        },
-        columns: [
-          {
-            name: 'date1',
-            componentProps: { name: 'date_edit1', component: 'ZdDate' },
-            filterProps: {
-              name: 'date_edit1',
-              label: 'date1',
-              operation: 'NOT_EQUALS',
-              relation: 'OR',
-              helperOptions: [
-                'TODAY',
-                'TOMORROW',
-              ],
-            },
-          },
-          {
-            name: 'date2',
-            componentProps: { name: 'date_edit2', component: 'ZdDate' },
-            filterProps: [
-              {
-                name: 'date_edit21',
-                label: 'date21',
-                operation: 'NOT_EQUALS',
-                relation: 'OR',
-                helperOptions: [
-                  'TODAY',
-                  'TOMORROW',
-                ],
-              },
-              {
-                name: 'date_edit22',
-                label: 'date22',
-                helperOptions: [
-                  'TODAY',
-                  'TOMORROW',
-                ],
-              },
-            ],
-          },
-        ],
-      });
-
-      let formElements: any = [];
-      let form: IForm;
-      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
-        formElements = form.children;
-
-        return new Modal(modal);
-      });
-      instance.onCreated();
-      clickOnFilterButton(instance);
-
-      const dateComp = new Date(formElements[0]);
-      dateComp.helperValue = 'TODAY';
-      dateComp.change({} as Event, {} as HTMLElement);
-      expect((instance.columns[0].filterProps as IFilterPropsComponent).helperValue).toBe('TODAY');
-
-      const dateComp21 = new Date(formElements[1]);
-      dateComp21.helperValue = 'TODAY';
-      dateComp21.change({} as Event, {} as HTMLElement);
-      expect((instance.columns[1].filterProps as IFilterPropsComponent[])[0].helperValue).toBe('TODAY');
-
-      const dateComp22 = new Date(formElements[2]);
-      dateComp22.helperValue = 'TODAY';
-      dateComp22.change({} as Event, {} as HTMLElement);
-      expect((instance.columns[1].filterProps as IFilterPropsComponent[])[1].helperValue).toBe('TODAY');
-
-      spy.mockReset();
-    });
-
-    it('should load form values from tekdatasource', () => {
-      const instance = new TekGrid({
-        name: 'grid_filterClick9',
-        component: 'TekGrid',
-        datasource: {
-          type: 'tek-rest',
-          lazyLoad: true,
-          dynamicFilter: {
-            name: [
-              {
-                operation: 'NOT_EQUALS',
-                relation: 'OR',
-                value: 'teste',
-              },
-            ],
-            phone: [
-              {
-                value: '9',
-              },
-            ],
-            date: [
-              {
-                operation: 'IN',
-                relation: 'OR',
-                value: ['2021-11-12', '2021-12-12'],
-              },
-            ],
-          },
-        },
-        columns: [
-          {
-            name: 'id',
-            filterProps: [{ name: 'id_edit' }],
-          },
-          {
-            name: 'name',
-            componentProps: { name: 'name_edit', component: 'ZdSelect' },
-            filterProps: {
-              name: 'name_edit', label: 'name', operation: 'NOT_EQUALS', relation: 'OR',
-            },
-          },
-          {
-            name: 'phone',
-            filterProps: [{ name: 'phone_edit' }],
-          },
-          {
-            name: 'date',
-            filterProps: { name: 'date_edit', helperValue: 'TODAY' },
-          },
-        ],
-      });
-
-      let form: IForm = { name: 'form', component: 'ZdForm' };
-      const dateHelperSpy = jest.spyOn(DateHelper, 'getLabel').mockImplementation((name: string) => name);
-      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
-
-        return new Modal(modal);
-      });
-      instance.onCreated();
-
-      clickOnFilterButton(instance);
-
-      expect(form.name).toBe('grid_filterClick9-filter-form');
-      const formObject = new Form(form);
-      formObject.value = {
-        'grid_filterClick9-filter-AND_CONTAINS-id-0': null,
-        'grid_filterClick9-filter-OR-NOT_EQUALS-name-0': null,
-        'grid_filterClick9-filter-AND-CONTAINS-phone-0': null,
-        'grid_filterClick9-filter-OR-IN-date-0': null,
-      };
-      const dateObject = new Date({ name: 'date', component: 'ZdDate' });
-      const spyMetadata = jest.spyOn(Metadata, 'getInstances').mockImplementation(() => [dateObject]);
-      formObject.onMounted({} as HTMLElement);
-      expect(formObject.value).toEqual({
-        'grid_filterClick9-filter-AND_CONTAINS-id-0': null,
-        'grid_filterClick9-filter-OR-NOT_EQUALS-name-0': 'teste',
-        'grid_filterClick9-filter-AND-CONTAINS-phone-0': '9',
-        'grid_filterClick9-filter-OR-IN-date-0': ['2021-11-12', '2021-12-12'],
-      });
-      expect(dateObject.hint).toBe('TODAY');
-      spyMetadata.mockReset();
-      dateHelperSpy.mockReset();
-      spy.mockReset();
-    });
-
-    it('should load form values from datasource', () => {
-      const instance = new TekGrid({
-        name: 'grid_filterClick10',
-        component: 'TekGrid',
-        datasource: {
-          filter: {
-            id: '',
-            name: 'teste',
-            phone: '9',
-          },
-        },
-        columns: [
-          {
-            name: 'id',
-          },
-          {
-            name: 'name',
-          },
-          {
-            name: 'phone',
-          },
-        ],
-      });
-
-      let formProps: IForm = {} as IForm;
-      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        formProps = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
-
-        return new Modal(modal);
-      });
-      instance.onCreated();
-      clickOnFilterButton(instance);
-
-      const formObject = new Form(formProps);
-      formObject.onMounted({} as HTMLElement);
-
-      expect(formObject.value).toEqual({
-        'grid_filterClick10-filter-AND-CONTAINS-name-0': 'teste',
-        'grid_filterClick10-filter-AND-CONTAINS-phone-0': '9',
-      });
-      spy.mockReset();
-    });
-
-    it('should apply filter from form to tekdatasource', () => {
-      const httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
-        data: {
-          data: [
-            { id: 1, name: 'employee 1', department: 1 },
-            { id: 2, name: 'employee 2', department: 1 },
-            { id: 3, name: 'employee 3', department: 1 },
-            { id: 4, name: 'employee 4', department: 2 },
-            { id: 5, name: 'employee 5', department: 2 },
-          ],
-          pagination: {
-            page: 1,
-            total: 5,
-            limit: 15,
-          },
-        },
-      }));
-      const instance = new TekGrid({
-        name: 'grid_filterClick11',
-        component: 'TekGrid',
-        datasource: {
-          type: 'tek-rest',
-        },
-        columns: [
-          {
-            name: 'id',
-            filterProps: [{ name: 'id_edit', operation: 'IN', relation: 'AND' }],
-          },
-          {
-            name: 'name',
-            componentProps: { name: 'name_edit', component: 'ZdSelect' },
-            filterProps: [{
-              name: 'name_edit', label: 'name', operation: 'NOT_EQUALS', relation: 'OR',
-            }],
-          },
-          {
-            name: 'phone',
-            filterProps: [{ name: 'phone_edit' }],
-          },
-          {
-            name: 'salary',
-            filterProps: [
-              { name: 'salary_min', operation: 'GREATER_THAN_EQUALS', relation: 'AND' },
-              { name: 'salary_max', operation: 'LESS_THAN_EQUALS', relation: 'AND' },
-            ],
-          },
-        ],
-      });
-
-      let form: IForm = { name: 'form', component: 'ZdForm' };
-      let applyButton: IButton = { name: 'apply', component: 'ZdButton' };
-      const spyModalService = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        form = getChild(modal.children || [], `${instance.name}-filter-form`);
-
-        const modalFooter = getChild(modal.children || [], `${instance.name}-filter-footer`);
-        applyButton = getChild(modalFooter.rightSlot, `${instance.name}-filter-okButton`);
-
-        return new Modal(modal);
-      });
-
-      instance.onCreated();
-
-      const buttonProps = getChild<ITekGridFilterButton>(instance.toolbarSlot, `${instance.name}_filterButton`);
-      const button = new TekGridFilterButton(buttonProps);
-      setClick(button);
-
-      const formObject = new Form(form);
-      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => formObject);
-      const spyDatasourceGet = jest.spyOn(instance.datasource, 'get');
-      formObject.value = {
-        'grid_filterClick11-filter-AND-IN-id-0': ['1', '2', '3'],
-        'grid_filterClick11-filter-OR-NOT_EQUALS-name-0': 'teste',
-        'grid_filterClick11-filter-AND-CONTAINS-phone-0': '',
-        'grid_filterClick11-filter-AND-GREATER_THAN_EQUALS-salary-0': '1000',
-        'grid_filterClick11-filter-AND-LESS_THAN_EQUALS-salary-0': '2000',
-      };
-      const applyButtonObject = new Button(applyButton);
-      formObject.validate = () => false;
-      setClick(applyButtonObject);
-      expect((instance.datasource as TekRestDatasource).dynamicFilter).toEqual({});
-
-      formObject.validate = () => true;
-      setClick(applyButtonObject);
-      expect((instance.datasource as TekRestDatasource).dynamicFilter).toEqual({
-        id: [
-          {
-            operation: 'IN',
-            relation: 'AND',
-            value: ['1', '2', '3'],
-          },
-        ],
-        name: [
-          {
-            operation: 'NOT_EQUALS',
-            relation: 'OR',
-            value: 'teste',
-          },
-        ],
-        salary: [
-          {
-            operation: 'GREATER_THAN_EQUALS',
-            relation: 'AND',
-            value: '1000',
-          },
-          {
-            operation: 'LESS_THAN_EQUALS',
-            relation: 'AND',
-            value: '2000',
-          },
-        ],
-      });
-      expect(instance.columnHasFilterData({ name: 'name' } as TekGridColumn)).toBeTruthy();
-      expect(spyDatasourceGet).toBeCalled();
-      spyMetadata.mockReset();
-      spyDatasourceGet.mockReset();
-      spyModalService.mockReset();
-      httpSpy.mockReset();
-    });
-
-    it('should clear data from form', () => {
-      const httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
-        data: {
-          data: [
-            { id: 1, name: 'employee 1', department: 1 },
-            { id: 2, name: 'employee 2', department: 1 },
-            { id: 3, name: 'employee 3', department: 1 },
-            { id: 4, name: 'employee 4', department: 2 },
-            { id: 5, name: 'employee 5', department: 2 },
-          ],
-          pagination: {
-            page: 1,
-            total: 5,
-            limit: 15,
-          },
-        },
-      }));
-      const instance = new TekGrid({
-        name: 'grid_filterClick12',
-        component: 'TekGrid',
-        datasource: {
-          type: 'tek-rest',
-        },
-        columns: [
-          {
-            name: 'id',
-            filterProps: [{ name: 'id_edit', operation: 'IN', relation: 'AND' }],
-          },
-          {
-            name: 'name',
-            componentProps: { name: 'name_edit', component: 'ZdSelect' },
-            filterProps: [{
-              name: 'name_edit', label: 'name', operation: 'NOT_EQUALS', relation: 'OR',
-            }],
-          },
-          {
-            name: 'phone',
-            filterProps: [{ name: 'phone_edit' }],
-          },
-          {
-            name: 'salary',
-            filterProps: [
-              { name: 'salary_min', operation: 'GREATER_THAN_EQUALS', relation: 'AND' },
-              { name: 'salary_max', operation: 'LESS_THAN_EQUALS', relation: 'AND' },
-            ],
-          },
-        ],
-      });
-
-      let form: IForm = { name: 'form', component: 'ZdForm' };
-      let clearButton: IButton = { name: 'clear', component: 'ZdButton' };
-      const spyModalService = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        form = getChild(modal.children || [], `${instance.name}-filter-form`);
-
-        const modalFooter = getChild(modal.children || [], `${instance.name}-filter-footer`);
-        clearButton = getChild(modalFooter.leftSlot, `${instance.name}-filter-clearButton`);
-
-        return new Modal(modal);
-      });
-
-      instance.onCreated();
-
-      const buttonProps = getChild<ITekGridFilterButton>(instance.toolbarSlot, `${instance.name}_filterButton`);
-      const button = new TekGridFilterButton(buttonProps);
-      setClick(button);
-
-      const formObject = new Form(form);
-      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => formObject);
-      const spyDatasourceGet = jest.spyOn(instance.datasource, 'get');
-      formObject.value = {
-        'grid_filterClick12-filter-AND-IN-id-0': ['1', '2', '3'],
-        'grid_filterClick12-filter-OR-NOT_EQUALS-name-0': 'teste',
-        'grid_filterClick12-filter-AND-CONTAINS-phone-0': '',
-        'grid_filterClick12-filter-AND-GREATER_THAN_EQUALS-salary-0': '1000',
-        'grid_filterClick12-filter-AND-LESS_THAN_EQUALS-salary-0': '2000',
-      };
-      const clearButtonObject = new Button(clearButton);
-      setClick(clearButtonObject);
-      expect(formObject.value).toEqual({
-        'grid_filterClick12-filter-AND-IN-id-0': null,
-        'grid_filterClick12-filter-OR-NOT_EQUALS-name-0': null,
-        'grid_filterClick12-filter-AND-CONTAINS-phone-0': null,
-        'grid_filterClick12-filter-AND-GREATER_THAN_EQUALS-salary-0': null,
-        'grid_filterClick12-filter-AND-LESS_THAN_EQUALS-salary-0': null,
-      });
-      spyMetadata.mockReset();
-      spyDatasourceGet.mockReset();
-      spyModalService.mockReset();
-      httpSpy.mockReset();
-    });
-
-    it('should apply filter from form to datasource', () => {
-      let beforeApplyFilterCalled = false;
-      let changeLayoutCalled = false;
-      const instance = new TekGrid({
-        name: 'grid_filterClick13',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-          },
-          {
-            name: 'name',
-          },
-          {
-            name: 'phone',
-          },
-          {
-            name: 'salary',
-          },
-        ],
-        events: {
-          beforeApplyFilter: () => { beforeApplyFilterCalled = true; },
-          changeLayout: () => { changeLayoutCalled = true; },
-        },
-      });
-
-      let form: IForm = { name: 'form', component: 'ZdForm' };
-      let applyButton: IButton = { name: 'apply', component: 'ZdButton' };
-      const spyModalService = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        form = getChild(modal.children || [], `${instance.name}-filter-form`);
-
-        const modalFooter = getChild(modal.children || [], `${instance.name}-filter-footer`);
-        applyButton = getChild(modalFooter.rightSlot, `${instance.name}-filter-okButton`);
-
-        return new Modal(modal);
-      });
-
-      instance.onCreated();
-
-      clickOnFilterButton(instance);
-
-      const formObject = new Form(form);
-      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => formObject);
-      const spyDatasourceGet = jest.spyOn(instance.datasource, 'get');
-      formObject.value = {
-        'grid_filterClick13-filter-AND-CONTAINS-id-0': '1;2;3',
-        'grid_filterClick13-filter-AND-CONTAINS-name-0': 'teste',
-        'grid_filterClick13-filter-AND-CONTAINS-phone-0': '',
-        'grid_filterClick13-filter-AND-CONTAINS-salary-0': '1000',
-      };
-      const applyButtonObject = new Button(applyButton);
-      setClick(applyButtonObject);
-      expect(instance.datasource.filter).toEqual({});
-      expect(beforeApplyFilterCalled).toBeTruthy();
-      expect(changeLayoutCalled).toBeTruthy();
-      expect(instance.columnHasFilterData({ name: 'name' } as TekGridColumn)).toBe(undefined);
-
-      setClick(applyButtonObject, { defaultPrevented: true });
-      expect(spyDatasourceGet).toBeCalledTimes(1);
-      spyMetadata.mockReset();
-      spyDatasourceGet.mockReset();
-      spyModalService.mockReset();
-    });
-  });
-});
+/* eslint-disable no-underscore-dangle */
+
+import {
+  Button, Date, Form, IButton, IForm, IModal, ISelectMultiple, Modal, ModalService, SelectMultiple,
+} from '@zeedhi/common';
+import {
+  Http, Metadata, DateHelper, Config,
+} from '@zeedhi/core';
+import {
+  IFilterPropsComponent,
+  ITekGridFilterButton,
+  TekGrid, TekGridColumn, TekGridFilterButton, TekRestDatasource,
+} from '../../../../src';
+import { setClick, getChild } from '../../../__helpers__';
+
+jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
+
+jest.useFakeTimers();
+
+const clickOnFilterButton = (grid: TekGrid, event?: any) => {
+  const buttonProps = getChild<ITekGridFilterButton>(grid.toolbarSlot, `${grid.name}_filterButton`);
+  const filterButton = new TekGridFilterButton(buttonProps);
+  setClick(filterButton, event);
+
+  return filterButton;
+};
+
+describe('TekGridFilterButton', () => {
+  beforeEach(() => {
+    // clear all metadata instances before testing
+    const { instances } = Metadata as any;
+    Object.keys(instances).forEach((key) => {
+      Metadata.clearInstance(key, instances[key].componentId);
+    });
+
+    jest.clearAllTimers();
+  });
+
+  describe('loadGrid()', () => {
+    it('should load grid by the gridName', () => {
+      const instance = new TekGrid({
+        name: 'grid-1',
+        component: 'TekGrid',
+      });
+      instance.onCreated();
+
+      const filterButton = new TekGridFilterButton({
+        name: 'columns-button-1',
+        component: 'TekGridColumnsButton',
+        gridName: 'grid-1',
+      });
+
+      expect(filterButton.grid).toEqual(instance);
+    });
+
+    it('should load grid by the gridName', () => {
+      const instance = new TekGrid({
+        name: 'grid-1',
+        component: 'TekGrid',
+      });
+      instance.onCreated();
+
+      const filterButton = new TekGridFilterButton({
+        name: 'columns-button-1',
+        component: 'TekGridColumnsButton',
+        grid: instance,
+      });
+
+      expect(filterButton.grid).toEqual(instance);
+    });
+
+    it('should load grid by the gridName', () => {
+      const instance = new TekGrid({
+        name: 'grid-1',
+        component: 'TekGrid',
+      });
+      instance.onCreated();
+      const filterButton = new TekGridFilterButton({
+        name: 'columns-button-1',
+        component: 'TekGridColumnsButton',
+      });
+
+      filterButton.loadGrid('grid-1');
+
+      expect(filterButton.grid).toEqual(instance);
+    });
+  });
+
+  describe('filterClick()', () => {
+    it('should call createFilterFromColumns', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick1',
+        component: 'TekGrid',
+      });
+
+      const formInstance = new Form({
+        name: 'form',
+        component: 'ZdForm',
+      });
+
+      const spy = jest.spyOn(ModalService, 'create');
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => formInstance);
+      instance.onCreated();
+
+      const button = clickOnFilterButton(instance);
+      button.onCreated();
+
+      expect(spy).toBeCalledTimes(1);
+      button.click();
+      expect(spy).toBeCalledTimes(1);
+      expect(button.isVisible).toBeFalsy();
+      (instance as any).gridBase.hideFilterModal();
+
+      button.onBeforeDestroy();
+
+      spy.mockReset();
+      spyMetadata.mockReset();
+    });
+
+    it('should call events', () => {
+      let filterClickCalled = false;
+      const instance = new TekGrid({
+        name: 'grid_filterClick2',
+        component: 'TekGrid',
+        events: {
+          filterClick: () => { filterClickCalled = true; },
+        },
+      });
+
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal) => new Modal(modal));
+
+      instance.onCreated();
+      clickOnFilterButton(instance);
+
+      expect(filterClickCalled).toBeTruthy();
+
+      spy.mockReset();
+    });
+
+    it('should not call saveEditedRows if filterClick call preventDefault', () => {
+      let filterClickCalled = false;
+      const instance = new TekGrid({
+        name: 'grid_filterClick3',
+        component: 'TekGrid',
+        events: {
+          filterClick: () => { filterClickCalled = true; },
+        },
+      });
+
+      const spy = jest.spyOn(ModalService, 'create');
+
+      instance.onCreated();
+      clickOnFilterButton(instance, { defaultPrevented: true });
+
+      expect(filterClickCalled).toBeTruthy();
+      expect(spy).not.toBeCalled();
+
+      spy.mockReset();
+    });
+
+    it('should create modal with no form elements', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick4',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name', filterable: false, filterProps: { name: 'name_edit', label: 'name' } },
+        ],
+      });
+
+      let formElements: any = [];
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+      clickOnFilterButton(instance);
+
+      expect(formElements).toEqual([]);
+      spy.mockReset();
+    });
+
+    it('should create modal with filterable form elements', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick5',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name', filterable: true, filterProps: [{ name: 'name_edit', label: 'name' }] },
+        ],
+      });
+
+      let formElements: any = [];
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+      clickOnFilterButton(instance);
+
+      expect(formElements[0].name).toBe('grid_filterClick5-filter-AND-CONTAINS-name-0');
+
+      spy.mockReset();
+    });
+
+    it('when creating a SelectMultiple filter, default should not add showCheckboxAll prop', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick5',
+        component: 'TekGrid',
+        columns: [
+          {
+            name: 'id',
+            filterable: true,
+            filterProps: [{
+              name: 'id_edit', label: 'id', component: 'ZdSelectMultiple', showCheckboxAll: false,
+            }],
+          },
+          {
+            name: 'name',
+            filterable: true,
+            filterProps: [{ name: 'name_edit', label: 'name', component: 'ZdSelectMultiple' }],
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+      clickOnFilterButton(instance);
+
+      expect(formElements[0].showCheckboxAll).toBeFalsy();
+      expect(formElements[1].showCheckboxAll).toBeFalsy();
+
+      spy.mockReset();
+    });
+
+    it('when using the prop showCheckboxAllFilter, should add showCheckboxAll prop to SelectMultiple filters', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick5',
+        component: 'TekGrid',
+        showCheckboxAllFilter: true,
+        columns: [
+          {
+            name: 'id',
+            filterable: true,
+            filterProps: [{
+              name: 'id_edit', label: 'id', component: 'ZdSelectMultiple', showCheckboxAll: false,
+            }],
+          },
+          {
+            name: 'name',
+            filterable: true,
+            filterProps: [{ name: 'name_edit', label: 'name', component: 'ZdSelectMultiple' }],
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+      clickOnFilterButton(instance);
+
+      expect(formElements[0].showCheckboxAll).toBeFalsy();
+      expect(formElements[1].showCheckboxAll).toBeTruthy();
+
+      spy.mockReset();
+    });
+
+    it('when creating a SelectMultiple filter, should change the filter value depending on checkboxAll', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick5',
+        component: 'TekGrid',
+        columns: [
+          {
+            name: 'id',
+            filterable: true,
+            filterProps: [{
+              name: 'id_edit', label: 'id', component: 'ZdSelectMultiple', showCheckboxAll: false,
+            }],
+          },
+        ],
+      });
+
+      let form: IForm = { name: 'form', component: 'ZdForm' };
+      let select: ISelectMultiple = { name: 'select', component: 'ZdSelectMultiple' };
+      let applyButton: IButton = { name: 'apply', component: 'ZdButton' };
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        const modalFooter = getChild(modal.children || [], `${instance.name}-filter-footer`);
+        form = getChild(modal.children || [], `${instance.name}-filter-form`);
+        select = getChild(form.children || [], `${instance.name}-filter-AND-CONTAINS-id-0`);
+        applyButton = getChild(modalFooter.rightSlot, `${instance.name}-filter-okButton`);
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+      clickOnFilterButton(instance);
+      const applyButtonObject = new Button(applyButton);
+
+      const formObject = new Form(form);
+      const selectObject = new SelectMultiple(select);
+      jest.spyOn(Metadata, 'getInstance').mockReturnValue(formObject);
+      jest.spyOn(formObject, 'getChildInstance').mockReturnValue(selectObject);
+
+      formObject.value['grid_filterClick5-filter-AND-CONTAINS-id-0'] = ['example'];
+      setClick(applyButtonObject);
+
+      expect(instance.datasource.filter).toEqual({});
+
+      selectObject.checkboxAll = true;
+      setClick(applyButtonObject);
+
+      expect(instance.datasource.filter).toEqual({});
+
+      (Config as any).set({ selectAllCompatibilityMode: true });
+      setClick(applyButtonObject);
+      expect(instance.datasource.filter).toEqual({});
+
+      spy.mockReset();
+    });
+
+    it('should create modal with filterable and ordered form elements', () => {
+      const instance = new TekGrid({
+        name: 'grid-filter-order',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          {
+            name: 'first_name',
+            filterable: true,
+            filterProps: [{ name: 'first_name_edit', label: 'first_name' }],
+          },
+          {
+            name: 'last_name',
+            filterable: true,
+            filterIndex: 1,
+            filterProps: [{ name: 'last_name_edit', label: 'last_name' }],
+          },
+          {
+            name: 'dob',
+            filterable: true,
+            filterIndex: 0,
+            filterProps: [{ name: 'dob_edit', label: 'dob' }],
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+
+      clickOnFilterButton(instance);
+
+      expect(formElements[0].name).toBe('grid-filter-order-filter-AND-CONTAINS-dob-0');
+      expect(formElements[1].name).toBe('grid-filter-order-filter-AND-CONTAINS-last_name-0');
+      expect(formElements[2].name).toBe('grid-filter-order-filter-AND-CONTAINS-first_name-0');
+
+      spy.mockReset();
+    });
+
+    it('should create modal with filterable form elements and TekRestDatasource', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick6',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+          lazyLoad: true,
+        },
+        columns: [
+          {
+            name: 'id',
+            filterProps: [{ name: 'id_edit' }],
+          },
+          {
+            name: 'name',
+            componentProps: { name: 'name_edit', component: 'ZdSelect' },
+            filterProps: [{
+              name: 'name_edit', label: 'name', operation: 'NOT_EQUALS', relation: 'OR',
+            }],
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      let form: IForm;
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+
+      clickOnFilterButton(instance);
+
+      expect(formElements[0].name).toBe('grid_filterClick6-filter-AND-CONTAINS-id-0');
+      expect(formElements[1].name).toBe('grid_filterClick6-filter-OR-NOT_EQUALS-name-0');
+      expect(formElements[1].component).toBe('ZdSelect');
+
+      spy.mockReset();
+    });
+
+    it('should create modal with helper component', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick7',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+          lazyLoad: true,
+        },
+        columns: [
+          {
+            name: 'id',
+            filterProps: [{ name: 'id_edit' }],
+          },
+          {
+            name: 'date',
+            componentProps: { name: 'date_edit', component: 'ZdDate' },
+            filterProps: [
+              {
+                name: 'date_edit1',
+                label: 'date1',
+                operation: 'NOT_EQUALS',
+                relation: 'OR',
+                helperOptions: [
+                  'TODAY',
+                  'TOMORROW',
+                ],
+              },
+              {
+                name: 'date_edit2',
+                label: 'date2',
+                showLabel: false,
+                operation: 'NOT_EQUALS',
+                relation: 'OR',
+                helperOptions: [
+                  'TODAY',
+                  'TOMORROW',
+                ],
+              },
+            ],
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      let form: IForm;
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
+
+        return new Modal(modal);
+      });
+      const dateHelperSpy = jest.spyOn(DateHelper, 'getLabel').mockImplementation((name: string) => name);
+
+      instance.onCreated();
+      clickOnFilterButton(instance);
+
+      expect(formElements[0].name).toBe('grid_filterClick7-filter-AND-CONTAINS-id-0');
+      expect(formElements[1].name).toBe('grid_filterClick7-filter-OR-NOT_EQUALS-date-0');
+      expect(formElements[2].name).toBe('grid_filterClick7-filter-OR-NOT_EQUALS-date-1');
+
+      spy.mockReset();
+      dateHelperSpy.mockReset();
+    });
+
+    it('should apply helper value', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick8',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+          lazyLoad: true,
+        },
+        columns: [
+          {
+            name: 'date1',
+            componentProps: { name: 'date_edit1', component: 'ZdDate' },
+            filterProps: {
+              name: 'date_edit1',
+              label: 'date1',
+              operation: 'NOT_EQUALS',
+              relation: 'OR',
+              helperOptions: [
+                'TODAY',
+                'TOMORROW',
+              ],
+            },
+          },
+          {
+            name: 'date2',
+            componentProps: { name: 'date_edit2', component: 'ZdDate' },
+            filterProps: [
+              {
+                name: 'date_edit21',
+                label: 'date21',
+                operation: 'NOT_EQUALS',
+                relation: 'OR',
+                helperOptions: [
+                  'TODAY',
+                  'TOMORROW',
+                ],
+              },
+              {
+                name: 'date_edit22',
+                label: 'date22',
+                helperOptions: [
+                  'TODAY',
+                  'TOMORROW',
+                ],
+              },
+            ],
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      let form: IForm;
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+      clickOnFilterButton(instance);
+
+      const dateComp = new Date(formElements[0]);
+      dateComp.helperValue = 'TODAY';
+      dateComp.change({} as Event, {} as HTMLElement);
+      expect((instance.columns[0].filterProps as IFilterPropsComponent).helperValue).toBe('TODAY');
+
+      const dateComp21 = new Date(formElements[1]);
+      dateComp21.helperValue = 'TODAY';
+      dateComp21.change({} as Event, {} as HTMLElement);
+      expect((instance.columns[1].filterProps as IFilterPropsComponent[])[0].helperValue).toBe('TODAY');
+
+      const dateComp22 = new Date(formElements[2]);
+      dateComp22.helperValue = 'TODAY';
+      dateComp22.change({} as Event, {} as HTMLElement);
+      expect((instance.columns[1].filterProps as IFilterPropsComponent[])[1].helperValue).toBe('TODAY');
+
+      spy.mockReset();
+    });
+
+    it('should load form values from tekdatasource', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick9',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+          lazyLoad: true,
+          dynamicFilter: {
+            name: [
+              {
+                operation: 'NOT_EQUALS',
+                relation: 'OR',
+                value: 'teste',
+              },
+            ],
+            phone: [
+              {
+                value: '9',
+              },
+            ],
+            date: [
+              {
+                operation: 'IN',
+                relation: 'OR',
+                value: ['2021-11-12', '2021-12-12'],
+              },
+            ],
+          },
+        },
+        columns: [
+          {
+            name: 'id',
+            filterProps: [{ name: 'id_edit' }],
+          },
+          {
+            name: 'name',
+            componentProps: { name: 'name_edit', component: 'ZdSelect' },
+            filterProps: {
+              name: 'name_edit', label: 'name', operation: 'NOT_EQUALS', relation: 'OR',
+            },
+          },
+          {
+            name: 'phone',
+            filterProps: [{ name: 'phone_edit' }],
+          },
+          {
+            name: 'date',
+            filterProps: { name: 'date_edit', helperValue: 'TODAY' },
+          },
+        ],
+      });
+
+      let form: IForm = { name: 'form', component: 'ZdForm' };
+      const dateHelperSpy = jest.spyOn(DateHelper, 'getLabel').mockImplementation((name: string) => name);
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+
+      clickOnFilterButton(instance);
+
+      expect(form.name).toBe('grid_filterClick9-filter-form');
+      const formObject = new Form(form);
+      formObject.value = {
+        'grid_filterClick9-filter-AND_CONTAINS-id-0': null,
+        'grid_filterClick9-filter-OR-NOT_EQUALS-name-0': null,
+        'grid_filterClick9-filter-AND-CONTAINS-phone-0': null,
+        'grid_filterClick9-filter-OR-IN-date-0': null,
+      };
+      const dateObject = new Date({ name: 'date', component: 'ZdDate' });
+      const spyMetadata = jest.spyOn(Metadata, 'getInstances').mockImplementation(() => [dateObject]);
+      formObject.onMounted({} as HTMLElement);
+      expect(formObject.value).toEqual({
+        'grid_filterClick9-filter-AND_CONTAINS-id-0': null,
+        'grid_filterClick9-filter-OR-NOT_EQUALS-name-0': 'teste',
+        'grid_filterClick9-filter-AND-CONTAINS-phone-0': '9',
+        'grid_filterClick9-filter-OR-IN-date-0': ['2021-11-12', '2021-12-12'],
+      });
+      expect(dateObject.hint).toBe('TODAY');
+      spyMetadata.mockReset();
+      dateHelperSpy.mockReset();
+      spy.mockReset();
+    });
+
+    it('should load form values from datasource', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick10',
+        component: 'TekGrid',
+        datasource: {
+          filter: {
+            id: '',
+            name: 'teste',
+            phone: '9',
+          },
+        },
+        columns: [
+          {
+            name: 'id',
+          },
+          {
+            name: 'name',
+          },
+          {
+            name: 'phone',
+          },
+        ],
+      });
+
+      let formProps: IForm = {} as IForm;
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        formProps = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+      clickOnFilterButton(instance);
+
+      const formObject = new Form(formProps);
+      formObject.onMounted({} as HTMLElement);
+
+      expect(formObject.value).toEqual({
+        'grid_filterClick10-filter-AND-CONTAINS-name-0': 'teste',
+        'grid_filterClick10-filter-AND-CONTAINS-phone-0': '9',
+      });
+      spy.mockReset();
+    });
+
+    it('should apply filter from form to tekdatasource', () => {
+      const httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
+        data: {
+          data: [
+            { id: 1, name: 'employee 1', department: 1 },
+            { id: 2, name: 'employee 2', department: 1 },
+            { id: 3, name: 'employee 3', department: 1 },
+            { id: 4, name: 'employee 4', department: 2 },
+            { id: 5, name: 'employee 5', department: 2 },
+          ],
+          pagination: {
+            page: 1,
+            total: 5,
+            limit: 15,
+          },
+        },
+      }));
+      const instance = new TekGrid({
+        name: 'grid_filterClick11',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+        },
+        columns: [
+          {
+            name: 'id',
+            filterProps: [{ name: 'id_edit', operation: 'IN', relation: 'AND' }],
+          },
+          {
+            name: 'name',
+            componentProps: { name: 'name_edit', component: 'ZdSelect' },
+            filterProps: [{
+              name: 'name_edit', label: 'name', operation: 'NOT_EQUALS', relation: 'OR',
+            }],
+          },
+          {
+            name: 'phone',
+            filterProps: [{ name: 'phone_edit' }],
+          },
+          {
+            name: 'salary',
+            filterProps: [
+              { name: 'salary_min', operation: 'GREATER_THAN_EQUALS', relation: 'AND' },
+              { name: 'salary_max', operation: 'LESS_THAN_EQUALS', relation: 'AND' },
+            ],
+          },
+        ],
+      });
+
+      let form: IForm = { name: 'form', component: 'ZdForm' };
+      let applyButton: IButton = { name: 'apply', component: 'ZdButton' };
+      const spyModalService = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        form = getChild(modal.children || [], `${instance.name}-filter-form`);
+
+        const modalFooter = getChild(modal.children || [], `${instance.name}-filter-footer`);
+        applyButton = getChild(modalFooter.rightSlot, `${instance.name}-filter-okButton`);
+
+        return new Modal(modal);
+      });
+
+      instance.onCreated();
+
+      const buttonProps = getChild<ITekGridFilterButton>(instance.toolbarSlot, `${instance.name}_filterButton`);
+      const button = new TekGridFilterButton(buttonProps);
+      setClick(button);
+
+      const formObject = new Form(form);
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => formObject);
+      const spyDatasourceGet = jest.spyOn(instance.datasource, 'get');
+      formObject.value = {
+        'grid_filterClick11-filter-AND-IN-id-0': ['1', '2', '3'],
+        'grid_filterClick11-filter-OR-NOT_EQUALS-name-0': 'teste',
+        'grid_filterClick11-filter-AND-CONTAINS-phone-0': '',
+        'grid_filterClick11-filter-AND-GREATER_THAN_EQUALS-salary-0': '1000',
+        'grid_filterClick11-filter-AND-LESS_THAN_EQUALS-salary-0': '2000',
+      };
+      const applyButtonObject = new Button(applyButton);
+      formObject.validate = () => false;
+      setClick(applyButtonObject);
+      expect((instance.datasource as TekRestDatasource).dynamicFilter).toEqual({});
+
+      formObject.validate = () => true;
+      setClick(applyButtonObject);
+      expect((instance.datasource as TekRestDatasource).dynamicFilter).toEqual({
+        id: [
+          {
+            operation: 'IN',
+            relation: 'AND',
+            value: ['1', '2', '3'],
+          },
+        ],
+        name: [
+          {
+            operation: 'NOT_EQUALS',
+            relation: 'OR',
+            value: 'teste',
+          },
+        ],
+        salary: [
+          {
+            operation: 'GREATER_THAN_EQUALS',
+            relation: 'AND',
+            value: '1000',
+          },
+          {
+            operation: 'LESS_THAN_EQUALS',
+            relation: 'AND',
+            value: '2000',
+          },
+        ],
+      });
+      expect(instance.columnHasFilterData({ name: 'name' } as TekGridColumn)).toBeTruthy();
+      expect(spyDatasourceGet).toBeCalled();
+      spyMetadata.mockReset();
+      spyDatasourceGet.mockReset();
+      spyModalService.mockReset();
+      httpSpy.mockReset();
+    });
+
+    it('should clear data from form', () => {
+      const httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
+        data: {
+          data: [
+            { id: 1, name: 'employee 1', department: 1 },
+            { id: 2, name: 'employee 2', department: 1 },
+            { id: 3, name: 'employee 3', department: 1 },
+            { id: 4, name: 'employee 4', department: 2 },
+            { id: 5, name: 'employee 5', department: 2 },
+          ],
+          pagination: {
+            page: 1,
+            total: 5,
+            limit: 15,
+          },
+        },
+      }));
+      const instance = new TekGrid({
+        name: 'grid_filterClick12',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+        },
+        columns: [
+          {
+            name: 'id',
+            filterProps: [{ name: 'id_edit', operation: 'IN', relation: 'AND' }],
+          },
+          {
+            name: 'name',
+            componentProps: { name: 'name_edit', component: 'ZdSelect' },
+            filterProps: [{
+              name: 'name_edit', label: 'name', operation: 'NOT_EQUALS', relation: 'OR',
+            }],
+          },
+          {
+            name: 'phone',
+            filterProps: [{ name: 'phone_edit' }],
+          },
+          {
+            name: 'salary',
+            filterProps: [
+              { name: 'salary_min', operation: 'GREATER_THAN_EQUALS', relation: 'AND' },
+              { name: 'salary_max', operation: 'LESS_THAN_EQUALS', relation: 'AND' },
+            ],
+          },
+        ],
+      });
+
+      let form: IForm = { name: 'form', component: 'ZdForm' };
+      let clearButton: IButton = { name: 'clear', component: 'ZdButton' };
+      const spyModalService = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        form = getChild(modal.children || [], `${instance.name}-filter-form`);
+
+        const modalFooter = getChild(modal.children || [], `${instance.name}-filter-footer`);
+        clearButton = getChild(modalFooter.leftSlot, `${instance.name}-filter-clearButton`);
+
+        return new Modal(modal);
+      });
+
+      instance.onCreated();
+
+      const buttonProps = getChild<ITekGridFilterButton>(instance.toolbarSlot, `${instance.name}_filterButton`);
+      const button = new TekGridFilterButton(buttonProps);
+      setClick(button);
+
+      const formObject = new Form(form);
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => formObject);
+      const spyDatasourceGet = jest.spyOn(instance.datasource, 'get');
+      formObject.value = {
+        'grid_filterClick12-filter-AND-IN-id-0': ['1', '2', '3'],
+        'grid_filterClick12-filter-OR-NOT_EQUALS-name-0': 'teste',
+        'grid_filterClick12-filter-AND-CONTAINS-phone-0': '',
+        'grid_filterClick12-filter-AND-GREATER_THAN_EQUALS-salary-0': '1000',
+        'grid_filterClick12-filter-AND-LESS_THAN_EQUALS-salary-0': '2000',
+      };
+      const clearButtonObject = new Button(clearButton);
+      setClick(clearButtonObject);
+      expect(formObject.value).toEqual({
+        'grid_filterClick12-filter-AND-IN-id-0': null,
+        'grid_filterClick12-filter-OR-NOT_EQUALS-name-0': null,
+        'grid_filterClick12-filter-AND-CONTAINS-phone-0': null,
+        'grid_filterClick12-filter-AND-GREATER_THAN_EQUALS-salary-0': null,
+        'grid_filterClick12-filter-AND-LESS_THAN_EQUALS-salary-0': null,
+      });
+      spyMetadata.mockReset();
+      spyDatasourceGet.mockReset();
+      spyModalService.mockReset();
+      httpSpy.mockReset();
+    });
+
+    it('should apply filter from form to datasource', () => {
+      let beforeApplyFilterCalled = false;
+      let changeLayoutCalled = false;
+      const instance = new TekGrid({
+        name: 'grid_filterClick13',
+        component: 'TekGrid',
+        columns: [
+          {
+            name: 'id',
+          },
+          {
+            name: 'name',
+          },
+          {
+            name: 'phone',
+          },
+          {
+            name: 'salary',
+          },
+        ],
+        events: {
+          beforeApplyFilter: () => { beforeApplyFilterCalled = true; },
+          changeLayout: () => { changeLayoutCalled = true; },
+        },
+      });
+
+      let form: IForm = { name: 'form', component: 'ZdForm' };
+      let applyButton: IButton = { name: 'apply', component: 'ZdButton' };
+      const spyModalService = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        form = getChild(modal.children || [], `${instance.name}-filter-form`);
+
+        const modalFooter = getChild(modal.children || [], `${instance.name}-filter-footer`);
+        applyButton = getChild(modalFooter.rightSlot, `${instance.name}-filter-okButton`);
+
+        return new Modal(modal);
+      });
+
+      instance.onCreated();
+
+      clickOnFilterButton(instance);
+
+      const formObject = new Form(form);
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => formObject);
+      const spyDatasourceGet = jest.spyOn(instance.datasource, 'get');
+      formObject.value = {
+        'grid_filterClick13-filter-AND-CONTAINS-id-0': '1;2;3',
+        'grid_filterClick13-filter-AND-CONTAINS-name-0': 'teste',
+        'grid_filterClick13-filter-AND-CONTAINS-phone-0': '',
+        'grid_filterClick13-filter-AND-CONTAINS-salary-0': '1000',
+      };
+      const applyButtonObject = new Button(applyButton);
+      setClick(applyButtonObject);
+      expect(instance.datasource.filter).toEqual({});
+      expect(beforeApplyFilterCalled).toBeTruthy();
+      expect(changeLayoutCalled).toBeTruthy();
+      expect(instance.columnHasFilterData({ name: 'name' } as TekGridColumn)).toBe(undefined);
+
+      setClick(applyButtonObject, { defaultPrevented: true });
+      expect(spyDatasourceGet).toBeCalledTimes(1);
+      spyMetadata.mockReset();
+      spyDatasourceGet.mockReset();
+      spyModalService.mockReset();
+    });
+  });
+});