@zeedhi/common 1.111.1 → 3.0.0

package/tests/unit/components/zd-grid-editable/grid-editable.spec.ts

@@ -0,0 +1,2733 @@
+import {
+  IDictionary, Http, Metadata, FormatterParserProvider, KeyMap, Datasource,
+  Loader,
+  SimpleControllerBuilder,
+} from '@zeedhi/core';
+import {
+  GridEditable, GridColumnEditable, IComponent, TextInput, Select,
+  Column, 
+  IGridEditableProps,
+  DataEditorWithAdd,
+  TableActionBuilder,
+  IterableTable,
+  DataSelector,
+  GridEditableEvents,
+  DataNavigator,
+  ViewNavigator,
+} from '../../../../src';
+import { mockLoaderValueAccessor } from '../../__helpers__/mock-loader-value-accessor';
+import { flushPromises } from '../../__helpers__/flush-promises-helper';
+import { mockI18n } from '../../__helpers__/mock-i18n';
+import { spyOnAllMethods } from '../../__helpers__/spy-on-all-methods';
+
+mockI18n();
+
+const setupInstance = (props: Partial<IGridEditableProps> = {}) => {
+  const instance = new GridEditable({
+    name: 'GridEditable',
+    component: 'ZdGridEditable',
+    columns: [
+      { name: 'first' },
+      { name: 'second' },
+      { name: 'third' },
+    ],
+    datasource: {
+      limit: 2,
+      page: 1,
+      data: [
+        { id: 1 },
+        { id: 2 },
+        { id: 3 },
+        { id: 4 },
+        { id: 5 },
+        { id: 6 },
+        { id: 7 },
+      ],
+    },
+    ...props,
+  });
+  const elem = document.createElement('DIV');
+  (KeyMap as any).isElementActive = () => true;
+  instance.onCreated();
+  instance.onMounted(elem);
+
+  return instance;
+};
+
+describe('Grid Editable', () => {
+  beforeAll(() => {
+    Loader.setBuilder(new SimpleControllerBuilder());
+  });
+
+  describe('constructor()', () => {
+    it('should create a new grid with default values', () => {
+      const instance = new GridEditable({
+        name: 'grid',
+        component: 'ZdGridEditable',
+      });
+
+      expect(instance.name).toBe('grid');
+      expect(instance.doubleClickEdit).toBeFalsy();
+    });
+
+    it('should create a new grid with defined values', () => {
+      const instance = new GridEditable({
+        name: 'grid',
+        component: 'ZdGridEditable',
+        doubleClickEdit: true,
+        backgroundColor: 'blue',
+      });
+
+      expect(instance.name).toBe('grid');
+      expect(instance.doubleClickEdit).toBeTruthy();
+      expect(instance.backgroundColor).toBe('blue');
+    });
+  });
+
+  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('when not using cellSelection, horizontal navigation should not call viewNavigator', () => {
+      const instance = new GridEditable({
+        name: 'grid',
+        component: 'ZdGridEditable',
+        cellSelection: false,
+      });
+      const elem = document.createElement('DIV');
+      (KeyMap as any).isElementActive = () => true;
+      instance.onCreated();
+      instance.onMounted(elem);
+      const fn = jest.fn();
+      instance.setViewNavigate(fn);
+
+      dispatchEvent('arrowright', {});
+      expect(fn).not.toHaveBeenCalled();
+      dispatchEvent('arrowleft', {});
+      expect(fn).not.toHaveBeenCalled();
+
+
+      instance.onBeforeDestroy();
+      (KeyMap as any).isElementActive = () => false;
+    });
+  });
+
+  describe('changeColumnOrder()', () => {
+    it('should do nothing if column is not sortable', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id', sortable: false },
+        ],
+      });
+      const spy = jest.spyOn(instance.datasource, 'getOrderByColumn');
+      instance.changeOrder([{ key: 'id', order: 'asc' }]);
+      expect(spy).not.toHaveBeenCalled();
+    });
+
+    it('should do nothing if grid is editing', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id' },
+        ],
+      });
+      const spy = jest.spyOn(instance.datasource, 'getOrderByColumn');
+      instance.editing = true;
+      instance.changeOrder([{ key: 'id', order: 'asc' }]);
+      expect(spy).not.toHaveBeenCalled();
+    });
+
+    it('should order by id column', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id' },
+        ],
+      });
+
+      const idColumn = instance.columns[0] as GridColumnEditable;
+      instance.changeOrder([{ key: 'id', order: 'asc' }]);
+      expect(instance.datasource.getOrderByColumn(idColumn.name)).toBe('asc');
+    });
+  });
+
+  describe('rowClick', () => {
+    it('should call rowClick event', () => {
+      let rowClicked = false;
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+            { id: 2 },
+          ],
+        },
+      });
+      const event = new MouseEvent('click');
+      const element = document.createElement('div');
+      instance.rowClick({ id: 1 }, event, element);
+      expect(instance.datasource.currentRow).toEqual({ id: 1 });
+      expect(rowClicked).toBeFalsy();
+
+      instance.events.rowClick = () => { rowClicked = true; };
+
+      instance.rowClick({ id: 2 }, event, element);
+      expect(instance.datasource.currentRow).toEqual({ id: 2 });
+      expect(rowClicked).toBeTruthy();
+    });
+  });
+
+  describe('rowDoubleClick', () => {
+    it('should call rowDoubleClick event', () => {
+      let rowClicked = false;
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+            { id: 2 },
+          ],
+        },
+      });
+      const event = new MouseEvent('click');
+      const element = document.createElement('div');
+      instance.rowDoubleClick({ id: 1 }, event, element);
+      expect(instance.datasource.currentRow).toEqual({ id: 1 });
+      expect(rowClicked).toBeFalsy();
+
+      instance.events.rowDoubleClick = () => { rowClicked = true; };
+
+      instance.rowDoubleClick({ id: 2 }, event, element);
+      expect(instance.datasource.currentRow).toEqual({ id: 2 });
+      expect(rowClicked).toBeTruthy();
+    });
+  });
+
+  describe('cellClick', () => {
+    it('should call cellClick event', () => {
+      let cellClicked = '';
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id' },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+        events: {
+          cellClick: ({ column }: any) => { cellClicked = column.name; },
+        },
+      });
+      const event = new MouseEvent('click');
+      const element = document.createElement('div');
+      instance.cellClick({ id: 1 }, instance.columns[0] as GridColumnEditable, event, element);
+      expect(instance.datasource.currentRow).toEqual({});
+      expect(cellClicked).toBe('id');
+    });
+
+    it('should call cellClick event if grid is being edited', () => {
+      let cellClicked = '';
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id' },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+        events: {
+          cellClick: ({ column }: any) => { cellClicked = column.name; },
+        },
+      });
+      const event = new MouseEvent('click');
+      const element = document.createElement('div');
+      instance.editing = true;
+      instance.cellClick({ id: 1 }, instance.columns[0] as GridColumnEditable, event, element);
+      expect(instance.datasource.currentRow).toEqual({});
+      expect(cellClicked).toBe('id');
+    });
+
+    it('should call rowClick after cellClick event', () => {
+      let cellClicked = '';
+      let rowClicked = false;
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id' },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+        events: {
+          rowClick: () => { rowClicked = true; },
+          cellClick: ({ column }: any) => { cellClicked = column.name; },
+        },
+      });
+      const event = new MouseEvent('click');
+      const element = document.createElement('div');
+      instance.cellClick({ id: 1 }, instance.columns[0] as GridColumnEditable, event, element);
+      instance.rowClick({ id: 1 }, event, element);
+      expect(instance.datasource.currentRow).toEqual({ id: 1 });
+      expect(cellClicked).toBe('id');
+      expect(rowClicked).toBeTruthy();
+    });
+
+    it('should not call rowClick if cellClick prevents it', () => {
+      let cellClicked = '';
+      let rowClicked = false;
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id' },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+        events: {
+          rowClick: () => { rowClicked = true; },
+          cellClick: ({ column }: any) => {
+            cellClicked = column.name;
+            return true;
+          },
+        },
+      });
+      const event = new MouseEvent('click');
+      const element = document.createElement('div');
+      instance.cellClick({ id: 1 }, instance.columns[0] as GridColumnEditable, event, element);
+      instance.rowClick({ id: 1 }, event, element);
+      expect(instance.datasource.currentRow).toEqual({});
+      expect(cellClicked).toBe('id');
+      expect(rowClicked).toBeFalsy();
+    });
+
+    it('should put grid in editing mode if column is editable', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id', editable: true },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+      });
+      const event = new MouseEvent('click');
+      const element = document.createElement('div');
+      instance.cellClick({ id: 1 }, instance.columns[0] as GridColumnEditable, event, element);
+      expect(instance.editing).toBeTruthy();
+    });
+  });
+
+  describe('cellDoubleClick', () => {
+    it('should call cellDoubleClick event', () => {
+      let cellDoubleClicked = '';
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id' },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+        events: {
+          cellDoubleClick: ({ column }: any) => { cellDoubleClicked = column.name; },
+        },
+      });
+      const event = new MouseEvent('dblclick');
+      const element = document.createElement('div');
+      instance.cellDoubleClick({ id: 1 }, instance.columns[0] as GridColumnEditable, event, element);
+      expect(instance.datasource.currentRow).toEqual({});
+      expect(cellDoubleClicked).toBe('id');
+    });
+
+    it('should call cellDoubleClick event if grid is being edited', () => {
+      let cellDoubleClicked = '';
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id' },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+        events: {
+          cellDoubleClick: ({ column }: any) => { cellDoubleClicked = column.name; },
+        },
+      });
+      const event = new MouseEvent('dblclick');
+      const element = document.createElement('div');
+      instance.editing = true;
+      instance.cellDoubleClick({ id: 1 }, instance.columns[0] as GridColumnEditable, event, element);
+      expect(instance.datasource.currentRow).toEqual({});
+      expect(cellDoubleClicked).toBe('id');
+    });
+
+    it('should put grid in editing mode if column is editable', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id', editable: true },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+      });
+      const event = new MouseEvent('dblclick');
+      const element = document.createElement('div');
+      instance.cellDoubleClick({ id: 1 }, instance.columns[0] as GridColumnEditable, event, element);
+      expect(instance.editing).toBeTruthy();
+    });
+
+    it('should call inlineEdit event', () => {
+      const inlineEditFn = jest.fn();
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id', editable: true },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+        events: {
+          inlineEdit: inlineEditFn,
+        },
+      });
+      const event = new MouseEvent('dblclick');
+      const element = document.createElement('div');
+      instance.cellDoubleClick({ id: 1 }, instance.columns[0] as GridColumnEditable, event, element);
+      expect(inlineEditFn).toHaveBeenCalledWith({
+        event,
+        element,
+        row: { id: 1 },
+        column: instance.columns[0],
+        component: instance,
+      });
+    });
+  });
+
+  describe('getEditableComponent', () => {
+    it('should return editable component', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdTextInput',
+            },
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+      });
+      const comp: IComponent = instance.getEditableComponent(instance.columns[0] as GridColumnEditable, { id: 1 });
+      expect(comp.name).toBe('id_editable_1');
+      expect(comp.component).toBe('ZdTextInput');
+      expect(comp.parent).toEqual(instance);
+      expect(comp.showLabel).toBeFalsy();
+      expect(comp.showHelper).toBeFalsy();
+      expect(comp.dense).toBeTruthy();
+      expect(comp.align).toBe('right');
+      expect(comp.value).toBe(1);
+      expect(comp.autoRegister).toBeFalsy();
+      expect((comp.events as any).blur).toBeInstanceOf(Function);
+      expect((comp.events as any).change).toBeInstanceOf(Function);
+      expect((comp.events as any).focus).toBeInstanceOf(Function);
+
+      const comp2: IComponent = instance.getEditableComponent(
+        instance.columns[0] as GridColumnEditable, { id: 2 }
+      );
+      expect(comp2.name).toBe('id_editable_2');
+      expect(comp2.component).toBe('ZdTextInput');
+      expect(comp2.parent).toEqual(instance);
+    });
+
+    it('should return component with edited value for the second time', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdTextInput',
+            },
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+      });
+      const comp: any = instance.getEditableComponent(instance.columns[0] as GridColumnEditable, { id: 1 });
+      const textInput = new TextInput(comp);
+      textInput.value = null;
+      comp.events.change({ component: textInput });
+      const comp2: any = instance.getEditableComponent(instance.columns[0] as GridColumnEditable, { id: 1 });
+      expect(comp2.value).toBeNull();
+    });
+
+    it('should call blur, change and focus events', () => {
+      const changeFn = jest.fn();
+      const blurFn = jest.fn();
+      const focusFn = jest.fn();
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdTextInput',
+              events: {
+                change: changeFn,
+                blur: blurFn,
+                focus: focusFn,
+              },
+            },
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+      });
+      const comp: any = instance.getEditableComponent(instance.columns[0] as GridColumnEditable, { id: 1 });
+      const textInput = new TextInput(comp);
+      textInput.value = '';
+      comp.events.change({ component: textInput });
+      comp.events.blur({ component: textInput });
+      comp.events.focus({ component: textInput });
+      expect(changeFn).toHaveBeenCalled();
+      expect(blurFn).toHaveBeenCalled();
+      expect(focusFn).toHaveBeenCalled();
+    });
+
+    it('should add lookupdata to component', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataValue: 'id',
+              dataText: 'name',
+              datasource: {
+                uniqueKey: 'id',
+                type: 'rest',
+                route: 'employees',
+              },
+            },
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+      });
+
+      const column = instance.columns[0];
+      column.lookupData = {
+        1: { id: 1, name: 'Employee 1' },
+      };
+
+      const comp: IComponent = instance.getEditableComponent(instance.columns[0] as GridColumnEditable, { id: 1 });
+      expect(comp.datasource.data).toEqual([{ id: 1, name: 'Employee 1' }]);
+    });
+
+    it('should add array lookupdata to component', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'ingredients',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataValue: 'id',
+              dataText: 'name',
+              datasource: {
+                uniqueKey: 'id',
+                type: 'rest',
+                route: '/menu',
+                lazyLoad: true,
+              },
+            },
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            {
+              id: 1, name: 'Menu 1', ingredients: ['1', '6', '9'],
+            },
+          ],
+        },
+      });
+
+      const column = instance.columns[0];
+      column.lookupData = {
+        1: { id: '1' },
+        6: { id: '6' },
+        9: { id: '9' },
+      };
+
+      const comp: IComponent = instance.getEditableComponent(
+        instance.columns[0] as GridColumnEditable,
+        { id: 1, name: 'Menu 1', ingredients: ['1', '6', '9'] },
+      );
+      expect(comp.datasource.data).toEqual([{ id: '1' }, { id: '6' }, { id: '9' }]);
+    });
+
+    it('should add array of objects lookupdata to component', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'ingredients',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataValue: 'id',
+              dataText: 'name',
+              datasource: {
+                uniqueKey: 'id',
+                type: 'rest',
+                route: '/menu',
+                lazyLoad: true,
+              },
+            },
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            {
+              id: 1,
+              name: 'Menu 1',
+              ingredients: [
+                { id: '1', name: 'Salada' },
+                { id: '6', name: 'Arroz' },
+                { id: '9', name: 'Macarrão' },
+              ],
+            },
+          ],
+        },
+      });
+
+      const column = instance.columns[0];
+      column.lookupData = {
+        1: { id: '1' },
+        6: { id: '6' },
+        9: { id: '9' },
+      };
+
+      const comp: IComponent = instance.getEditableComponent(
+        instance.columns[0] as GridColumnEditable,
+        { id: 1, name: 'Menu 1', ingredients: [{ id: '1' }, { id: '6' }, { id: '9' }] },
+      );
+      expect(comp.datasource.data).toEqual([{ id: '1' }, { id: '6' }, { id: '9' }]);
+    });
+
+    it('should get an object from column', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'job_data',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataValue: 'id',
+              dataText: 'name',
+              datasource: {
+                uniqueKey: 'id',
+                type: 'rest',
+                route: '/job',
+                lazyLoad: true,
+              },
+            },
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            {
+              id: 1, name: 'Employee 1', job_data: { id: 1, name: 'Job 1' },
+            },
+          ],
+        },
+      });
+
+      const column = instance.columns[0];
+      column.lookupData = {
+        1: { id: 1, name: 'Job 1' },
+      };
+
+      const comp: IComponent = instance.getEditableComponent(
+        instance.columns[0] as GridColumnEditable,
+        { id: 1, name: 'Employee 1', job_data: { id: 1, name: 'Job 1' } },
+      );
+      expect(comp.datasource.data).toEqual([{ id: 1, name: 'Job 1' }]);
+    });
+
+    it('should do not try get lookup value if lookupColumn not exist', () => {
+      const instance = new GridEditable(
+        {
+          name: 'grid-foreignKeySelects',
+          component: 'ZdGridEditable',
+          gridHeight: '220px',
+          columns: [
+            {
+              name: 'id',
+              label: 'ID',
+              sortable: false,
+            },
+            {
+              name: 'rest_request',
+              label: 'REST with request',
+              componentProps: {
+                name: 'name_1',
+                component: 'ZdSelect',
+                dataText: ['id', 'valor-que-nunca-é-retornado'],
+                dataValue: 'valor-que-nunca-é-retornado',
+                datasource: {
+                  data: [
+                    { id: 1 },
+                    { id: 2 },
+                    { id: 3 },
+                  ],
+                },
+              },
+            },
+          ],
+          datasource: {
+            uniqueKey: 'id',
+            data: [
+              { id: 1, rest_request: 2 },
+              { id: 2, rest_request: 3 },
+              { id: 3, rest_request: 4 },
+            ],
+          },
+        },
+      );
+
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => true);
+
+      const formatterFn = FormatterParserProvider.getFormatter('column_ZdSelect');
+
+      const value = formatterFn({
+        column: instance.columns[1],
+        value: 2,
+        row: { id: 1, rest_request: 2 },
+        componentProps: instance.columns[1].componentProps,
+      });
+
+      expect(consoleSpy).toHaveBeenCalled();
+      expect(value).toEqual(2);
+      consoleSpy.mockClear();
+    });
+
+    it('should not throw when using accessor in datasource.data', () => {
+      const controller = { data: [] };
+      mockLoaderValueAccessor(controller);
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataValue: 'id',
+              dataText: 'name',
+              datasource: {
+                uniqueKey: 'id',
+                data: '{{Controller.data}}',
+              },
+            },
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+      });
+
+      const column = instance.columns[0];
+      column.lookupData = {
+        1: { id: 1, name: 'Employee 1' },
+      };
+
+      const fn = () => instance.getEditableComponent(instance.columns[0] as GridColumnEditable, { id: 1 });
+      expect(fn).not.toThrow();
+    });
+
+    it('should get formated value', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataValue: 'value',
+              dataText: 'text',
+              returnObject: true,
+              datasource: {
+                data: [
+                  { value: 1, text: 'FIRST' },
+                  { value: 2, text: 'SECOND' },
+                  { value: 3, text: 'THIRD' },
+                ],
+              },
+            },
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+            { id: 2 },
+            { id: 3 },
+          ],
+        },
+      });
+      const spyM = jest.spyOn(instance.columns[0], 'getLookupData').mockImplementation(() => ({}));
+      const formatterFn = FormatterParserProvider.getFormatter('column_ZdSelect');
+      const value = formatterFn({
+        column: instance.columns[0],
+        value: { value: 2, text: 'SECOND' },
+        row: { id: 2 },
+        componentProps: instance.columns[0].componentProps,
+      });
+      instance.getEditableComponent(
+        instance.columns[0], {
+          id: { value: 1, text: 'FIRST' },
+        },
+      );
+      expect(spyM).toHaveBeenCalled();
+      expect(value).toEqual('');
+      spyM.mockClear();
+    });
+
+    it('should not add lookup data to component if value is already in datasource', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataValue: 'id',
+              dataText: 'name',
+              datasource: {
+                uniqueKey: 'id',
+                data: [
+                  { id: 1, name: 'Employee 1' },
+                ],
+              },
+            },
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+      });
+
+      const column = instance.columns[0];
+      column.lookupData = {
+        1: { id: 1, name: 'Employee 1' },
+      };
+
+      const comp: IComponent = instance.getEditableComponent(instance.columns[0] as GridColumnEditable, { id: 1 });
+      expect(comp.datasource.data).toEqual([{ id: 1, name: 'Employee 1' }]);
+    });
+  });
+
+  describe('isEdited()', () => {
+    it('should return if cell is valid', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdTextInput',
+            },
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: '1' },
+          ],
+        },
+      });
+      const comp: any = instance.getEditableComponent(instance.columns[0] as GridColumnEditable, { id: '1' });
+      const textInput = new TextInput(comp);
+      (comp.events as any).change({ component: textInput });
+      expect(instance.isEdited(instance.columns[0] as GridColumnEditable, { id: '1' })).toBeFalsy();
+      textInput.value = '2';
+      (comp.events as any).change({ component: textInput });
+      expect(instance.isEdited(instance.columns[0] as GridColumnEditable, { id: '1' })).toBeTruthy();
+    });
+  });
+
+  describe('cancelEditedRows()', () => {
+    const instantiateMemoryGrid = () => {
+      return setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdTextInput',
+              validations: {
+                required: {},
+              },
+            },
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: '1' },
+          ],
+        },
+      });
+    }
+
+    const instantiateRESTGrid = () => {
+      return setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdTextInput',
+              validations: {
+                required: {},
+              },
+            },
+          },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          type: 'rest',
+          route: '/menu',
+          lazyLoad: true,
+          limit: 2,
+          page: 1,
+        },
+      });
+    }
+
+    it('should undo editing REST datasorce', async () => {
+      const instanceRESTData = instantiateRESTGrid();
+      const spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
+        data: {
+          data: [{ id: '1' }],
+          pagination: { page: 1, total: 1, limit: 2 },
+        },
+      }));
+      instanceRESTData.editing = true;
+      await instanceRESTData.cancelEditedRows();
+      expect(instanceRESTData.editing).toBeFalsy();
+      spy.mockClear();
+    });
+
+    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 cancel editedRows with keymap', async () => {
+      const instance = instantiateMemoryGrid();
+      const elem = document.createElement('DIV');
+      (KeyMap as any).isElementActive = () => true;
+      instance.onMounted(elem);
+
+      instance.editing = true;
+      const comp: any = instance.getEditableComponent(instance.columns[0] as GridColumnEditable, { id: '1' });
+      const textInput = new TextInput(comp);
+      textInput.value = '';
+      comp.events.focus({ component: textInput });
+      await flushPromises();
+
+      dispatchEvent('escape', {}); // esc keydown
+      await flushPromises();
+
+      instance.onBeforeDestroy();
+      await flushPromises();
+      expect(instance.editing).toEqual(false);
+      (KeyMap as any).isElementActive = () => false;
+    });
+  });
+
+  describe('cancelAddedRow()', () => {
+    it('should remove an added row from datasource and remove it from editedRows', async () => {
+      const initialData = [
+        { id: '1', name: 'name1' },
+        { id: '2', name: 'name2' },
+        { id: '3', name: 'name3' },
+      ];
+      const instance = new GridEditable({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: initialData,
+        },
+      });
+      instance.onCreated();
+
+      await instance.addNewRow({ id: '4', name: 'name4' });
+
+      await instance.cancelAddedRow('4');
+
+      expect(instance.datasource.data).toEqual(initialData);
+      expect(instance.getEditedRows()).toEqual([]);
+      expect(instance.getAddedRows()).toEqual([]);
+    });
+  });
+
+  describe('selectClick', () => {
+    it('should call selected/unselected events', () => {
+      const selectedFn = jest.fn();
+      const unselectedFn = jest.fn();
+      const instance = new GridEditable({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+        events: {
+          selected: selectedFn,
+          unselected: unselectedFn,
+        },
+      });
+      const event = new MouseEvent('click');
+      const element = document.createElement('div');
+      instance.selectClick({ id: 1 }, true, event, element);
+      expect(selectedFn).toHaveBeenCalled();
+      instance.selectClick({ id: 1 }, false, event, element);
+      expect(unselectedFn).toHaveBeenCalled();
+    });
+  });
+
+  describe('selectAllClick', () => {
+    it('should call selectedAll/unselectedAll events', () => {
+      const selectedAllFn = jest.fn();
+      const unselectedAllFn = jest.fn();
+      const instance = new GridEditable({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+        events: {
+          selectedAll: selectedAllFn,
+          unselectedAll: unselectedAllFn,
+        },
+      });
+      const event = new MouseEvent('click');
+      const element = document.createElement('div');
+      instance.selectAllClick(true, event, element);
+      expect(selectedAllFn).toHaveBeenCalled();
+      instance.selectAllClick(false, event, element);
+      expect(unselectedAllFn).toHaveBeenCalled();
+    });
+  });
+
+  describe('Editing Selects', () => {
+    it('should change value of out column', async () => {
+      const instance = new GridEditable({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            {
+              id: 1, code: 1, name: 'name 1', code2: 1, name2: 'name 1', code3: 1,
+            },
+          ],
+        },
+        columns: [
+          {
+            name: 'code',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataText: 'name',
+              formatterDataText: 'name',
+              dataValue: 'value',
+              dataValueOut: [
+                'name',
+              ],
+              datasource: {
+                data: [
+                  { value: 1, name: 'name 1' },
+                  { value: 2, name: 'name 2' },
+                ],
+              },
+            },
+          },
+          {
+            name: 'code2',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataText: 'text',
+              formatterDataText: 'name',
+              dataValue: 'value',
+              datasource: {
+                data: [
+                  { value: 1, text: 'name 1' },
+                  { value: 2, text: 'name 2' },
+                ],
+              },
+            },
+          },
+          {
+            name: 'code3',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdTextInput',
+              dataValueOut: [
+                { column: 'text', columnOnGrid: 'name' },
+              ],
+            },
+          },
+        ],
+      });
+      instance.onCreated();
+      instance.editing = true;
+      const comp: any = instance.getEditableComponent(instance.columns[0] as GridColumnEditable, {
+        id: 1, code: 1, name: 'name 1', code2: 1, name2: 'name 1', code3: 1,
+      });
+      const select = new Select(comp);
+      await select.setValue(2);
+      (comp.events as any).change({ component: select });
+      (comp.events as any).blur({ component: select });
+      expect(instance.getEditedRows()).toEqual([
+        {
+          id: 1, code: 2, name: 'name 2', code2: 1, name2: 'name 1', code3: 1,
+        },
+      ]);
+
+      await select.setValue(1);
+      (comp.events as any).change({ component: select });
+      (comp.events as any).blur({ component: select });
+      expect(instance.getEditedRows()).toEqual([]);
+
+      const comp2: any = instance.getEditableComponent(instance.columns[1] as GridColumnEditable, {
+        id: 1, code: 1, name: 'name 2', code2: 1, name2: 'name 1', code3: 1,
+      });
+      const select2 = new Select(comp2);
+      await select2.setValue(2);
+      (comp2.events as any).change({ component: select2 });
+      (comp2.events as any).blur({ component: select2 });
+      expect(instance.getEditedRows()).toEqual([
+        {
+          id: 1, code: 1, name: 'name 2', code2: 2, name2: 'name 1', code3: 1,
+        },
+      ]);
+
+      const comp3: any = instance.getEditableComponent(instance.columns[2] as GridColumnEditable, {
+        id: 1, code: 1, name: 'name 2', code2: 2, name2: 'name 1', code3: 1,
+      });
+      const input3 = new TextInput(comp3);
+      input3.value = 2;
+      (comp3.events as any).change({ component: input3 });
+      (comp3.events as any).blur({ component: input3 });
+      expect(instance.getEditedRows()).toEqual([
+        {
+          id: 1, code: 1, name: 'name 2', code2: 2, name2: 'name 1', code3: 2,
+        },
+      ]);
+
+      await instance.saveEditedRows();
+      expect(instance.datasource.data).toEqual([
+        {
+          id: 1, code: 1, name: 'name 2', code2: 2, name2: 'name 1', code3: 2,
+        },
+      ]);
+    });
+  });
+
+  describe('Formatting Selects', () => {
+    it('should format value of column', async () => {
+      const instance = new GridEditable({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            {
+              id: 1, code: 1, code2: 2, code3: 3,
+            },
+          ],
+        },
+        columns: [
+          {
+            name: 'code',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataText: 'text',
+              dataValue: 'value',
+              datasource: {
+                data: [
+                  { value: 1, text: 'name 1' },
+                  { value: 2, text: 'name 2' },
+                ],
+              },
+            },
+          },
+          {
+            name: 'code2',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataText: 'text',
+              dataValue: 'value',
+              datasource: {
+                data: [
+                  { value: 1, text: 'name 1' },
+                ],
+              },
+            },
+          },
+          {
+            name: 'code3',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataText: 'text_error',
+              dataValue: 'value',
+              datasource: {
+                data: [
+                  { value: 3, text: 'name 3' },
+                ],
+              },
+            },
+          },
+        ],
+      });
+      instance.onCreated();
+      const column = instance.columns[0];
+      const value = column.formatterByRow(instance.datasource.data[0]);
+      expect(value).toBe('name 1');
+
+      const column2 = instance.columns[1];
+      const value2 = column2.formatterByRow(instance.datasource.data[0]);
+      expect(value2).toBe(2);
+
+      const column3 = instance.columns[2];
+      const value3 = column3.formatterByRow(instance.datasource.data[0]);
+      expect(value3).toBe(3);
+    });
+
+    it('should format value of column using multiple dataText value', async () => {
+      const instance = new GridEditable({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            { id: 1, code: 1, name: 'name 1' },
+          ],
+        },
+        columns: [
+          {
+            name: 'code',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataText: ['value', 'text', 'code'],
+              dataValue: 'value',
+              datasource: {
+                data: [
+                  { value: 1, text: 'name 1' },
+                  { value: 2, text: 'name 2' },
+                ],
+              },
+            },
+          },
+        ],
+      });
+      const column = instance.columns[0] as Column;
+      const value = column.formatterByRow({ id: 1, code: 1, name: 'name 1' });
+      expect(value).toBe('1 | name 1');
+    });
+
+    it('should format value of column using dataText with mask', async () => {
+      const instance = new GridEditable({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            { id: 1, code: 1, name: 'name 1' },
+          ],
+        },
+        columns: [
+          {
+            name: 'code',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataText: ['value', { name: 'text', mask: 'a.a.a' }, 'code'],
+              dataValue: 'value',
+              datasource: {
+                data: [
+                  { value: 1, text: 'name 1' },
+                  { value: 2, text: 'name 2' },
+                ],
+              },
+            },
+          },
+        ],
+      });
+      const column = instance.columns[0] as Column;
+      const value = column.formatterByRow({ id: 1, code: 1, name: 'name 1' });
+      expect(value).toBe('1 | n.a.m');
+    });
+
+    it('should format value of column using simple datasource', async () => {
+      const instance = new GridEditable({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            { id: 1, name: 'name 1' },
+          ],
+        },
+        columns: [
+          {
+            name: 'name',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              datasource: {
+                type: 'simple',
+                items: [
+                  'name 1',
+                ],
+              },
+            },
+          },
+        ],
+      });
+      const column = instance.columns[0] as Column;
+      const value = column.formatterByRow({ id: 1, name: 'name 1' });
+      expect(value).toBe('name 1');
+    });
+
+    // it('should format value of column using REST datasource', async () => {
+    //   let paramId: any;
+    //   const spy = jest.spyOn(Http, 'get').mockImplementation((_route:string, params: any) => {
+    //     paramId = params.params.id;
+    //     return Promise.resolve({
+    //       data: {
+    //         data: [{ id: '1', name: 'name 1' }, { id: '2', name: 'name 2' }],
+    //         pagination: { page: 1, total: 1, limit: 15 },
+    //       },
+    //     });
+    //   });
+
+    //   const instance = new GridEditable({
+    //     name: 'Grid',
+    //     component: 'ZdGridEditable',
+    //     datasource: {
+    //       uniqueKey: 'id',
+    //       data: [
+    //         { id: '1' },
+    //         { id: '2' },
+    //         { id: '3' },
+    //       ],
+    //     },
+    //     columns: [
+    //       {
+    //         name: 'id',
+    //         editable: true,
+    //         componentProps: {
+    //           name: 'column',
+    //           component: 'ZdSelect',
+    //           dataText: ['id', 'name'],
+    //           dataValue: 'id',
+    //           datasource: {
+    //             type: 'rest',
+    //             route: '/zeedhi',
+    //           },
+    //         },
+    //       },
+    //     ],
+    //   });
+    //   instance.onCreated();
+    //   const column = instance.columns[0] as Column;
+    //   let value1 = column.formatterByRow({ id: '1' });
+    //   let value2 = column.formatterByRow({ id: '2' });
+    //   let value3 = column.formatterByRow({ id: '3' });
+    //   expect(value1).toBe('1');
+    //   expect(value2).toBe('2');
+    //   expect(value3).toBe('3');
+    //   expect(spy).not.toHaveBeenCalled();
+
+		// 	jest.runAllTimers();
+    //   await flushPromises();
+
+    //   expect(spy).toHaveBeenCalled();
+    //   expect(paramId).toEqual(['1', '2', '3']);
+    //   value1 = column.formatterByRow({ id: '1' });
+    //   value2 = column.formatterByRow({ id: '2' });
+    //   value3 = column.formatterByRow({ id: '3' });
+    //   expect(value1).toBe('1 | name 1');
+    //   expect(value2).toBe('2 | name 2');
+    //   expect(value3).toBe('3');
+
+    //   spy.mockClear();
+    // });
+
+    it('should format value of column using dataTextDiscrete', async () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            {
+              id: 1, code: 1, code2: 2, code3: 3,
+            },
+          ],
+        },
+        columns: [
+          {
+            name: 'code',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataText: 'text',
+              dataValue: 'value',
+              dataTextDiscrete: ['value', 'text'],
+              datasource: {
+                data: [
+                  { value: 1, text: 'name 1' },
+                  { value: 2, text: 'name 2' },
+                ],
+              },
+            },
+          },
+        ],
+      });
+      const column = instance.columns[0];
+      const value = column.formatterByRow(instance.datasource.data[0]);
+      expect(value).toBe('1 | name 1');
+    });
+  });
+
+  describe('Formatting Select Multiple', () => {
+    it('should format a column with an array of values', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            { id: 1, ingredients: [1, 2] },
+          ],
+        },
+        columns: [
+          {
+            name: 'ingredients',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelectMultiple',
+              dataText: 'text',
+              dataValue: 'value',
+              datasource: {
+                uniqueKey: 'value',
+                data: [
+                  { value: 1, text: 'name 1' },
+                  { value: 2, text: 'name 2' },
+                  { value: 3, text: 'name 3' },
+                  { value: 4, text: 'name 4' },
+                ],
+              },
+            },
+          },
+        ],
+      });
+      const column = instance.columns[0];
+      const value = column.formatterByRow(instance.datasource.data[0]);
+      expect(value).toBe('name 1, name 2');
+    });
+
+    it('should format a ZdSelectMultiple using formatterDataText', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            { id: 1, ingredients: [1, 2], ingredient_name: ['First (formatter)', 'Second (formatter)'] },
+          ],
+        },
+        columns: [
+          {
+            name: 'ingredients',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelectMultiple',
+              dataText: 'text',
+              dataValue: 'value',
+              formatterDataText: 'ingredient_name',
+              datasource: {
+                uniqueKey: 'value',
+                data: [
+                  { value: 1, text: 'First' },
+                  { value: 2, text: 'Second' },
+                  { value: 3, text: 'Third' },
+                  { value: 4, text: 'Fourth' },
+                ],
+              },
+            },
+          },
+        ],
+      });
+      const column = instance.columns[0];
+      const value = column.formatterByRow(instance.datasource.data[0]);
+      expect(value).toBe('First (formatter), Second (formatter)');
+    });
+
+    it('should format a ZdSelectMultiple without using formatterDataText', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            { id: 1, ingredients: [1, 2], ingredient_name: ['First (formatter)', 'Second (formatter)'] },
+          ],
+        },
+        columns: [
+          {
+            name: 'ingredients',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelectMultiple',
+              dataText: 'text',
+              dataValue: 'value',
+              foreignColumns: {
+                text: 'ingredient_name',
+              },
+              datasource: {
+                uniqueKey: 'value',
+                data: [
+                  { value: 1, text: 'First' },
+                  { value: 2, text: 'Second' },
+                  { value: 3, text: 'Third' },
+                  { value: 4, text: 'Fourth' },
+                ],
+              },
+            },
+          },
+        ],
+      });
+      const column = instance.columns[0];
+      const value = column.formatterByRow(instance.datasource.data[0]);
+      expect(value).toBe('First (formatter), Second (formatter)');
+    });
+
+    it('should format a ZdSelectMultiple without using formatterDataText and dataText as object', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            {
+              id: 1, ingredients: [1, 2], value: [1, 2], ingredient_name: ['First (formatter)', 'Second (formatter)'],
+            },
+          ],
+        },
+        columns: [
+          {
+            name: 'ingredients',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelectMultiple',
+              dataText: [{ name: 'text' }, { name: 'value' }],
+              dataValue: 'value',
+              foreignColumns: {
+                text: 'ingredient_name',
+              },
+              datasource: {
+                uniqueKey: 'value',
+                data: [
+                  { value: 1, text: 'First' },
+                  { value: 2, text: 'Second' },
+                  { value: 3, text: 'Third' },
+                  { value: 4, text: 'Fourth' },
+                ],
+              },
+            },
+          },
+        ],
+      });
+      const column = instance.columns[0];
+      const value = column.formatterByRow(instance.datasource.data[0]);
+      expect(value).toBe('First (formatter) | 1, Second (formatter) | 2');
+    });
+
+    it('should format a ZdSelectMultiple without using formatterDataText and dataText as string', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            {
+              id: 1, ingredients: [1, 2], value: [1, 2], ingredient_name: ['First (formatter)', 'Second (formatter)'],
+            },
+          ],
+        },
+        columns: [
+          {
+            name: 'ingredients',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelectMultiple',
+              dataText: 'value',
+              dataValue: 'value',
+              foreignColumns: {
+                text: 'ingredient_name',
+              },
+              datasource: {
+                uniqueKey: 'value',
+                data: [
+                  { value: 1, text: 'First' },
+                  { value: 2, text: 'Second' },
+                  { value: 3, text: 'Third' },
+                  { value: 4, text: 'Fourth' },
+                ],
+              },
+            },
+          },
+        ],
+      });
+      const column = instance.columns[0];
+      const value = column.formatterByRow(instance.datasource.data[0]);
+      expect(value).toBe('1, 2');
+    });
+
+    it('should format a ZdSelectMultiple using multiple formatterDataText', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            { id: 1, ingredients: [1, 2], ingredient_name: ['First (formatter)', 'Second (formatter)'] },
+          ],
+        },
+        columns: [
+          {
+            name: 'ingredients',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelectMultiple',
+              dataText: ['value', 'text'],
+              dataValue: 'value',
+              formatterDataText: ['ingredients', 'ingredient_name'],
+              datasource: {
+                uniqueKey: 'value',
+                data: [
+                  { value: 1, text: 'First' },
+                  { value: 2, text: 'Second' },
+                  { value: 3, text: 'Third' },
+                  { value: 4, text: 'Fourth' },
+                ],
+              },
+            },
+          },
+        ],
+      });
+      const column = instance.columns[0];
+      const value = column.formatterByRow(instance.datasource.data[0]);
+      expect(value).toBe('1 | First (formatter), 2 | Second (formatter)');
+    });
+
+    it('should format a ZdSelectMultiple using multiple dataText and foreignColumns', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            { id: 1, ingredients: [1, 2], ingredient_name: ['First (formatter)', 'Second (formatter)'] },
+          ],
+        },
+        columns: [
+          {
+            name: 'ingredients',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelectMultiple',
+              dataText: ['value', 'text'],
+              dataValue: 'value',
+              foreignColumns: {
+                value: 'ingredients',
+                text: 'ingredient_name',
+              },
+              datasource: {
+                uniqueKey: 'value',
+                data: [
+                  { value: 1, text: 'First' },
+                  { value: 2, text: 'Second' },
+                  { value: 3, text: 'Third' },
+                  { value: 4, text: 'Fourth' },
+                ],
+              },
+            },
+          },
+        ],
+      });
+      const column = instance.columns[0];
+      const value = column.formatterByRow(instance.datasource.data[0]);
+      expect(value).toBe('1 | First (formatter), 2 | Second (formatter)');
+    });
+
+    it('should format value of column using dataText with mask', async () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            { id: 1, ingredients: [1, 2], ingredient_name: ['First (formatter)', 'Second (formatter)'] },
+          ],
+        },
+        columns: [
+          {
+            name: 'ingredients',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelectMultiple',
+              formatterDataText: [{ name: 'ingredient_name', mask: 'a.a.a' }],
+              dataText: [{ name: 'text', mask: 'a.a.a' }],
+              dataValue: 'value',
+              datasource: {
+                uniqueKey: 'value',
+                data: [
+                  { value: 1, text: 'First' },
+                  { value: 2, text: 'Second' },
+                  { value: 3, text: 'Third' },
+                  { value: 4, text: 'Fourth' },
+                ],
+              },
+            },
+          },
+        ],
+      });
+      const column = instance.columns[0];
+      const value = column.formatterByRow(instance.datasource.data[0]);
+      expect(value).toBe('f.i.r, s.e.c');
+    });
+
+    it('should format empty array or null values as a string', () => {
+      const instance = new GridEditable({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'ingredients',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelectMultiple',
+              dataText: 'text',
+              dataValue: 'value',
+              datasource: {
+                uniqueKey: 'value',
+                data: [
+                  { value: 1, text: 'name 1' },
+                  { value: 2, text: 'name 2' },
+                  { value: 3, text: 'name 3' },
+                  { value: 4, text: 'name 4' },
+                ],
+              },
+            },
+          },
+        ],
+      });
+      const column = instance.columns[0];
+      let value = column.formatterByRow({ id: 1, ingredients: [] });
+      expect(value).toBe('');
+
+      value = column.formatterByRow({ id: 1, ingredients: null });
+      expect(value).toBe('');
+
+      value = column.formatterByRow({ id: 1, ingredients: undefined });
+      expect(value).toBe('');
+    });
+  });
+
+  describe('getCellWithAppliedConditions', () => {
+    it('should return properties with applied contidtions', async () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            {
+              id: 1, code: 1, name: 'name 1', code2: 3,
+            },
+            {
+              id: 2, code: 2, name: 'name 2', code2: 6,
+            },
+          ],
+        },
+        columns: [
+          {
+            name: 'code',
+            editable: true,
+            conditions: {
+              editable: ({ row }: any) => row.id === 1,
+              componentProps: {
+                datasource: {
+                  limit: ({ row }: any) => row.id * 2,
+                },
+              },
+            },
+          },
+        ],
+      });
+      instance.changeData();
+      let row = instance.datasource.data[0];
+      let column = instance.columns[0];
+
+      let appliedConditions = instance.getAppliedConditions({ row, column });
+      expect(appliedConditions).toEqual({ editable: true, componentProps: { datasource: { limit: 2 } } });
+
+      row = instance.datasource.data[1];
+      appliedConditions = instance.getAppliedConditions({ row, column });
+      expect(appliedConditions).toEqual({ editable: false, componentProps: { datasource: { limit: 4 } } });
+
+      // grid with selectable calls this function with the selectable column that is not GridColumnEditable
+      // this column does not have applyCondition
+      instance.columns.unshift({ name: 'test' } as any);
+      row = instance.datasource.data[0];
+      column = instance.columns[0];
+      appliedConditions = instance.getAppliedConditions({ row, column });
+      expect(appliedConditions).toEqual({});
+    });
+  });
+
+  describe('Formatting Toggleable Inputs', () => {
+    let structure: IGridEditableProps;
+    let instance: GridEditable;
+    let row1: IDictionary<any>;
+    let row2: IDictionary<any>;
+
+    beforeEach(() => {
+      row1 = { id: 1, name: 'name 1', code: true };
+      row2 = { id: 2, name: 'name 2', code: false };
+
+      structure = {
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [row1, row2],
+        },
+        columns: [
+          {
+            name: 'code',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdCheckbox',
+            },
+          },
+        ],
+      };
+    });
+
+    it('by default, should get boolean values', () => {
+      instance = new GridEditable(structure);
+
+      expect(instance.columns[0].formatterByRow(row1)).toBeTruthy();
+      expect(instance.columns[0].formatterByRow(row2)).toBeFalsy();
+    });
+
+    it('should get trueValue and falseValue instead of default boolean if they are defined', () => {
+      structure.columns = [
+        {
+          name: 'code',
+          editable: true,
+          componentProps: {
+            name: 'column',
+            component: 'ZdCheckbox',
+            trueValue: 'T',
+            falseValue: 'F',
+          },
+        },
+      ];
+
+      row1 = { id: 1, name: 'name 1', code: 'T' };
+      row2 = { id: 2, name: 'name 2', code: 'F' };
+      structure.datasource = { data: [row1, row2] };
+
+      instance = new GridEditable(structure);
+
+      expect(instance.columns[0].formatterByRow(row1)).toBe('T');
+      expect(instance.columns[0].formatterByRow(row2)).toBe('F');
+    });
+
+    it('should get displayValues instead of trueValue and falseValue if all of them are defined', () => {
+      structure.columns = [
+        {
+          name: 'code',
+          editable: true,
+          componentProps: {
+            name: 'column',
+            component: 'ZdCheckbox',
+            trueValue: 'T',
+            falseValue: 'F',
+            trueDisplayValue: 'TRUE',
+            falseDisplayValue: 'FALSE',
+          },
+        },
+      ];
+
+      row1 = { id: 1, name: 'name 1', code: 'T' };
+      row2 = { id: 2, name: 'name 2', code: 'F' };
+      structure.datasource = { data: [row1, row2] };
+
+      instance = new GridEditable(structure);
+
+      expect(instance.columns[0].formatterByRow(row1)).toBe('TRUE');
+      expect(instance.columns[0].formatterByRow(row2)).toBe('FALSE');
+    });
+
+    it('should get icons instead of displayValues if all of them are defined', () => {
+      structure.columns = [
+        {
+          name: 'code',
+          editable: true,
+          componentProps: {
+            name: 'column',
+            component: 'ZdCheckbox',
+            trueDisplayValue: 'TRUE',
+            falseDisplayValue: 'FALSE',
+            trueIcon: 'checkboxOn',
+            falseIcon: 'checkboxOff',
+          },
+        },
+      ];
+
+      instance = new GridEditable(structure);
+
+      expect(instance.columns[0].formatterByRow(row1)).toBe('checkboxOn');
+      expect(instance.columns[0].formatterByRow(row2)).toBe('checkboxOff');
+    });
+
+    it('should test the focus event and the currentRow changing', () => {
+      const focusFn = jest.fn();
+      const newInstance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdTextInput',
+            },
+          },
+          {
+            name: 'id1',
+            editable: true,
+            align: 'right',
+            componentProps: {
+              name: 'column',
+              component: 'ZdTextInput',
+              events: {
+                focus: focusFn,
+              },
+            },
+          },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+            { id: 2 },
+          ],
+        },
+      });
+      const comp1: any = newInstance.getEditableComponent(newInstance.columns[0] as GridColumnEditable, { id: 1 });
+      const textInput1 = new TextInput(comp1);
+      comp1.events.focus({ component: textInput1 });
+      expect(newInstance.datasource.currentRow).toEqual({ id: 1 });
+
+      const comp2: any = newInstance.getEditableComponent(newInstance.columns[1] as GridColumnEditable, { id: 2 });
+      const textInput2 = new TextInput(comp2);
+      comp2.events.focus({ component: textInput2 });
+      expect(focusFn).toHaveBeenCalled();
+      expect(newInstance.datasource.currentRow).toEqual({ id: 2 });
+    });
+  });
+
+  describe('addNewRow', () => {
+    it('should add a new row to the datasource data and apply it to the editedRow property too', async () => {
+      const instance = new GridEditable({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+      });
+      instance.onCreated();
+      const newRow1 = { id: 2 };
+      const newRow2 = { id: 3 };
+      await instance.addNewRow(newRow1, 'start');
+      await instance.addNewRow(newRow2);
+      expect(instance.datasource.data[0]).toEqual({ id: 2, __added_row: true });
+      expect(instance.datasource.data[2]).toEqual({ id: 3, __added_row: true });
+      expect(instance.getEditedRows()).toEqual([{ id: 2 }, { id: 3 }]);
+      await instance.addNewRow({});
+      expect(instance.datasource.data.length).toBe(4);
+      expect(instance.getEditedRows()).toEqual([{ id: 2 }, { id: 3 }]);
+    });
+
+    it('should remove new rows calling cancelEditedRows', async () => {
+      const instance = new GridEditable({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+      });
+      instance.onCreated();
+      const newRow1 = { id: 2 };
+      const newRow2 = { id: 3 };
+      await instance.addNewRow(newRow1, 'start');
+      await instance.addNewRow(newRow2);
+      expect(instance.datasource.data.length).toBe(3);
+      await instance.cancelEditedRows();
+      expect(instance.datasource.data.length).toBe(1);
+    });
+
+    it('should remove new rows calling cancelEditedRows with RestDatasource', async () => {
+      const spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
+        data: {
+          data: [{ id: 1 }],
+          pagination: { page: 1, total: 1, limit: 2 },
+        },
+      }));
+
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          uniqueKey: 'id',
+          type: 'rest',
+          route: '/menu',
+          lazyLoad: true,
+          limit: 2,
+          page: 1,
+        },
+      });
+
+      await instance.datasource.get();
+      expect(instance.datasource.data.length).toBe(1);
+      const newRow1 = { id: 2 };
+      const newRow2 = { id: 3 };
+      await instance.addNewRow(newRow1, 'start');
+      await instance.addNewRow(newRow2);
+      expect(instance.datasource.data.length).toBe(3);
+      await instance.cancelEditedRows();
+      expect(instance.datasource.data.length).toBe(1);
+
+      spy.mockClear();
+    });
+  });
+
+  describe('getComponent', () => {
+    it('should get the component in specified cell', async () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'id',
+            label: 'ID',
+          },
+          {
+            name: 'name',
+            label: 'Name',
+            editable: true,
+            componentProps: {
+              name: 'name-input',
+              component: 'ZdTextInput',
+            },
+          },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          data: [
+            { id: '1', name: 'Employee 1' },
+          ],
+        },
+      });
+
+      const col = instance.columns[1];
+      const row = instance.datasource.data[0];
+      const component = instance.getEditableComponent(col, row);
+      Metadata.addInstance(component);
+
+      const metadataComp = Metadata.getInstance('name_editable_1');
+      const instanceComp = instance.getComponent('1', 'name');
+      expect(instanceComp).toEqual(metadataComp);
+    });
+  });
+
+  describe('setLookupDataFilter()', () => {
+    it('should not filter to lookupDatasorce', async () => {
+      const setFilterFn = jest.fn();
+      const spyDatasource = jest.spyOn(Datasource.prototype, 'setFilter').mockImplementation(setFilterFn);
+
+      const instance = new GridEditable({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          {
+            name: 'code',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataText: 'text',
+              formatterDataText: 'name',
+              dataValue: 'value',
+              dataValueOut: [
+                { column: 'text', columnOnGrid: 'name' },
+              ],
+            },
+          },
+        ],
+      });
+
+      const col1 = instance.columns[0];
+
+      col1.setLookupDataFilter({ id: 1 });
+
+      expect(setFilterFn).not.toHaveBeenCalled();
+      spyDatasource.mockClear();
+    });
+
+    it('should set a filter to lookupDatasorce', () => {
+      const setFilterFn = jest.fn();
+      const spyDatasource = jest.spyOn(Datasource.prototype, 'setFilter').mockImplementation(setFilterFn);
+
+      const instance = new GridEditable({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        datasource: {
+          data: [
+            {
+              id: 1, code: 1,
+            },
+          ],
+        },
+        columns: [
+          {
+            name: 'code',
+            editable: true,
+            componentProps: {
+              name: 'column',
+              component: 'ZdSelect',
+              dataText: 'text',
+              formatterDataText: 'name',
+              dataValue: 'value',
+              dataValueOut: [
+                { column: 'text', columnOnGrid: 'name' },
+              ],
+              datasource: {
+                data: [
+                  { value: 1, text: 'name 1' },
+                  { value: 2, text: 'name 2' },
+                ],
+              },
+            },
+          },
+        ],
+      });
+
+      const col1 = instance.columns[0];
+
+      col1.setLookupDataFilter({ id: 1 });
+
+      expect(setFilterFn).toHaveBeenCalled();
+      spyDatasource.mockClear();
+    });
+  });
+
+  describe('changeData()', () => {
+    let instance: GridEditable;
+
+    beforeEach(() => {
+      instance = setupInstance({
+        name: 'grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          data: [],
+        },
+      });
+      instance.editing = true;
+    });
+
+    it('should do nothing when data is not provided', () => {
+      const data = [{ id: null, name: '' }, { id: 1, name: '1' }];
+      instance.datasource.data = data;
+      instance.updateRow({ id: 1 });
+      instance.updateRow({ id: null });
+      instance.changeData();
+      expect(instance.getEditedRows()).toEqual([{ id: 1 }]);
+    });
+
+    it('should handle case where uniqueKey is not zero but falsy', () => {
+      const data = [{ id: '', name: 'null' }, { id: 1, name: '1' }];
+      instance.datasource.data = data;
+      instance.updateRow({ id: 1 });
+      instance.updateRow({ id: '' });
+      instance.changeData(data);
+      expect(instance.getEditedRows()).toEqual([{ id: 1 }]);
+    });
+  });
+
+  describe('enterEdit', () => {
+    let instance: GridEditable;
+
+    beforeEach(() => {
+      instance = new GridEditable({
+        name: 'grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          data: [],
+        },
+      });
+      instance.editing = true;
+    });
+
+    it('should throw an error if viewEnterEdit is not assigned', () => {
+      expect(() => {
+        instance.enterEdit('1', 'id');
+      }).toThrow('viewEnterEdit method not assigned');
+    });
+
+    it('should call viewEnterEdit with the correct arguments when viewEnterEdit is assigned', () => {
+      const viewEnterEdit = jest.fn();
+      instance.setViewEnterEdit(viewEnterEdit);
+      instance.enterEdit('1', 'id');
+
+      expect(viewEnterEdit).toHaveBeenCalledWith('1', 'id');
+    });
+  });
+
+  describe('inlineEdit', () => {
+    it('should not call inlineEdit event if the grid is already editing', () => {
+      const inlineEditFn = jest.fn();
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'id', editable: true },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+        events: {
+          inlineEdit: inlineEditFn,
+        },
+      });
+      instance.editing = true;
+      instance.inlineEdit(instance.datasource.data[0], instance.columns[0], {} as Event);
+      expect(inlineEditFn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('isAdded', () => {
+    it('should check if the row is an added row', async () => {
+      const grid = setupInstance({
+        name: 'grid',
+        component: 'ZdGridEditable',
+        datasource: { data: [], uniqueKey: 'id' },
+      });
+
+      await grid.addNewRow({ id: 1 });
+
+      expect(grid.isAdded({ id: 1 })).toBeTruthy();
+      expect(grid.isAdded({ id: 2 })).toBeFalsy();
+    });
+  });
+
+  describe('getAddedRows()', () => {
+    it('should retrieve the rows that were added', async () => {
+      const grid = setupInstance({
+        name: 'grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'name' },
+        ],
+        datasource: { data: [], uniqueKey: 'id' },
+      });
+
+      await grid.addNewRow({ id: '1', name: 'first' });
+      await grid.addNewRow({ id: '2', name: 'second' });
+      grid.updateCell('1', 'name', 'new value');
+
+      expect(grid.getAddedRows()).toEqual([{ id: '1', name: 'new value' }, { id: '2', name: 'second' }]);
+    });
+
+    it('should retrieve the rows that were added, synced with cell updates', async () => {
+      const grid = setupInstance({
+        name: 'grid',
+        component: 'ZdGridEditable',
+        columns: [
+          { name: 'name' },
+        ],
+        datasource: { data: [], uniqueKey: 'id' },
+      });
+
+      await grid.addNewRow({ id: '1', name: 'first' });
+      await grid.addNewRow({ id: '2', name: 'second' });
+      grid.updateCell('1', 'name', 'new value');
+      grid.updateCell('1', 'name', 'first');
+
+      expect(grid.getAddedRows()).toEqual([{ id: '1', name: 'first' }, { id: '2', name: 'second' }]);
+    });
+  });
+
+  describe('cancel column', () => {
+    it('should call DataEditor cancelAddedRow', () => {
+      const grid = new GridEditable({
+        name: 'grid',
+        component: 'ZdGridEditable',
+        showCancelColumn: true,
+        columns: [
+          { name: 'name' },
+        ],
+        datasource: { data: [{ id: '1' }], uniqueKey: 'id' },
+      });
+      const spy = jest.fn();
+      grid.cancelAddedRow = spy;
+    });
+  });
+
+  describe('Grid delegations', () => {
+    beforeEach(() => {
+      jest.resetAllMocks();
+    });
+
+    it('should call dataEditorWithAdd delegation', () => {
+      const spyObj = spyOnAllMethods(DataEditorWithAdd.prototype);
+
+      const instance = setupInstance({
+        name: 'grid',
+        component: 'ZdGridEditable',
+      });
+
+      instance.addCancelColumn();
+      expect(spyObj.addCancelColumn).toHaveBeenCalled();
+
+      instance.getCancelColumnProps();
+      expect(spyObj.getCancelColumnProps).toHaveBeenCalled();
+
+      instance.isAdded({ id: '1' });
+      expect(spyObj.isAdded).toHaveBeenCalledWith({ id: '1' });
+
+      instance.cancelAddedRow('1');
+      expect(spyObj.cancelAddedRow).toHaveBeenCalledWith('1');
+
+      instance.cancelAddedRows();
+      expect(spyObj.cancelAddedRows).toHaveBeenCalled();
+
+      instance.getAddedRows();
+      expect(spyObj.getAddedRows).toHaveBeenCalled();
+
+      instance.addNewRow({ id: '1' });
+      expect(spyObj.addNewRow).toHaveBeenCalledWith({ id: '1' }, undefined);
+
+      instance.setViewEnterEdit(() => {});
+      expect(spyObj.setViewEnterEdit).toHaveBeenCalledTimes(1)
+
+      instance.getVisibleValue({ id: '1' }, { name: 'name' });
+      expect(spyObj.getVisibleValue).toHaveBeenCalledWith({ id: '1' }, { name: 'name' });
+
+      instance.getEditableComponent({ name: 'name' }, { id: '1' });
+      expect(spyObj.getEditableComponent).toHaveBeenCalledWith({ name: 'name' }, { id: '1' });
+
+      instance.isEdited({ name: 'name' }, { id: '1' });
+      expect(spyObj.isEdited).toHaveBeenCalledWith({ name: 'name' }, { id: '1' });
+
+      instance.isValid({ name: 'name' }, { id: '1' });
+      expect(spyObj.isValid).toHaveBeenCalledWith({ name: 'name' }, { id: '1' }, undefined);
+
+      instance.isGridValid();
+      expect(spyObj.isGridValid).toHaveBeenCalled();
+
+      instance.getComponent('1', 'name');
+      expect(spyObj.getComponent).toHaveBeenCalledWith('1', 'name');
+
+      instance.updateRow({ id: '1' });
+      expect(spyObj.updateRow).toHaveBeenCalledWith({ id: '1' });
+
+      instance.updateCell('1', 'name', 'value');
+      expect(spyObj.updateCell).toHaveBeenCalledWith('1', 'name', 'value');
+
+      instance.changeData();
+      expect(spyObj.changeData).toHaveBeenCalled();
+
+      instance.enterEdit('1', 'name');
+      expect(spyObj.enterEdit).toHaveBeenCalledWith('1', 'name');
+
+      instance.cancelEditedRows();
+      expect(spyObj.cancelEditedRows).toHaveBeenCalled();
+
+      instance.saveEditedRows();
+      expect(spyObj.saveEditedRows).toHaveBeenCalled();
+
+      instance.getCanEditRow({ id: '1' });
+      expect(spyObj.getCanEditRow).toHaveBeenCalledWith({ id: '1' });
+
+      instance.reapplyCanEditRow({ id: '1' });
+      expect(spyObj.reapplyCanEditRow).toHaveBeenCalledWith({ id: '1' });
+
+      instance.getEditedRows();
+      expect(spyObj.getEditedRows).toHaveBeenCalled();
+
+      instance.checkValid({ name: 'name' }, { id: '1' });
+      expect(spyObj.checkValid).toHaveBeenCalledWith({ name: 'name' }, { id: '1' });
+
+      instance.getEditedRow({ id: '1' });
+      expect(spyObj.getEditedRow).toHaveBeenCalledWith({ id: '1' });
+    });
+
+    it('should call TableActionBuilder delegation', () => {
+      const spy = jest.spyOn(TableActionBuilder.prototype, 'getActionComponent');
+
+      const instance = setupInstance({
+        name: 'grid',
+        component: 'ZdGridEditable',
+      });
+
+      instance.getActionComponent({ name: 'name' }, { name: 'name' } as any, { id: '1' });
+      expect(spy).toHaveBeenCalledWith({ name: 'name' }, { name: 'name' }, { id: '1' }, undefined);
+    });
+
+    it('should call IterableTable delegation', () => {
+      const spyChangeOrder = jest.spyOn(IterableTable.prototype, 'changeOrder').mockImplementation(async () => {});
+      const spySelectCell = jest.spyOn(IterableTable.prototype, 'selectCell').mockImplementation(() => {});
+      const spyGetRowStyleConditions = jest.spyOn(IterableTable.prototype, 'getRowStyleConditions').mockImplementation(() => ({}));
+      const spyDeleteRows = jest.spyOn(IterableTable.prototype, 'deleteRows').mockImplementation(async () => { return [] });
+      const spyReapplyRowStyleConditions = jest.spyOn(IterableTable.prototype, 'reapplyRowStyleConditions').mockImplementation(async () => {});
+
+      const instance = new GridEditable({
+        name: 'grid',
+        component: 'ZdGridEditable',
+      });
+
+      instance.changeOrder([{ key: 'name', order: 'asc' }]);
+      expect(spyChangeOrder).toHaveBeenCalledWith([{ key: 'name', order: 'asc' }]);
+
+      instance.selectCell({ id: '1' }, { name: 'name' } as any);
+      expect(spySelectCell).toHaveBeenCalledWith({ id: '1' }, { name: 'name' });
+
+      instance.getRowStyleConditions({ id: '1' });
+      expect(spyGetRowStyleConditions).toHaveBeenCalledWith({ id: '1' });
+
+      instance.reapplyRowStyleConditions({ id: '1' });
+      expect(spyReapplyRowStyleConditions).toHaveBeenCalledWith({ id: '1' });
+
+      instance.deleteRows();
+      expect(spyDeleteRows).toHaveBeenCalled();
+    });
+
+    it('should call DataSelector delegation', () => {
+      const spySelectAll = jest.spyOn(DataSelector.prototype, 'selectAll').mockImplementation(() => {});
+      const spyToggleRow = jest.spyOn(DataSelector.prototype, 'toggleRow').mockImplementation(() => {});
+      const spySelectRow = jest.spyOn(DataSelector.prototype, 'selectRow').mockImplementation(() => {});
+      const spyCallDisableSelection = jest.spyOn(DataSelector.prototype, 'callDisableSelection').mockImplementation(() => (true));
+
+      const instance = new GridEditable({
+        name: 'grid',
+        component: 'ZdGridEditable',
+      });
+
+      instance.selectAll(true);
+      expect(spySelectAll).toHaveBeenCalledWith(true);
+
+      instance.toggleRow({ id: '1' });
+      expect(spyToggleRow).toHaveBeenCalledWith({ id: '1' });
+
+      instance.selectRow({ id: '1' }, true);
+      expect(spySelectRow).toHaveBeenCalledWith({ id: '1' }, true);
+
+      instance.callDisableSelection({ id: '1' });
+      expect(spyCallDisableSelection).toHaveBeenCalledWith({ id: '1' });
+    });
+
+    it('should call GridEditableEvents delegation', () => {
+      const spyCellClick = jest.spyOn(GridEditableEvents.prototype, 'cellClick').mockImplementation(() => {});
+      const spyCellClickEvent = jest.spyOn(GridEditableEvents.prototype, 'cellClickEvent').mockImplementation(() => {});
+      const spyCellDoubleClick = jest.spyOn(GridEditableEvents.prototype, 'cellDoubleClick').mockImplementation(() => {});
+      const spyRowDoubleClick = jest.spyOn(GridEditableEvents.prototype, 'rowDoubleClick').mockImplementation(() => {});
+      const spyInlineEdit = jest.spyOn(GridEditableEvents.prototype, 'inlineEdit').mockImplementation(() => {});
+
+      const instance = new GridEditable({
+        name: 'grid',
+        component: 'ZdGridEditable',
+      });
+
+      instance.cellClick({ id: '1' }, { name: 'name' } as any, {} as any, {} as any);
+      expect(spyCellClick).toHaveBeenCalledWith({ id: '1' }, { name: 'name' }, {} as any, {} as any);
+
+      instance.cellClickEvent({ id: '1' }, { name: 'name' } as any, {} as any, {} as any);
+      expect(spyCellClickEvent).toHaveBeenCalledWith({ id: '1' }, { name: 'name' }, {} as any, {} as any);
+
+      instance.cellDoubleClick({ id: '1' }, { name: 'name' } as any, {} as any, {} as any);
+      expect(spyCellDoubleClick).toHaveBeenCalledWith({ id: '1' }, { name: 'name' }, {} as any, {} as any);
+
+      instance.inlineEdit({ id: '1' }, { name: 'name' } as any, {} as any, {} as any);
+      expect(spyInlineEdit).toHaveBeenCalledWith({ id: '1' }, { name: 'name' }, {} as any, {} as any);
+
+      instance.rowDoubleClick({ id: '1' }, { name: 'name' } as any, {} as any);
+      expect(spyRowDoubleClick).toHaveBeenCalledWith({ id: '1' }, { name: 'name' }, {} as any);
+    });
+
+    it('should call DataNavigator delegation', () => {
+      const spyNavigateDatasource = jest.spyOn(DataNavigator.prototype, 'navigateDatasource').mockImplementation(() => {});
+      const spyNavigatePageUp = jest.spyOn(DataNavigator.prototype, 'navigatePageUp').mockImplementation(() => {});
+      const spyNavigatePageDown = jest.spyOn(DataNavigator.prototype, 'navigatePageDown').mockImplementation(() => {});
+
+      const instance = new GridEditable({
+        name: 'grid',
+        component: 'ZdGridEditable',
+      });
+
+      instance.navigateDatasource('up');
+      expect(spyNavigateDatasource).toHaveBeenCalledWith('up');
+
+      instance.navigatePageUp();
+      expect(spyNavigatePageUp).toHaveBeenCalled();
+
+      instance.navigatePageDown();
+      expect(spyNavigatePageDown).toHaveBeenCalled();
+    });
+
+    it('should call ViewNavigator delegation', () => {
+      const spyNavigateLeft = jest.spyOn(ViewNavigator.prototype, 'navigateLeft').mockImplementation(() => {});
+      const spyNavigateRight = jest.spyOn(ViewNavigator.prototype, 'navigateRight').mockImplementation(() => {});
+      const spyNavigateUp = jest.spyOn(ViewNavigator.prototype, 'navigateUp').mockImplementation(() => {});
+      const spyNavigateDown = jest.spyOn(ViewNavigator.prototype, 'navigateDown').mockImplementation(() => {});
+      const spySetViewNavigate = jest.spyOn(ViewNavigator.prototype, 'setViewNavigate').mockImplementation(() => {});
+
+      const instance = new GridEditable({
+        name: 'grid',
+        component: 'ZdGridEditable',
+      });
+
+      instance.cellSelection = true;
+
+      instance.navigateLeft({} as any);
+      expect(spyNavigateLeft).toHaveBeenCalledWith({} as any);
+
+      instance.navigateRight({} as any);
+      expect(spyNavigateRight).toHaveBeenCalledWith({} as any);
+
+      instance.navigateUp();
+      expect(spyNavigateUp).toHaveBeenCalled();
+
+      instance.navigateDown();
+      expect(spyNavigateDown).toHaveBeenCalled();
+
+      instance.setViewNavigate(() => {});
+      expect(spySetViewNavigate).toHaveBeenCalled();
+    });
+  });
+});