@zeedhi/teknisa-components-common 1.107.1 → 1.108.0

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

@@ -1,776 +1,776 @@
-import {
-  Button, Dropdown, Form, IButton, IForm, IModal, Modal, ModalService, Report, Search, Text, TextInput,
-} from '@zeedhi/common';
-import {
-  Http, IDictionary, KeyMap, Metadata,
-} from '@zeedhi/core';
-import {
-  ITekGridFilterButton,
-  ITekTreeGrid, TekGridColumn, TekGridFilterButton, TekRestDatasource, TekTreeGrid,
-} from '../../../../src';
-import { getChild, setClick } from '../../../__helpers__';
-
-const flushPromises = () => new Promise(setImmediate);
-
-const clickOnFilterButton = (grid: TekTreeGrid, event?: any) => {
-  const buttonProps = getChild<ITekGridFilterButton>(grid.toolbarSlot, `${grid.name}_filterButton`);
-  const button = new TekGridFilterButton(buttonProps);
-  setClick(button, event);
-
-  return button;
-};
-
-describe('TekTreeGrid', () => {
-  beforeEach(() => {
-    // clear all metadata instances before testing
-    const { instances } = Metadata as any;
-    Object.keys(instances).forEach((key) => {
-      Metadata.clearInstance(key, instances[key].componentId);
-    });
-  });
-
-  describe('constructor()', () => {
-    it('should create new grid with default values', () => {
-      const instance = new TekTreeGrid({ name: 'TreeGrid', component: 'TekTreeGrid' });
-      expect(instance.title).toBe('');
-      expect(instance.addButton).toBeFalsy();
-      expect(instance.deleteButton).toBe('none');
-      expect(instance.filterButton).toBeFalsy();
-      expect(instance.columnFilterButton).toBeFalsy();
-      expect(instance.dragColumns).toBeTruthy();
-      expect(instance.resizeColumns).toBeTruthy();
-      expect(instance.showLayoutOptions).toBeTruthy();
-      expect(instance.showReload).toBeTruthy();
-      expect(instance.columnsButton).toBeFalsy();
-      expect(instance.columnsButtonIgnore).toEqual([]);
-    });
-
-    it('should create new Grid replacing default values', () => {
-      const instance = new TekTreeGrid({
-        name: 'grid',
-        component: 'TekTreeGrid',
-        title: 'title',
-        addButton: true,
-        deleteButton: 'selection',
-        filterButton: true,
-        columnFilterButton: true,
-        dragColumns: false,
-        resizeColumns: false,
-        showLayoutOptions: false,
-        showReload: false,
-        columns: [
-          { name: 'id' },
-        ],
-        columnsButton: true,
-        columnsButtonIgnore: ['id'],
-      });
-      expect(instance.title).toBe('title');
-      expect(instance.addButton).toBeTruthy();
-      expect(instance.deleteButton).toBe('selection');
-      expect(instance.filterButton).toBeTruthy();
-      expect(instance.columnFilterButton).toBeTruthy();
-      expect(instance.dragColumns).toBeFalsy();
-      expect(instance.resizeColumns).toBeFalsy();
-      expect(instance.showLayoutOptions).toBeFalsy();
-      expect(instance.showReload).toBeFalsy();
-      expect(instance.columns[0]).toBeInstanceOf(TekGridColumn);
-      expect(instance.columnsButton).toBeTruthy();
-      expect(instance.columnsButtonIgnore).toEqual(['id']);
-    });
-
-    it('should create toolbar and footer', () => {
-      const instance = new TekTreeGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        title: 'title',
-        addButton: true,
-        deleteButton: 'selection',
-        filterButton: true,
-        columnFilterButton: true,
-        dragColumns: false,
-        resizeColumns: false,
-        showLayoutOptions: false,
-      });
-      instance.onCreated();
-      expect(instance.toolbarSlot.length).toBe(3);
-    });
-
-    it('should overwrite toolbar', () => {
-      const instance = new TekTreeGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        title: 'title',
-        addButton: true,
-        deleteButton: 'selection',
-        filterButton: true,
-        columnFilterButton: true,
-        dragColumns: false,
-        resizeColumns: false,
-        showLayoutOptions: false,
-        toolbarSlot: [],
-      });
-      instance.onCreated();
-      expect(instance.toolbarSlot.length).toBe(0);
-    });
-  });
-
-  describe('navigation', () => {
-    const dispatchEvent = (key: string, modifiers: any) => {
-      const event = new KeyboardEvent('keydown', modifiers);
-      delete (event as any).key;
-      Object.defineProperty(event, 'key', { value: key });
-      delete (event as any).code;
-      Object.defineProperty(event, 'code', { value: key });
-      document.dispatchEvent(event);
-    };
-
-    it('should open filter modal input with keymap', async () => {
-      const instance = new TekTreeGrid({
-        name: 'grid_navigation_2',
-        component: 'TekGrid',
-        filterButton: true,
-      });
-      const elem = document.createElement('DIV');
-
-      (KeyMap as any).isElementActive = () => true;
-
-      instance.onMounted(elem);
-      await flushPromises();
-
-      const method = jest.fn();
-
-      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => new TekGridFilterButton({
-        name: 'grid_navigation_2_filterButton',
-        component: 'TekGridFilterButton',
-        grid: instance,
-        events: {
-          click: method,
-        },
-      }));
-
-      dispatchEvent('l', { ctrlKey: true }); // ctrl+l keydown
-      await flushPromises();
-
-      instance.onBeforeDestroy();
-      await flushPromises();
-
-      expect(method).toHaveBeenCalled();
-      (KeyMap as any).isElementActive = () => false;
-      spyMetadata.mockReset();
-    });
-
-    it('should open action dropdown with keymap', async () => {
-      const instance = new TekTreeGrid({
-        name: 'grid_navigation_2',
-        component: 'TekTreeGrid',
-      });
-      const elem = document.createElement('DIV');
-
-      (KeyMap as any).isElementActive = () => true;
-
-      instance.onMounted(elem);
-      await flushPromises();
-
-      const instanceDropDown = new Dropdown({
-        name: 'grid_navigation_2_actions_dropdown',
-        component: 'ZdDropdown',
-        activator: {
-          name: 'grid_navigation_2_actionsButton',
-          component: 'ZdButton',
-        },
-        children: [],
-      });
-      const instanceDropDownSpy = jest.spyOn(instanceDropDown, 'setFocus').mockImplementation(() => true);
-      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => instanceDropDown);
-
-      dispatchEvent('enter', { ctrlKey: true, enterKey: true }); // ctrl + enter keydown
-      await flushPromises();
-
-      expect(spyMetadata).toHaveBeenCalled();
-      expect(instanceDropDownSpy).toHaveBeenCalled();
-
-      instance.onBeforeDestroy();
-      await flushPromises();
-
-      (KeyMap as any).isElementActive = () => false;
-      spyMetadata.mockReset();
-      instanceDropDownSpy.mockReset();
-    });
-
-    it('should focus in searchInput with keymap', async () => {
-      const instance = new TekTreeGrid({
-        name: 'grid_navigation_3',
-        component: 'TekTreeGrid',
-      });
-      const elem = document.createElement('DIV');
-
-      (KeyMap as any).isElementActive = () => true;
-      instance.onMounted(elem);
-      await flushPromises();
-
-      const searchInput = new Search({
-        name: 'grid_navigation_3_gridSearch',
-        component: 'ZdSearch',
-        parent: instance,
-      });
-
-      const spySetFocus = jest.spyOn(searchInput, 'setFocus').mockImplementation(() => true);
-      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => searchInput);
-
-      dispatchEvent('f', { ctrlKey: true }); // ctrl+f keydown
-      await flushPromises();
-
-      expect(spySetFocus).toHaveBeenCalled();
-
-      instance.onBeforeDestroy();
-      await flushPromises();
-
-      (KeyMap as any).isElementActive = () => false;
-      spySetFocus.mockReset();
-      spyMetadata.mockReset();
-    });
-  });
-  describe('filterClick()', () => {
-    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 TekTreeGrid({
-        name: 'grid_filterClick11',
-        component: 'TekTreeGrid',
-        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',
-            }],
-          },
-        ],
-      });
-
-      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 apply filter from form to datasource', () => {
-      let beforeApplyFilterCalled = false;
-      let changeLayoutCalled = false;
-      const instance = new TekTreeGrid({
-        name: 'grid_filterClick12',
-        component: 'TekTreeGrid',
-        columns: [
-          {
-            name: 'id',
-          },
-          {
-            name: 'name',
-          },
-        ],
-        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_filterClick12-filter-AND-CONTAINS-id-0': '1;2;3',
-        'grid_filterClick12-filter-AND-CONTAINS-name-0': 'teste',
-      };
-      const applyButtonObject = new Button(applyButton);
-      setClick(applyButtonObject, { defaultPrevented: true });
-      expect((instance.datasource as TekRestDatasource).filter).toEqual({
-        id: '1;2;3',
-        name: 'teste',
-      });
-      expect(beforeApplyFilterCalled).toBeTruthy();
-      expect(changeLayoutCalled).toBeTruthy();
-      expect(instance.columnHasFilterData({ name: 'name' } as TekGridColumn)).toBeTruthy();
-      expect(spyDatasourceGet).not.toBeCalled();
-      spyMetadata.mockReset();
-      spyDatasourceGet.mockReset();
-      spyModalService.mockReset();
-    });
-  });
-
-  describe('setSearch()', () => {
-    let baseProps: ITekTreeGrid;
-    let httpSpy: jest.SpyInstance;
-
-    beforeEach(() => {
-      httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
-        data: {
-          data: [
-            { id: 1, name: 'task 1' },
-            { id: 11, name: 'task 1.1', parent: 1 },
-            { id: 12, name: 'task 1.2', parent: 1 },
-            { id: 2, name: 'task 2' },
-            { id: 3, name: 'task 3' },
-          ],
-          pagination: {
-            page: 1,
-            total: 5,
-            limit: 15,
-          },
-        },
-      }));
-
-      baseProps = {
-        name: 'grid_search',
-        component: 'TekTreeGrid',
-        columns: [
-          {
-            name: 'id',
-          },
-          {
-            name: 'name',
-          },
-        ],
-        datasource: {
-          type: 'tek-rest',
-          lazyLoad: false,
-          route: '/grid',
-        },
-      };
-
-      httpSpy.mockClear();
-    });
-
-    afterAll(() => {
-      httpSpy.mockClear();
-    });
-
-    it('should set datasource search_join based on columns that have datasource', async () => {
-      const instance = new TekTreeGrid(baseProps);
-
-      await instance.setSearch('1');
-      expect(instance.datasource).toBeInstanceOf(TekRestDatasource);
-      expect((instance.datasource as TekRestDatasource).searchJoin).toEqual({});
-      expect(httpSpy).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('getReport()', () => {
-    let httpReportSpy: jest.SpyInstance;
-    let reportSpy: jest.SpyInstance;
-
-    beforeEach(() => {
-      reportSpy = jest.spyOn(Report.prototype, 'getReport').mockReturnValue(Promise.resolve(''));
-      httpReportSpy = jest.spyOn(Http, 'post').mockImplementation((url) => {
-        if (url === 'https://zhreport.teknisa.com/generateReport') {
-          return Promise.resolve({
-            data: { messages: [{ message: 'pdf-report.html' }] },
-          });
-        }
-
-        return Promise.reject();
-      });
-    });
-
-    afterEach(() => {
-      reportSpy.mockClear();
-      httpReportSpy.mockClear();
-    });
-
-    it('should call window open on getReport method', async () => {
-      (window as any).open = jest.fn();
-
-      const instance = new TekTreeGrid({
-        name: 'grid',
-        component: 'TekTreeGrid',
-        events: {
-          beforeOpenReport: jest.fn(),
-        },
-        datasource: {
-          type: 'tek-rest',
-          uniqueKey: 'id',
-          route: '/zeedhi',
-          lazyLoad: false,
-          data: [
-            { id: '1', department_id: '1' },
-          ],
-        },
-        columns: [
-          {
-            name: 'id',
-            label: 'ID',
-          },
-          {
-            name: 'department_id',
-            label: 'Department ID',
-          },
-        ],
-      });
-
-      const spy = jest.spyOn(window, 'open');
-      await instance.getReport('pdf');
-
-      expect(spy).toHaveBeenCalledTimes(1);
-
-      (window as any).open.mockClear();
-      spy.mockClear();
-    });
-
-    it('should call window open on getReport method when using tekmemorydatasource', async () => {
-      (window as any).open = jest.fn();
-
-      const instance = new TekTreeGrid({
-        name: 'grid',
-        component: 'TekTreeGrid',
-        events: {
-          beforeOpenReport: jest.fn(),
-        },
-        columns: [
-          {
-            name: 'id',
-            label: 'ID',
-          },
-          {
-            name: 'department_id',
-            label: 'Department ID',
-          },
-        ],
-      });
-
-      const spy = jest.spyOn(window, 'open');
-      await instance.getReport('pdf');
-
-      expect(spy).toHaveBeenCalledTimes(1);
-
-      (window as any).open.mockClear();
-      spy.mockClear();
-    });
-  });
-
-  describe('rowClick', () => {
-    it('rowClick method should call events.rowClick', () => {
-      const rowClick = jest.fn();
-
-      const data = [
-        { id: '1', name: 'First' },
-        { id: '2', name: 'Second' },
-        { id: '3', name: 'Third' },
-      ];
-      const grid = new TekTreeGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-        ],
-        datasource: {
-          data,
-        },
-        events: {
-          rowClick,
-        },
-      });
-
-      const event = new Event('click');
-      const element = document.createElement('div');
-      grid.rowClick(data[0], event, element);
-
-      expect(rowClick).toHaveBeenCalledWith({
-        event,
-        element,
-        row: data[0],
-        component: grid,
-      });
-      expect(grid.datasource.currentRow).toEqual(data[0]);
-    });
-
-    it('should not call events.rowClick if cellClick prevents it', async () => {
-      const rowClick = jest.fn();
-
-      const data = [
-        { id: '1', name: 'First' },
-        { id: '2', name: 'Second' },
-        { id: '3', name: 'Third' },
-      ];
-      const grid = new TekTreeGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-        ],
-        datasource: {
-          data,
-        },
-        events: {
-          rowClick,
-          cellClick: () => true,
-        },
-      });
-      await flushPromises();
-
-      const event = new Event('click');
-      const element = document.createElement('div');
-      grid.cellClick(data[0], grid.getColumn('id') as any, event, element);
-      grid.rowClick(data[0], event, element);
-
-      expect(rowClick).not.toHaveBeenCalled();
-      expect(grid.datasource.currentRow).toEqual({});
-    });
-  });
-
-  describe('layoutOptions', () => {
-    it('should return layout options instance', async () => {
-      const grid = new TekTreeGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        showLayoutOptions: false,
-      });
-
-      expect(grid.layoutOptions).toBeUndefined();
-
-      grid.showLayoutOptions = true;
-      const layoutOptionsComp = { name: 'grid_layout_options' };
-      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => layoutOptionsComp);
-      expect(grid.layoutOptions).toEqual(layoutOptionsComp);
-      spyMetadata.mockClear();
-    });
-  });
-
-  describe('getAtomInstance', () => {
-    const createAtom = (name: string) => new Text({
-      name: `${name}_gridTitle`,
-      component: 'ZdText',
-      text: 'Employees',
-    });
-
-    it('when called, should return the instance of an atom component', () => {
-      const instance = new TekTreeGrid({ name: 'Grid', component: 'TekGrid' });
-      const atom = createAtom(instance.name);
-      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => atom);
-
-      const gridAtom = instance.getAtomInstance<Text>('TITLE');
-
-      expect(gridAtom).toEqual(atom);
-      spyMetadata.mockClear();
-    });
-  });
-
-  describe('getFilterInputs', () => {
-    const mockMetadata = (instance: TekTreeGrid) => {
-      const inputs: IDictionary = {};
-      instance.columns.forEach((col) => {
-        if (!col.filterable || !col.filterProps) return;
-
-        col.filterProps.forEach((filter: any, index: number) => {
-          const relation = filter.relation || 'AND';
-          const operation = filter.operation || 'CONTAINS';
-
-          const name = `${instance.name}-filter-${relation}-${operation}-${col.name}-${index}`;
-          inputs[name] = new TextInput({
-            name,
-            ...filter.filterProps,
-          });
-        });
-      });
-      return jest.spyOn(Metadata, 'getInstance').mockImplementation((name: string) => inputs[name]);
-    };
-
-    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 TekTreeGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        datasource: {
-          type: 'tek-rest',
-          uniqueKey: 'id',
-          route: '/zeedhi',
-          lazyLoad: false,
-        },
-        columns: [
-          { name: 'id' },
-          { name: 'name', filterable: true, filterProps: [{ name: 'name_edit', label: 'name' }] },
-          {
-            name: 'salary',
-            filterable: true,
-            filterProps: [
-              {
-                name: 'salary_edit',
-                component: 'ZdCurrency',
-                operation: 'GREATER_THAN_EQUALS',
-                label: 'Salary (min)',
-              },
-              {
-                name: 'salary_edit',
-                component: 'ZdCurrency',
-                operation: 'LESS_THAN_EQUALS',
-                label: 'Salary (max)',
-              },
-            ],
-          },
-        ],
-      });
-
-      const spy = mockMetadata(instance);
-      instance.onCreated();
-
-      const filterButton = clickOnFilterButton(instance);
-      filterButton.onCreated();
-
-      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();
-      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 TekTreeGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        datasource: {
-          type: 'tek-rest',
-          uniqueKey: 'id',
-          route: '/zeedhi',
-          lazyLoad: false,
-        },
-        columns: [
-          { name: 'id' },
-          { name: 'name', filterable: true, filterProps: [{ name: 'name_edit', label: 'name' }] },
-          {
-            name: 'salary',
-            filterable: true,
-            filterProps: [
-              {
-                name: 'salary_edit',
-                component: 'ZdCurrency',
-                operation: 'GREATER_THAN_EQUALS',
-                label: 'Salary (min)',
-              },
-              {
-                name: 'salary_edit',
-                component: 'ZdCurrency',
-                operation: 'LESS_THAN_EQUALS',
-                label: 'Salary (max)',
-              },
-            ],
-          },
-        ],
-      });
-
-      const spy = mockMetadata(instance);
-      instance.onCreated();
-
-      const filterButton = clickOnFilterButton(instance);
-      filterButton.onCreated();
-
-      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();
-      spyModalService.mockReset();
-    });
-  });
-});
+import {
+  Button, Dropdown, Form, IButton, IForm, IModal, Modal, ModalService, Report, Search, Text, TextInput,
+} from '@zeedhi/common';
+import {
+  Http, IDictionary, KeyMap, Metadata,
+} from '@zeedhi/core';
+import {
+  ITekGridFilterButton,
+  ITekTreeGrid, TekGridColumn, TekGridFilterButton, TekRestDatasource, TekTreeGrid,
+} from '../../../../src';
+import { getChild, setClick } from '../../../__helpers__';
+
+const flushPromises = () => new Promise(setImmediate);
+
+const clickOnFilterButton = (grid: TekTreeGrid, event?: any) => {
+  const buttonProps = getChild<ITekGridFilterButton>(grid.toolbarSlot, `${grid.name}_filterButton`);
+  const button = new TekGridFilterButton(buttonProps);
+  setClick(button, event);
+
+  return button;
+};
+
+describe('TekTreeGrid', () => {
+  beforeEach(() => {
+    // clear all metadata instances before testing
+    const { instances } = Metadata as any;
+    Object.keys(instances).forEach((key) => {
+      Metadata.clearInstance(key, instances[key].componentId);
+    });
+  });
+
+  describe('constructor()', () => {
+    it('should create new grid with default values', () => {
+      const instance = new TekTreeGrid({ name: 'TreeGrid', component: 'TekTreeGrid' });
+      expect(instance.title).toBe('');
+      expect(instance.addButton).toBeFalsy();
+      expect(instance.deleteButton).toBe('none');
+      expect(instance.filterButton).toBeFalsy();
+      expect(instance.columnFilterButton).toBeFalsy();
+      expect(instance.dragColumns).toBeTruthy();
+      expect(instance.resizeColumns).toBeTruthy();
+      expect(instance.showLayoutOptions).toBeTruthy();
+      expect(instance.showReload).toBeTruthy();
+      expect(instance.columnsButton).toBeFalsy();
+      expect(instance.columnsButtonIgnore).toEqual([]);
+    });
+
+    it('should create new Grid replacing default values', () => {
+      const instance = new TekTreeGrid({
+        name: 'grid',
+        component: 'TekTreeGrid',
+        title: 'title',
+        addButton: true,
+        deleteButton: 'selection',
+        filterButton: true,
+        columnFilterButton: true,
+        dragColumns: false,
+        resizeColumns: false,
+        showLayoutOptions: false,
+        showReload: false,
+        columns: [
+          { name: 'id' },
+        ],
+        columnsButton: true,
+        columnsButtonIgnore: ['id'],
+      });
+      expect(instance.title).toBe('title');
+      expect(instance.addButton).toBeTruthy();
+      expect(instance.deleteButton).toBe('selection');
+      expect(instance.filterButton).toBeTruthy();
+      expect(instance.columnFilterButton).toBeTruthy();
+      expect(instance.dragColumns).toBeFalsy();
+      expect(instance.resizeColumns).toBeFalsy();
+      expect(instance.showLayoutOptions).toBeFalsy();
+      expect(instance.showReload).toBeFalsy();
+      expect(instance.columns[0]).toBeInstanceOf(TekGridColumn);
+      expect(instance.columnsButton).toBeTruthy();
+      expect(instance.columnsButtonIgnore).toEqual(['id']);
+    });
+
+    it('should create toolbar and footer', () => {
+      const instance = new TekTreeGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        title: 'title',
+        addButton: true,
+        deleteButton: 'selection',
+        filterButton: true,
+        columnFilterButton: true,
+        dragColumns: false,
+        resizeColumns: false,
+        showLayoutOptions: false,
+      });
+      instance.onCreated();
+      expect(instance.toolbarSlot.length).toBe(3);
+    });
+
+    it('should overwrite toolbar', () => {
+      const instance = new TekTreeGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        title: 'title',
+        addButton: true,
+        deleteButton: 'selection',
+        filterButton: true,
+        columnFilterButton: true,
+        dragColumns: false,
+        resizeColumns: false,
+        showLayoutOptions: false,
+        toolbarSlot: [],
+      });
+      instance.onCreated();
+      expect(instance.toolbarSlot.length).toBe(0);
+    });
+  });
+
+  describe('navigation', () => {
+    const dispatchEvent = (key: string, modifiers: any) => {
+      const event = new KeyboardEvent('keydown', modifiers);
+      delete (event as any).key;
+      Object.defineProperty(event, 'key', { value: key });
+      delete (event as any).code;
+      Object.defineProperty(event, 'code', { value: key });
+      document.dispatchEvent(event);
+    };
+
+    it('should open filter modal input with keymap', async () => {
+      const instance = new TekTreeGrid({
+        name: 'grid_navigation_2',
+        component: 'TekGrid',
+        filterButton: true,
+      });
+      const elem = document.createElement('DIV');
+
+      (KeyMap as any).isElementActive = () => true;
+
+      instance.onMounted(elem);
+      await flushPromises();
+
+      const method = jest.fn();
+
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => new TekGridFilterButton({
+        name: 'grid_navigation_2_filterButton',
+        component: 'TekGridFilterButton',
+        grid: instance,
+        events: {
+          click: method,
+        },
+      }));
+
+      dispatchEvent('l', { ctrlKey: true }); // ctrl+l keydown
+      await flushPromises();
+
+      instance.onBeforeDestroy();
+      await flushPromises();
+
+      expect(method).toHaveBeenCalled();
+      (KeyMap as any).isElementActive = () => false;
+      spyMetadata.mockReset();
+    });
+
+    it('should open action dropdown with keymap', async () => {
+      const instance = new TekTreeGrid({
+        name: 'grid_navigation_2',
+        component: 'TekTreeGrid',
+      });
+      const elem = document.createElement('DIV');
+
+      (KeyMap as any).isElementActive = () => true;
+
+      instance.onMounted(elem);
+      await flushPromises();
+
+      const instanceDropDown = new Dropdown({
+        name: 'grid_navigation_2_actions_dropdown',
+        component: 'ZdDropdown',
+        activator: {
+          name: 'grid_navigation_2_actionsButton',
+          component: 'ZdButton',
+        },
+        children: [],
+      });
+      const instanceDropDownSpy = jest.spyOn(instanceDropDown, 'setFocus').mockImplementation(() => true);
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => instanceDropDown);
+
+      dispatchEvent('enter', { ctrlKey: true, enterKey: true }); // ctrl + enter keydown
+      await flushPromises();
+
+      expect(spyMetadata).toHaveBeenCalled();
+      expect(instanceDropDownSpy).toHaveBeenCalled();
+
+      instance.onBeforeDestroy();
+      await flushPromises();
+
+      (KeyMap as any).isElementActive = () => false;
+      spyMetadata.mockReset();
+      instanceDropDownSpy.mockReset();
+    });
+
+    it('should focus in searchInput with keymap', async () => {
+      const instance = new TekTreeGrid({
+        name: 'grid_navigation_3',
+        component: 'TekTreeGrid',
+      });
+      const elem = document.createElement('DIV');
+
+      (KeyMap as any).isElementActive = () => true;
+      instance.onMounted(elem);
+      await flushPromises();
+
+      const searchInput = new Search({
+        name: 'grid_navigation_3_gridSearch',
+        component: 'ZdSearch',
+        parent: instance,
+      });
+
+      const spySetFocus = jest.spyOn(searchInput, 'setFocus').mockImplementation(() => true);
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => searchInput);
+
+      dispatchEvent('f', { ctrlKey: true }); // ctrl+f keydown
+      await flushPromises();
+
+      expect(spySetFocus).toHaveBeenCalled();
+
+      instance.onBeforeDestroy();
+      await flushPromises();
+
+      (KeyMap as any).isElementActive = () => false;
+      spySetFocus.mockReset();
+      spyMetadata.mockReset();
+    });
+  });
+  describe('filterClick()', () => {
+    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 TekTreeGrid({
+        name: 'grid_filterClick11',
+        component: 'TekTreeGrid',
+        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',
+            }],
+          },
+        ],
+      });
+
+      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 apply filter from form to datasource', () => {
+      let beforeApplyFilterCalled = false;
+      let changeLayoutCalled = false;
+      const instance = new TekTreeGrid({
+        name: 'grid_filterClick12',
+        component: 'TekTreeGrid',
+        columns: [
+          {
+            name: 'id',
+          },
+          {
+            name: 'name',
+          },
+        ],
+        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_filterClick12-filter-AND-CONTAINS-id-0': '1;2;3',
+        'grid_filterClick12-filter-AND-CONTAINS-name-0': 'teste',
+      };
+      const applyButtonObject = new Button(applyButton);
+      setClick(applyButtonObject, { defaultPrevented: true });
+      expect((instance.datasource as TekRestDatasource).filter).toEqual({
+        id: '1;2;3',
+        name: 'teste',
+      });
+      expect(beforeApplyFilterCalled).toBeTruthy();
+      expect(changeLayoutCalled).toBeTruthy();
+      expect(instance.columnHasFilterData({ name: 'name' } as TekGridColumn)).toBeTruthy();
+      expect(spyDatasourceGet).not.toBeCalled();
+      spyMetadata.mockReset();
+      spyDatasourceGet.mockReset();
+      spyModalService.mockReset();
+    });
+  });
+
+  describe('setSearch()', () => {
+    let baseProps: ITekTreeGrid;
+    let httpSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      httpSpy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
+        data: {
+          data: [
+            { id: 1, name: 'task 1' },
+            { id: 11, name: 'task 1.1', parent: 1 },
+            { id: 12, name: 'task 1.2', parent: 1 },
+            { id: 2, name: 'task 2' },
+            { id: 3, name: 'task 3' },
+          ],
+          pagination: {
+            page: 1,
+            total: 5,
+            limit: 15,
+          },
+        },
+      }));
+
+      baseProps = {
+        name: 'grid_search',
+        component: 'TekTreeGrid',
+        columns: [
+          {
+            name: 'id',
+          },
+          {
+            name: 'name',
+          },
+        ],
+        datasource: {
+          type: 'tek-rest',
+          lazyLoad: false,
+          route: '/grid',
+        },
+      };
+
+      httpSpy.mockClear();
+    });
+
+    afterAll(() => {
+      httpSpy.mockClear();
+    });
+
+    it('should set datasource search_join based on columns that have datasource', async () => {
+      const instance = new TekTreeGrid(baseProps);
+
+      await instance.setSearch('1');
+      expect(instance.datasource).toBeInstanceOf(TekRestDatasource);
+      expect((instance.datasource as TekRestDatasource).searchJoin).toEqual({});
+      expect(httpSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('getReport()', () => {
+    let httpReportSpy: jest.SpyInstance;
+    let reportSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      reportSpy = jest.spyOn(Report.prototype, 'getReport').mockReturnValue(Promise.resolve(''));
+      httpReportSpy = jest.spyOn(Http, 'post').mockImplementation((url) => {
+        if (url === 'https://zhreport.teknisa.com/generateReport') {
+          return Promise.resolve({
+            data: { messages: [{ message: 'pdf-report.html' }] },
+          });
+        }
+
+        return Promise.reject();
+      });
+    });
+
+    afterEach(() => {
+      reportSpy.mockClear();
+      httpReportSpy.mockClear();
+    });
+
+    it('should call window open on getReport method', async () => {
+      (window as any).open = jest.fn();
+
+      const instance = new TekTreeGrid({
+        name: 'grid',
+        component: 'TekTreeGrid',
+        events: {
+          beforeOpenReport: jest.fn(),
+        },
+        datasource: {
+          type: 'tek-rest',
+          uniqueKey: 'id',
+          route: '/zeedhi',
+          lazyLoad: false,
+          data: [
+            { id: '1', department_id: '1' },
+          ],
+        },
+        columns: [
+          {
+            name: 'id',
+            label: 'ID',
+          },
+          {
+            name: 'department_id',
+            label: 'Department ID',
+          },
+        ],
+      });
+
+      const spy = jest.spyOn(window, 'open');
+      await instance.getReport('pdf');
+
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      (window as any).open.mockClear();
+      spy.mockClear();
+    });
+
+    it('should call window open on getReport method when using tekmemorydatasource', async () => {
+      (window as any).open = jest.fn();
+
+      const instance = new TekTreeGrid({
+        name: 'grid',
+        component: 'TekTreeGrid',
+        events: {
+          beforeOpenReport: jest.fn(),
+        },
+        columns: [
+          {
+            name: 'id',
+            label: 'ID',
+          },
+          {
+            name: 'department_id',
+            label: 'Department ID',
+          },
+        ],
+      });
+
+      const spy = jest.spyOn(window, 'open');
+      await instance.getReport('pdf');
+
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      (window as any).open.mockClear();
+      spy.mockClear();
+    });
+  });
+
+  describe('rowClick', () => {
+    it('rowClick method should call events.rowClick', () => {
+      const rowClick = jest.fn();
+
+      const data = [
+        { id: '1', name: 'First' },
+        { id: '2', name: 'Second' },
+        { id: '3', name: 'Third' },
+      ];
+      const grid = new TekTreeGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+        ],
+        datasource: {
+          data,
+        },
+        events: {
+          rowClick,
+        },
+      });
+
+      const event = new Event('click');
+      const element = document.createElement('div');
+      grid.rowClick(data[0], event, element);
+
+      expect(rowClick).toHaveBeenCalledWith({
+        event,
+        element,
+        row: data[0],
+        component: grid,
+      });
+      expect(grid.datasource.currentRow).toEqual(data[0]);
+    });
+
+    it('should not call events.rowClick if cellClick prevents it', async () => {
+      const rowClick = jest.fn();
+
+      const data = [
+        { id: '1', name: 'First' },
+        { id: '2', name: 'Second' },
+        { id: '3', name: 'Third' },
+      ];
+      const grid = new TekTreeGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+        ],
+        datasource: {
+          data,
+        },
+        events: {
+          rowClick,
+          cellClick: () => true,
+        },
+      });
+      await flushPromises();
+
+      const event = new Event('click');
+      const element = document.createElement('div');
+      grid.cellClick(data[0], grid.getColumn('id') as any, event, element);
+      grid.rowClick(data[0], event, element);
+
+      expect(rowClick).not.toHaveBeenCalled();
+      expect(grid.datasource.currentRow).toEqual({});
+    });
+  });
+
+  describe('layoutOptions', () => {
+    it('should return layout options instance', async () => {
+      const grid = new TekTreeGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        showLayoutOptions: false,
+      });
+
+      expect(grid.layoutOptions).toBeUndefined();
+
+      grid.showLayoutOptions = true;
+      const layoutOptionsComp = { name: 'grid_layout_options' };
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => layoutOptionsComp);
+      expect(grid.layoutOptions).toEqual(layoutOptionsComp);
+      spyMetadata.mockClear();
+    });
+  });
+
+  describe('getAtomInstance', () => {
+    const createAtom = (name: string) => new Text({
+      name: `${name}_gridTitle`,
+      component: 'ZdText',
+      text: 'Employees',
+    });
+
+    it('when called, should return the instance of an atom component', () => {
+      const instance = new TekTreeGrid({ name: 'Grid', component: 'TekGrid' });
+      const atom = createAtom(instance.name);
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => atom);
+
+      const gridAtom = instance.getAtomInstance<Text>('TITLE');
+
+      expect(gridAtom).toEqual(atom);
+      spyMetadata.mockClear();
+    });
+  });
+
+  describe('getFilterInputs', () => {
+    const mockMetadata = (instance: TekTreeGrid) => {
+      const inputs: IDictionary = {};
+      instance.columns.forEach((col) => {
+        if (!col.filterable || !col.filterProps) return;
+
+        col.filterProps.forEach((filter: any, index: number) => {
+          const relation = filter.relation || 'AND';
+          const operation = filter.operation || 'CONTAINS';
+
+          const name = `${instance.name}-filter-${relation}-${operation}-${col.name}-${index}`;
+          inputs[name] = new TextInput({
+            name,
+            ...filter.filterProps,
+          });
+        });
+      });
+      return jest.spyOn(Metadata, 'getInstance').mockImplementation((name: string) => inputs[name]);
+    };
+
+    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 TekTreeGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+          uniqueKey: 'id',
+          route: '/zeedhi',
+          lazyLoad: false,
+        },
+        columns: [
+          { name: 'id' },
+          { name: 'name', filterable: true, filterProps: [{ name: 'name_edit', label: 'name' }] },
+          {
+            name: 'salary',
+            filterable: true,
+            filterProps: [
+              {
+                name: 'salary_edit',
+                component: 'ZdCurrency',
+                operation: 'GREATER_THAN_EQUALS',
+                label: 'Salary (min)',
+              },
+              {
+                name: 'salary_edit',
+                component: 'ZdCurrency',
+                operation: 'LESS_THAN_EQUALS',
+                label: 'Salary (max)',
+              },
+            ],
+          },
+        ],
+      });
+
+      const spy = mockMetadata(instance);
+      instance.onCreated();
+
+      const filterButton = clickOnFilterButton(instance);
+      filterButton.onCreated();
+
+      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();
+      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 TekTreeGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+          uniqueKey: 'id',
+          route: '/zeedhi',
+          lazyLoad: false,
+        },
+        columns: [
+          { name: 'id' },
+          { name: 'name', filterable: true, filterProps: [{ name: 'name_edit', label: 'name' }] },
+          {
+            name: 'salary',
+            filterable: true,
+            filterProps: [
+              {
+                name: 'salary_edit',
+                component: 'ZdCurrency',
+                operation: 'GREATER_THAN_EQUALS',
+                label: 'Salary (min)',
+              },
+              {
+                name: 'salary_edit',
+                component: 'ZdCurrency',
+                operation: 'LESS_THAN_EQUALS',
+                label: 'Salary (max)',
+              },
+            ],
+          },
+        ],
+      });
+
+      const spy = mockMetadata(instance);
+      instance.onCreated();
+
+      const filterButton = clickOnFilterButton(instance);
+      filterButton.onCreated();
+
+      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();
+      spyModalService.mockReset();
+    });
+  });
+});