@zeedhi/teknisa-components-common 1.48.0 → 1.53.0

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

@@ -1,16 +1,29 @@
 /* eslint-disable no-underscore-dangle */
 
 import {
-  Button, Date, Dropdown, Form, IButton, IForm, IModal, Modal, ModalService, Search, Text, TextInput,
+  Button, Date, Dropdown, Form, IButton, IForm, IModal, Modal, ModalService, Search, TextInput, Text,
 } from '@zeedhi/common';
 import {
-  KeyMap, Http, Metadata, IDictionary, DateHelper,
+  KeyMap, Http, Metadata, DateHelper, IDictionary,
 } from '@zeedhi/core';
 import {
   IFilterPropsComponent,
   ITekGrid,
   TekGrid, TekGridColumn, 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<IButton>(grid.toolbarSlot, `${grid.name}_filterButton`);
+  const button = new Button(buttonProps);
+  setClick(button, event);
+
+  return button;
+};
 
 describe('TekGrid', () => {
   beforeEach(() => {
@@ -19,6 +32,8 @@ describe('TekGrid', () => {
     Object.keys(instances).forEach((key) => {
       Metadata.clearInstance(key, instances[key].componentId);
     });
+
+    jest.clearAllTimers();
   });
 
   describe('constructor()', () => {
@@ -191,7 +206,7 @@ describe('TekGrid', () => {
     });
 
     afterEach(() => {
-      httpReportSpy.mockClear();
+      httpReportSpy.mockReset();
     });
 
     it('should call getReport on export button click', () => {
@@ -212,7 +227,7 @@ describe('TekGrid', () => {
       button.click(event, {} as HTMLElement);
 
       expect(spy).toBeCalledTimes(1);
-      spy.mockClear();
+      spy.mockReset();
 
       (window as any).open.mockClear();
     });
@@ -262,8 +277,8 @@ describe('TekGrid', () => {
       expect(spy).toHaveBeenCalledTimes(1);
 
       (window as any).open.mockClear();
-      spy.mockClear();
-      httpSpy.mockClear();
+      spy.mockReset();
+      httpSpy.mockReset();
     });
   });
 
@@ -281,7 +296,7 @@ describe('TekGrid', () => {
       button.click(event, {} as HTMLElement);
       expect(spy).toBeCalled();
       expect(button.isVisible).toBeFalsy();
-      spy.mockClear();
+      spy.mockReset();
     });
 
     it('should call events', () => {
@@ -323,7 +338,7 @@ describe('TekGrid', () => {
       expect(beforeSaveCalled).toBeTruthy();
       expect(afterSaveCalled).toBeFalsy();
       expect(spy).not.toBeCalled();
-      spy.mockClear();
+      spy.mockReset();
     });
   });
 
@@ -341,7 +356,7 @@ describe('TekGrid', () => {
       button.click(event, {} as HTMLElement);
       expect(spy).toBeCalled();
       expect(button.isVisible).toBeFalsy();
-      spy.mockClear();
+      spy.mockReset();
     });
 
     it('should call events', () => {
@@ -383,7 +398,7 @@ describe('TekGrid', () => {
       expect(beforeCancelCalled).toBeTruthy();
       expect(afterCancelCalled).toBeFalsy();
       expect(spy).not.toBeCalled();
-      spy.mockClear();
+      spy.mockReset();
     });
   });
 
@@ -440,7 +455,7 @@ describe('TekGrid', () => {
           expect(button.disabled).toBeTruthy();
         }
       }
-      spy.mockClear();
+      spy.mockReset();
     });
 
     it('should call events', () => {
@@ -496,7 +511,7 @@ describe('TekGrid', () => {
           expect(spy).not.toBeCalled();
         }
       }
-      spy.mockClear();
+      spy.mockReset();
     });
   });
 
@@ -509,6 +524,16 @@ describe('TekGrid', () => {
     };
 
     it('should navigate through grid lines using keys', async () => {
+      const httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
+        data: {
+          data: [],
+          pagination: {
+            page: 1,
+            total: 0,
+            limit: 10,
+          },
+        },
+      }));
       const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid({
         name: 'grid_navigation_1',
@@ -560,9 +585,21 @@ describe('TekGrid', () => {
 
       dispatchEvent(37, {}); // arrow left
       expect(instance.datasource.currentRow).toEqual(instance.datasource.data[0]);
+
+      httpSpy.mockReset();
     });
 
-    it('should navigate through grid lines using keys when grouped', async (done) => {
+    it('should navigate through grid lines using keys when grouped', async () => {
+      const httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
+        data: {
+          data: [],
+          pagination: {
+            page: 1,
+            total: 0,
+            limit: 10,
+          },
+        },
+      }));
       const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid({
         name: 'grid_navigation_2',
@@ -597,68 +634,66 @@ describe('TekGrid', () => {
 
       await flushPromises();
 
-      setTimeout(() => {
-        const elem = document.createElement('DIV');
-        (KeyMap as any).isElementActive = () => true;
-        instance.onCreated();
-        instance.onMounted(elem);
+      const elem = document.createElement('DIV');
+      (KeyMap as any).isElementActive = () => true;
+      instance.onCreated();
+      instance.onMounted(elem);
 
-        dispatchEvent(40, {}); // arrow down
-        expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
+      dispatchEvent(40, {}); // arrow down
+      expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
 
-        dispatchEvent(40, {}); // arrow down
-        expect(instance.datasource.currentRow).toEqual(instance.groupedData[4]);
+      dispatchEvent(40, {}); // arrow down
+      expect(instance.datasource.currentRow).toEqual(instance.groupedData[4]);
 
-        dispatchEvent(40, {}); // arrow down
-        expect(instance.datasource.currentRow).toEqual(instance.groupedData[4]);
+      dispatchEvent(40, {}); // arrow down
+      expect(instance.datasource.currentRow).toEqual(instance.groupedData[4]);
 
-        dispatchEvent(38, {}); // arrow up
-        expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
+      dispatchEvent(38, {}); // arrow up
+      expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
 
-        dispatchEvent(38, {}); // arrow up
-        expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
+      dispatchEvent(38, {}); // arrow up
+      expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
 
-        instance.datasource.currentRow = {};
-        dispatchEvent(38, {}); // arrow up
-        expect(instance.datasource.currentRow).toEqual(instance.groupedData[4]);
+      instance.datasource.currentRow = {};
+      dispatchEvent(38, {}); // arrow up
+      expect(instance.datasource.currentRow).toEqual(instance.groupedData[4]);
 
-        [instance.datasource.currentRow] = instance.groupedData;
-        expect(instance.datasource.currentRow.groupOpened).toBeFalsy();
-        dispatchEvent(39, {}); // arrow right
-        expect(instance.datasource.currentRow.groupOpened).toBeTruthy();
+      [instance.datasource.currentRow] = instance.groupedData;
+      expect(instance.datasource.currentRow.groupOpened).toBeFalsy();
+      dispatchEvent(39, {}); // arrow right
+      expect(instance.datasource.currentRow.groupOpened).toBeTruthy();
 
-        dispatchEvent(40, {}); // arrow down
-        expect(instance.datasource.currentRow).toEqual(instance.groupedData[1]);
+      dispatchEvent(40, {}); // arrow down
+      expect(instance.datasource.currentRow).toEqual(instance.groupedData[1]);
 
-        dispatchEvent(40, {}); // arrow down
-        expect(instance.datasource.currentRow).toEqual(instance.groupedData[2]);
+      dispatchEvent(40, {}); // arrow down
+      expect(instance.datasource.currentRow).toEqual(instance.groupedData[2]);
 
-        dispatchEvent(38, {}); // arrow up
-        expect(instance.datasource.currentRow).toEqual(instance.groupedData[1]);
+      dispatchEvent(38, {}); // arrow up
+      expect(instance.datasource.currentRow).toEqual(instance.groupedData[1]);
 
-        dispatchEvent(37, {}); // arrow left
-        expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
+      dispatchEvent(37, {}); // arrow left
+      expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
 
-        expect(instance.datasource.currentRow.groupOpened).toBeTruthy();
-        dispatchEvent(37, {}); // arrow left
-        expect(instance.datasource.currentRow.groupOpened).toBeFalsy();
+      expect(instance.datasource.currentRow.groupOpened).toBeTruthy();
+      dispatchEvent(37, {}); // arrow left
+      expect(instance.datasource.currentRow.groupOpened).toBeFalsy();
 
-        [, , , , instance.datasource.currentRow] = instance.groupedData;
-        expect(instance.datasource.currentRow.groupOpened).toBeFalsy();
-        dispatchEvent(39, {}); // arrow right
-        expect(instance.datasource.currentRow.groupOpened).toBeTruthy();
+      [, , , , instance.datasource.currentRow] = instance.groupedData;
+      expect(instance.datasource.currentRow.groupOpened).toBeFalsy();
+      dispatchEvent(39, {}); // arrow right
+      expect(instance.datasource.currentRow.groupOpened).toBeTruthy();
 
-        dispatchEvent(40, {}); // arrow down
-        expect(instance.datasource.currentRow).toEqual(instance.groupedData[5]);
+      dispatchEvent(40, {}); // arrow down
+      expect(instance.datasource.currentRow).toEqual(instance.groupedData[5]);
 
-        dispatchEvent(40, {}); // arrow down
-        expect(instance.datasource.currentRow).toEqual(instance.groupedData[6]);
+      dispatchEvent(40, {}); // arrow down
+      expect(instance.datasource.currentRow).toEqual(instance.groupedData[6]);
 
-        dispatchEvent(40, {}); // arrow down
-        expect(instance.datasource.currentRow).toEqual(instance.groupedData[6]);
+      dispatchEvent(40, {}); // arrow down
+      expect(instance.datasource.currentRow).toEqual(instance.groupedData[6]);
 
-        done();
-      }, 1000);
+      httpSpy.mockReset();
     });
 
     it('should open filter modal input with keymap', async () => {
@@ -693,7 +728,7 @@ describe('TekGrid', () => {
 
       expect(method).toHaveBeenCalled();
       (KeyMap as any).isElementActive = () => false;
-      spyMetadata.mockClear();
+      spyMetadata.mockReset();
     });
 
     it('should open action dropdown with keymap', async () => {
@@ -731,8 +766,8 @@ describe('TekGrid', () => {
       await flushPromises();
 
       (KeyMap as any).isElementActive = () => false;
-      spyMetadata.mockClear();
-      instanceDropDownSpy.mockClear();
+      spyMetadata.mockReset();
+      instanceDropDownSpy.mockReset();
     });
 
     it('should focus in searchInput with keymap', async () => {
@@ -765,8 +800,8 @@ describe('TekGrid', () => {
       await flushPromises();
 
       (KeyMap as any).isElementActive = () => false;
-      spySetFocus.mockClear();
-      spyMetadata.mockClear();
+      spySetFocus.mockReset();
+      spyMetadata.mockReset();
     });
   });
 
@@ -790,12 +825,12 @@ describe('TekGrid', () => {
           expect(spy).toBeCalled();
         }
       }
-      spy.mockClear();
+      spy.mockReset();
     });
   });
 
   describe('grouping', () => {
-    it('should group data', async (done) => {
+    it('should group data based on columns that have grouped property', async () => {
       const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid({
         name: 'grid_grouping_1',
@@ -830,23 +865,19 @@ describe('TekGrid', () => {
 
       await flushPromises();
 
-      setTimeout(() => {
-        instance.getCellWithAppliedConditions(instance.columns, instance.datasource.data[0]);
-        expect(instance.datasource.data.length).toBe(5);
-        expect(instance.datasource.order).toEqual(['department.asc', 'name.asc']);
-        expect(instance.groupedData.length).toBe(7);
-        expect(instance.groupedData[0].group).toBeTruthy();
-        expect(instance.groupedData[0].groupLabel).toBe('department');
-        expect(instance.groupedData[0].groupValue).toBe(1);
-        expect(instance.groupedData[1].groupHeaders.length).toBe(1);
-        expect(instance.groupedData[1].name).toBe('employee 1');
-
-        done();
-      }, 1000);
+      instance.getCellWithAppliedConditions(instance.columns, instance.datasource.data[0]);
+      expect(instance.datasource.data.length).toBe(5);
+      expect(instance.datasource.order).toEqual(['department.asc', 'name.asc']);
+      expect(instance.groupedData.length).toBe(7);
+      expect(instance.groupedData[0].group).toBeTruthy();
+      expect(instance.groupedData[0].groupLabel).toBe('department');
+      expect(instance.groupedData[0].groupValue).toBe(1);
+      expect(instance.groupedData[1].groupHeaders.length).toBe(1);
+      expect(instance.groupedData[1].name).toBe('employee 1');
     });
 
-    it('should call debounced updateGroupData', async (done) => {
-      const flushPromises = () => new Promise(setImmediate);
+    it('should call debounced updateGroupData', () => {
+      const spy = jest.spyOn(TekGrid.prototype, 'updateGroupedData');
       const instance = new TekGrid({
         name: 'grid_grouping_1',
         component: 'TekGrid',
@@ -877,18 +908,16 @@ describe('TekGrid', () => {
         },
       });
 
-      await flushPromises();
+      jest.runAllTimers();
 
-      instance.updateGroupedData = jest.fn();
       instance.columns[2].grouped = true;
 
-      setTimeout(() => {
-        expect(instance.updateGroupedData).toBeCalled();
-        done();
-      }, 1000);
+      expect(spy).toHaveBeenCalled();
+
+      spy.mockClear();
     });
 
-    it('should group data with aggregations', async (done) => {
+    it('should group data with aggregations', async () => {
       const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid({
         name: 'grid_aggregate_1',
@@ -924,26 +953,22 @@ describe('TekGrid', () => {
 
       await flushPromises();
 
-      setTimeout(() => {
-        instance.getCellWithAppliedConditions(instance.columns, instance.datasource.data[0]);
-        expect(instance.datasource.data.length).toBe(5);
-        expect(instance.datasource.order).toEqual(['department.asc', 'name.asc']);
-        expect(instance.groupedData.length).toBe(10);
-        expect(instance.groupedData[0].group).toBeTruthy();
-        expect(instance.groupedData[0].groupLabel).toBe('department');
-        expect(instance.groupedData[0].groupValue).toBe(1);
-        expect(instance.groupedData[1].groupHeaders.length).toBe(1);
-        expect(instance.groupedData[1].name).toBe('employee 1');
-        expect(instance.groupedData[4].groupFooter).toBeTruthy();
-        expect(instance.groupedData[4].id).toBe(3);
-        expect(instance.groupedData[9].groupSummary).toBeTruthy();
-        expect(instance.groupedData[9].id).toBe(5);
-
-        done();
-      }, 1000);
-    });
-
-    it('should group data with multiple groups', async (done) => {
+      instance.getCellWithAppliedConditions(instance.columns, instance.datasource.data[0]);
+      expect(instance.datasource.data.length).toBe(5);
+      expect(instance.datasource.order).toEqual(['department.asc', 'name.asc']);
+      expect(instance.groupedData.length).toBe(10);
+      expect(instance.groupedData[0].group).toBeTruthy();
+      expect(instance.groupedData[0].groupLabel).toBe('department');
+      expect(instance.groupedData[0].groupValue).toBe(1);
+      expect(instance.groupedData[1].groupHeaders.length).toBe(1);
+      expect(instance.groupedData[1].name).toBe('employee 1');
+      expect(instance.groupedData[4].groupFooter).toBeTruthy();
+      expect(instance.groupedData[4].id).toBe(3);
+      expect(instance.groupedData[9].groupSummary).toBeTruthy();
+      expect(instance.groupedData[9].id).toBe(5);
+    });
+
+    it('should group data with multiple groups', async () => {
       const flushPromises = () => new Promise(setImmediate);
       let viewUpdateScrollDataCalled = false;
 
@@ -993,38 +1018,34 @@ describe('TekGrid', () => {
 
       await flushPromises();
 
-      setTimeout(() => {
-        expect(instance.datasource.data.length).toBe(5);
-        expect(instance.datasource.data[0].groupHeaders).toBeUndefined();
-        expect(instance.datasource.order).toEqual(['department.asc', 'boss.asc', 'name.asc']);
-        expect(instance.groupedData.length).toBe(11);
-        expect(instance.groupedData[0].group).toBeTruthy();
-        expect(instance.groupedData[0].groupLabel).toBe('department');
-        expect(instance.groupedData[0].groupValue).toBe(1);
-        expect(instance.groupedData[1].group).toBeTruthy();
-        expect(instance.groupedData[1].groupLabel).toBe('boss');
-        expect(instance.groupedData[1].groupValue).toBe('boss');
-        expect(instance.groupedData[2].groupHeaders.length).toBe(2);
-        expect(instance.groupedData[2].name).toBe('employee 1');
-        expect(instance.groupedData[3].group).toBeTruthy();
-        expect(instance.groupedData[3].groupLabel).toBe('boss');
-        expect(instance.groupedData[3].groupValue).toBe(1);
-
-        expect(instance.isItemVisible(instance.groupedData[2])).toBeFalsy();
-        instance.openGroup(instance.groupedData[0]);
-        expect(instance.isItemVisible(instance.groupedData[2])).toBeFalsy();
-        expect(viewUpdateScrollDataCalled).toBeFalsy();
-
-        instance.viewUpdateScrollData = () => { viewUpdateScrollDataCalled = true; };
-        instance.openGroup(instance.groupedData[1]);
-        expect(instance.isItemVisible(instance.groupedData[2])).toBeTruthy();
-        expect(viewUpdateScrollDataCalled).toBeTruthy();
-
-        done();
-      }, 1000);
-    });
-
-    it('should group data with multiple groups and aggregation', async (done) => {
+      expect(instance.datasource.data.length).toBe(5);
+      expect(instance.datasource.data[0].groupHeaders).toBeUndefined();
+      expect(instance.datasource.order).toEqual(['department.asc', 'boss.asc', 'name.asc']);
+      expect(instance.groupedData.length).toBe(11);
+      expect(instance.groupedData[0].group).toBeTruthy();
+      expect(instance.groupedData[0].groupLabel).toBe('department');
+      expect(instance.groupedData[0].groupValue).toBe(1);
+      expect(instance.groupedData[1].group).toBeTruthy();
+      expect(instance.groupedData[1].groupLabel).toBe('boss');
+      expect(instance.groupedData[1].groupValue).toBe('boss');
+      expect(instance.groupedData[2].groupHeaders.length).toBe(2);
+      expect(instance.groupedData[2].name).toBe('employee 1');
+      expect(instance.groupedData[3].group).toBeTruthy();
+      expect(instance.groupedData[3].groupLabel).toBe('boss');
+      expect(instance.groupedData[3].groupValue).toBe(1);
+
+      expect(instance.isItemVisible(instance.groupedData[2])).toBeFalsy();
+      instance.openGroup(instance.groupedData[0]);
+      expect(instance.isItemVisible(instance.groupedData[2])).toBeFalsy();
+      expect(viewUpdateScrollDataCalled).toBeFalsy();
+
+      instance.viewUpdateScrollData = () => { viewUpdateScrollDataCalled = true; };
+      instance.openGroup(instance.groupedData[1]);
+      expect(instance.isItemVisible(instance.groupedData[2])).toBeTruthy();
+      expect(viewUpdateScrollDataCalled).toBeTruthy();
+    });
+
+    it('should group data with multiple groups and aggregation', async () => {
       const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid({
         name: 'grid_aggredate_2',
@@ -1082,37 +1103,33 @@ describe('TekGrid', () => {
 
       await flushPromises();
 
-      setTimeout(() => {
-        expect(instance.datasource.data.length).toBe(5);
-        expect(instance.datasource.data[0].groupHeaders).toBeUndefined();
-        expect(instance.datasource.order).toEqual(['department.asc', 'boss.asc', 'name.asc']);
-        expect(instance.groupedData.length).toBe(17);
-        expect(instance.groupedData[0].group).toBeTruthy();
-        expect(instance.groupedData[0].groupLabel).toBe('department');
-        expect(instance.groupedData[0].groupValue).toBe(1);
-        expect(instance.groupedData[1].group).toBeTruthy();
-        expect(instance.groupedData[1].groupLabel).toBe('boss');
-        expect(instance.groupedData[1].groupValue).toBe('boss');
-        expect(instance.groupedData[2].groupHeaders.length).toBe(2);
-        expect(instance.groupedData[2].name).toBe('employee 1');
-        expect(instance.groupedData[3].groupFooter).toBeTruthy();
-        expect(instance.groupedData[3].id).toBe(1);
-        expect(instance.groupedData[3].salary).toBe(10);
-        expect(instance.groupedData[4].group).toBeTruthy();
-        expect(instance.groupedData[4].groupLabel).toBe('boss');
-        expect(instance.groupedData[4].groupValue).toBe(1);
-        expect(instance.groupedData[7].groupFooter).toBeTruthy();
-        expect(instance.groupedData[7].id).toBe(2);
-        expect(instance.groupedData[7].salary).toBe(20);
-        expect(instance.groupedData[8].groupFooter).toBeTruthy();
-        expect(instance.groupedData[8].id).toBe(3);
-        expect(instance.groupedData[8].salary).toBe(30);
-
-        done();
-      }, 1000);
-    });
-
-    it('should aggregate even without groups', async (done) => {
+      expect(instance.datasource.data.length).toBe(5);
+      expect(instance.datasource.data[0].groupHeaders).toBeUndefined();
+      expect(instance.datasource.order).toEqual(['department.asc', 'boss.asc', 'name.asc']);
+      expect(instance.groupedData.length).toBe(17);
+      expect(instance.groupedData[0].group).toBeTruthy();
+      expect(instance.groupedData[0].groupLabel).toBe('department');
+      expect(instance.groupedData[0].groupValue).toBe(1);
+      expect(instance.groupedData[1].group).toBeTruthy();
+      expect(instance.groupedData[1].groupLabel).toBe('boss');
+      expect(instance.groupedData[1].groupValue).toBe('boss');
+      expect(instance.groupedData[2].groupHeaders.length).toBe(2);
+      expect(instance.groupedData[2].name).toBe('employee 1');
+      expect(instance.groupedData[3].groupFooter).toBeTruthy();
+      expect(instance.groupedData[3].id).toBe(1);
+      expect(instance.groupedData[3].salary).toBe(10);
+      expect(instance.groupedData[4].group).toBeTruthy();
+      expect(instance.groupedData[4].groupLabel).toBe('boss');
+      expect(instance.groupedData[4].groupValue).toBe(1);
+      expect(instance.groupedData[7].groupFooter).toBeTruthy();
+      expect(instance.groupedData[7].id).toBe(2);
+      expect(instance.groupedData[7].salary).toBe(20);
+      expect(instance.groupedData[8].groupFooter).toBeTruthy();
+      expect(instance.groupedData[8].id).toBe(3);
+      expect(instance.groupedData[8].salary).toBe(30);
+    });
+
+    it('should aggregate even without groups', async () => {
       const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid({
         name: 'grid_aggredate_3',
@@ -1168,17 +1185,13 @@ describe('TekGrid', () => {
 
       await flushPromises();
 
-      setTimeout(() => {
-        expect(instance.datasource.data.length).toBe(5);
-        expect(instance.groupedData.length).toBe(6);
-        expect(instance.groupedData[5].groupSummary).toBeTruthy();
-        expect(instance.groupedData[5].salary).toBe(50);
-
-        done();
-      }, 1000);
+      expect(instance.datasource.data.length).toBe(5);
+      expect(instance.groupedData.length).toBe(6);
+      expect(instance.groupedData[5].groupSummary).toBeTruthy();
+      expect(instance.groupedData[5].salary).toBe(50);
     });
 
-    it('should aggregation with different functions', async (done) => {
+    it('should aggregation with different functions', async () => {
       const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid({
         name: 'grid_aggregate_4',
@@ -1241,21 +1254,17 @@ describe('TekGrid', () => {
 
       await flushPromises();
 
-      setTimeout(() => {
-        expect(instance.datasource.data.length).toBe(4);
-        expect(instance.groupedData.length).toBe(7);
-        expect(instance.groupedData[6].groupSummary).toBeTruthy();
-        expect(instance.groupedData[6].column_sum).toBe(130);
-        expect(instance.groupedData[6].column_min).toBe(5);
-        expect(instance.groupedData[6].column_max).toBe('5');
-        expect(instance.groupedData[6].column_avg).toBe(33.75);
-        expect(instance.groupedData[6].column_count).toBe(3);
-
-        done();
-      }, 1000);
+      expect(instance.datasource.data.length).toBe(4);
+      expect(instance.groupedData.length).toBe(7);
+      expect(instance.groupedData[6].groupSummary).toBeTruthy();
+      expect(instance.groupedData[6].column_sum).toBe(130);
+      expect(instance.groupedData[6].column_min).toBe(5);
+      expect(instance.groupedData[6].column_max).toBe('5');
+      expect(instance.groupedData[6].column_avg).toBe(33.75);
+      expect(instance.groupedData[6].column_count).toBe(3);
     });
 
-    it('should group data on rest datasource with lazyLoad', async (done) => {
+    it('should group data on rest datasource with lazyLoad', async () => {
       const flushPromises = () => new Promise(setImmediate);
       const httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
         data: {
@@ -1306,14 +1315,11 @@ describe('TekGrid', () => {
       expect(instance.datasource.data.length).toBe(0);
 
       await instance.datasource.get();
-      setTimeout(() => {
-        expect(instance.datasource.data.length).toBe(5);
-        expect(instance.groupedData.length).toBe(7);
 
-        httpSpy.mockClear();
+      expect(instance.datasource.data.length).toBe(5);
+      expect(instance.groupedData.length).toBe(7);
 
-        done();
-      }, 1000);
+      httpSpy.mockReset();
     });
 
     it('editedRows should return cleaned rows', async () => {
@@ -1392,7 +1398,7 @@ describe('TekGrid', () => {
       expect(instance.groupedData.length).toBe(0);
     });
 
-    it('should call view update methods', async (done) => {
+    it('should call view update methods', async () => {
       const flushPromises = () => new Promise(setImmediate);
       let viewUpdateScrollDataCalled = false;
       let viewUpdateFixedColumnsCalled = false;
@@ -1433,16 +1439,12 @@ describe('TekGrid', () => {
 
       await flushPromises();
 
-      setTimeout(() => {
-        expect(viewUpdateScrollDataCalled).toBeTruthy();
-        expect(viewUpdateFixedColumnsCalled).toBeTruthy();
-
-        done();
-      }, 1000);
+      expect(viewUpdateScrollDataCalled).toBeTruthy();
+      expect(viewUpdateFixedColumnsCalled).toBeTruthy();
     });
 
-    it('should call debounced updateGroupData', async (done) => {
-      const flushPromises = () => new Promise(setImmediate);
+    it('should call debounced updateGroupData', () => {
+      const spy = jest.spyOn(TekGrid.prototype, 'updateGroupedData');
       const instance = new TekGrid({
         name: 'grid_grouping_1',
         component: 'TekGrid',
@@ -1474,15 +1476,13 @@ describe('TekGrid', () => {
         },
       });
 
-      await flushPromises();
+      jest.runAllTimers();
 
-      instance.updateGroupedData = jest.fn();
       instance.columns[2].groupOpened = true;
 
-      setTimeout(() => {
-        expect(instance.updateGroupedData).toBeCalled();
-        done();
-      }, 1000);
+      expect(spy).toHaveBeenCalled();
+
+      spy.mockClear();
     });
   });
 
@@ -1495,18 +1495,14 @@ describe('TekGrid', () => {
 
       const spy = jest.spyOn(ModalService, 'create');
       instance.onCreated();
-      const filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        expect(spy).toBeCalledTimes(1);
-        button.click(event, {} as HTMLElement);
-        expect(spy).toBeCalledTimes(1);
-        expect(button.isVisible).toBeFalsy();
-        (instance as any).gridBase.hideFilterModal();
-      }
-      spy.mockClear();
+
+      const button = clickOnFilterButton(instance);
+      expect(spy).toBeCalledTimes(1);
+      clickOnFilterButton(instance);
+      expect(spy).toBeCalledTimes(1);
+      expect(button.isVisible).toBeFalsy();
+      (instance as any).gridBase.hideFilterModal();
+      spy.mockReset();
     });
 
     it('should call events', () => {
@@ -1519,14 +1515,14 @@ describe('TekGrid', () => {
         },
       });
 
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal) => new Modal(modal));
+
       instance.onCreated();
-      const filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        expect(filterClickCalled).toBeTruthy();
-      }
+      clickOnFilterButton(instance);
+
+      expect(filterClickCalled).toBeTruthy();
+
+      spy.mockReset();
     });
 
     it('should not call saveEditedRows if filterClick call preventDefault', () => {
@@ -1540,16 +1536,14 @@ describe('TekGrid', () => {
       });
 
       const spy = jest.spyOn(ModalService, 'create');
-      spy.mockReset();
+
       instance.onCreated();
-      const filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        button.click({ defaultPrevented: true } as Event, {} as HTMLElement);
-        expect(filterClickCalled).toBeTruthy();
-        expect(spy).not.toBeCalled();
-      }
-      spy.mockClear();
+      clickOnFilterButton(instance, { defaultPrevented: true });
+
+      expect(filterClickCalled).toBeTruthy();
+      expect(spy).not.toBeCalled();
+
+      spy.mockReset();
     });
 
     it('should create modal with no form elements', () => {
@@ -1564,22 +1558,16 @@ describe('TekGrid', () => {
 
       let formElements: any = [];
       const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        if (modal.children && modal.children.length > 1) {
-          const form = modal.children[1];
-          formElements = form.children;
-        }
+        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
 
         return new Modal(modal);
       });
       instance.onCreated();
-      const filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        expect(formElements).toEqual([]);
-      }
-      spy.mockClear();
+      clickOnFilterButton(instance);
+
+      expect(formElements).toEqual([]);
+      spy.mockReset();
     });
 
     it('should create modal with filterable form elements', () => {
@@ -1594,22 +1582,17 @@ describe('TekGrid', () => {
 
       let formElements: any = [];
       const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        if (modal.children && modal.children.length > 1) {
-          const form = modal.children[1];
-          formElements = form.children;
-        }
+        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
 
         return new Modal(modal);
       });
       instance.onCreated();
-      const filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        expect(formElements[0].name).toBe('grid_filterClick5-filter-AND-CONTAINS-name-0');
-      }
-      spy.mockClear();
+      clickOnFilterButton(instance);
+
+      expect(formElements[0].name).toBe('grid_filterClick5-filter-AND-CONTAINS-name-0');
+
+      spy.mockReset();
     });
 
     it('should create modal with filterable and ordered form elements', () => {
@@ -1640,24 +1623,20 @@ describe('TekGrid', () => {
 
       let formElements: any = [];
       const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        if (modal.children && modal.children.length > 1) {
-          const form = modal.children[1];
-          formElements = form.children;
-        }
+        const form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
 
         return new Modal(modal);
       });
       instance.onCreated();
-      const filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        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.mockClear();
+
+      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', () => {
@@ -1666,6 +1645,7 @@ describe('TekGrid', () => {
         component: 'TekGrid',
         datasource: {
           type: 'tek-rest',
+          lazyLoad: true,
         },
         columns: [
           {
@@ -1685,24 +1665,20 @@ describe('TekGrid', () => {
       let formElements: any = [];
       let form: IForm;
       const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        if (modal.children && modal.children.length > 1) {
-          form = modal.children[1] as IForm;
-          formElements = form.children;
-        }
+        form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
 
         return new Modal(modal);
       });
       instance.onCreated();
-      const filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        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.mockClear();
+
+      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', () => {
@@ -1711,6 +1687,7 @@ describe('TekGrid', () => {
         component: 'TekGrid',
         datasource: {
           type: 'tek-rest',
+          lazyLoad: true,
         },
         columns: [
           {
@@ -1750,27 +1727,22 @@ describe('TekGrid', () => {
       let formElements: any = [];
       let form: IForm;
       const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        if (modal.children && modal.children.length > 1) {
-          form = modal.children[1] as IForm;
-          formElements = form.children;
-        }
+        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();
-      const filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        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.mockClear();
-      dateHelperSpy.mockClear();
+      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', () => {
@@ -1779,6 +1751,7 @@ describe('TekGrid', () => {
         component: 'TekGrid',
         datasource: {
           type: 'tek-rest',
+          lazyLoad: true,
         },
         columns: [
           {
@@ -1825,35 +1798,30 @@ describe('TekGrid', () => {
       let formElements: any = [];
       let form: IForm;
       const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        if (modal.children && modal.children.length > 1) {
-          form = modal.children[1] as IForm;
-          formElements = form.children;
-        }
+        form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
+        formElements = form.children;
 
         return new Modal(modal);
       });
       instance.onCreated();
-      const filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        const dateComp = new Date(formElements[0]);
-        dateComp.helperValue = 'TODAY';
-        dateComp.change(event, {} as HTMLElement);
-        expect((instance.columns[0].filterProps as IFilterPropsComponent).helperValue).toBe('TODAY');
-
-        const dateComp21 = new Date(formElements[1]);
-        dateComp21.helperValue = 'TODAY';
-        dateComp21.change(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(event, {} as HTMLElement);
-        expect((instance.columns[1].filterProps as IFilterPropsComponent[])[1].helperValue).toBe('TODAY');
-      }
-      spy.mockClear();
+      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', () => {
@@ -1862,6 +1830,7 @@ describe('TekGrid', () => {
         component: 'TekGrid',
         datasource: {
           type: 'tek-rest',
+          lazyLoad: true,
           dynamicFilter: {
             id: [],
             name: [
@@ -1909,35 +1878,30 @@ describe('TekGrid', () => {
       });
 
       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) => {
-        if (modal.children && modal.children.length > 1) {
-          form = modal.children[1] as IForm;
-        }
+        form = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
 
         return new Modal(modal);
       });
       instance.onCreated();
-      const filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        expect(form.name).toBe('grid_filterClick9-filter-form');
-        if (form) {
-          const formObject = new Form(form);
-          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-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.mockClear();
-        }
-      }
-      spy.mockClear();
+
+      clickOnFilterButton(instance);
+
+      expect(form.name).toBe('grid_filterClick9-filter-form');
+      const formObject = new Form(form);
+      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-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', () => {
@@ -1964,31 +1928,42 @@ describe('TekGrid', () => {
         ],
       });
 
-      let form: IForm = { name: 'form', component: 'ZdForm' };
+      let formProps: IForm = {} as IForm;
       const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        if (modal.children && modal.children.length > 1) {
-          form = modal.children[1] as IForm;
-        }
+        formProps = getChild<IForm>(modal.children || [], `${instance.name}-filter-form`);
 
         return new Modal(modal);
       });
       instance.onCreated();
-      const filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        const formObject = new Form(form);
-        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.mockClear();
+      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',
@@ -2024,78 +1999,90 @@ describe('TekGrid', () => {
       let form: IForm = { name: 'form', component: 'ZdForm' };
       let applyButton: IButton = { name: 'apply', component: 'ZdButton' };
       const spyModalService = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        if (modal.children && modal.children.length > 2) {
-          form = modal.children[1] as IForm;
-          const modalFooter = modal.children[2];
-          if (modalFooter.rightSlot && modalFooter.rightSlot.length > 1) {
-            applyButton = modalFooter.rightSlot[1] as IButton;
-          }
-        }
+        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 filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        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;
-        applyButtonObject.click(event, {} as HTMLElement);
-        expect((instance.datasource as TekRestDatasource).dynamicFilter).toEqual({});
-
-        formObject.validate = () => true;
-        applyButtonObject.click(event, {} as HTMLElement);
-        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.mockClear();
-        spyDatasourceGet.mockClear();
-      }
-      spyModalService.mockClear();
+      const buttonProps = getChild<IButton>(instance.toolbarSlot, `${instance.name}_filterButton`);
+      const button = new Button(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',
@@ -2131,47 +2118,43 @@ describe('TekGrid', () => {
       let form: IForm = { name: 'form', component: 'ZdForm' };
       let clearButton: IButton = { name: 'clear', component: 'ZdButton' };
       const spyModalService = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        if (modal.children && modal.children.length > 2) {
-          form = modal.children[1] as IForm;
-          const modalFooter = modal.children[2];
-          if (modalFooter.leftSlot && modalFooter.leftSlot.length > 0) {
-            clearButton = modalFooter.leftSlot[0] as IButton;
-          }
-        }
+        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 filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        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);
-        clearButtonObject.click(event, {} as HTMLElement);
-        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.mockClear();
-        spyDatasourceGet.mockClear();
-      }
-      spyModalService.mockClear();
+      const buttonProps = getChild<IButton>(instance.toolbarSlot, `${instance.name}_filterButton`);
+      const button = new Button(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', () => {
@@ -2203,48 +2186,41 @@ describe('TekGrid', () => {
       let form: IForm = { name: 'form', component: 'ZdForm' };
       let applyButton: IButton = { name: 'apply', component: 'ZdButton' };
       const spyModalService = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
-        if (modal.children && modal.children.length > 2) {
-          form = modal.children[1] as IForm;
-          const modalFooter = modal.children[2];
-          if (modalFooter.rightSlot && modalFooter.rightSlot.length > 1) {
-            applyButton = modalFooter.rightSlot[1] as IButton;
-          }
-        }
+        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 filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        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);
-        applyButtonObject.click({ defaultPrevented: true } as Event, {} as HTMLElement);
-        expect((instance.datasource as TekRestDatasource).filter).toEqual({
-          id: '1;2;3',
-          name: 'teste',
-          salary: '1000',
-        });
-        expect(beforeApplyFilterCalled).toBeTruthy();
-        expect(changeLayoutCalled).toBeTruthy();
-        expect(instance.columnHasFilterData({ name: 'name' } as TekGridColumn)).toBeTruthy();
-        expect(spyDatasourceGet).not.toBeCalled();
-        spyMetadata.mockClear();
-        spyDatasourceGet.mockClear();
-      }
-      spyModalService.mockClear();
+      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, { defaultPrevented: true });
+      expect((instance.datasource as TekRestDatasource).filter).toEqual({
+        id: '1;2;3',
+        name: 'teste',
+        salary: '1000',
+      });
+      expect(beforeApplyFilterCalled).toBeTruthy();
+      expect(changeLayoutCalled).toBeTruthy();
+      expect(instance.columnHasFilterData({ name: 'name' } as TekGridColumn)).toBeTruthy();
+      expect(spyDatasourceGet).not.toBeCalled();
+      spyMetadata.mockReset();
+      spyDatasourceGet.mockReset();
+      spyModalService.mockReset();
     });
   });
 
@@ -2336,22 +2312,23 @@ describe('TekGrid', () => {
         ],
         datasource: {
           type: 'tek-rest',
-          lazyLoad: false,
+          lazyLoad: true,
           route: '/grid',
         },
       };
-
-      httpSpy.mockClear();
     });
 
-    afterAll(() => {
-      httpSpy.mockClear();
+    afterEach(() => {
+      httpSpy.mockReset();
     });
 
     it('should set datasource search_join based on columns that have datasource', async () => {
+      const flushPromises = () => new Promise(setImmediate);
       const instance = new TekGrid(baseProps);
 
-      await instance.setSearch('1');
+      instance.setSearch('1');
+      await flushPromises();
+
       expect(instance.datasource).toBeInstanceOf(TekRestDatasource);
       expect((instance.datasource as TekRestDatasource).searchJoin).toEqual({ employee_id: [1, 15] });
       expect(httpSpy).toHaveBeenCalledTimes(2);
@@ -2403,7 +2380,7 @@ describe('TekGrid', () => {
         ],
         datasource: {
           type: 'tek-rest',
-          lazyLoad: false,
+          lazyLoad: true,
           route: '/grid',
         },
       });
@@ -2422,6 +2399,17 @@ describe('TekGrid', () => {
       expect(instance.datasource).not.toBeInstanceOf(TekRestDatasource);
       expect(httpSpy).toHaveBeenCalledTimes(1);
     });
+
+    it('when called, should change datasource page to 1 before searching', async () => {
+      const instance = new TekGrid({
+        name: 'iterable',
+        component: 'Iterable',
+      });
+      instance.datasource.page = 5;
+      await instance.setSearch('search value');
+
+      expect(instance.datasource.page).toBe(1);
+    });
   });
 
   describe('rowClick', () => {
@@ -2629,7 +2617,7 @@ describe('TekGrid', () => {
       const layoutOptionsComp = { name: 'grid_layout_options' };
       const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => layoutOptionsComp);
       expect(grid.layoutOptions).toEqual(layoutOptionsComp);
-      spyMetadata.mockClear();
+      spyMetadata.mockReset();
     });
   });
 
@@ -2648,7 +2636,7 @@ describe('TekGrid', () => {
       const gridAtom = instance.getAtomInstance<Text>('TITLE');
 
       expect(gridAtom).toEqual(atom);
-      spyMetadata.mockClear();
+      spyMetadata.mockReset();
     });
   });
 
@@ -2673,6 +2661,7 @@ describe('TekGrid', () => {
     };
 
     it('when called with null parameter, should return all the filter inputs', () => {
+      const spyModalService = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => (new Modal(modal)));
       const instance = new TekGrid({
         name: 'grid',
         component: 'TekGrid',
@@ -2708,21 +2697,18 @@ describe('TekGrid', () => {
 
       const spy = mockMetadata(instance);
       instance.onCreated();
-      const filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-      }
+      clickOnFilterButton(instance);
 
       const inputs = instance.getFilterInputs();
       expect(inputs[0].name).toBe('grid-filter-AND-CONTAINS-name-0');
       expect(inputs[1].name).toBe('grid-filter-AND-GREATER_THAN_EQUALS-salary-0');
       expect(inputs[2].name).toBe('grid-filter-AND-LESS_THAN_EQUALS-salary-1');
-      spy.mockClear();
+      spy.mockReset();
+      spyModalService.mockReset();
     });
 
     it('when called, should return the instances of filters with multiple inputs', () => {
+      const spyModalService = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => (new Modal(modal)));
       const instance = new TekGrid({
         name: 'grid',
         component: 'TekGrid',
@@ -2758,17 +2744,14 @@ describe('TekGrid', () => {
 
       const spy = mockMetadata(instance);
       instance.onCreated();
-      const filterTooltip = instance.toolbarSlot[6];
-      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
-        const button = new Button(filterTooltip.children[0]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-      }
+
+      clickOnFilterButton(instance);
 
       const inputs = instance.getFilterInputs('salary');
       expect(inputs[0].name).toBe('grid-filter-AND-GREATER_THAN_EQUALS-salary-0');
       expect(inputs[1].name).toBe('grid-filter-AND-LESS_THAN_EQUALS-salary-1');
-      spy.mockClear();
+      spy.mockReset();
+      spyModalService.mockReset();
     });
   });
 });