@zeedhi/common 1.111.1 → 3.0.0

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

@@ -0,0 +1,1638 @@
+import {
+  Config,
+  Datasource,
+  I18n,
+  IDictionary, IEventParam, KeyMap, Loader, Metadata,
+  SimpleControllerBuilder,
+} from '@zeedhi/core';
+import {
+  Button,
+  Grid, GridColumn,
+  IGridProps,
+  ConditionsManager,
+} from '../../../../src';
+import { mockLoaderGetInstance } from '../../__helpers__/mock-loader-get-instance';
+
+const originalConfig = { ...Config };
+
+const setupInstance = (props: Partial<IGridProps> = {}) => {
+  const instance = new Grid({
+    name: 'Grid',
+    component: 'ZdGrid',
+    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;
+};
+
+const clearInstance = (instance: Grid) => {
+  instance.onBeforeDestroy();
+  (KeyMap as any).isElementActive = () => false;
+};
+
+describe('Grid', () => {
+  beforeAll(() => {
+    Loader.setBuilder(new SimpleControllerBuilder());
+  });
+
+  describe('constructor()', () => {
+    it('should create new grid with default values', () => {
+      const instance = new Grid({ name: 'Grid', component: 'ZdGrid' });
+      expect(instance.columns).toEqual([]);
+      expect(instance.dense).toBeTruthy();
+      expect(instance.events).toEqual({});
+      expect(instance.footerSlot).toEqual([
+        {
+          name: 'Grid_iterablePagination',
+          component: 'ZdIterablePagination',
+        },
+        {
+          name: 'Grid_iterableInfoDiv',
+          component: 'ZdTag',
+          cssClass: 'zd-grid-div-footer',
+          tag: 'div',
+          children: [
+            {
+              name: 'Grid_iterablePageSize',
+              component: 'ZdIterablePageSize',
+              iterableComponentName: 'Grid',
+            },
+            {
+              name: 'Grid_iterablePageInfo',
+              component: 'ZdIterablePageInfo',
+              iterableComponentName: 'Grid',
+            },
+          ],
+        },
+      ]);
+      expect(instance.backgroundColor).toBe('transparent');
+      expect(instance.headerBackground).toBe('');
+      expect(instance.height).toBe('auto');
+      expect(instance.minHeight).toBe('auto');
+      expect(instance.maxHeight).toBe('none');
+      expect(instance.fillHeight).toBeFalsy();
+      expect(instance.width).toBe('100%');
+      expect(instance.minWidth).toBe('auto');
+      expect(instance.maxWidth).toBe('none');
+      expect(instance.pageSizes).toEqual(['5', '10', '25', '50']);
+      expect(instance.selectable).toBeFalsy();
+      expect(instance.showFooter).toBeTruthy();
+      expect(instance.showHeader).toBeTruthy();
+      expect(instance.toolbarSlot).toEqual([{ name: 'Grid_gridSearch', component: 'ZdSearch' }]);
+      expect(instance.disableSelection).toBeUndefined();
+      expect(instance.showSelectAll).toBeTruthy();
+      expect(instance.selectAllPages).toBeFalsy();
+      expect(instance.cellSelection).toBeFalsy();
+    });
+
+    it('should create new Grid replacing default values', () => {
+      const fn = jest.fn();
+      const instance = new Grid({
+        name: 'grid',
+        component: 'Grid',
+        columns: [{ name: 'id' }],
+        dense: false,
+        footerSlot: [{ name: 'button', component: 'ZdButton' }],
+        headerBackground: 'red',
+        backgroundColor: 'blue',
+        height: '400px',
+        maxHeight: '500px',
+        minHeight: '500px',
+        width: '400px',
+        maxWidth: '500px',
+        minWidth: '500px',
+        fillHeight: true,
+        pageSizes: ['6', '30'],
+        selectable: true,
+        showFooter: false,
+        showHeader: false,
+        toolbarSlot: [{ name: 'left', component: 'slot' }],
+        disableSelection: fn,
+        showSelectAll: false,
+        selectAllPages: true,
+        cellSelection: true,
+      });
+      expect(JSON.stringify(instance.columns)).toBe(JSON.stringify([new GridColumn({ name: 'id' })]));
+      expect(instance.dense).toBeFalsy();
+      expect(instance.footerSlot).toEqual([
+        { name: 'button', component: 'ZdButton' },
+      ]);
+      expect(instance.headerBackground).toBe('red');
+      expect(instance.backgroundColor).toBe('blue');
+      expect(instance.height).toBe('400px');
+      expect(instance.maxHeight).toBe('500px');
+      expect(instance.minHeight).toBe('500px');
+      expect(instance.width).toBe('400px');
+      expect(instance.maxWidth).toBe('500px');
+      expect(instance.minWidth).toBe('500px');
+      expect(instance.fillHeight).toBeTruthy();
+      expect(instance.pageSizes).toEqual(['6', '30']);
+      expect(instance.selectable).toBeTruthy();
+      expect(instance.showFooter).toBeFalsy();
+      expect(instance.showHeader).toBeFalsy();
+      expect(instance.toolbarSlot).toEqual([
+        { name: 'left', component: 'slot' },
+      ]);
+      expect(instance.disableSelection).toEqual(fn);
+      expect(instance.showSelectAll).toBeFalsy();
+      expect(instance.selectAllPages).toBeTruthy();
+      expect(instance.cellSelection).toBeTruthy();
+    });
+
+    it('should create new grid with change default slot names', () => {
+      const instance = new Grid({
+        name: 'Grid',
+        component: 'ZdGrid',
+        footerSlot: [
+          { name: 'iterablePagination', component: 'ZdIterablePagination' },
+          { name: 'iterablePageSize', component: 'ZdIterablePageSize' },
+          { name: 'iterablePageInfo', component: 'ZdIterablePageInfo' },
+        ],
+        toolbarSlot: [{ name: 'gridSearch', component: 'ZdSearch' }],
+      });
+      expect(instance.footerSlot).toEqual([
+        { name: 'iterablePagination', component: 'ZdIterablePagination' },
+        { name: 'iterablePageSize', component: 'ZdIterablePageSize' },
+        { name: 'iterablePageInfo', component: 'ZdIterablePageInfo' },
+      ]);
+      expect(instance.toolbarSlot).toEqual([{ name: 'gridSearch', component: 'ZdSearch' }]);
+    });
+
+    it('should not add action columns in datasource searchIn', () => {
+      const instance = setupInstance({
+        name: 'iterable',
+        component: 'Iterable',
+        pageSizes: [],
+        columns: [
+          { name: 'column', component: 'Column' },
+          { name: 'actionColumn', component: 'Column', type: 'action' },
+          { name: 'column2', component: 'Column' },
+          { name: 'actionColumn2', component: 'Column', type: 'action' },
+        ],
+        datasource: {
+          data: [
+            { name: 'name', value: 'value' },
+          ],
+        },
+      });
+      expect(instance.datasource.searchIn).toEqual(['column', 'column2']);
+    });
+
+    it('should not add hidden columns in datasource searchIn', () => {
+      const instance = setupInstance({
+        name: 'iterable',
+        component: 'Iterable',
+        pageSizes: [],
+        columns: [
+          { name: 'column', component: 'Column' },
+          { name: 'hiddenColumn', component: 'Column', isVisible: false },
+          { name: 'column2', component: 'Column' },
+          { name: 'hiddenColumn2', component: 'Column', isVisible: false },
+        ],
+        datasource: {
+          data: [
+            { name: 'name', value: 'value' },
+          ],
+        },
+      });
+      expect(instance.datasource.searchIn).toEqual(['column', 'column2']);
+    });
+
+    it('should add hidden columns in datasource searchIn if searchVisibleOnly is false', () => {
+      const instance = setupInstance({
+        name: 'iterable',
+        component: 'Iterable',
+        searchVisibleOnly: false,
+        pageSizes: [],
+        columns: [
+          { name: 'column', component: 'Column' },
+          { name: 'hiddenColumn', component: 'Column', isVisible: false },
+          { name: 'column2', component: 'Column' },
+          { name: 'hiddenColumn2', component: 'Column', isVisible: false },
+        ],
+        datasource: {
+          data: [
+            { name: 'name', value: 'value' },
+          ],
+        },
+      });
+      expect(instance.datasource.searchIn).toEqual(['column', 'hiddenColumn', 'column2', 'hiddenColumn2']);
+    });
+
+    it('when a column becomes visible, should add it to searchIn', () => {
+      const instance = setupInstance({
+        name: 'iterable',
+        component: 'Iterable',
+        pageSizes: [],
+        columns: [
+          { name: 'column', component: 'Column' },
+          { name: 'hiddenColumn', component: 'Column', isVisible: false },
+        ],
+        datasource: {
+          data: [
+            { name: 'name', value: 'value' },
+          ],
+        },
+      });
+      expect(instance.datasource.searchIn).toEqual(['column']);
+
+      instance.columns[1].isVisible = true;
+      expect(instance.datasource.searchIn).toEqual(['column', 'hiddenColumn']);
+
+      instance.datasource.searchIn = ['column'];
+      expect(instance.datasource.searchIn).toEqual(['column']);
+    });
+
+    it('should add hidden columns in datasource searchIn if Config.iterableSearchVisibleOnly is false', () => {
+      Config.set({ iterableSearchVisibleOnly: false });
+      const instance = setupInstance({
+        name: 'iterable',
+        component: 'Iterable',
+        pageSizes: [],
+        columns: [
+          { name: 'column', component: 'Column' },
+          { name: 'hiddenColumn', component: 'Column', isVisible: false },
+          { name: 'column2', component: 'Column' },
+          { name: 'hiddenColumn2', component: 'Column', isVisible: false },
+        ],
+        datasource: {
+          data: [
+            { name: 'name', value: 'value' },
+          ],
+        },
+      });
+      expect(instance.datasource.searchIn).toEqual(['column', 'hiddenColumn', 'column2', 'hiddenColumn2']);
+      Config.set(originalConfig);
+    });
+
+    it('should set defaultSearchVisibleOnly as true when Config.iterableSearchVisibleOnly is undefined', () => {
+      Config.set({ iterableSearchVisibleOnly: undefined });
+      const instance = setupInstance();
+      expect(instance.defaultSearchVisibleOnly).toBeTruthy();
+      Config.set(originalConfig);
+    });
+
+    it('should create new Iterable with accessor datasource', () => {
+      const controller = {
+        datasource: {
+          uniqueKey: 'id',
+          data: [{ id: '1' }],
+        }
+      }
+      mockLoaderGetInstance(controller);
+
+      const instance = setupInstance({
+        name: 'iterable',
+        component: 'Iterable',
+        datasource: '{{Controller.datasource}}' as any,
+      });
+
+      expect(instance.datasource).toBeInstanceOf(Datasource);
+      expect(instance.datasource.data).toEqual([{ id: '1' }]);
+    });
+  });
+
+  describe('changeColumnOrder()', () => {
+    it('should order by id column', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGrid',
+        columns: [
+          { name: 'id' },
+        ],
+      });
+
+      const idColumn = instance.columns[0] as GridColumn;
+      instance.changeOrder([{ key: idColumn.name, order: 'asc' }]);
+      expect(instance.datasource.getOrderByColumn(idColumn.name)).toBe('asc');
+    });
+  });
+
+  describe('rowClick', () => {
+    it('should call rowClick event', () => {
+      jest.resetAllMocks();
+      let rowClicked = false;
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGrid',
+        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('cellClick', () => {
+    it('should call cellClick event', () => {
+      const controller = {
+        filter: { id: '1' },
+      };
+      mockLoaderGetInstance(controller);
+      let cellClicked = '';
+      const instance = new Grid({
+        name: 'Grid',
+        component: 'ZdGrid',
+        columns: [
+          { name: 'id' },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          filter: '{{AppController.filter}}' as Object,
+          data: [
+            { id: 1 },
+          ],
+        },
+        events: {
+          cellClick: ({ column }: any) => { cellClicked = column.name; },
+        },
+      });
+			instance.onCreated();
+      const event = new MouseEvent('click');
+      const element = document.createElement('div');
+      instance.cellClick({ id: 1 }, instance.columns[0] as GridColumn, event, element);
+      expect(instance.datasource.currentRow).toEqual({});
+      expect(instance.datasource.filter).toEqual({ id: '1' });
+      expect(cellClicked).toBe('id');
+    });
+
+    it('should call rowClick after cellClick event', () => {
+      let cellClicked = '';
+      let rowClicked = false;
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGrid',
+        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 GridColumn, 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: 'ZdGrid',
+        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 GridColumn, event, element);
+      instance.rowClick({ id: 1 }, event, element);
+      expect(instance.datasource.currentRow).toEqual({});
+      expect(cellClicked).toBe('id');
+      expect(rowClicked).toBeFalsy();
+    });
+
+    it('should not call rowClick', () => {
+      let rowClicked = false;
+      const instance = new Grid({
+        name: 'Grid',
+        component: 'ZdGrid',
+        columns: [
+          { name: 'id' },
+        ],
+        datasource: {
+          limit: 2,
+          page: 1,
+          data: [
+            { id: 1 },
+          ],
+        },
+        events: {
+          rowClick: () => { rowClicked = true; },
+        },
+      });
+      const event = new MouseEvent('click');
+      const element = document.createElement('div');
+      instance.cellClick({ id: 1 }, instance.columns[0] as GridColumn, event, element);
+      expect(rowClicked).toBeFalsy();
+    });
+  });
+
+  describe('selectClick', () => {
+    it('should call selected/unselected events', () => {
+      const selectedFn = jest.fn();
+      const unselectedFn = jest.fn();
+      const instance = new Grid({
+        name: 'Grid',
+        component: 'ZdGrid',
+        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 Grid({
+        name: 'Grid',
+        component: 'ZdGrid',
+        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('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', () => {
+      const instance = setupInstance();
+
+      instance.navigateDatasource('down');
+      expect(instance.datasource.currentRow).toEqual({ id: 1 });
+      instance.navigateDatasource('down');
+      expect(instance.datasource.currentRow).toEqual({ id: 2 });
+      instance.navigateDatasource('down');
+      expect(instance.datasource.page).toBe(2);
+
+      instance.navigateDatasource('up');
+      expect(instance.datasource.currentRow).toEqual({ id: 4 });
+      instance.navigateDatasource('up');
+      expect(instance.datasource.currentRow).toEqual({ id: 3 });
+      instance.navigateDatasource('up');
+      expect(instance.datasource.page).toBe(1);
+
+      dispatchEvent('pagedown', {}); // page down
+      expect(instance.datasource.page).toBe(1);
+      dispatchEvent('pageup', {}); // page up
+      expect(instance.datasource.page).toBe(2);
+      dispatchEvent('pageup', {}); // page up
+      expect(instance.datasource.page).toBe(3);
+      dispatchEvent('pageup', {}); // page up
+      expect(instance.datasource.page).toBe(4);
+      dispatchEvent('pageup', {}); // page up
+      expect(instance.datasource.page).toBe(4);
+      dispatchEvent('pagedown', {}); // page down
+      expect(instance.datasource.page).toBe(3);
+
+      clearInstance(instance);
+    });
+
+    it('when using cellSelection, should navigate using viewNavigate', () => {
+      const instance = setupInstance({ cellSelection: true });
+      const fn = jest.fn();
+      instance.setViewNavigate(fn);
+
+      dispatchEvent('arrowright', {});
+      expect(fn).toHaveBeenLastCalledWith('right', expect.any(Object));
+      dispatchEvent('arrowleft', {});
+      expect(fn).toHaveBeenLastCalledWith('left', expect.any(Object));
+      dispatchEvent('arrowup', {});
+      expect(fn).toHaveBeenLastCalledWith('up');
+      dispatchEvent('arrowdown', {});
+      expect(fn).toHaveBeenLastCalledWith('down');
+      dispatchEvent('enter', {});
+      expect(fn).toHaveBeenLastCalledWith('down');
+      dispatchEvent('shift+enter', {});
+      expect(fn).toHaveBeenLastCalledWith('up');
+      dispatchEvent('tab', {});
+      expect(fn).toHaveBeenLastCalledWith('right', expect.any(Object));
+      dispatchEvent('shift+tab', {});
+      expect(fn).toHaveBeenLastCalledWith('left', expect.any(Object));
+
+      clearInstance(instance);
+    });
+
+    it('when using cellSelection, if viewNavigate is not defined, should do nothing', () => {
+      const instance = setupInstance({ cellSelection: true });
+
+      expect(() => instance.navigateDown()).not.toThrow();
+      expect(() => instance.navigateLeft({} as IEventParam<any>)).not.toThrow();
+      expect(() => instance.navigateRight({} as IEventParam<any>)).not.toThrow();
+      expect(() => instance.navigateUp()).not.toThrow();
+
+      clearInstance(instance);
+    });
+
+    it('when not using cellSelection, horizontal navigation should not call viewNavigator', () => {
+      const instance = setupInstance();
+      const fn = jest.fn();
+      instance.setViewNavigate(fn);
+
+      dispatchEvent('arrowright', {});
+      expect(fn).not.toHaveBeenCalled();
+      dispatchEvent('arrowleft', {});
+      expect(fn).not.toHaveBeenCalled();
+
+      clearInstance(instance);
+    });
+  });
+
+  describe('deleteRows()', () => {
+    it('should delete selected rows', async () => {
+      const instance = new Grid({
+        name: 'Grid',
+        component: 'ZdGrid',
+        columns: [
+          {
+            name: 'name',
+            align: 'right',
+          },
+        ],
+        datasource: {
+          data: [
+            { id: '1', name: 'name1' },
+            { id: '2', name: 'name2' },
+            { id: '3', name: 'name3' },
+          ],
+        },
+      });
+      instance.onCreated();
+
+      instance.selectedRows = [{ id: '1', name: 'name1' }, { id: '3', name: 'name3' }];
+
+      await instance.deleteRows();
+      expect(instance.datasource.data).toEqual([
+        { id: '2', name: 'name2' },
+      ]);
+    });
+
+    it('when deleteRows is called with selectAllPages, should throw', async () => {
+      const instance = new Grid({
+        name: 'Grid',
+        component: 'ZdGrid',
+        selectAllPages: true,
+        columns: [{
+          name: 'name',
+          align: 'right',
+        }],
+        datasource: {
+          data: [
+            { id: '1', name: 'name1' },
+            { id: '2', name: 'name2' },
+            { id: '3', name: 'name3' },
+          ],
+        },
+      });
+
+      expect(instance.deleteRows()).rejects.toThrow();
+    });
+  });
+
+  describe('getActionComponent()', () => {
+    afterEach(() => {
+      jest.resetAllMocks();
+    });
+
+    it('should return action component', () => {
+      const clickFn = jest.fn();
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGrid',
+        columns: [
+          {
+            name: 'id',
+            label: 'ID',
+            sortable: false,
+          },
+          {
+            name: 'name',
+            label: 'Name',
+          },
+          {
+            name: 'action1',
+            type: 'action',
+            children: [
+              {
+                name: 'btn',
+                component: 'ZdButton',
+                icon: true,
+                small: true,
+                iconName: 'emailOutline',
+                conditions: {
+                  color: () => 'green',
+                },
+                events: {
+                  click: clickFn,
+                },
+              },
+            ],
+          },
+        ],
+        datasource: {
+          data: [
+            { id: '1', name: 'name1' },
+          ],
+        },
+      });
+
+      let comp: any = instance.getActionComponent(
+        instance.columns[2].children[0],
+        instance.columns[2] as GridColumn,
+        instance.datasource.data[0],
+      );
+      expect(comp.color).toBeUndefined();
+
+      instance.reapplyConditions(instance.datasource.data[0]);
+      comp = instance.getActionComponent(
+        instance.columns[2].children[0],
+        instance.columns[2] as GridColumn,
+        instance.datasource.data[0],
+      );
+      comp.events.click({ component: new Button(comp), event: 'click' });
+      expect(clickFn).toBeTruthy();
+      expect(comp.color).toBe('green');
+    });
+
+    it('should return action compEvents is click', () => {
+      const clickFn = jest.fn();
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGrid',
+        columns: [
+          {
+            name: 'id',
+            label: 'ID',
+            sortable: false,
+          },
+          {
+            name: 'name',
+            label: 'Name',
+          },
+          {
+            name: 'action1',
+            type: 'action',
+            children: [
+              {
+                name: 'btn',
+                component: 'ZdButton',
+                events: {},
+              },
+            ],
+          },
+        ],
+        datasource: {
+          data: [
+            { id: '1', name: 'name1' },
+          ],
+        },
+      });
+
+      instance.reapplyConditions(instance.datasource.data[0]);
+      const comp: any = instance
+        .getActionComponent(instance.columns[2].children[0], instance.columns[2] as GridColumn, instance.datasource.data[0]);
+      if (comp.events.click) {
+        comp.events.click({ component: new Button(comp), event: 'click' });
+        expect(clickFn).toBeTruthy();
+      }
+    });
+
+    it('should return action component new event', () => {
+      const clickFn = jest.fn();
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGrid',
+        columns: [
+          {
+            name: 'id',
+            label: 'ID',
+            sortable: false,
+          },
+          {
+            name: 'name',
+            label: 'Name',
+          },
+          {
+            name: 'action1',
+            type: 'action',
+            children: [
+              {
+                name: 'btn',
+                component: 'ZdButton',
+                newComponent: {
+                  name: 'btnComp',
+                  component: 'ZdButton',
+                  events: {
+                    click: clickFn,
+                  },
+                },
+              },
+            ],
+          },
+        ],
+        datasource: {
+          data: [
+            { id: '1', name: 'name1' },
+          ],
+        },
+      });
+
+      instance.reapplyConditions(instance.datasource.data[0]);
+      const comp: any = instance
+        .getActionComponent(instance.columns[2].children[0], instance.columns[2] as GridColumn, instance.datasource.data[0]);
+      const newBtn = new Button(comp);
+      comp.newComponent.events.click({ component: newBtn });
+      expect(clickFn).toHaveBeenCalled();
+    });
+
+    it('should return action component new event in activator', () => {
+      const clickFn = jest.fn();
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGrid',
+        columns: [
+          {
+            name: 'id',
+            label: 'ID',
+            sortable: false,
+          },
+          {
+            name: 'name',
+            label: 'Name',
+          },
+          {
+            name: 'action1',
+            type: 'action',
+            children: [
+              {
+                name: 'action1',
+                type: 'action',
+                children: [
+                  {
+                    name: 'btnComp',
+                    component: 'ZdDropdown',
+                    activator: {
+                      name: 'activatorDropdown',
+                      component: 'Button',
+                      label: 'Dropdown',
+                      events: {
+                        click: clickFn,
+                      },
+                    },
+                    children: [
+                      {
+                        name: 'FlatButton1',
+                        component: 'ZdButton',
+                        label: 'Flat 1',
+                        flat: true,
+                        events: {
+                          click: clickFn,
+                        },
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        datasource: {
+          data: [
+            { id: '1', name: 'name1' },
+          ],
+        },
+      });
+
+      const comp: any = instance.getActionComponent(
+        instance.columns[2].children[0],
+        instance.columns[2] as GridColumn,
+        instance.datasource.data[0],
+      );
+      const newBtn = new Button(comp.children[0].activator);
+      comp.children[0].activator.events.click({ component: newBtn });
+      expect(clickFn).toHaveBeenCalled();
+    });
+
+    it('should call update instance when the action component already exists', () => {
+      const clickFn = jest.fn();
+      const spy = jest.spyOn(Metadata, 'updateInstance');
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGrid',
+        columns: [
+          {
+            name: 'id',
+            label: 'ID',
+            sortable: false,
+          },
+          {
+            name: 'name',
+            label: 'Name',
+          },
+          {
+            name: 'action1',
+            type: 'action',
+            children: [
+              {
+                name: 'btnComp',
+                component: 'ZdButton',
+                events: {
+                  click: clickFn,
+                },
+              },
+            ],
+          },
+        ],
+        datasource: {
+          data: [
+            { id: '1', name: 'name1' },
+          ],
+        },
+      });
+
+      instance.reapplyConditions(instance.datasource.data[0]);
+      const comp: any = instance
+        .getActionComponent(instance.columns[2].children[0], instance.columns[2] as GridColumn, instance.datasource.data[0]);
+      const newBtn = new Button(comp);
+      Metadata.addInstance(newBtn, newBtn.allowDuplicate);
+
+      instance
+        .getActionComponent(instance.columns[2].children[0], instance.columns[2] as GridColumn, instance.datasource.data[0]);
+      newBtn.click({} as Event, {} as HTMLElement);
+      expect(clickFn).toHaveBeenCalled();
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(spy).toHaveBeenLastCalledWith('btnComp_1', {
+        name: 'btnComp_1',
+        component: 'ZdButton',
+        allowDuplicate: true,
+        autoRegister: false,
+        children: [],
+      });
+    });
+
+    it('should return action component of nested components', () => {
+      const clickFn = jest.fn();
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGrid',
+        columns: [
+          {
+            name: 'id',
+            label: 'ID',
+            sortable: false,
+          },
+          {
+            name: 'name',
+            label: 'Name',
+          },
+          {
+            name: 'action1',
+            type: 'action',
+            children: [
+              {
+                name: 'tooltip-1',
+                component: 'ZdTooltip',
+                children: [
+                  {
+                    name: 'btn-1',
+                    component: 'ZdButton',
+                    conditions: {
+                      color: () => 'green',
+                    },
+                    events: {
+                      click: clickFn,
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        datasource: {
+          data: [
+            { id: '1', name: 'name1' },
+          ],
+        },
+      });
+
+      instance.reapplyConditions(instance.datasource.data[0]);
+      const comp: any = instance
+        .getActionComponent(instance.columns[2].children[0], instance.columns[2] as GridColumn, instance.datasource.data[0]);
+
+      const button = new Button(comp.children[0]);
+      const event = new Event('click');
+      button.click(event, {});
+
+      expect(button.color).toBe('green');
+      expect(clickFn).toHaveBeenCalledWith({
+        event,
+        component: button,
+        element: {},
+        row: instance.datasource.data[0],
+        column: instance.columns[2],
+      });
+    });
+
+    it('action conditions should override action properties', () => {
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGrid',
+        columns: [
+          {
+            name: 'id',
+            label: 'ID',
+            sortable: false,
+          },
+          {
+            name: 'name',
+            label: 'Name',
+          },
+          {
+            name: 'action1',
+            type: 'action',
+            children: [
+              {
+                name: 'btn-1',
+                component: 'ZdButton',
+                color: 'blue',
+                cssStyle: {
+                  padding: 0,
+                  backgroundColor: 'blue',
+                },
+                conditions: {
+                  color: () => 'green',
+                  cssStyle: {
+                    backgroundColor: () => 'green',
+                  },
+                },
+              },
+            ],
+          },
+        ],
+        datasource: {
+          data: [
+            { id: '1', name: 'name1' },
+          ],
+        },
+      });
+
+      instance.reapplyConditions(instance.datasource.data[0]);
+      const comp: any = instance
+        .getActionComponent(instance.columns[2].children[0], instance.columns[2] as GridColumn, instance.datasource.data[0]);
+
+      const button: any = new Button(comp);
+
+      expect(button.color).toBe('green');
+      expect(button.cssStyle).toEqual({ padding: 0, backgroundColor: 'green' });
+    });
+
+    it('should call update instance despite having accessors in the action', () => {
+      const controller = {
+        get visible() {
+          return true;
+        },
+      };
+      mockLoaderGetInstance(controller);
+      const clickFn = jest.fn();
+      const spy = jest.spyOn(Metadata, 'updateInstance');
+      const instance = setupInstance({
+        name: 'Grid',
+        component: 'ZdGrid',
+        columns: [
+          {
+            name: 'id',
+            label: 'ID',
+            sortable: false,
+          },
+          {
+            name: 'name',
+            label: 'Name',
+          },
+          {
+            name: 'action1',
+            type: 'action',
+            children: [
+              {
+                name: 'btnComp',
+                component: 'ZdButton',
+                isVisible: '{{AppController.visible}}',
+                events: {
+                  click: clickFn,
+                },
+              },
+            ],
+          },
+        ],
+        datasource: {
+          data: [
+            { id: '1', name: 'name1' },
+          ],
+        },
+      });
+
+      instance.reapplyConditions(instance.datasource.data[0]);
+      const comp: any = instance
+        .getActionComponent(instance.columns[2].children[0], instance.columns[2] as GridColumn, instance.datasource.data[0]);
+      const newBtn = new Button(comp);
+      Metadata.addInstance(newBtn, newBtn.allowDuplicate);
+
+      instance
+        .getActionComponent(instance.columns[2].children[0], instance.columns[2] as GridColumn, instance.datasource.data[0]);
+      newBtn.click({} as Event, {} as HTMLElement);
+      expect(clickFn).toHaveBeenCalled();
+      expect(spy).toHaveBeenCalledTimes(2);
+      expect(spy).toHaveBeenLastCalledWith('btnComp_1', {
+        name: 'btnComp_1',
+        component: 'ZdButton',
+        autoRegister: false,
+        allowDuplicate: true,
+        children: [],
+      });
+    });
+  });
+
+  describe('callDisableSelection', () => {
+    it('when called, should call disableSelection function', () => {
+      const disableSelection = jest.fn();
+      const instance = new Grid({
+        name: 'grid',
+        component: 'ZdGrid',
+        disableSelection,
+        datasource: {
+          data: [
+            { id: 1 },
+            { id: 2 },
+          ],
+        },
+      });
+
+      instance.callDisableSelection({ id: 1 });
+      expect(disableSelection).toHaveBeenCalledWith({ row: { id: 1 }, component: instance });
+
+      instance.callDisableSelection({ id: 2 });
+      expect(disableSelection).toHaveBeenCalledWith({ row: { id: 2 }, component: instance });
+
+      expect(disableSelection).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('selectAll', () => {
+    it('Should select all rows', () => {
+      const data = [
+        { id: '1', name: 'First', department: 1 },
+        { id: '2', name: 'Second', department: 1 },
+        { id: '3', name: 'Third', department: 1 },
+      ];
+      const disabledRows = ({ row }: any) => {
+        if (row.id === '2') return true;
+        return false;
+      };
+      const grid = setupInstance({
+        name: 'grid',
+        component: 'TekGrid',
+        selectable: true,
+        disableSelection: disabledRows,
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'department', grouped: true },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          data,
+        },
+      });
+
+      grid.selectAll(true);
+
+      expect(grid.selectedRows.length).toBe(2);
+
+      grid.selectAll(false);
+
+      expect(grid.selectedRows.length).toBe(0);
+    });
+
+    it('Should not select all rows when grid is not selectable', () => {
+      const data = [
+        { id: '1', name: 'First', department: 1 },
+        { id: '2', name: 'Second', department: 1 },
+        { id: '3', name: 'Third', department: 1 },
+      ];
+      const grid = new Grid({
+        name: 'grid',
+        component: 'TekGrid',
+        selectable: false,
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'department', grouped: true },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          data,
+        },
+      });
+
+      grid.selectAll(true);
+
+      expect(grid.selectedRows.length).toBe(0);
+    });
+  });
+
+  describe('selectRow', () => {
+    it('when selectRow is called, should change the selection of a row', () => {
+      const data = [
+        { id: '1', name: 'First', department: 1 },
+        { id: '2', name: 'Second', department: 1 },
+        { id: '3', name: 'Third', department: 1 },
+      ];
+      const grid = setupInstance({
+        name: 'grid',
+        component: 'ZdGrid',
+        selectable: true,
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'department', grouped: true },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          data,
+        },
+      });
+
+      grid.selectRow(data[0], true);
+      grid.selectRow(data[1], true);
+
+      expect(grid.selectedRows).toEqual(expect.arrayContaining([data[0], data[1]]));
+
+      grid.selectRow(data[0], false);
+
+      expect(grid.selectedRows).toEqual(expect.arrayContaining([data[1]]));
+    });
+
+    it('when selectRow is called with selectAllPages, should change the selection of a row', () => {
+      const data = [
+        { id: '1', name: 'First', department: 1 },
+        { id: '2', name: 'Second', department: 1 },
+        { id: '3', name: 'Third', department: 1 },
+      ];
+      const grid = setupInstance({
+        name: 'grid',
+        component: 'ZdGrid',
+        selectable: true,
+        selectAllPages: true,
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'department', grouped: true },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          data,
+        },
+      });
+
+      grid.selectRow(data[0], true);
+      grid.selectRow(data[1], true);
+
+      expect(grid.selectionState.allSelected).toBeFalsy();
+      expect(grid.selectionState.except).toEqual(expect.arrayContaining([data[0], data[1]]));
+
+      grid.selectRow(data[0], false);
+
+      expect(grid.selectionState.except).toEqual(expect.arrayContaining([data[1]]));
+    });
+  });
+
+  describe('toggleRow', () => {
+    it('when toggleRow is called, should toggle the selection of a row', () => {
+      const data = [
+        { id: '1', name: 'First', department: 1 },
+        { id: '2', name: 'Second', department: 1 },
+        { id: '3', name: 'Third', department: 1 },
+      ];
+      const grid = setupInstance({
+        name: 'grid',
+        component: 'ZdGrid',
+        selectable: true,
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'department', grouped: true },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          data,
+        },
+      });
+
+      grid.toggleRow(data[0]);
+
+      expect(grid.selectedRows).toEqual(expect.arrayContaining([data[0]]));
+
+      grid.toggleRow(data[0]);
+
+      expect(grid.selectedRows).not.toEqual(expect.arrayContaining([data[0]]));
+    });
+
+    it('when toggleRow is called with selectAllPages, should toggle the selection of a row', () => {
+      const data = [
+        { id: '1', name: 'First', department: 1 },
+        { id: '2', name: 'Second', department: 1 },
+        { id: '3', name: 'Third', department: 1 },
+      ];
+      const grid = setupInstance({
+        name: 'grid',
+        component: 'ZdGrid',
+        selectable: true,
+        selectAllPages: true,
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'department', grouped: true },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          data,
+        },
+      });
+
+      grid.toggleRow(data[0]);
+
+      expect(grid.selectionState.except).toEqual(expect.arrayContaining([data[0]]));
+
+      grid.toggleRow(data[0]);
+
+      expect(grid.selectionState.except).not.toEqual(expect.arrayContaining([data[0]]));
+    });
+  });
+
+  describe('getRowStyleConditions', () => {
+    it('Should get rowStyleConditions', () => {
+      const data = [
+        { id: 1, name: 'First' },
+        { id: 2, name: 'Second' },
+      ];
+      const rowConditions = (row: IDictionary) => {
+        if (row.id === 2) {
+          return {
+            cssClass: 'second',
+            cssStyle: {
+              color: 'red',
+            },
+          };
+        }
+        return {};
+      };
+      const grid = setupInstance({
+        name: 'grid',
+        component: 'TekGrid',
+        selectable: true,
+        rowStyleConditions: rowConditions,
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          data,
+        },
+      });
+
+      grid.reapplyRowStyleConditions(data[1]);
+
+      expect(grid.getRowStyleConditions(data[1])).toEqual({
+        cssClass: 'second',
+        cssStyle: {
+          color: 'red',
+        },
+      });
+
+      const grid2 = setupInstance({
+        name: 'grid',
+        component: 'TekGrid',
+        selectable: true,
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          data,
+        },
+      });
+
+      expect(grid2.getRowStyleConditions(data[1])).toEqual({});
+    });
+  });
+
+  describe('onMounted', () => {
+    it('when keyMap is defined, should overwrite default keyMapping', () => {
+      const fn = jest.fn();
+      KeyMap.bind = jest.fn();
+      const grid = new Grid({ name: 'grid', component: 'ZdGrid', keyMap: { up: { event: fn } } });
+      grid.onMounted({} as HTMLElement);
+
+      expect(KeyMap.bind).toHaveBeenLastCalledWith(expect.not.objectContaining({
+        up: expect.anything(),
+      }), expect.anything(), expect.anything());
+    });
+  });
+
+  describe('selectCell', () => {
+    it('when called, should select a cell', () => {
+      const grid = setupInstance({ name: 'grid', component: 'ZdGrid', columns: [{ name: 'id' }] });
+
+      grid.selectCell({ id: '1' }, grid.columns[0] as any);
+
+      expect(grid.datasource.currentRow).toEqual({ id: '1' });
+      expect(grid.currentColumn).toEqual(grid.columns[0]);
+    });
+  });
+
+  describe('getAppliedConditions', () => {
+    test('should call ConditionsManager getAppliedConditions', () => {
+      const spy = jest.spyOn(ConditionsManager.prototype, 'getAppliedConditions');
+
+      const grid = setupInstance({ name: 'grid', component: 'ZdGrid', columns: [{ name: 'id' }] });
+
+      const mockRow = { id: 1 };
+      grid.getAppliedConditions({ row: mockRow, column: grid.columns[0] })
+
+      expect(spy).toHaveBeenCalledWith({ row: mockRow, column: grid.columns[0] })
+    })
+  });
+
+  describe('getCurrentRowIndex', () => {
+    test('should return the index of the currentRow', () => {
+      const row = { id: 1 };
+      const grid = setupInstance({
+        name: 'grid',
+        component: 'ZdGrid',
+        columns: [{ name: 'id' }],
+        datasource: {
+          data: [row],
+        },
+      });
+
+      grid.setCurrentRow(row);
+
+      expect(grid.getCurrentRowIndex()).toBe(0)
+    })
+   })
+
+   describe('getColumn()', () => {
+     it('should return a column', () => {
+       const instance = new Grid({
+         name: 'iterable',
+         component: 'Iterable',
+         columns: [
+           { name: 'column', component: 'Column' },
+         ],
+       });
+       expect(instance.getColumn('column')).toBeInstanceOf(GridColumn);
+     });
+ 
+     it('should throw an error if column does not exist', () => {
+       const instance = new Grid({
+         name: 'iterable',
+         component: 'Iterable',
+         columns: [
+           { name: 'column', component: 'Column' },
+         ],
+       });
+       expect(() => { instance.getColumn('column2'); }).toThrow();
+     });
+   });
+
+  describe('pageText', () => {
+    it('should get paging info', () => {
+      const instance = setupInstance();
+
+      const spy = jest.spyOn(I18n.instance, 't').mockImplementation(() => 'gridPageText');
+      expect(instance.pageText).toBe('1 - 2 of 7');
+      instance.datasource.page = 4;
+      expect(instance.pageText).toBe('7 - 7 of 7');
+      instance.datasource.page = 1;
+      instance.datasource.data = [];
+      instance.datasource.total = 0;
+      expect(instance.pageText).toBe('0 - 0 of 0');
+      spy.mockImplementation(() => '1 - 2 of 11');
+      expect(instance.pageText).toBe('1 - 2 of 11');
+      spy.mockClear();
+
+      clearInstance(instance);
+    });
+  });
+
+  describe('paginationLength', () => {
+    it('should get total of pages', () => {
+      const instance = setupInstance();
+      expect(instance.paginationLength).toBe(4);
+
+      clearInstance(instance);
+    });
+
+    it('should return 0 for invalid values', () => {
+      const instance = setupInstance();
+      instance.datasource.total = 10;
+      instance.datasource.limit = 0;
+      expect(instance.paginationLength).toBe(0);
+
+      (instance.datasource.limit as any) = '0';
+      expect(instance.paginationLength).toBe(0);
+
+      (instance.datasource.limit as any) = '';
+      expect(instance.paginationLength).toBe(0);
+
+      (instance.datasource.limit as any) = 'abc';
+      expect(instance.paginationLength).toBe(0);
+
+      (instance.datasource.limit as any) = 10;
+      instance.datasource.total = 0;
+      expect(instance.paginationLength).toBe(0);
+
+      (instance.datasource.total as any) = '0';
+      expect(instance.paginationLength).toBe(0);
+
+      (instance.datasource.total as any) = '';
+      expect(instance.paginationLength).toBe(0);
+
+      (instance.datasource.total as any) = 'abc';
+      expect(instance.paginationLength).toBe(0);
+
+      clearInstance(instance);
+    });
+  });
+
+  describe('getCellWithAppliedConditions', () => {
+    test('should call reapplyConditions', () => {
+      const grid = setupInstance();
+      const spy = jest.spyOn(grid, 'reapplyConditions');
+
+      grid.getCellWithAppliedConditions(grid.columns, { id: 1 });
+
+      expect(spy).toHaveBeenCalledWith({ id: 1 }, grid.columns)
+
+      clearInstance(grid);
+    })
+  })
+
+  describe('changeData', () => {
+    it('should call reapplyConditions for each row', () => {
+      const grid = setupInstance();
+      const spy = jest.spyOn(grid, 'reapplyConditions');
+
+      grid.changeData();
+
+      expect(spy).toHaveBeenCalledTimes(2);
+      clearInstance(grid);
+    });
+
+    it('should call reapplyConditions for each of the defined rows', () => {
+      const grid = setupInstance();
+      const spy = jest.spyOn(grid, 'reapplyConditions');
+
+      grid.changeData([{ id: '1' }]);
+
+      expect(spy).toHaveBeenCalledTimes(1);
+      clearInstance(grid);
+    });
+  });
+
+  describe('setSearch', () => {
+    test('should call datasource setSearch', async () => {
+      const grid = setupInstance();
+      const spy = jest.spyOn(grid.datasource, 'setSearch');
+
+      await grid.setSearch('test');
+
+      expect(spy).toHaveBeenCalledWith('test');
+      clearInstance(grid);
+    });
+  });
+
+  describe('getConditionalProps', () => {
+    it('should return an empty object when no conditions are applied', () => {
+      const grid = setupInstance();
+      const row = grid.datasource.data[0];
+      const column = grid.columns[0];
+      const result = grid.getConditionalProps({ row, column });
+      expect(result).toEqual({});
+    });
+
+    it('should merge row style conditions and cell applied conditions', () => {
+      const grid = setupInstance();
+      grid.getRowStyleConditions = jest.fn().mockReturnValue({ backgroundColor: 'red' });
+      grid.getAppliedConditions = jest.fn().mockReturnValue({ fontSize: '12px' });
+      const row = grid.datasource.data[0];
+      const column = grid.columns[0];
+      const result = grid.getConditionalProps({ row, column });
+      expect(result).toEqual({ backgroundColor: 'red', fontSize: '12px' });
+    });
+  });
+
+  describe('findRow', () => {
+    it('should retrieve a row from datasource', () => {
+      const grid = setupInstance();
+      const row = grid.datasource.data[0];
+      const result = grid.findRow(grid.getRowKey(row));
+      expect(result).toEqual(row);
+    });
+  });
+});