@zeedhi/teknisa-components-common 1.117.1 → 3.0.1

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

@@ -1,3377 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-
-import {
-  Button, Dropdown, IModal, Modal, ModalService, Search, TextInput, Text, Report,
-  AlertService,
-  EmptyDataError,
-  IComponentRender,
-} from '@zeedhi/common';
-import {
-  KeyMap, Http, Metadata, IDictionary, IEventParam,
-  Datasource,
-  init,
-} from '@zeedhi/core';
-import {
-  ITekGrid,
-  ITekGridFilterButton,
-  ITekGridGroupFooter,
-  TekGrid, TekGridColumn, TekGridFilterButton, TekRestDatasource,
-} from '../../../../src';
-import { ReportFilter } from '../../../../src/utils';
-import { setClick, getChild } from '../../../__helpers__';
-import { flushPromises } from '../../../__helpers__/flush-promises-helper';
-import { TekGridDeleteRowsError } from '../../../../src/error/delete-rows-error';
-
-jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
-
-jest.useFakeTimers();
-
-class AppController {
-  public datasource = {
-    uniqueKey: 'id',
-    data: [{ id: '1' }],
-  };
-}
-
-const clickOnFilterButton = (grid: TekGrid, event?: any) => {
-  const buttonProps = getChild<ITekGridFilterButton>(grid.toolbarSlot, `${grid.name}_filterButton`);
-  const filterButton = new TekGridFilterButton(buttonProps);
-  setClick(filterButton, event);
-
-  return filterButton;
-};
-
-const createAndMount = (props: ITekGrid) => {
-  const instance = new TekGrid(props);
-  instance.onMounted({} as HTMLElement);
-  return instance;
-};
-
-const createGroupedGrid = async (props: Partial<ITekGrid> = {}) => {
-  const grid = createAndMount({
-    name: 'grid',
-    component: 'TekGrid',
-    columns: [
-      { name: 'id' },
-      { name: 'name' },
-      { name: 'month' },
-      { name: 'department', grouped: true },
-    ],
-    datasource: {
-      uniqueKey: 'id',
-      data: [
-        {
-          id: '1', name: 'First', month: 11, department: 1, salary: 10,
-        },
-        {
-          id: '2', name: 'Second', month: 11, department: 1, salary: 10,
-        },
-        {
-          id: '3', name: 'Third', month: 11, department: 2, salary: 10,
-        },
-        {
-          id: '4', name: 'Fourth', month: 12, department: 1, salary: 10,
-        },
-        {
-          id: '5', name: 'Fifth', month: 12, department: 2, salary: 10,
-        },
-      ],
-    },
-    ...props,
-  });
-
-  await flushPromises();
-  return grid;
-};
-
-const getNthFooter = (grid: TekGrid, n: number): ITekGridGroupFooter => {
-  const { groupedData } = grid;
-
-  return groupedData.filter((row) => row.groupFooter)[n] as ITekGridGroupFooter;
-};
-
-const getLastFooter = (grid: TekGrid) : ITekGridGroupFooter => {
-  const { groupedData } = grid;
-  return groupedData.filter((row) => row.groupFooter).reverse()[0] as ITekGridGroupFooter;
-};
-
-describe('TekGrid', () => {
-  beforeEach(() => {
-    // clear all metadata instances before testing
-    const { instances } = Metadata as any;
-    Object.keys(instances).forEach((key) => {
-      Metadata.clearInstance(key, instances[key].componentId);
-    });
-
-    jest.clearAllTimers();
-  });
-
-  describe('constructor()', () => {
-    it('should create new grid with default values', () => {
-      const instance = new TekGrid({ name: 'Grid', component: 'TekGrid' });
-      expect(instance.title).toBe('');
-      expect(instance.addButton).toBeFalsy();
-      expect(instance.deleteButton).toBe('none');
-      expect(instance.filterButton).toBeFalsy();
-      expect(instance.modalFilterProps).toEqual(
-        expect.objectContaining({
-          height: 'auto',
-          persistent: true,
-        }),
-      );
-      expect(instance.columnFilterButton).toBeFalsy();
-      expect(instance.dragColumns).toBeTruthy();
-      expect(instance.resizeColumns).toBeTruthy();
-      expect(instance.showLayoutOptions).toBeTruthy();
-      expect(instance.showSearch).toBeTruthy();
-      expect(instance.showSummaryTotal).toBeTruthy();
-      expect(instance.showReload).toBeTruthy();
-      expect(instance.columnsButton).toBeFalsy();
-      expect(instance.columnsButtonIgnore).toEqual([]);
-    });
-
-    it('should create new Grid replacing default values', () => {
-      const instance = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        title: 'title',
-        addButton: true,
-        deleteButton: 'selection',
-        filterButton: true,
-        modalFilterProps: {
-          name: 'teste',
-          height: 'auto',
-          persistent: false,
-          cssClass: 'class-test',
-          cssStyle: 'background: red',
-          draggable: true,
-          fullscreen: true,
-          light: false,
-          dark: true,
-        },
-        columnFilterButton: true,
-        dragColumns: false,
-        resizeColumns: false,
-        showLayoutOptions: false,
-        showSearch: false,
-        showSummaryTotal: 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.modalFilterProps).toEqual(
-        expect.objectContaining({
-          height: 'auto',
-          persistent: false,
-        }),
-      );
-      expect(instance.columnFilterButton).toBeTruthy();
-      expect(instance.dragColumns).toBeFalsy();
-      expect(instance.resizeColumns).toBeFalsy();
-      expect(instance.showLayoutOptions).toBeFalsy();
-      expect(instance.showSearch).toBeFalsy();
-      expect(instance.showSummaryTotal).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 TekGrid({
-        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 TekGrid({
-        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);
-    });
-
-    it('should change export buttons from exportConfig', () => {
-      const instance = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        exportConfig: [
-          {
-            type: 'pdf',
-            iconName: 'icon',
-            portrait: false,
-          },
-        ],
-      });
-
-      expect((instance as any).gridBase.exportConfigButtons[0].label).toBeUndefined();
-      expect((instance as any).gridBase.exportConfigButtons[0].iconName).toBe('icon');
-      expect((instance as any).gridBase.exportConfigButtons[0].name).toBe('grid_export_pdf_landscape');
-      expect((instance as any).gridBase.exportConfigButtons[0].component).toBe('ZdButton');
-      expect((instance as any).gridBase.exportConfigButtons[0].flat).toBeTruthy();
-      expect((instance as any).gridBase.exportConfigButtons[0].events).toBeDefined();
-    });
-
-    it('should create new TekGrid with accessor datasource', () => {
-      init({
-        controllers: {
-          AppController,
-        },
-      });
-      const instance = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        datasource: '{{AppController.datasource}}' as any,
-      });
-
-      expect(instance.datasource).toBeInstanceOf(Datasource);
-      expect(instance.datasource.data).toEqual([{ id: '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.mockReset();
-    });
-
-    it('should call window open on getReport method', async () => {
-      (window as any).open = jest.fn();
-
-      const instance = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        events: {
-          beforeOpenReport: jest.fn(),
-        },
-        columns: [
-          {
-            name: 'id',
-            label: 'ID',
-            aggregation: 'COUNT',
-          },
-          {
-            name: 'department_id',
-            label: 'Department ID',
-            grouped: true,
-          },
-        ],
-      });
-
-      const spy = jest.spyOn(window, 'open');
-      await instance.getReport('pdf');
-
-      expect(spy).toHaveBeenCalledTimes(1);
-
-      (window as any).open.mockClear();
-      spy.mockReset();
-    });
-
-    it('when reportLabelFormatter is defined, it should be passed to getReport', async () => {
-      (window as any).open = jest.fn();
-      const reportLabelFormatter = jest.fn();
-      const spy = jest.spyOn(Report.prototype, 'getReport').mockImplementationOnce(async () => '');
-
-      const instance = new TekGrid({
-        reportLabelFormatter,
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-            label: 'ID',
-            aggregation: 'COUNT',
-          },
-          {
-            name: 'department_id',
-            label: 'Department ID',
-            grouped: true,
-          },
-        ],
-      });
-
-      await instance.getReport('pdf');
-
-      expect(spy).toHaveBeenLastCalledWith('pdf', undefined, expect.any(Object), undefined, reportLabelFormatter);
-    });
-
-    it('when called with a dynamicFilter, should format the filter values', async () => {
-      (window as any).open = jest.fn();
-      const spy = jest.spyOn(Report.prototype, 'getReport').mockImplementationOnce(async () => '');
-      const instance = new TekGrid({
-        name: 'grid_getReport',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'department_id',
-            label: 'Department',
-            componentProps: {
-              component: 'ZdSelect',
-              name: 'select',
-              dataText: [
-                'id',
-                'name',
-              ],
-              dataValue: 'id',
-              datasource: {
-                uniqueKey: 'id',
-                data: [
-                  { id: 1, name: 'Department 1' },
-                  { id: 2, name: 'Department 2' },
-                ],
-              },
-            },
-          },
-          {
-            name: 'name',
-            label: 'Name',
-          },
-        ],
-        datasource: {
-          type: 'tek-rest',
-          route: '/employees',
-          lazyLoad: true,
-          dynamicFilter: {
-            department_id: [
-              {
-                relation: 'OR',
-                operation: 'EQUALS',
-                value: 1,
-              },
-              {
-                relation: 'OR',
-                operation: 'EQUALS',
-                value: 2,
-              },
-            ],
-            name: [
-              {
-                relation: 'OR',
-                operation: 'EQUALS',
-                value: 'Employee 1',
-              },
-            ],
-          },
-        },
-      });
-
-      const filter = new ReportFilter({
-        Department: [
-          {
-            relation: 'OR',
-            operation: 'EQUALS',
-            value: '1 | Department 1',
-          },
-          {
-            relation: 'OR',
-            operation: 'EQUALS',
-            value: '2 | Department 2',
-          },
-        ],
-        Name: [
-          {
-            relation: 'OR',
-            operation: 'EQUALS',
-            value: 'Employee 1',
-          },
-        ],
-      }).build();
-
-      await instance.getReport('pdf');
-
-      expect(spy).toHaveBeenLastCalledWith('pdf', undefined, expect.objectContaining({
-        metaData: expect.objectContaining({
-          filter,
-        }),
-      }), undefined, undefined);
-      (window as any).open.mockClear();
-      spy.mockReset();
-    });
-
-    it('when called with a dynamicFilter, should handle exceptions', async () => {
-      (window as any).open = jest.fn();
-      const spy = jest.spyOn(Report.prototype, 'getReport').mockImplementationOnce(async () => '');
-      const instance = new TekGrid({
-        name: 'grid_getReport',
-        component: 'TekGrid',
-        datasource: {
-          type: 'tek-rest',
-          route: '/employees',
-          lazyLoad: true,
-          dynamicFilter: {
-            invisible_column: [
-              {
-                relation: 'OR',
-                operation: 'EQUALS',
-                value: 1,
-              },
-            ],
-          },
-        },
-      });
-
-      const getReport = async () => { await instance.getReport('pdf'); };
-
-      expect(getReport).not.toThrow();
-
-      const getColumnSpy = jest.spyOn(instance, 'getColumn').mockImplementationOnce(() => {
-        throw Error();
-      });
-
-      expect(getReport()).rejects.toEqual(new Error());
-
-      (window as any).open.mockClear();
-      spy.mockReset();
-      getColumnSpy.mockReset();
-    });
-
-    it('should call getReport always with "xls" when there is no group', async () => {
-      (window as any).open = jest.fn();
-
-      const instance = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-            label: 'ID',
-          },
-          {
-            name: 'department_id',
-            label: 'Department ID',
-          },
-        ],
-      });
-
-      await instance.getReport('xls2');
-
-      expect(reportSpy).toHaveBeenCalledWith('xls', undefined, {
-        metaData: {
-          columns: {}, filter: undefined, groups: [], xlsDefaultType: undefined,
-        },
-      }, undefined, undefined);
-    });
-
-    it('when data is empty, should show alert', async () => {
-      reportSpy = jest.spyOn(Report.prototype, 'getReport').mockImplementation(() => { throw new EmptyDataError(); });
-      const alertSpy = jest.spyOn(AlertService, 'show').mockImplementation(() => 1);
-
-      const instance = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        datasource: {
-          data: [],
-        },
-      });
-
-      expect(async () => instance.getReport('xls2')).not.toThrow();
-
-      expect(alertSpy).toHaveBeenCalledWith({ name: 'no-data-warning', text: 'TEKGRID_NO_DATA', color: 'warning' });
-    });
-
-    it('when an error happens, should throw normally', async () => {
-      reportSpy = jest.spyOn(Report.prototype, 'getReport').mockImplementation(() => { throw new Error(); });
-
-      const instance = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        datasource: {
-          data: [],
-        },
-      });
-
-      expect(async () => instance.getReport('xls2')).rejects.toThrow();
-    });
-  });
-
-  describe('saveChanges()', () => {
-    it('should call saveEditedRows', () => {
-      const instance = new TekGrid({
-        name: 'grid_saveChanges1',
-        component: 'TekGrid',
-      });
-
-      const spy = jest.spyOn(instance, 'saveEditedRows');
-      instance.onCreated();
-      const toolbarDiv = instance.toolbarSlot[2];
-      if (toolbarDiv.children) {
-        const button = new Button(toolbarDiv.children[10]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        expect(spy).toBeCalled();
-        expect(button.isVisible).toBeFalsy();
-        spy.mockReset();
-      }
-    });
-
-    it('should call events', () => {
-      let beforeSaveCalled = false;
-      let afterSaveCalled = false;
-      const instance = new TekGrid({
-        name: 'grid_saveChanges2',
-        component: 'TekGrid',
-        events: {
-          beforeSave: () => { beforeSaveCalled = true; },
-          afterSave: () => { afterSaveCalled = true; },
-        },
-      });
-
-      instance.onCreated();
-      const toolbarDiv = instance.toolbarSlot[2];
-      if (toolbarDiv.children) {
-        const button = new Button(toolbarDiv.children[10]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        expect(beforeSaveCalled).toBeTruthy();
-        expect(afterSaveCalled).toBeTruthy();
-      }
-    });
-
-    it('should not call saveEditedRows if beforeSave call preventDefault', () => {
-      let beforeSaveCalled = false;
-      let afterSaveCalled = false;
-      const instance = new TekGrid({
-        name: 'grid_saveChanges3',
-        component: 'TekGrid',
-        events: {
-          beforeSave: () => { beforeSaveCalled = true; },
-          afterSave: () => { afterSaveCalled = true; },
-        },
-      });
-
-      const spy = jest.spyOn(instance, 'saveEditedRows');
-      instance.onCreated();
-      const toolbarDiv = instance.toolbarSlot[2];
-      if (toolbarDiv.children) {
-        const button = new Button(toolbarDiv.children[10]);
-        button.click({ defaultPrevented: true } as Event, {} as HTMLElement);
-        expect(beforeSaveCalled).toBeTruthy();
-        expect(afterSaveCalled).toBeFalsy();
-        expect(spy).not.toBeCalled();
-        spy.mockReset();
-      }
-    });
-  });
-
-  describe('cancelChanges()', () => {
-    it('should call cancelEditedRows', () => {
-      const instance = new TekGrid({
-        name: 'grid_cancelChanges1',
-        component: 'TekGrid',
-      });
-
-      const spy = jest.spyOn(instance, 'cancelEditedRows');
-      instance.onCreated();
-      const toolbarDiv = instance.toolbarSlot[2];
-      if (toolbarDiv.children) {
-        const button = new Button(toolbarDiv.children[11]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        expect(spy).toBeCalled();
-        expect(button.isVisible).toBeFalsy();
-        spy.mockReset();
-      }
-    });
-
-    it('should call events', () => {
-      let beforeCancelCalled = false;
-      let afterCancelCalled = false;
-      const instance = new TekGrid({
-        name: 'grid_cancelChanges2',
-        component: 'TekGrid',
-        events: {
-          beforeCancel: () => { beforeCancelCalled = true; },
-          afterCancel: () => { afterCancelCalled = true; },
-        },
-      });
-
-      instance.onCreated();
-      const toolbarDiv = instance.toolbarSlot[2];
-      if (toolbarDiv.children) {
-        const button = new Button(toolbarDiv.children[11]);
-        const event = new Event('click');
-        button.click(event, {} as HTMLElement);
-        expect(beforeCancelCalled).toBeTruthy();
-        expect(afterCancelCalled).toBeTruthy();
-      }
-    });
-
-    it('should not call cancelEditedRows if beforeSave call preventDefault', () => {
-      let beforeCancelCalled = false;
-      let afterCancelCalled = false;
-      const instance = new TekGrid({
-        name: 'grid_cancelChanges3',
-        component: 'TekGrid',
-        events: {
-          beforeCancel: () => { beforeCancelCalled = true; },
-          afterCancel: () => { afterCancelCalled = true; },
-        },
-      });
-
-      const spy = jest.spyOn(instance, 'cancelEditedRows');
-      instance.onCreated();
-      const toolbarDiv = instance.toolbarSlot[2];
-      if (toolbarDiv.children) {
-        const button = new Button(toolbarDiv.children[11]);
-        button.click({ defaultPrevented: true } as Event, {} as HTMLElement);
-        expect(beforeCancelCalled).toBeTruthy();
-        expect(afterCancelCalled).toBeFalsy();
-        expect(spy).not.toBeCalled();
-        spy.mockReset();
-      }
-    });
-  });
-
-  describe('addButtonClick()', () => {
-    it('should call event', () => {
-      let addClickCalled = false;
-      const instance = new TekGrid({
-        name: 'grid_addClick1',
-        component: 'TekGrid',
-        addButton: true,
-        editNewRowsOnly: true,
-      });
-
-      instance.onCreated();
-      const toolbarDiv = instance.toolbarSlot[2];
-      if (toolbarDiv.children) {
-        const notEditingSpan = toolbarDiv.children[0];
-        if (notEditingSpan && notEditingSpan.children && notEditingSpan.children.length > 0) {
-          const addTooltip = notEditingSpan.children[0];
-          if (addTooltip && addTooltip.children && addTooltip.children.length > 0) {
-            const addButton = addTooltip.children[0];
-            const button = new Button(addButton);
-            const event = new Event('click');
-            button.click(event, {} as HTMLElement);
-            expect(addClickCalled).toBeFalsy();
-            instance.events = {
-              addClick: () => { addClickCalled = true; },
-            };
-            expect(instance.editingNewRows).toBeTruthy();
-            button.click(event, {} as HTMLElement);
-            expect(addClickCalled).toBeTruthy();
-            expect(button.isVisible).toBeTruthy();
-          }
-        }
-      }
-    });
-  });
-
-  describe('hideButtonClick', () => {
-    it('deve alternar as classes para o estado "escondido" quando a toolbar está visível', () => {
-      const instance = new TekGrid({
-        name: 'grid_hide_test',
-        component: 'TekGrid',
-      });
-      instance.onCreated();
-
-      const mockToolbarDiv = { cssClass: 'toolbar-visible' };
-      const mockIcon = { cssClass: '' };
-      const mockTooltip = { label: 'TEKGRID_HIDE' };
-
-      jest.spyOn(Metadata, 'getInstance').mockImplementation((name: string) => {
-        if (name.includes('_toolbarDiv')) return mockToolbarDiv;
-        if (name.includes('_hideButton')) return mockIcon;
-        if (name.includes('_hideTooltip')) return mockTooltip;
-        return null;
-      });
-
-      const hideTooltip = instance.toolbarSlot[1];
-      const hideButtonDef = hideTooltip.children![0];
-      const button = new Button(hideButtonDef);
-      const event = new Event('click');
-
-      button.click(event, {} as HTMLElement);
-
-      expect(mockToolbarDiv.cssClass).toBe('');
-      expect(mockIcon.cssClass).toBe('is-rotated');
-      expect(mockTooltip.label).toBe('TEKGRID_SHOW');
-    });
-
-    it('deve alternar as classes de volta para o estado "visível" quando a toolbar está escondida', () => {
-      const instance = new TekGrid({
-        name: 'grid_show_test',
-        component: 'TekGrid',
-      });
-      instance.onCreated();
-
-      const mockToolbarDiv = { cssClass: '' };
-      const mockIcon = { cssClass: 'is-rotated' };
-      const mockTooltip = { label: 'TEKGRID_SHOW' };
-
-      jest.spyOn(Metadata, 'getInstance').mockImplementation((name: string) => {
-        if (name.includes('_toolbarDiv')) return mockToolbarDiv;
-        if (name.includes('_hideButton')) return mockIcon;
-        if (name.includes('_hideTooltip')) return mockTooltip;
-        return null;
-      });
-
-      const hideTooltip = instance.toolbarSlot[1];
-      const hideButtonDef = hideTooltip.children![0];
-      const button = new Button(hideButtonDef);
-      const event = new Event('click');
-
-      button.click(event, {} as HTMLElement);
-
-      expect(mockToolbarDiv.cssClass).toBe('toolbar-visible');
-      expect(mockIcon.cssClass).toBe('');
-      expect(mockTooltip.label).toBe('TEKGRID_HIDE');
-    });
-  });
-
-  describe('deleteButtonClick()', () => {
-    it('should call deleteRows', () => {
-      const instance = new TekGrid({
-        name: 'grid_deleteButtonClick1',
-        component: 'TekGrid',
-        deleteButton: 'currentRow',
-      });
-
-      const spy = jest.spyOn(instance, 'deleteRows');
-      instance.onCreated();
-      const notEditingTag = instance.toolbarSlot[2];
-      if (notEditingTag.children) {
-        const notEditingSpan = notEditingTag.children[0];
-        if (notEditingSpan && notEditingSpan.children && notEditingSpan.children.length > 1) {
-          const deleteTooltip = notEditingSpan.children[1];
-          if (deleteTooltip && deleteTooltip.children && deleteTooltip.children.length > 0) {
-            const deleteButton = deleteTooltip.children[0];
-            const button = new Button(deleteButton);
-            const event = new Event('click');
-            button.click(event, {} as HTMLElement);
-            expect(spy).toBeCalled();
-            expect(button.isVisible).toBeTruthy();
-            expect(button.disabled).toBeTruthy();
-          }
-        }
-      }
-      spy.mockReset();
-    });
-
-    it('should call events', () => {
-      let beforeDeleteCalled = false;
-      let afterDeleteCalled = false;
-      const instance = new TekGrid({
-        name: 'grid_deleteClick2',
-        component: 'TekGrid',
-        events: {
-          beforeDelete: () => { beforeDeleteCalled = true; },
-          afterDelete: () => { afterDeleteCalled = true; },
-        },
-      });
-
-      instance.onCreated();
-      const notEditingSpan = instance.toolbarSlot[2];
-      if (notEditingSpan && notEditingSpan.children && notEditingSpan.children.length > 1) {
-        const deleteTooltip = notEditingSpan.children[1];
-        if (deleteTooltip && deleteTooltip.children && deleteTooltip.children.length > 0) {
-          const deleteButton = deleteTooltip.children[0];
-          const button = new Button(deleteButton);
-          const event = new Event('click');
-          button.click(event, {} as HTMLElement);
-          expect(beforeDeleteCalled).toBeTruthy();
-          expect(afterDeleteCalled).toBeTruthy();
-        }
-      }
-    });
-
-    it('should not call cancelEditedRows if beforeSave call preventDefault', () => {
-      let beforeDeleteCalled = false;
-      let afterDeleteCalled = false;
-      const instance = new TekGrid({
-        name: 'grid_deleteClick3',
-        component: 'TekGrid',
-        events: {
-          beforeDelete: () => { beforeDeleteCalled = true; },
-          afterDelete: () => { afterDeleteCalled = true; },
-        },
-      });
-
-      const spy = jest.spyOn(instance, 'cancelEditedRows');
-      instance.onCreated();
-      const notEditingSpan = instance.toolbarSlot[2];
-      if (notEditingSpan && notEditingSpan.children && notEditingSpan.children.length > 1) {
-        const deleteTooltip = notEditingSpan.children[0];
-        if (deleteTooltip.children) {
-          const teste = deleteTooltip.children[1];
-          if (teste && teste.children && teste.children.length > 0) {
-            const deleteButton = teste.children[0];
-            const button = new Button(deleteButton);
-            button.click({ defaultPrevented: true } as Event, {} as HTMLElement);
-            expect(beforeDeleteCalled).toBeTruthy();
-            expect(afterDeleteCalled).toBeFalsy();
-            expect(spy).not.toBeCalled();
-          }
-        }
-      }
-      spy.mockReset();
-    });
-
-    it('when deleteButton is clicked with selectAllPages, should throw', () => {
-      const instance = new TekGrid({
-        name: 'grid_deleteButtonClick1',
-        component: 'TekGrid',
-        deleteButton: 'selection',
-        selectAllPages: true,
-        datasource: {
-          data: [{ id: '1' }],
-        },
-      });
-
-      instance.onCreated();
-      const notEditingSpan = instance.toolbarSlot[2];
-      if (notEditingSpan && notEditingSpan.children && notEditingSpan.children.length > 1) {
-        const deleteTooltip = notEditingSpan.children[0];
-        if (deleteTooltip.children) {
-          const teste = deleteTooltip.children[1];
-          if (teste && teste.children && teste.children.length > 0) {
-            const deleteButton = teste.children[0];
-            const button = new Button(deleteButton);
-            const event = new Event('click');
-            expect(button.isVisible).toBeTruthy();
-            expect(button.disabled).toBeTruthy();
-            instance.selectAll(true);
-            expect(button.disabled).toBeFalsy();
-            expect(() => button.click(event, {} as HTMLElement)).toThrow();
-          }
-        }
-      }
-    });
-  });
-
-  describe('disableDeleteButton', () => {
-    it('should not disable deleteButton when deleteButton equals none', () => {
-      const instance = new TekGrid({
-        name: 'grid_deleteButtonClick1',
-        component: 'TekGrid',
-        deleteButton: 'none',
-      });
-
-      instance.onCreated();
-      const notEditingSpan = instance.toolbarSlot[2];
-      if (notEditingSpan && notEditingSpan.children && notEditingSpan.children.length > 1) {
-        const deleteTooltip = notEditingSpan.children[0];
-        if (deleteTooltip.children) {
-          const test = deleteTooltip.children[1];
-          if (test && test.children && test.children.length > 0) {
-            const deleteButton = test.children[0];
-            const button = new Button(deleteButton);
-            expect(button.isVisible).toBeFalsy();
-            expect(button.disabled).toBeFalsy();
-          }
-        }
-      }
-    });
-  });
-
-  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 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 instance = new TekGrid({
-        name: 'grid_navigation_1',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-          },
-          {
-            name: 'name',
-            label: 'name',
-          },
-          {
-            name: 'department',
-            label: 'department',
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          order: ['name.asc'],
-          data: [
-            { id: 2, name: 'employee 2', department: 1 },
-            { id: 5, name: 'employee 5', department: 2 },
-            { id: 4, name: 'employee 4', department: 2 },
-            { id: 3, name: 'employee 3', department: 1 },
-            { id: 1, name: 'employee 1', department: 1 },
-          ],
-        },
-      });
-
-      await flushPromises();
-
-      const elem = document.createElement('DIV');
-      (KeyMap as any).isElementActive = () => true;
-      instance.onCreated();
-      instance.onMounted(elem);
-      instance.navigateDatasource(false);
-      expect(instance.datasource.currentRow).toEqual(instance.datasource.data[0]);
-
-      instance.navigateDatasource(false);
-      expect(instance.datasource.currentRow).toEqual(instance.datasource.data[1]);
-
-      instance.navigateDatasource(true);
-      expect(instance.datasource.currentRow).toEqual(instance.datasource.data[0]);
-
-      dispatchEvent('arrowright', {}); // arrow right
-      expect(instance.datasource.currentRow).toEqual(instance.datasource.data[0]);
-
-      dispatchEvent('arrowleft', {}); // arrow left
-      expect(instance.datasource.currentRow).toEqual(instance.datasource.data[0]);
-
-      httpSpy.mockReset();
-    });
-
-    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 instance = new TekGrid({
-        name: 'grid_navigation_2',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-          },
-          {
-            name: 'name',
-            label: 'name',
-          },
-          {
-            name: 'department',
-            label: 'department',
-            grouped: true,
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          order: ['name.asc'],
-          data: [
-            { id: 2, name: 'employee 2', department: 1 },
-            { id: 5, name: 'employee 5', department: 2 },
-            { id: 4, name: 'employee 4', department: 2 },
-            { id: 3, name: 'employee 3', department: 1 },
-            { id: 1, name: 'employee 1', department: 1 },
-          ],
-        },
-      });
-
-      const elem = document.createElement('DIV');
-      (KeyMap as any).isElementActive = () => true;
-      instance.onCreated();
-      instance.onMounted(elem);
-
-      await flushPromises();
-
-      dispatchEvent('arrowdown', {}); // arrow down
-      expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
-
-      dispatchEvent('arrowdown', {}); // arrow down
-      expect(instance.datasource.currentRow).toEqual(instance.groupedData[4]);
-
-      dispatchEvent('arrowdown', {}); // arrow down
-      expect(instance.datasource.currentRow).toEqual(instance.groupedData[4]);
-
-      dispatchEvent('arrowup', {}); // arrow up
-      expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
-
-      dispatchEvent('arrowup', {}); // arrow up
-      expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
-
-      instance.datasource.currentRow = {};
-      dispatchEvent('arrowup', {}); // arrow up
-      expect(instance.datasource.currentRow).toEqual(instance.groupedData[4]);
-
-      [instance.datasource.currentRow] = instance.groupedData;
-      expect(instance.datasource.currentRow.groupOpened).toBeFalsy();
-      dispatchEvent('arrowright', {}); // arrow right
-      expect(instance.datasource.currentRow.groupOpened).toBeTruthy();
-
-      dispatchEvent('arrowdown', {}); // arrow down
-      expect(instance.datasource.currentRow).toEqual(instance.groupedData[1]);
-
-      dispatchEvent('arrowdown', {}); // arrow down
-      expect(instance.datasource.currentRow).toEqual(instance.groupedData[2]);
-
-      dispatchEvent('arrowup', {}); // arrow up
-      expect(instance.datasource.currentRow).toEqual(instance.groupedData[1]);
-
-      dispatchEvent('arrowleft', {}); // arrow left
-      expect(instance.datasource.currentRow).toEqual(instance.groupedData[0]);
-
-      expect(instance.datasource.currentRow.groupOpened).toBeTruthy();
-      dispatchEvent('arrowleft', {}); // arrow left
-      expect(instance.datasource.currentRow.groupOpened).toBeFalsy();
-
-      [, , , , instance.datasource.currentRow] = instance.groupedData;
-      expect(instance.datasource.currentRow.groupOpened).toBeFalsy();
-      dispatchEvent('arrowright', {}); // arrow right
-      expect(instance.datasource.currentRow.groupOpened).toBeTruthy();
-
-      dispatchEvent('arrowdown', {}); // arrow down
-      expect(instance.datasource.currentRow).toEqual(instance.groupedData[5]);
-
-      dispatchEvent('arrowdown', {}); // arrow down
-      expect(instance.datasource.currentRow).toEqual(instance.groupedData[6]);
-
-      dispatchEvent('arrowdown', {}); // arrow down
-      expect(instance.datasource.currentRow).toEqual(instance.groupedData[6]);
-
-      httpSpy.mockReset();
-    });
-
-    it('should open filter modal input with keymap', async () => {
-      const instance = new TekGrid({
-        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 filterButton = new TekGridFilterButton({
-        name: 'grid_navigation_2_filterButton',
-        component: 'TekGridFilterButton',
-        grid: instance,
-        events: {
-          click: method,
-        },
-      });
-
-      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => filterButton);
-      filterButton.onCreated();
-
-      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 TekGrid({
-        name: 'grid_navigation_2',
-        component: 'TekGrid',
-      });
-      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 TekGrid({
-        name: 'grid_navigation_3',
-        component: 'TekGrid',
-      });
-      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();
-    });
-
-    it('when using cellSelection, should use viewNavigate', async () => {
-      const instance = new TekGrid({
-        name: 'grid_navigation_1',
-        component: 'TekGrid',
-        cellSelection: true,
-        columns: [
-          {
-            name: 'name',
-            grouped: true,
-          },
-        ],
-      });
-
-      const elem = document.createElement('DIV');
-      (KeyMap as any).isElementActive = () => true;
-      instance.onCreated();
-      instance.onMounted(elem);
-
-      await flushPromises();
-      const spy = jest.fn();
-      instance.setViewNavigate(spy);
-
-      instance.navigateUp();
-
-      expect(spy).toHaveBeenLastCalledWith('up');
-
-      instance.navigateDown();
-
-      expect(spy).toHaveBeenLastCalledWith('down');
-    });
-  });
-
-  describe('reloadClick()', () => {
-    it('should call event', () => {
-      const instance = new TekGrid({
-        name: 'grid_reloadClick1',
-        component: 'TekGrid',
-      });
-
-      const spy = jest.spyOn(instance, 'reload');
-      instance.onCreated();
-      const notEditingTag = instance.toolbarSlot[2];
-      if (notEditingTag.children) {
-        const notEditingSpan = notEditingTag.children[0];
-        if (notEditingSpan && notEditingSpan.children && notEditingSpan.children.length > 3) {
-          const reloadTooltip = notEditingSpan.children[3];
-          if (reloadTooltip && reloadTooltip.children && reloadTooltip.children.length > 0) {
-            const reloadButton = reloadTooltip.children[0];
-            const button = new Button(reloadButton);
-            const event = new Event('click');
-            button.click(event, {} as HTMLElement);
-            expect(spy).toBeCalled();
-          }
-        }
-      }
-      spy.mockReset();
-    });
-
-    it('should call beforeReload event', () => {
-      const beforeSpy = jest.fn();
-      const instance = new TekGrid({
-        name: 'grid_reloadClick2',
-        component: 'TekGrid',
-        events: {
-          beforeReload: beforeSpy,
-        },
-      });
-
-      const spy = jest.spyOn(instance, 'reload');
-      instance.onCreated();
-      const notEditingTag = instance.toolbarSlot[2];
-      if (notEditingTag.children) {
-        const notEditingSpan = notEditingTag.children[0];
-        if (notEditingSpan && notEditingSpan.children && notEditingSpan.children.length > 3) {
-          const reloadTooltip = notEditingSpan.children[3];
-          if (reloadTooltip && reloadTooltip.children && reloadTooltip.children.length > 0) {
-            const reloadButton = reloadTooltip.children[0];
-            const button = new Button(reloadButton);
-            setClick(button, { defaultPrevented: true });
-            expect(beforeSpy).toBeCalled();
-            expect(spy).not.toBeCalled();
-          }
-        }
-      }
-      spy.mockReset();
-    });
-  });
-
-  describe('grouping', () => {
-    it('should group data based on columns that have grouped property', async () => {
-      const instance = createAndMount({
-        name: 'grid_grouping_1',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-          },
-          {
-            name: 'name',
-            label: 'name',
-          },
-          {
-            name: 'department',
-            label: 'department',
-            grouped: true,
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          order: ['name.asc'],
-          data: [
-            { id: 2, name: 'employee 2', department: 1 },
-            { id: 5, name: 'employee 5', department: 2 },
-            { id: 4, name: 'employee 4', department: 2 },
-            { id: 3, name: 'employee 3', department: 1 },
-            { id: 1, name: 'employee 1', department: 1 },
-          ],
-        },
-      });
-
-      await flushPromises();
-
-      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', () => {
-      const spy = jest.spyOn(TekGrid.prototype, 'updateGroupedData');
-      const instance = createAndMount({
-        name: 'grid_grouping_1',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-          },
-          {
-            name: 'name',
-            label: 'name',
-          },
-          {
-            name: 'department',
-            label: 'department',
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          order: ['name.asc'],
-          data: [
-            { id: 2, name: 'employee 2', department: 1 },
-            { id: 5, name: 'employee 5', department: 2 },
-            { id: 4, name: 'employee 4', department: 2 },
-            { id: 3, name: 'employee 3', department: 1 },
-            { id: 1, name: 'employee 1', department: 1 },
-          ],
-        },
-      });
-
-      jest.runAllTimers();
-
-      instance.columns[2].grouped = true;
-
-      expect(spy).toHaveBeenCalled();
-
-      spy.mockClear();
-    });
-
-    it('should group data with aggregations', async () => {
-      const instance = createAndMount({
-        name: 'grid_aggregate_1',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-            aggregation: 'COUNT',
-          },
-          {
-            name: 'name',
-            label: 'name',
-          },
-          {
-            name: 'department',
-            label: 'department',
-            grouped: true,
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          order: ['name.asc'],
-          data: [
-            { id: 2, name: 'employee 2', department: 1 },
-            { id: 5, name: 'employee 5', department: 2 },
-            { id: 4, name: 'employee 4', department: 2 },
-            { id: 3, name: 'employee 3', department: 1 },
-            { id: 1, name: 'employee 1', department: 1 },
-          ],
-        },
-      });
-
-      await flushPromises();
-
-      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 () => {
-      let viewUpdateScrollDataCalled = false;
-
-      const instance = createAndMount({
-        name: 'grid_grouping_2',
-        component: 'TekGrid',
-        virtualScroll: true,
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-          },
-          {
-            name: 'name',
-            label: 'name',
-          },
-          {
-            name: 'department',
-            label: 'department',
-            grouped: true,
-          },
-          {
-            name: 'boss',
-            label: 'boss',
-            groupLabelForEmptyValue: 'boss',
-            grouped: true,
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          order: ['name.asc'],
-          data: [
-            {
-              id: 2, name: 'employee 2', department: 1, boss: 1,
-            },
-            {
-              id: 5, name: 'employee 5', department: 2, boss: 4,
-            },
-            { id: 4, name: 'employee 4', department: 2 },
-            {
-              id: 3, name: 'employee 3', department: 1, boss: 1,
-            },
-            { id: 1, name: 'employee 1', department: 1 },
-          ],
-        },
-      });
-
-      await flushPromises();
-
-      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 instance = createAndMount({
-        name: 'grid_aggredate_2',
-        component: 'TekGrid',
-        showSummaryTotal: false,
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-            aggregation: 'COUNT',
-          },
-          {
-            name: 'name',
-            label: 'name',
-          },
-          {
-            name: 'salary',
-            label: 'salary',
-            aggregation: 'SUM',
-          },
-          {
-            name: 'department',
-            label: 'department',
-            grouped: true,
-          },
-          {
-            name: 'boss',
-            label: 'boss',
-            groupLabelForEmptyValue: 'boss',
-            grouped: true,
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          order: ['name.asc'],
-          data: [
-            {
-              id: 2, name: 'employee 2', salary: 10, department: 1, boss: 1,
-            },
-            {
-              id: 5, name: 'employee 5', salary: 10, department: 2, boss: 4,
-            },
-            {
-              id: 4, name: 'employee 4', salary: 10, department: 2,
-            },
-            {
-              id: 3, name: 'employee 3', salary: 10, department: 1, boss: 1,
-            },
-            {
-              id: 1, name: 'employee 1', salary: 10, department: 1,
-            },
-          ],
-        },
-      });
-
-      await flushPromises();
-
-      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 instance = createAndMount({
-        name: 'grid_aggredate_3',
-        component: 'TekGrid',
-        showSummaryTotal: true,
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-            aggregation: 'COUNT',
-          },
-          {
-            name: 'name',
-            label: 'name',
-          },
-          {
-            name: 'salary',
-            label: 'salary',
-            aggregation: 'SUM',
-          },
-          {
-            name: 'department',
-            label: 'department',
-          },
-          {
-            name: 'boss',
-            label: 'boss',
-            groupLabelForEmptyValue: 'boss',
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          order: ['name.asc'],
-          data: [
-            {
-              id: 2, name: 'employee 2', salary: 10, department: 1, boss: 1,
-            },
-            {
-              id: 5, name: 'employee 5', salary: 10, department: 2, boss: 4,
-            },
-            {
-              id: 4, name: 'employee 4', salary: 10, department: 2,
-            },
-            {
-              id: 3, name: 'employee 3', salary: 10, department: 1, boss: 1,
-            },
-            {
-              id: 1, name: 'employee 1', salary: 10, department: 1,
-            },
-          ],
-        },
-      });
-
-      await flushPromises();
-
-      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 aggregate with different functions', async () => {
-      const instance = createAndMount({
-        name: 'grid_aggregate_4',
-        component: 'TekGrid',
-        showSummaryTotal: true,
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-          },
-          {
-            name: 'column_sum',
-            label: 'sum',
-            aggregation: 'SUM',
-          },
-          {
-            name: 'column_min',
-            label: 'min',
-            aggregation: 'MIN',
-          },
-          {
-            name: 'column_max',
-            label: 'max',
-            aggregation: 'MAX',
-          },
-          {
-            name: 'column_avg',
-            label: 'avg',
-            aggregation: 'AVG',
-          },
-          {
-            name: 'column_count',
-            label: 'count',
-            aggregation: 'COUNT',
-          },
-          {
-            name: 'department',
-            label: 'department',
-            grouped: true,
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          data: [
-            {
-              id: 1, department: 1, column_sum: 10, column_min: 10, column_max: '10', column_avg: 10, column_count: 10,
-            },
-            {
-              id: 2, department: 1, column_sum: 20, column_min: 20, column_max: '20', column_avg: 20, column_count: 20,
-            },
-            {
-              id: 3, department: 1, column_sum: 100, column_min: 100, column_max: '100', column_avg: 100, column_count: 100,
-            },
-            {
-              id: 4, department: 1, column_min: 5, column_max: '5', column_avg: 5,
-            },
-          ],
-        },
-      });
-
-      await flushPromises();
-
-      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 aggregate using calcSummary event', async () => {
-      const doCalcSummary = ({ summary, rowValue }: IEventParam<any>) => {
-        summary.sum = `${(summary.sum || '')}${rowValue}`;
-        summary.avg = `${summary.sum}/${summary.count}`;
-        summary.max = summary.max === undefined || summary.max < rowValue ? rowValue : summary.max;
-        summary.min = summary.min === undefined || summary.min > rowValue ? rowValue : summary.min;
-      };
-
-      const instance = createAndMount({
-        name: 'grid_aggregate_5',
-        component: 'TekGrid',
-        showSummaryTotal: true,
-        events: {
-          calcSummary: doCalcSummary,
-        },
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-          },
-          {
-            name: 'column_sum',
-            label: 'sum',
-            aggregation: 'SUM',
-          },
-          {
-            name: 'column_min',
-            label: 'min',
-            aggregation: 'MIN',
-          },
-          {
-            name: 'column_max',
-            label: 'max',
-            aggregation: 'MAX',
-          },
-          {
-            name: 'column_avg',
-            label: 'avg',
-            aggregation: 'AVG',
-          },
-          {
-            name: 'column_count',
-            label: 'count',
-            aggregation: 'COUNT',
-          },
-          {
-            name: 'department',
-            label: 'department',
-            grouped: true,
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          data: [
-            {
-              id: 1, department: 1, column_sum: 'd', column_min: 'd', column_max: 'd', column_avg: 'd', column_count: 'd',
-            },
-            {
-              id: 2, department: 1, column_sum: 'b', column_min: 'b', column_max: 'b', column_avg: 'b', column_count: 'b',
-            },
-            {
-              id: 3, department: 1, column_sum: 'a', column_min: 'a', column_max: 'a', column_avg: 'a', column_count: 'a',
-            },
-            {
-              id: 4, department: 1, column_sum: 'c', column_min: 'c', column_max: 'c', column_avg: 'c', column_count: 'c',
-            },
-          ],
-        },
-      });
-
-      await flushPromises();
-
-      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('dbac');
-      expect(instance.groupedData[6].column_min).toBe('a');
-      expect(instance.groupedData[6].column_max).toBe('d');
-      expect(instance.groupedData[6].column_avg).toBe('dbac/4');
-      expect(instance.groupedData[6].column_count).toBe(4);
-    });
-
-    it('should group data on rest datasource with lazyLoad', async () => {
-      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 = createAndMount({
-        name: 'grid_grouping_3',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-          },
-          {
-            name: 'name',
-            label: 'name',
-          },
-          {
-            name: 'department',
-            label: 'department',
-            grouped: true,
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          order: ['name.asc'],
-          type: 'rest',
-          route: '/zeedhi',
-          lazyLoad: true,
-        },
-      });
-
-      await flushPromises();
-
-      expect(instance.datasource.data.length).toBe(0);
-
-      await instance.datasource.get();
-
-      expect(instance.datasource.data.length).toBe(5);
-      expect(instance.groupedData.length).toBe(7);
-
-      httpSpy.mockReset();
-    });
-
-    it('editedRows should return cleaned rows', async () => {
-      const instance = new TekGrid({
-        name: 'grid_grouping_4',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-          },
-          {
-            name: 'name',
-            label: 'name',
-            editable: true,
-          },
-          {
-            name: 'department',
-            label: 'department',
-            grouped: true,
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          order: ['name.asc'],
-          data: [
-            { id: 2, name: 'employee 2', department: 1 },
-            { id: 5, name: 'employee 5', department: 2 },
-            { id: 4, name: 'employee 4', department: 2 },
-            { id: 3, name: 'employee 3', department: 1 },
-            { id: 1, name: 'employee 1', department: 1 },
-          ],
-        },
-      });
-
-      await flushPromises();
-
-      instance.editing = true;
-      instance.updateRow({ id: 1, name: 'employee 111', department: 1 });
-      const editedRows = instance.getEditedRows();
-      expect(editedRows.length).toBe(1);
-      expect(editedRows[0].groupHeaders).toBeUndefined();
-    });
-
-    it('should do nothing if datasource is empty', async () => {
-      const instance = new TekGrid({
-        name: 'grid_grouping_5',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-          },
-          {
-            name: 'name',
-            label: 'name',
-            editable: true,
-          },
-          {
-            name: 'department',
-            label: 'department',
-            grouped: true,
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          data: [],
-        },
-      });
-
-      await flushPromises();
-
-      expect(instance.datasource.data.length).toBe(0);
-      expect(instance.groupedData.length).toBe(0);
-    });
-
-    it('should call view update methods', async () => {
-      let viewUpdateScrollDataCalled = false;
-      let viewUpdateFixedColumnsCalled = false;
-
-      const instance = createAndMount({
-        name: 'grid_grouping_6',
-        component: 'TekGrid',
-        virtualScroll: true,
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-          },
-          {
-            name: 'name',
-            label: 'name',
-          },
-          {
-            name: 'department',
-            label: 'department',
-            grouped: true,
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          order: ['name.asc'],
-          data: [
-            { id: 2, name: 'employee 2', department: 1 },
-            { id: 5, name: 'employee 5', department: 2 },
-            { id: 4, name: 'employee 4', department: 2 },
-            { id: 3, name: 'employee 3', department: 1 },
-            { id: 1, name: 'employee 1', department: 1 },
-          ],
-        },
-      });
-      instance.viewUpdateScrollData = () => { viewUpdateScrollDataCalled = true; };
-      instance.viewUpdateFixedColumns = () => { viewUpdateFixedColumnsCalled = true; };
-
-      await flushPromises();
-
-      expect(viewUpdateScrollDataCalled).toBeTruthy();
-      expect(viewUpdateFixedColumnsCalled).toBeTruthy();
-    });
-
-    it('should call debounced updateGroupData', () => {
-      const spy = jest.spyOn(TekGrid.prototype, 'updateGroupedData');
-      const instance = new TekGrid({
-        name: 'grid_grouping_1',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-            label: 'id',
-          },
-          {
-            name: 'name',
-            label: 'name',
-          },
-          {
-            name: 'department',
-            label: 'department',
-            grouped: true,
-          },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          order: ['name.asc'],
-          data: [
-            { id: 2, name: 'employee 2', department: 1 },
-            { id: 5, name: 'employee 5', department: 2 },
-            { id: 4, name: 'employee 4', department: 2 },
-            { id: 3, name: 'employee 3', department: 1 },
-            { id: 1, name: 'employee 1', department: 1 },
-          ],
-        },
-      });
-
-      jest.runAllTimers();
-
-      instance.columns[2].groupOpened = true;
-
-      expect(spy).toHaveBeenCalled();
-
-      spy.mockClear();
-    });
-  });
-
-  describe('updateSummary()', () => {
-    it('should update aggregation data always using the visible cell value', async () => {
-      const instance = await createGroupedGrid({
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'department', grouped: true },
-          { name: 'salary', aggregation: 'SUM' },
-        ],
-      });
-
-      await flushPromises();
-      instance.buildGroupedData();
-
-      let firstFooter = getNthFooter(instance, 0);
-      let secondFooter = getNthFooter(instance, 1);
-      let thirdFooter = getNthFooter(instance, 2);
-      expect(firstFooter.salary).toBe(30);
-      expect(secondFooter.salary).toBe(20);
-      expect(thirdFooter.salary).toBe(50);
-
-      instance.editing = true;
-      instance.updateCell('1', 'salary', 20);
-
-      instance.updateSummary();
-
-      firstFooter = getNthFooter(instance, 0);
-      secondFooter = getNthFooter(instance, 1);
-      thirdFooter = getNthFooter(instance, 2);
-      expect(firstFooter.salary).toBe(40);
-      expect(secondFooter.salary).toBe(20);
-      expect(thirdFooter.salary).toBe(60);
-    });
-
-    it('should update aggregation data with many groups', async () => {
-      const instance = await createGroupedGrid({
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'month', grouped: true },
-          { name: 'department', grouped: true },
-          { name: 'salary', aggregation: 'SUM' },
-        ],
-      });
-
-      await flushPromises();
-      instance.buildGroupedData();
-
-      let firstFooter = getNthFooter(instance, 0);
-      let secondFooter = getNthFooter(instance, 1);
-      let thirdFooter = getNthFooter(instance, 2);
-      let lastFooter = getLastFooter(instance);
-      expect(firstFooter.salary).toBe(20);
-      expect(secondFooter.salary).toBe(10);
-      expect(thirdFooter.salary).toBe(30);
-      expect(lastFooter.salary).toBe(50);
-
-      instance.editing = true;
-      instance.updateCell('1', 'salary', 20);
-
-      instance.updateSummary();
-
-      firstFooter = getNthFooter(instance, 0);
-      secondFooter = getNthFooter(instance, 1);
-      thirdFooter = getNthFooter(instance, 2);
-      lastFooter = getLastFooter(instance);
-      expect(firstFooter.salary).toBe(30);
-      expect(secondFooter.salary).toBe(10);
-      expect(thirdFooter.salary).toBe(40);
-      expect(lastFooter.salary).toBe(60);
-    });
-  });
-
-  describe('setSearch()', () => {
-    let baseProps: ITekGrid;
-    let httpSpy: jest.SpyInstance;
-
-    beforeEach(() => {
-      httpSpy = jest.spyOn(Http, 'get').mockImplementation((url: string) => {
-        if (url === '/zeedhi') {
-          return Promise.resolve({
-            data: {
-              data: [
-                { id: 1, name: 'employee 1', department: 1 },
-                { id: 2, name: 'employee 2', department: 1 },
-                { id: 3, name: 'employee 3', department: 3 },
-                { id: 4, name: 'employee 4', department: 2 },
-                { id: 5, name: 'employee 5', department: 2 },
-                { id: 15, name: 'employee 15', department: 2 },
-              ],
-              pagination: {
-                page: 1,
-                total: 5,
-                limit: 15,
-              },
-            },
-          });
-        }
-
-        if (url === '/departments') {
-          return Promise.resolve({
-            data: {
-              data: [
-                { id: 1, name: 'department 1' },
-                { id: 2, name: 'department 2' },
-                { id: 3, name: 'department 13' },
-              ],
-              pagination: {
-                page: 1,
-                total: 3,
-                limit: 15,
-              },
-            },
-          });
-        }
-
-        if (url === '/grid') {
-          return Promise.resolve({
-            data: {
-              data: [
-                { id: 1, employee_id: 1, department: 1 },
-                { id: 2, employee_id: 2, department: 1 },
-                { id: 3, employee_id: 3, department: 3 },
-              ],
-              pagination: {
-                page: 1,
-                total: 5,
-                limit: 15,
-              },
-            },
-          });
-        }
-
-        return Promise.reject();
-      });
-
-      baseProps = {
-        name: 'grid_search',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-          },
-          {
-            name: 'employee_id',
-            componentProps: {
-              name: 'ZdSelect',
-              dataText: [
-                'name',
-              ],
-              datasource: {
-                type: 'tek-rest',
-                uniqueKey: 'id',
-                route: '/zeedhi',
-                lazyLoad: false,
-              },
-            },
-          },
-        ],
-        datasource: {
-          type: 'tek-rest',
-          lazyLoad: true,
-          route: '/grid',
-        },
-      };
-    });
-
-    afterEach(() => {
-      httpSpy.mockReset();
-    });
-
-    it('should set datasource search_join based on columns that have datasource', async () => {
-      const instance = new TekGrid(baseProps);
-
-      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);
-    });
-
-    it('should set datasource search_join as empty when search is an empty string', async () => {
-      const instance = new TekGrid(baseProps);
-
-      await instance.setSearch('');
-      expect(instance.datasource).toBeInstanceOf(TekRestDatasource);
-      expect((instance.datasource as TekRestDatasource).searchJoin).toEqual({});
-      expect(httpSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('should search in multiple columns', async () => {
-      const instance = new TekGrid({
-        name: 'grid_search',
-        component: 'TekGrid',
-        columns: [
-          {
-            name: 'id',
-          },
-          {
-            name: 'employee_id',
-            componentProps: {
-              name: 'ZdSelect',
-              dataText: ['name'],
-              datasource: {
-                type: 'tek-rest',
-                uniqueKey: 'id',
-                route: '/zeedhi',
-                lazyLoad: false,
-              },
-            },
-          },
-          {
-            name: 'department_id',
-            componentProps: {
-              name: 'ZdSelect',
-              dataText: ['name'],
-              datasource: {
-                type: 'tek-rest',
-                uniqueKey: 'id',
-                route: '/departments',
-                lazyLoad: false,
-              },
-            },
-          },
-        ],
-        datasource: {
-          type: 'tek-rest',
-          lazyLoad: true,
-          route: '/grid',
-        },
-      });
-
-      await instance.setSearch('1');
-      expect(instance.datasource).toBeInstanceOf(TekRestDatasource);
-      expect((instance.datasource as TekRestDatasource).searchJoin).toEqual({ employee_id: [1, 15], department_id: [1, 3] });
-      expect(httpSpy).toHaveBeenCalledTimes(3);
-    });
-
-    it('should not make column search when datasource is not TekRestDatasource', async () => {
-      baseProps.datasource!.type = 'rest';
-      const instance = new TekGrid(baseProps);
-
-      await instance.setSearch('1');
-      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);
-    });
-
-    it('deve retornar true se a coluna tiver filtro simples com dados (datasource comum)', () => {
-      const column = { name: 'categoria' } as TekGridColumn;
-      const grid = new TekGrid({ name: 'grid2', component: 'TekGrid' }) as any;
-
-      grid.datasource = {
-        filter: {
-          categoria: ['A'],
-        },
-      };
-
-      expect(grid.columnHasFilterData(column)).toBe(true);
-    });
-  });
-
-  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 TekGrid({
-        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 TekGrid({
-        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('rowDoubleClick', () => {
-    it('rowDoubleClick method should call events.rowDoubleClick', () => {
-      const rowDoubleClick = jest.fn();
-
-      const data = [
-        { id: '1', name: 'First' },
-        { id: '2', name: 'Second' },
-        { id: '3', name: 'Third' },
-      ];
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-        ],
-        datasource: {
-          data,
-        },
-        events: {
-          rowDoubleClick,
-        },
-      });
-
-      const event = new Event('dblclick');
-      const element = document.createElement('div');
-      grid.rowDoubleClick(data[0], event, element);
-
-      expect(rowDoubleClick).toHaveBeenCalledWith({
-        event,
-        element,
-        row: data[0],
-        component: grid,
-      });
-      expect(grid.datasource.currentRow).toEqual(data[0]);
-    });
-
-    it('should not call events.rowDoubleClick if preventRowDoubleClick is true', () => {
-      const rowDoubleClick = jest.fn();
-      const cellDoubleClickHandler = jest.fn(() => true);
-
-      const data = [
-        { id: '1', name: 'First' },
-        { id: '2', name: 'Second' },
-        { id: '3', name: 'Third' },
-      ];
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-        ],
-        datasource: {
-          data,
-        },
-        events: {
-          rowDoubleClick,
-          cellDoubleClick: cellDoubleClickHandler,
-        },
-      });
-
-      const event = new Event('dblclick');
-      const element = document.createElement('div');
-
-      grid.cellDoubleClick(grid.groupedData[0], grid.getColumn('id') as any, event, element);
-      grid.rowDoubleClick(data[0], event, element);
-
-      expect(rowDoubleClick).not.toHaveBeenCalled();
-      expect(grid.datasource.currentRow).toEqual({});
-    });
-  });
-
-  describe('groupRowClick', () => {
-    it('groupRowClick method should call events.groupRowClick', async () => {
-      const groupRowClick = jest.fn();
-
-      const data = [
-        { id: '1', name: 'First', department: 1 },
-        { id: '2', name: 'Second', department: 1 },
-        { id: '3', name: 'Third', department: 1 },
-      ];
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'department', grouped: true },
-        ],
-        datasource: {
-          data,
-        },
-        events: {
-          groupRowClick,
-        },
-      });
-
-      await flushPromises();
-
-      const event = new Event('click');
-      const element = document.createElement('div');
-      grid.groupRowClick(grid.groupedData[0], event, element);
-
-      expect(groupRowClick).toHaveBeenCalledWith({
-        event,
-        element,
-        row: grid.groupedData[0],
-        component: grid,
-      });
-    });
-
-    it('should not call events.groupRowClick if cellClick prevents it', async () => {
-      const groupRowClick = jest.fn();
-
-      const data = [
-        { id: '1', name: 'First', department: 1 },
-        { id: '2', name: 'Second', department: 1 },
-        { id: '3', name: 'Third', department: 1 },
-      ];
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'department', grouped: true },
-        ],
-        datasource: {
-          data,
-        },
-        events: {
-          groupRowClick,
-          cellClick: () => true,
-        },
-      });
-      await flushPromises();
-
-      const event = new Event('click');
-      const element = document.createElement('div');
-      grid.cellClick(grid.groupedData[0], grid.getColumn('id') as any, event, element);
-      grid.groupRowClick(grid.groupedData[0], event, element);
-
-      expect(groupRowClick).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('groupRowDoubleClick', () => {
-    it('groupRowDoubleClick method should call events.groupRowDoubleClick', async () => {
-      const groupRowDoubleClick = jest.fn();
-
-      const data = [
-        { id: '1', name: 'First', department: 1 },
-        { id: '2', name: 'Second', department: 1 },
-        { id: '3', name: 'Third', department: 1 },
-      ];
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'department', grouped: true },
-        ],
-        datasource: {
-          data,
-        },
-        events: {
-          groupRowDoubleClick,
-        },
-      });
-
-      await flushPromises();
-
-      const event = new Event('dblclick');
-      const element = document.createElement('div');
-      grid.groupRowDoubleClick(grid.groupedData[0], event, element);
-
-      expect(groupRowDoubleClick).toHaveBeenCalledWith({
-        event,
-        element,
-        row: grid.groupedData[0],
-        component: grid,
-      });
-    });
-
-    it('should not call events.groupRowDoubleClick if cellDoubleClick prevents it', async () => {
-      const groupRowDoubleClick = jest.fn();
-      const cellDoubleClickHandler = jest.fn(() => true);
-
-      const data = [
-        { id: '1', name: 'First', department: 1 },
-        { id: '2', name: 'Second', department: 1 },
-        { id: '3', name: 'Third', department: 1 },
-      ];
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'department', grouped: true },
-        ],
-        datasource: {
-          data,
-        },
-        events: {
-          groupRowDoubleClick,
-          cellDoubleClick: cellDoubleClickHandler,
-        },
-      });
-
-      await flushPromises();
-
-      const event = new Event('dblclick');
-      const element = document.createElement('div');
-
-      grid.cellDoubleClick(grid.groupedData[0], grid.getColumn('id') as any, event, element);
-      grid.groupRowDoubleClick(grid.groupedData[0], event, element);
-
-      expect(groupRowDoubleClick).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('selectGroupClick', () => {
-    it('should trigger events', async () => {
-      const groupSelected = jest.fn();
-      const groupUnselected = jest.fn();
-
-      const data = [
-        { id: '1', name: 'First', department: 1 },
-        { id: '2', name: 'Second', department: 1 },
-        { id: '3', name: 'Third', department: 1 },
-      ];
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'department', grouped: true },
-        ],
-        datasource: {
-          data,
-        },
-        events: {
-          groupSelected,
-          groupUnselected,
-        },
-      });
-
-      await flushPromises();
-
-      const event = new Event('click');
-      const element = document.createElement('div');
-
-      grid.selectGroupClick(grid.groupedData[0], true, event, element);
-      expect(groupSelected).toHaveBeenCalled();
-
-      grid.selectGroupClick(grid.groupedData[0], false, event, element);
-      expect(groupUnselected).toHaveBeenCalled();
-    });
-  });
-
-  describe('layoutOptions', () => {
-    it('should return layout options instance', async () => {
-      const grid = new TekGrid({
-        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.mockReset();
-    });
-  });
-
-  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 TekGrid({ 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.mockReset();
-    });
-  });
-
-  describe('getFilterInputs', () => {
-    const mockMetadata = (instance: TekGrid) => {
-      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 TekGrid({
-        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.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',
-        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.mockReset();
-      spyModalService.mockReset();
-    });
-  });
-
-  describe('loadAfterTasks', () => {
-    it('should call request even if tasks fail', async () => {
-      const instance = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-      });
-      const spy = jest.spyOn(instance.datasource, 'get');
-
-      const errorFn = async () => {
-        throw new Error();
-      };
-      instance.registerTask(errorFn());
-
-      await instance.loadAfterTasks();
-
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('isColumnSearchable()', () => {
-    let instance!: TekGrid;
-
-    beforeEach(() => {
-      instance = new TekGrid({
-        name: 'TekGrid',
-        component: 'TekGrid',
-        columns: [{ name: 'name' }],
-      });
-    });
-
-    it('should return true if column is visible', () => {
-      const column = instance.getColumn('name') as TekGridColumn;
-      column.isVisible = true;
-
-      expect(instance.isColumnSearchable(column)).toBeTruthy();
-    });
-
-    it('should return true if column is grouped', () => {
-      const column = instance.getColumn('name') as TekGridColumn;
-      column.isVisible = false;
-      column.grouped = true;
-
-      expect(instance.isColumnSearchable(column)).toBeTruthy();
-    });
-
-    it('should return false if column is not visible', () => {
-      const column = instance.getColumn('name') as TekGridColumn;
-      column.isVisible = false;
-
-      expect(instance.isColumnSearchable(column)).toBeFalsy();
-    });
-
-    it('should return true if iterable uses searchVisibleOnly as false', () => {
-      instance.searchVisibleOnly = false;
-
-      const column = instance.getColumn('name') as TekGridColumn;
-      expect(instance.isColumnSearchable(column)).toBeTruthy();
-      column.isVisible = false;
-      expect(instance.isColumnSearchable(column)).toBeTruthy();
-    });
-  });
-
-  describe('cancel column', () => {
-    it('should instantiate grid with a cancel column', () => {
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        showCancelColumn: true,
-        columns: [
-          { name: 'name' },
-        ],
-        datasource: { data: [{ id: '1' }], uniqueKey: 'id' },
-      });
-      const spy = jest.fn();
-      grid.cancelAddedRow = spy;
-
-      expect(grid.columns.length).toBe(2);
-      expect(grid.columns[1].name).toBe('cancel_action_grid');
-
-      const comp: any = grid.getActionComponent(
-        grid.columns[1].children[0],
-        grid.columns[1],
-        grid.datasource.data[0],
-      );
-      const btn = new Button(comp);
-      btn.click();
-
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('addNewRow', () => {
-    it('when not using groups, should add a new row to the datasource', async () => {
-      const instance = new TekGrid({
-        name: 'Grid',
-        component: 'TekGrid',
-        datasource: {
-          page: 1,
-          data: [
-            { id: 1 },
-          ],
-        },
-      });
-      await instance.datasource.get();
-      const newRow1 = { id: 2 };
-      await instance.addNewRow(newRow1, 'start');
-      expect(instance.datasource.data[0]).toMatchObject({ id: 2, __added_row: true });
-      expect(instance.datasource.data[1]).toMatchObject({ id: 1 });
-    });
-
-    it('should add a new row to the groupedData array', async () => {
-      const grid = await createGroupedGrid();
-
-      expect(grid.groupedData).toMatchObject([
-        { groupValue: 1 },
-        { id: '1', groupHeaders: [{ groupValue: 1 }] },
-        { id: '2', groupHeaders: [{ groupValue: 1 }] },
-        { id: '4', groupHeaders: [{ groupValue: 1 }] },
-        { groupValue: 2 },
-        { id: '3', groupHeaders: [{ groupValue: 2 }] },
-        { id: '5', groupHeaders: [{ groupValue: 2 }] },
-      ]);
-      expect(grid.groupedData[0].children).toMatchObject([
-        { id: '1' },
-        { id: '2' },
-        { id: '4' },
-      ]);
-
-      await grid.addNewRow({ id: '999', name: 'new', department: 1 });
-
-      expect(grid.groupedData).toMatchObject([
-        { groupValue: 1 },
-        { id: '1', groupHeaders: [{ groupValue: 1 }] },
-        { id: '2', groupHeaders: [{ groupValue: 1 }] },
-        { id: '4', groupHeaders: [{ groupValue: 1 }] },
-        { id: '999', groupHeaders: [{ groupValue: 1 }] },
-        { groupValue: 2 },
-        { id: '3', groupHeaders: [{ groupValue: 2 }] },
-        { id: '5', groupHeaders: [{ groupValue: 2 }] },
-      ]);
-      expect(grid.groupedData[0].children).toMatchObject([
-        { id: '1' },
-        { id: '2' },
-        { id: '4' },
-        { id: '999' },
-      ]);
-    });
-
-    it('should add a new row to the groupedData array using nested groups', async () => {
-      const grid = await createGroupedGrid({
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'month', grouped: true },
-          { name: 'department', grouped: true },
-        ],
-      });
-
-      expect(grid.groupedData).toMatchObject([
-        { groupValue: 11 },
-        { groupValue: 1, groupHeaders: [{ groupValue: 11 }] },
-        { id: '1', groupHeaders: [{ groupValue: 11 }, { groupValue: 1 }] },
-        { id: '2', groupHeaders: [{ groupValue: 11 }, { groupValue: 1 }] },
-        { groupValue: 2, groupHeaders: [{ groupValue: 11 }] },
-        { id: '3', groupHeaders: [{ groupValue: 11 }, { groupValue: 2 }] },
-        { groupValue: 12 },
-        { groupValue: 1, groupHeaders: [{ groupValue: 12 }] },
-        { id: '4', groupHeaders: [{ groupValue: 12 }, { groupValue: 1 }] },
-        { groupValue: 2, groupHeaders: [{ groupValue: 12 }] },
-        { id: '5', groupHeaders: [{ groupValue: 12 }, { groupValue: 2 }] },
-      ]);
-
-      await grid.addNewRow({
-        id: '999', name: 'new', month: 12, department: 1,
-      }, 'start');
-
-      expect(grid.groupedData).toMatchObject([
-        { groupValue: 11 },
-        { groupValue: 1, groupHeaders: [{ groupValue: 11 }] },
-        { id: '1', groupHeaders: [{ groupValue: 11 }, { groupValue: 1 }] },
-        { id: '2', groupHeaders: [{ groupValue: 11 }, { groupValue: 1 }] },
-        { groupValue: 2, groupHeaders: [{ groupValue: 11 }] },
-        { id: '3', groupHeaders: [{ groupValue: 11 }, { groupValue: 2 }] },
-        { groupValue: 12 },
-        { groupValue: 1, groupHeaders: [{ groupValue: 12 }] },
-        { id: '999', groupHeaders: [{ groupValue: 12 }, { groupValue: 1 }] },
-        { id: '4', groupHeaders: [{ groupValue: 12 }, { groupValue: 1 }] },
-        { groupValue: 2, groupHeaders: [{ groupValue: 12 }] },
-        { id: '5', groupHeaders: [{ groupValue: 12 }, { groupValue: 2 }] },
-      ]);
-
-      expect(grid.groupedData[6].children).toMatchObject([
-        { id: '999' },
-        { id: '4' },
-        { id: '5' },
-      ]);
-      expect(grid.groupedData[7].children).toMatchObject([
-        { id: '999' },
-        { id: '4' },
-      ]);
-    });
-
-    it('should add a new row to a group that doesnt exist', async () => {
-      const grid = await createGroupedGrid();
-
-      await grid.addNewRow({ id: '999', name: 'new', department: 999 }, 'end');
-
-      expect(grid.groupedData).toMatchObject([
-        { groupValue: 1 },
-        { id: '1', groupHeaders: [{ groupValue: 1 }] },
-        { id: '2', groupHeaders: [{ groupValue: 1 }] },
-        { id: '4', groupHeaders: [{ groupValue: 1 }] },
-        { groupValue: 2 },
-        { id: '3', groupHeaders: [{ groupValue: 2 }] },
-        { id: '5', groupHeaders: [{ groupValue: 2 }] },
-        { groupValue: 999 },
-        { id: '999', groupHeaders: [{ groupValue: 999 }] },
-      ]);
-    });
-
-    it('should add a new row to a group that doesnt exist using nested groups', async () => {
-      const grid = await createGroupedGrid({
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'month', grouped: true },
-          { name: 'department', grouped: true },
-        ],
-      });
-
-      await grid.addNewRow({
-        id: '999', name: 'new', month: 999, department: 1,
-      }, 'end');
-
-      expect(grid.groupedData).toMatchObject([
-        { groupValue: 11 },
-        { groupValue: 1, groupHeaders: [{ groupValue: 11 }] },
-        { id: '1', groupHeaders: [{ groupValue: 11 }, { groupValue: 1 }] },
-        { id: '2', groupHeaders: [{ groupValue: 11 }, { groupValue: 1 }] },
-        { groupValue: 2, groupHeaders: [{ groupValue: 11 }] },
-        { id: '3', groupHeaders: [{ groupValue: 11 }, { groupValue: 2 }] },
-        { groupValue: 12 },
-        { groupValue: 1, groupHeaders: [{ groupValue: 12 }] },
-        { id: '4', groupHeaders: [{ groupValue: 12 }, { groupValue: 1 }] },
-        { groupValue: 2, groupHeaders: [{ groupValue: 12 }] },
-        { id: '5', groupHeaders: [{ groupValue: 12 }, { groupValue: 2 }] },
-        // new group
-        { groupValue: 999 },
-        { groupValue: 1, groupHeaders: [{ groupValue: 999 }] },
-        { id: '999', groupHeaders: [{ groupValue: 999 }, { groupValue: 1 }] },
-      ]);
-    });
-
-    it('should add a new row to a group that doesnt inside a group that exists', async () => {
-      const grid = await createGroupedGrid({
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'month', grouped: true },
-          { name: 'department', grouped: true },
-        ],
-      });
-
-      await grid.addNewRow({
-        id: '999', name: 'new', month: 11, department: 999,
-      }, 'end');
-
-      expect(grid.groupedData).toMatchObject([
-        { groupValue: 11 },
-        { groupValue: 999, groupHeaders: [{ groupValue: 11 }] },
-        { id: '999', groupHeaders: [{ groupValue: 11 }, { groupValue: 999 }] },
-        { groupValue: 1, groupHeaders: [{ groupValue: 11 }] },
-        { id: '1', groupHeaders: [{ groupValue: 11 }, { groupValue: 1 }] },
-        { id: '2', groupHeaders: [{ groupValue: 11 }, { groupValue: 1 }] },
-        { groupValue: 2, groupHeaders: [{ groupValue: 11 }] },
-        { id: '3', groupHeaders: [{ groupValue: 11 }, { groupValue: 2 }] },
-        { groupValue: 12 },
-        { groupValue: 1, groupHeaders: [{ groupValue: 12 }] },
-        { id: '4', groupHeaders: [{ groupValue: 12 }, { groupValue: 1 }] },
-        { groupValue: 2, groupHeaders: [{ groupValue: 12 }] },
-        { id: '5', groupHeaders: [{ groupValue: 12 }, { groupValue: 2 }] },
-      ]);
-    });
-
-    it('should add a new row inside nested groups that doesnt exist', async () => {
-      const grid = await createGroupedGrid({
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'year', grouped: true },
-          { name: 'month', grouped: true },
-          { name: 'department', grouped: true },
-        ],
-        datasource: {
-          uniqueKey: 'id',
-          data: [
-            {
-              id: '1', name: 'First', year: 2000, month: 11, department: 1,
-            },
-            {
-              id: '2', name: 'Second', year: 2000, month: 11, department: 1,
-            },
-            {
-              id: '3', name: 'Third', year: 2000, month: 11, department: 2,
-            },
-            {
-              id: '4', name: 'Fourth', year: 2010, month: 11, department: 1,
-            },
-            {
-              id: '5', name: 'Fifth', year: 2010, month: 12, department: 2,
-            },
-          ],
-        },
-      });
-
-      await grid.addNewRow({
-        id: '999', name: 'new', year: 2010, month: 999, department: 999,
-      }, 'end');
-      await grid.addNewRow({
-        id: '998', name: 'new', year: 2010, month: 999, department: 999,
-      }, 'end');
-
-      expect(grid.groupedData).toMatchObject([
-        { groupValue: 2000 },
-        { groupValue: 11, groupHeaders: [{ groupValue: 2000 }] },
-        { groupValue: 1, groupHeaders: [{ groupValue: 2000 }, { groupValue: 11 }] },
-        { id: '1', groupHeaders: [{ groupValue: 2000 }, { groupValue: 11 }, { groupValue: 1 }] },
-        { id: '2', groupHeaders: [{ groupValue: 2000 }, { groupValue: 11 }, { groupValue: 1 }] },
-        { groupValue: 2, groupHeaders: [{ groupValue: 2000 }, { groupValue: 11 }] },
-        { id: '3', groupHeaders: [{ groupValue: 2000 }, { groupValue: 11 }, { groupValue: 2 }] },
-        { groupValue: 2010 },
-        { groupValue: 999, groupHeaders: [{ groupValue: 2010 }] },
-        { groupValue: 999, groupHeaders: [{ groupValue: 2010 }, { groupValue: 999 }] },
-        { id: '999', groupHeaders: [{ groupValue: 2010 }, { groupValue: 999 }, { groupValue: 999 }] },
-        { id: '998', groupHeaders: [{ groupValue: 2010 }, { groupValue: 999 }, { groupValue: 999 }] },
-        { groupValue: 11, groupHeaders: [{ groupValue: 2010 }] },
-        { groupValue: 1, groupHeaders: [{ groupValue: 2010 }, { groupValue: 11 }] },
-        { id: '4', groupHeaders: [{ groupValue: 2010 }, { groupValue: 11 }, { groupValue: 1 }] },
-        { groupValue: 12, groupHeaders: [{ groupValue: 2010 }] },
-        { groupValue: 2, groupHeaders: [{ groupValue: 2010 }, { groupValue: 12 }] },
-        { id: '5', groupHeaders: [{ groupValue: 2010 }, { groupValue: 12 }, { groupValue: 2 }] },
-      ]);
-    });
-
-    it('should throw an error when row groups are not defined or incomplete', async () => {
-      const grid = await createGroupedGrid({
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'month', grouped: true },
-          { name: 'department', grouped: true },
-        ],
-      });
-
-      // month group is undefined, should throw
-      expect(async () => grid.addNewRow({ id: '999', name: 'new', department: 1 }, 'end')).rejects.toThrow();
-    });
-  });
-
-  describe('addToSelection', () => {
-    it('should add a row to the selected group', async () => {
-      const grid = await createGroupedGrid();
-
-      [grid.datasource.currentRow] = grid.groupedData;
-
-      grid.addToSelection({ id: '999', name: 'new', month: 12 });
-
-      expect(grid.groupedData).toMatchObject([
-        { groupValue: 1 },
-        { id: '1', groupHeaders: [{ groupValue: 1 }] },
-        { id: '2', groupHeaders: [{ groupValue: 1 }] },
-        { id: '4', groupHeaders: [{ groupValue: 1 }] },
-        { id: '999', groupHeaders: [{ groupValue: 1 }] },
-        { groupValue: 2 },
-        { id: '3', groupHeaders: [{ groupValue: 2 }] },
-        { id: '5', groupHeaders: [{ groupValue: 2 }] },
-      ]);
-    });
-
-    it('should add a row to the selected group when using nested groups', async () => {
-      const grid = await createGroupedGrid();
-
-      [grid.datasource.currentRow] = grid.groupedData;
-
-      grid.addToSelection({ id: '999', name: 'new', month: 12 });
-
-      expect(grid.groupedData).toMatchObject([
-        { groupValue: 1 },
-        { id: '1', groupHeaders: [{ groupValue: 1 }] },
-        { id: '2', groupHeaders: [{ groupValue: 1 }] },
-        { id: '4', groupHeaders: [{ groupValue: 1 }] },
-        { id: '999', groupHeaders: [{ groupValue: 1 }] },
-        { groupValue: 2 },
-        { id: '3', groupHeaders: [{ groupValue: 2 }] },
-        { id: '5', groupHeaders: [{ groupValue: 2 }] },
-      ]);
-    });
-
-    it('when selected row is not a group, should add a row to the same group as the selected row', async () => {
-      const grid = await createGroupedGrid({
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'month', grouped: true },
-          { name: 'department', grouped: true },
-        ],
-      });
-
-      grid.datasource.currentRow = grid.groupedData.find((row) => row.id === '3')!;
-
-      grid.addToSelection({ id: '999', name: 'new', month: 12 });
-
-      expect(grid.groupedData).toMatchObject([
-        { groupValue: 11 },
-        { groupValue: 1, groupHeaders: [{ groupValue: 11 }] },
-        { id: '1', groupHeaders: [{ groupValue: 11 }, { groupValue: 1 }] },
-        { id: '2', groupHeaders: [{ groupValue: 11 }, { groupValue: 1 }] },
-        { groupValue: 2, groupHeaders: [{ groupValue: 11 }] },
-        { id: '3', groupHeaders: [{ groupValue: 11 }, { groupValue: 2 }] },
-        { id: '999', groupHeaders: [{ groupValue: 11 }, { groupValue: 2 }] },
-        { groupValue: 12 },
-        { groupValue: 1, groupHeaders: [{ groupValue: 12 }] },
-        { id: '4', groupHeaders: [{ groupValue: 12 }, { groupValue: 1 }] },
-        { groupValue: 2, groupHeaders: [{ groupValue: 12 }] },
-        { id: '5', groupHeaders: [{ groupValue: 12 }, { groupValue: 2 }] },
-      ]);
-    });
-
-    it('when selected row is not the most internal group, should add a row to the first most internal group', async () => {
-      const grid = await createGroupedGrid({
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'month', grouped: true },
-          { name: 'department', grouped: true },
-        ],
-      });
-
-      [grid.datasource.currentRow] = grid.groupedData;
-
-      grid.addToSelection({ id: '999', name: 'new', month: 12 });
-
-      expect(grid.groupedData).toMatchObject([
-        { groupValue: 11 },
-        { groupValue: 1, groupHeaders: [{ groupValue: 11 }] },
-        { id: '1', groupHeaders: [{ groupValue: 11 }, { groupValue: 1 }] },
-        { id: '2', groupHeaders: [{ groupValue: 11 }, { groupValue: 1 }] },
-        { id: '999', groupHeaders: [{ groupValue: 11 }, { groupValue: 1 }] },
-        { groupValue: 2, groupHeaders: [{ groupValue: 11 }] },
-        { id: '3', groupHeaders: [{ groupValue: 11 }, { groupValue: 2 }] },
-        { groupValue: 12 },
-        { groupValue: 1, groupHeaders: [{ groupValue: 12 }] },
-        { id: '4', groupHeaders: [{ groupValue: 12 }, { groupValue: 1 }] },
-        { groupValue: 2, groupHeaders: [{ groupValue: 12 }] },
-        { id: '5', groupHeaders: [{ groupValue: 12 }, { groupValue: 2 }] },
-      ]);
-    });
-  });
-
-  describe('toolbar creation', () => {
-    it('should render predefined items in toolbarConfig', () => {
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        toolbarConfig: ['addButton'],
-      });
-      grid.onCreated();
-
-      expect(grid.toolbarSlot.length).toBe(3);
-      const toolbarDiv = grid.toolbarSlot[2];
-      expect(toolbarDiv.children?.length).toBe(1);
-      expect(toolbarDiv.children?.[0].name).toContain('_add_tooltip');
-    });
-
-    it('should render custom components in toolbarConfig', () => {
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        toolbarConfig: [{ component: 'ZdButton', name: 'customButton' }],
-      });
-      grid.onCreated();
-
-      const toolbarDiv = grid.toolbarSlot[2];
-      expect(toolbarDiv.children?.length).toBe(1);
-      expect(toolbarDiv.children?.[0].name).toBe('customButton');
-    });
-
-    it('should alert about invalid items of string type in toolbarConfig', () => {
-      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        toolbarConfig: ['invalidItem'],
-      });
-      grid.onCreated();
-
-      expect(warnSpy).toHaveBeenCalledWith('Predefined toolbar item "invalidItem" not found.');
-      warnSpy.mockRestore();
-    });
-
-    it('should alert about invalid items in toolbarConfig', () => {
-      const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        toolbarConfig: [123 as any],
-      });
-      grid.onCreated();
-
-      expect(warnSpy).toHaveBeenCalledWith('Invalid item in toolbarConfig:', 123);
-      warnSpy.mockRestore();
-    });
-  });
-
-  describe('addButtonClick', () => {
-    it('should set editingNewRows as true when editNewRowsOnly is enabled', () => {
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        addButton: true,
-        editNewRowsOnly: true,
-      });
-
-      (grid as any).gridBase.addButtonClick({ event: new Event('click') });
-
-      expect((grid as any).editingNewRows).toBe(true);
-    });
-  });
-
-  describe('deleteButtonClick', () => {
-    it('should throw TekGridDeleteRowsError when selectAllPages is true', () => {
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        deleteButton: 'selection',
-        selectAllPages: true,
-      });
-
-      const deleteFn = () => {
-        (grid as any).gridBase.deleteButtonClick({ event: new Event('click') });
-      };
-
-      expect(deleteFn).toThrow(TekGridDeleteRowsError);
-    });
-  });
-
-  describe('reloadGrid', () => {
-    it('should call grid.reload() if beforeReload event is not prevented', () => {
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-      });
-      const reloadSpy = jest.spyOn(grid, 'reload');
-      const event = new Event('click');
-
-      (grid as any).gridBase.reloadGrid({ event });
-
-      expect(reloadSpy).toHaveBeenCalledTimes(1);
-
-      reloadSpy.mockRestore();
-    });
-
-    it('should not call grid.reload() if beforeReload event is prevented', () => {
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-      });
-      const reloadSpy = jest.spyOn(grid, 'reload');
-      const mockEvent = { defaultPrevented: true };
-
-      (grid as any).gridBase.reloadGrid({ event: mockEvent });
-
-      expect(reloadSpy).not.toHaveBeenCalled();
-
-      reloadSpy.mockRestore();
-    });
-  });
-
-  describe('toolbar creation', () => {
-    it('should create toolbar with default items', () => {
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-      });
-      const { gridBase } = grid as any;
-      delete (gridBase as any).defaultToolbar.title;
-      delete (gridBase as any).defaultToolbar.hideButton;
-
-      const toolbarSlot = gridBase.createToolbarProps();
-
-      expect(toolbarSlot.find((c: IComponentRender) => c.name?.includes('_title'))).toBeUndefined();
-      expect(toolbarSlot.find((c: IComponentRender) => c.name?.includes('_hideTooltip'))).toBeUndefined();
-      expect(toolbarSlot[0].name).toBe('grid_toolbarDiv');
-    });
-  });
-});