@zeedhi/teknisa-components-common 1.108.0 → 1.109.1

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

@@ -1,980 +1,980 @@
-import { Grid, Tag } from '@zeedhi/common';
-import { Config, Http } from '@zeedhi/core';
-import {
-  ITekConfig,
-  ITekGridLayoutInfo,
-  TekGrid,
-  TekGridLayoutOptions,
-} from '../../../../src';
-
-let savedLayouts: string = '';
-const testLayouts: ITekGridLayoutInfo = {
-  layouts: {
-    'Name first': {
-      name: 'Name first',
-      gridWidth: '544px',
-      columns: [
-        {
-          name: 'id',
-          width: '34px',
-          isVisible: true,
-          grouped: false,
-        },
-        {
-          name: 'name',
-          width: '107px',
-          isVisible: true,
-          grouped: false,
-        },
-        {
-          name: 'salary',
-          width: '114px',
-          isVisible: true,
-          grouped: false,
-        },
-      ],
-    },
-  },
-};
-
-describe('LayoutOptions', () => {
-  describe('constructor()', () => {
-    it('should create layout options object', () => {
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-
-      expect(instance.currentLayoutName).toBe('');
-      expect(instance.layouts).toEqual({});
-      expect(instance.layoutNames).toEqual([]);
-      expect(instance.originalColumnProps).toEqual([]);
-    });
-  });
-
-  describe('mounted()', () => {
-    it('should store the original column props of a TekGrid', () => {
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-          {
-            name: 'date1',
-            filterProps: {
-              name: 'date1-filter',
-              helperValue: 'TODAY',
-            },
-          },
-          {
-            name: 'date2',
-            filterProps: [
-              {
-                name: 'date2-filter1',
-                helperValue: 'TODAY',
-              },
-              {
-                name: 'date2-filter2',
-                helperValue: 'TOMORROW',
-              },
-            ],
-          },
-        ],
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.parent = tag;
-      tag.parent = grid;
-
-      instance.onMounted({} as HTMLElement);
-
-      expect(instance.originalDatasourceDynamicFilter).toEqual({});
-      expect(instance.originalDatasourceFilter).toEqual({});
-      expect(instance.originalColumnProps).toEqual([
-        {
-          name: 'id',
-          isVisible: true,
-          fixed: false,
-          grouped: false,
-          minWidth: undefined,
-          maxWidth: undefined,
-          aggregation: undefined,
-          align: 'left',
-          groupOpened: undefined,
-          label: '',
-          filterHelperValue: [],
-        },
-        {
-          name: 'name',
-          isVisible: true,
-          fixed: false,
-          grouped: false,
-          minWidth: undefined,
-          maxWidth: undefined,
-          aggregation: undefined,
-          align: 'left',
-          groupOpened: undefined,
-          label: '',
-          filterHelperValue: [],
-        },
-        {
-          name: 'salary',
-          isVisible: true,
-          fixed: false,
-          grouped: false,
-          minWidth: undefined,
-          maxWidth: undefined,
-          aggregation: undefined,
-          align: 'left',
-          groupOpened: undefined,
-          label: '',
-          filterHelperValue: [],
-        },
-        {
-          name: 'date1',
-          isVisible: true,
-          fixed: false,
-          grouped: false,
-          minWidth: undefined,
-          maxWidth: undefined,
-          aggregation: undefined,
-          align: 'left',
-          groupOpened: undefined,
-          label: '',
-          filterHelperValue: 'TODAY',
-        },
-        {
-          name: 'date2',
-          isVisible: true,
-          fixed: false,
-          grouped: false,
-          minWidth: undefined,
-          maxWidth: undefined,
-          aggregation: undefined,
-          align: 'left',
-          groupOpened: undefined,
-          label: '',
-          filterHelperValue: ['TODAY', 'TOMORROW'],
-        },
-      ]);
-    });
-
-    it('should store the original column props of a normal Grid', () => {
-      const grid = new Grid({
-        name: 'grid',
-        component: 'Grid',
-        columns: [
-          { name: 'id', maxWidth: '200px', minWidth: '100px' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.parent = grid;
-
-      instance.onMounted({} as HTMLElement);
-
-      expect(instance.originalColumnProps).toEqual([
-        {
-          name: 'id',
-          isVisible: true,
-          maxWidth: '200px',
-          minWidth: '100px',
-          aggregation: undefined,
-          align: 'left',
-          groupOpened: undefined,
-          label: '',
-          filterHelperValue: '',
-          fixed: false,
-          grouped: undefined,
-        },
-        {
-          name: 'name',
-          isVisible: true,
-          minWidth: undefined,
-          maxWidth: undefined,
-          aggregation: undefined,
-          align: 'left',
-          groupOpened: undefined,
-          label: '',
-          filterHelperValue: '',
-          fixed: false,
-          grouped: undefined,
-        },
-        {
-          name: 'salary',
-          isVisible: true,
-          minWidth: undefined,
-          maxWidth: undefined,
-          aggregation: undefined,
-          align: 'left',
-          groupOpened: undefined,
-          label: '',
-          filterHelperValue: '',
-          fixed: false,
-          grouped: undefined,
-        },
-      ]);
-    });
-  });
-
-  describe('loadLayouts()', () => {
-    it('should load using event', async () => {
-      const layouts: ITekGridLayoutInfo = {
-        currentLayoutName: 'Name first',
-        layouts: {
-          'Name first': {
-            name: 'Name first',
-            gridWidth: '544px',
-            columns: [
-              {
-                name: 'id',
-                width: '34px',
-                isVisible: true,
-                grouped: false,
-              },
-              {
-                name: 'name',
-                width: '107px',
-                isVisible: true,
-                grouped: false,
-              },
-              {
-                name: 'salary',
-                width: '114px',
-                isVisible: true,
-                grouped: false,
-              },
-            ],
-          },
-        },
-      };
-
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-        events: {
-          loadLayouts: async () => layouts,
-        },
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.parent = tag;
-      tag.parent = grid;
-
-      await instance.onMounted({} as HTMLElement);
-
-      expect(instance.currentLayoutName).toBe('Name first');
-      expect(instance.layoutNames).toEqual(['Name first']);
-      expect(instance.layouts).toEqual(layouts.layouts);
-    });
-
-    it('should load using localStorage', async () => {
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.parent = tag;
-      tag.parent = grid;
-
-      const localStorageMock = (function () { // eslint-disable-line func-names
-        return {
-          getItem(): string {
-            return JSON.stringify(testLayouts);
-          },
-          setItem(_name: string, value: string) {
-            savedLayouts = value;
-          },
-        };
-      }());
-
-      Object.defineProperty(window, 'localStorage', {
-        value: localStorageMock,
-      });
-
-      await instance.onMounted({} as HTMLElement);
-
-      expect(instance.currentLayoutName).toBe('');
-      expect(instance.layoutNames).toEqual(['Name first']);
-      expect(instance.layouts).toEqual(testLayouts.layouts);
-    });
-  });
-
-  describe('newLayout()', () => {
-    it('should add new layout', () => {
-      const newLayout = {
-        name: 'Name first',
-        gridWidth: '544px',
-        columns: [
-          {
-            name: 'id',
-            width: '34px',
-            isVisible: true,
-            grouped: false,
-          },
-          {
-            name: 'name',
-            width: '107px',
-            isVisible: true,
-            grouped: false,
-          },
-          {
-            name: 'salary',
-            width: '114px',
-            isVisible: true,
-            grouped: false,
-          },
-        ],
-      };
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.parent = tag;
-      tag.parent = grid;
-
-      instance.onMounted({} as HTMLElement);
-
-      instance.newLayout(newLayout);
-
-      expect(instance.currentLayoutName).toBe('Name first');
-      expect(instance.layoutNames).toEqual(['Name first']);
-      expect(instance.layouts).toEqual({ 'Name first': newLayout });
-      expect(savedLayouts).toBe(JSON.stringify({
-        currentLayoutName: 'Name first',
-        layouts: { 'Name first': newLayout },
-      }));
-    });
-  });
-
-  describe('addLayout()', () => {
-    it('should add new layout and not change current layout', () => {
-      const newLayout = {
-        name: 'Name first',
-        gridWidth: '544px',
-        columns: [
-          {
-            name: 'id',
-            width: '34px',
-            isVisible: true,
-            grouped: false,
-          },
-          {
-            name: 'name',
-            width: '107px',
-            isVisible: true,
-            grouped: false,
-          },
-          {
-            name: 'salary',
-            width: '114px',
-            isVisible: true,
-            grouped: false,
-          },
-        ],
-      };
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.parent = tag;
-      tag.parent = grid;
-
-      instance.onMounted({} as HTMLElement);
-
-      instance.addLayout(newLayout);
-
-      expect(instance.currentLayoutName).toBe('');
-      expect(instance.layoutNames).toEqual(['Name first']);
-      expect(instance.layouts).toEqual({ 'Name first': newLayout });
-      expect(savedLayouts).toBe(JSON.stringify({
-        currentLayoutName: '',
-        layouts: { 'Name first': newLayout },
-      }));
-    });
-  });
-
-  describe('applyLayout()', () => {
-    it('should change Layout and save layout', async () => {
-      let viewCalled = false;
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.viewApplyLayout = () => { viewCalled = true; };
-      instance.parent = tag;
-      tag.parent = grid;
-
-      await instance.onMounted({} as HTMLElement);
-
-      expect(instance.currentLayoutName).toBe('');
-      instance.applyLayout('Name first');
-      expect(instance.currentLayoutName).toBe('Name first');
-      expect(viewCalled).toBeTruthy();
-    });
-
-    it('should change Layout and save layout using event', async () => {
-      let eventSavedLayouts: ITekGridLayoutInfo = {};
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-        events: {
-          saveLayouts: ({ layouts }) => { eventSavedLayouts = layouts; },
-        },
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.parent = tag;
-      tag.parent = grid;
-
-      await instance.onMounted({} as HTMLElement);
-
-      expect(instance.currentLayoutName).toBe('');
-      instance.applyLayout('Name first');
-      expect(instance.currentLayoutName).toBe('Name first');
-      expect(eventSavedLayouts.currentLayoutName).toBe('Name first');
-    });
-  });
-
-  describe('deleteLayout()', () => {
-    it('should delete layout and save', async () => {
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.parent = tag;
-      tag.parent = grid;
-
-      await instance.onMounted({} as HTMLElement);
-
-      instance.applyLayout('Name first');
-      expect(instance.currentLayoutName).toBe('Name first');
-      expect(instance.layoutNames).toEqual(['Name first']);
-      instance.deleteLayout('Name first');
-      expect(instance.currentLayoutName).toBe('');
-      expect(instance.layoutNames).toEqual([]);
-    });
-
-    it('should delete layout without applying layout', async () => {
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.parent = tag;
-      tag.parent = grid;
-
-      await instance.onMounted({} as HTMLElement);
-
-      expect(instance.currentLayoutName).toBe('');
-      expect(instance.layoutNames).toEqual(['Name first']);
-      instance.deleteLayout('Name first');
-      expect(instance.currentLayoutName).toBe('');
-      expect(instance.layoutNames).toEqual([]);
-    });
-  });
-
-  describe('updateLayout()', () => {
-    it('should update layout and save', async () => {
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.parent = tag;
-      tag.parent = grid;
-
-      await instance.onMounted({} as HTMLElement);
-
-      instance.updateLayout('Name first', {
-        name: 'Name first',
-        gridWidth: '500px',
-        filter: {
-          name: 'a',
-        },
-        dynamicFilter: {
-          name: [
-            {
-              operation: 'CONTAINS',
-              relation: 'AND',
-              value: 'a',
-            },
-          ],
-        },
-      });
-
-      expect(instance.currentLayoutName).toBe('Name first');
-      expect(instance.layoutNames).toEqual(['Name first']);
-      expect(instance.layouts).toEqual({
-        'Name first': {
-          name: 'Name first',
-          gridWidth: '500px',
-          columns: instance.originalColumnProps,
-          filter: {
-            name: 'a',
-          },
-          dynamicFilter: {
-            name: [
-              {
-                operation: 'CONTAINS',
-                relation: 'AND',
-                value: 'a',
-              },
-            ],
-          },
-        },
-      });
-    });
-  });
-
-  describe('discardChanges()', () => {
-    it('should discard changes and restore layout', async () => {
-      const layouts: ITekGridLayoutInfo = {
-        currentLayoutName: 'Name first',
-        layouts: {
-          'Name first': {
-            name: 'Name first',
-            gridWidth: '544px',
-            columns: [
-              {
-                name: 'id',
-                width: '34px',
-                isVisible: true,
-                grouped: false,
-              },
-              {
-                name: 'name',
-                width: '107px',
-                isVisible: true,
-                grouped: false,
-              },
-              {
-                name: 'salary',
-                width: '114px',
-                isVisible: true,
-                grouped: false,
-              },
-            ],
-          },
-        },
-      };
-
-      let viewCalled = false;
-
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-        events: {
-          loadLayouts: async () => layouts,
-        },
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.viewApplyLayout = () => { viewCalled = true; };
-      instance.parent = tag;
-      tag.parent = grid;
-
-      await instance.onMounted({} as HTMLElement);
-      instance.applyLayout('Name first');
-      expect(viewCalled).toBeTruthy();
-      expect(instance.layoutEdited).toBeFalsy();
-      expect(instance.currentLayoutName).toBe('Name first');
-
-      instance.layoutEdited = true;
-
-      instance.discardChanges();
-      expect(instance.layoutEdited).toBeFalsy();
-    });
-  });
-
-  describe('updateDefaultLayout()', () => {
-    it('should update default layout', async () => {
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.parent = tag;
-      tag.parent = grid;
-
-      await instance.onMounted({} as HTMLElement);
-
-      expect(instance.originalDatasourceOrder).toEqual([]);
-      expect(instance.originalDatasourceFilter).toEqual({});
-      expect(instance.originalDatasourceDynamicFilter).toEqual({});
-      expect(instance.originalColumnProps.map((item) => item.name)).toEqual(['id', 'name', 'salary']);
-
-      const newDynamicFilter = {
-        name: [
-          {
-            operation: 'CONTAINS',
-            relation: 'AND',
-            value: 'a',
-          },
-        ],
-      };
-
-      instance.updateDefaultLayout({
-        name: '',
-        columns: [
-          { name: 'name' },
-          { name: 'id' },
-          { name: 'hire_date' },
-        ],
-        order: ['name.asc'],
-        filter: {
-          name: 'a',
-        },
-        dynamicFilter: newDynamicFilter,
-      });
-
-      expect(instance.originalDatasourceOrder).toEqual(['name.asc']);
-      expect(instance.originalDatasourceFilter).toEqual({ name: 'a' });
-      expect(instance.originalDatasourceDynamicFilter).toEqual(newDynamicFilter);
-      expect(instance.originalColumnProps.map((item) => item.name)).toEqual(['name', 'id', 'hire_date', 'salary']);
-    });
-
-    it('should update default layout with some values', async () => {
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.parent = tag;
-      tag.parent = grid;
-
-      await instance.onMounted({} as HTMLElement);
-
-      const applyLayoutSpy = jest.spyOn(instance, 'applyLayout');
-
-      expect(instance.originalColumnProps.map((item) => item.name)).toEqual(['id', 'name', 'salary']);
-
-      instance.updateDefaultLayout({
-        name: 'default',
-        columns: [
-          { name: 'name' },
-          { name: 'id' },
-          { name: 'hire_date' },
-        ],
-      });
-
-      expect(instance.originalColumnProps.map((item) => item.name)).toEqual(['name', 'id', 'hire_date', 'salary']);
-      expect(applyLayoutSpy).toBeCalled();
-    });
-  });
-
-  describe('loadLayouts()/saveLayouts()', () => {
-    it('should load layouts using config endpoint', async () => {
-      (Config as ITekConfig).loadGridLayoutsEndPoint = '/loadLayoutsRoute';
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      const flushPromises = () => new Promise(setImmediate);
-      instance.parent = tag;
-      tag.parent = grid;
-
-      const layouts = {
-        currentLayoutName: 'layout-test',
-        layouts: {
-          'layout-test': {
-            name: 'layout-test',
-            gridWidth: '100px',
-            columns: [
-              {
-                name: 'id',
-                label: 'ID',
-              },
-            ],
-          },
-        },
-      };
-
-      const spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({ data: { data: { layouts } } }));
-
-      await instance.onMounted({} as HTMLElement);
-      await grid.onMounted({} as HTMLElement);
-
-      await flushPromises();
-      expect(spy).toBeCalled();
-      expect(instance.layouts).toEqual({
-        'layout-test': {
-          name: 'layout-test',
-          gridWidth: '100px',
-          columns: [
-            {
-              name: 'id',
-              label: 'ID',
-            },
-          ],
-        },
-      });
-      spy.mockReset();
-      (Config as ITekConfig).loadGridLayoutsEndPoint = '';
-    });
-
-    it('should load layouts using config endpoint with array data', async () => {
-      (Config as ITekConfig).loadGridLayoutsEndPoint = '/loadLayoutsRoute';
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      const flushPromises = () => new Promise(setImmediate);
-      instance.parent = tag;
-      tag.parent = grid;
-
-      const layouts = {
-        currentLayoutName: 'layout-test',
-        layouts: {
-          'layout-test': {
-            name: 'layout-test',
-            gridWidth: '100px',
-            columns: [
-              {
-                name: 'id',
-                label: 'ID',
-              },
-            ],
-          },
-        },
-      };
-
-      const spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({ data: { data: [{ layouts }] } }));
-
-      await instance.onMounted({} as HTMLElement);
-      await grid.onMounted({} as HTMLElement);
-
-      await flushPromises();
-      expect(spy).toBeCalled();
-      expect(instance.layouts).toEqual({
-        'layout-test': {
-          name: 'layout-test',
-          gridWidth: '100px',
-          columns: [
-            {
-              name: 'id',
-              label: 'ID',
-            },
-          ],
-        },
-      });
-      spy.mockReset();
-      (Config as ITekConfig).loadGridLayoutsEndPoint = '';
-    });
-
-    it('should load layouts using config endpoint with empty data', async () => {
-      (Config as ITekConfig).loadGridLayoutsEndPoint = '/loadLayoutsRoute';
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-      });
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      const flushPromises = () => new Promise(setImmediate);
-      instance.parent = tag;
-      tag.parent = grid;
-
-      const spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({ data: { data: '' } }));
-
-      await instance.onMounted({} as HTMLElement);
-      await grid.onMounted({} as HTMLElement);
-
-      await flushPromises();
-      expect(spy).toBeCalled();
-      expect(instance.layouts).toEqual({});
-      spy.mockReset();
-      (Config as ITekConfig).loadGridLayoutsEndPoint = '';
-    });
-
-    it('should save layout using endpoint', async () => {
-      (Config as ITekConfig).saveGridLayoutsEndPoint = '/saveLayoutsRoute';
-      const tag = new Tag({
-        name: 'toolbar',
-        component: 'ZdTag',
-        tag: 'span',
-      });
-      const grid = new TekGrid({
-        name: 'grid',
-        component: 'TekGrid',
-        columns: [
-          { name: 'id' },
-          { name: 'name' },
-          { name: 'salary' },
-        ],
-      });
-      const layouts = {
-        name: 'layout-test',
-        gridWidth: '100px',
-        columns: [
-          {
-            name: 'id',
-            label: 'ID',
-          },
-        ],
-      };
-      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      instance.grid = grid;
-      instance.parent = tag;
-      tag.parent = grid;
-      instance.newLayout(layouts);
-      expect(instance.currentLayoutName).toBe('layout-test');
-      (Config as ITekConfig).saveGridLayoutsEndPoint = '';
-    });
-  });
-});
+import { Grid, Tag } from '@zeedhi/common';
+import { Config, Http } from '@zeedhi/core';
+import {
+  ITekConfig,
+  ITekGridLayoutInfo,
+  TekGrid,
+  TekGridLayoutOptions,
+} from '../../../../src';
+
+let savedLayouts: string = '';
+const testLayouts: ITekGridLayoutInfo = {
+  layouts: {
+    'Name first': {
+      name: 'Name first',
+      gridWidth: '544px',
+      columns: [
+        {
+          name: 'id',
+          width: '34px',
+          isVisible: true,
+          grouped: false,
+        },
+        {
+          name: 'name',
+          width: '107px',
+          isVisible: true,
+          grouped: false,
+        },
+        {
+          name: 'salary',
+          width: '114px',
+          isVisible: true,
+          grouped: false,
+        },
+      ],
+    },
+  },
+};
+
+describe('LayoutOptions', () => {
+  describe('constructor()', () => {
+    it('should create layout options object', () => {
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+
+      expect(instance.currentLayoutName).toBe('');
+      expect(instance.layouts).toEqual({});
+      expect(instance.layoutNames).toEqual([]);
+      expect(instance.originalColumnProps).toEqual([]);
+    });
+  });
+
+  describe('mounted()', () => {
+    it('should store the original column props of a TekGrid', () => {
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+          {
+            name: 'date1',
+            filterProps: {
+              name: 'date1-filter',
+              helperValue: 'TODAY',
+            },
+          },
+          {
+            name: 'date2',
+            filterProps: [
+              {
+                name: 'date2-filter1',
+                helperValue: 'TODAY',
+              },
+              {
+                name: 'date2-filter2',
+                helperValue: 'TOMORROW',
+              },
+            ],
+          },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      instance.onMounted({} as HTMLElement);
+
+      expect(instance.originalDatasourceDynamicFilter).toEqual({});
+      expect(instance.originalDatasourceFilter).toEqual({});
+      expect(instance.originalColumnProps).toEqual([
+        {
+          name: 'id',
+          isVisible: true,
+          fixed: false,
+          grouped: false,
+          minWidth: undefined,
+          maxWidth: undefined,
+          aggregation: undefined,
+          align: 'left',
+          groupOpened: undefined,
+          label: '',
+          filterHelperValue: [],
+        },
+        {
+          name: 'name',
+          isVisible: true,
+          fixed: false,
+          grouped: false,
+          minWidth: undefined,
+          maxWidth: undefined,
+          aggregation: undefined,
+          align: 'left',
+          groupOpened: undefined,
+          label: '',
+          filterHelperValue: [],
+        },
+        {
+          name: 'salary',
+          isVisible: true,
+          fixed: false,
+          grouped: false,
+          minWidth: undefined,
+          maxWidth: undefined,
+          aggregation: undefined,
+          align: 'left',
+          groupOpened: undefined,
+          label: '',
+          filterHelperValue: [],
+        },
+        {
+          name: 'date1',
+          isVisible: true,
+          fixed: false,
+          grouped: false,
+          minWidth: undefined,
+          maxWidth: undefined,
+          aggregation: undefined,
+          align: 'left',
+          groupOpened: undefined,
+          label: '',
+          filterHelperValue: 'TODAY',
+        },
+        {
+          name: 'date2',
+          isVisible: true,
+          fixed: false,
+          grouped: false,
+          minWidth: undefined,
+          maxWidth: undefined,
+          aggregation: undefined,
+          align: 'left',
+          groupOpened: undefined,
+          label: '',
+          filterHelperValue: ['TODAY', 'TOMORROW'],
+        },
+      ]);
+    });
+
+    it('should store the original column props of a normal Grid', () => {
+      const grid = new Grid({
+        name: 'grid',
+        component: 'Grid',
+        columns: [
+          { name: 'id', maxWidth: '200px', minWidth: '100px' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.parent = grid;
+
+      instance.onMounted({} as HTMLElement);
+
+      expect(instance.originalColumnProps).toEqual([
+        {
+          name: 'id',
+          isVisible: true,
+          maxWidth: '200px',
+          minWidth: '100px',
+          aggregation: undefined,
+          align: 'left',
+          groupOpened: undefined,
+          label: '',
+          filterHelperValue: '',
+          fixed: false,
+          grouped: undefined,
+        },
+        {
+          name: 'name',
+          isVisible: true,
+          minWidth: undefined,
+          maxWidth: undefined,
+          aggregation: undefined,
+          align: 'left',
+          groupOpened: undefined,
+          label: '',
+          filterHelperValue: '',
+          fixed: false,
+          grouped: undefined,
+        },
+        {
+          name: 'salary',
+          isVisible: true,
+          minWidth: undefined,
+          maxWidth: undefined,
+          aggregation: undefined,
+          align: 'left',
+          groupOpened: undefined,
+          label: '',
+          filterHelperValue: '',
+          fixed: false,
+          grouped: undefined,
+        },
+      ]);
+    });
+  });
+
+  describe('loadLayouts()', () => {
+    it('should load using event', async () => {
+      const layouts: ITekGridLayoutInfo = {
+        currentLayoutName: 'Name first',
+        layouts: {
+          'Name first': {
+            name: 'Name first',
+            gridWidth: '544px',
+            columns: [
+              {
+                name: 'id',
+                width: '34px',
+                isVisible: true,
+                grouped: false,
+              },
+              {
+                name: 'name',
+                width: '107px',
+                isVisible: true,
+                grouped: false,
+              },
+              {
+                name: 'salary',
+                width: '114px',
+                isVisible: true,
+                grouped: false,
+              },
+            ],
+          },
+        },
+      };
+
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+        events: {
+          loadLayouts: async () => layouts,
+        },
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      expect(instance.currentLayoutName).toBe('Name first');
+      expect(instance.layoutNames).toEqual(['Name first']);
+      expect(instance.layouts).toEqual(layouts.layouts);
+    });
+
+    it('should load using localStorage', async () => {
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      const localStorageMock = (function () { // eslint-disable-line func-names
+        return {
+          getItem(): string {
+            return JSON.stringify(testLayouts);
+          },
+          setItem(_name: string, value: string) {
+            savedLayouts = value;
+          },
+        };
+      }());
+
+      Object.defineProperty(window, 'localStorage', {
+        value: localStorageMock,
+      });
+
+      await instance.onMounted({} as HTMLElement);
+
+      expect(instance.currentLayoutName).toBe('');
+      expect(instance.layoutNames).toEqual(['Name first']);
+      expect(instance.layouts).toEqual(testLayouts.layouts);
+    });
+  });
+
+  describe('newLayout()', () => {
+    it('should add new layout', () => {
+      const newLayout = {
+        name: 'Name first',
+        gridWidth: '544px',
+        columns: [
+          {
+            name: 'id',
+            width: '34px',
+            isVisible: true,
+            grouped: false,
+          },
+          {
+            name: 'name',
+            width: '107px',
+            isVisible: true,
+            grouped: false,
+          },
+          {
+            name: 'salary',
+            width: '114px',
+            isVisible: true,
+            grouped: false,
+          },
+        ],
+      };
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      instance.onMounted({} as HTMLElement);
+
+      instance.newLayout(newLayout);
+
+      expect(instance.currentLayoutName).toBe('Name first');
+      expect(instance.layoutNames).toEqual(['Name first']);
+      expect(instance.layouts).toEqual({ 'Name first': newLayout });
+      expect(savedLayouts).toBe(JSON.stringify({
+        currentLayoutName: 'Name first',
+        layouts: { 'Name first': newLayout },
+      }));
+    });
+  });
+
+  describe('addLayout()', () => {
+    it('should add new layout and not change current layout', () => {
+      const newLayout = {
+        name: 'Name first',
+        gridWidth: '544px',
+        columns: [
+          {
+            name: 'id',
+            width: '34px',
+            isVisible: true,
+            grouped: false,
+          },
+          {
+            name: 'name',
+            width: '107px',
+            isVisible: true,
+            grouped: false,
+          },
+          {
+            name: 'salary',
+            width: '114px',
+            isVisible: true,
+            grouped: false,
+          },
+        ],
+      };
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      instance.onMounted({} as HTMLElement);
+
+      instance.addLayout(newLayout);
+
+      expect(instance.currentLayoutName).toBe('');
+      expect(instance.layoutNames).toEqual(['Name first']);
+      expect(instance.layouts).toEqual({ 'Name first': newLayout });
+      expect(savedLayouts).toBe(JSON.stringify({
+        currentLayoutName: '',
+        layouts: { 'Name first': newLayout },
+      }));
+    });
+  });
+
+  describe('applyLayout()', () => {
+    it('should change Layout and save layout', async () => {
+      let viewCalled = false;
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.viewApplyLayout = () => { viewCalled = true; };
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      expect(instance.currentLayoutName).toBe('');
+      instance.applyLayout('Name first');
+      expect(instance.currentLayoutName).toBe('Name first');
+      expect(viewCalled).toBeTruthy();
+    });
+
+    it('should change Layout and save layout using event', async () => {
+      let eventSavedLayouts: ITekGridLayoutInfo = {};
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+        events: {
+          saveLayouts: ({ layouts }) => { eventSavedLayouts = layouts; },
+        },
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      expect(instance.currentLayoutName).toBe('');
+      instance.applyLayout('Name first');
+      expect(instance.currentLayoutName).toBe('Name first');
+      expect(eventSavedLayouts.currentLayoutName).toBe('Name first');
+    });
+  });
+
+  describe('deleteLayout()', () => {
+    it('should delete layout and save', async () => {
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      instance.applyLayout('Name first');
+      expect(instance.currentLayoutName).toBe('Name first');
+      expect(instance.layoutNames).toEqual(['Name first']);
+      instance.deleteLayout('Name first');
+      expect(instance.currentLayoutName).toBe('');
+      expect(instance.layoutNames).toEqual([]);
+    });
+
+    it('should delete layout without applying layout', async () => {
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      expect(instance.currentLayoutName).toBe('');
+      expect(instance.layoutNames).toEqual(['Name first']);
+      instance.deleteLayout('Name first');
+      expect(instance.currentLayoutName).toBe('');
+      expect(instance.layoutNames).toEqual([]);
+    });
+  });
+
+  describe('updateLayout()', () => {
+    it('should update layout and save', async () => {
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      instance.updateLayout('Name first', {
+        name: 'Name first',
+        gridWidth: '500px',
+        filter: {
+          name: 'a',
+        },
+        dynamicFilter: {
+          name: [
+            {
+              operation: 'CONTAINS',
+              relation: 'AND',
+              value: 'a',
+            },
+          ],
+        },
+      });
+
+      expect(instance.currentLayoutName).toBe('Name first');
+      expect(instance.layoutNames).toEqual(['Name first']);
+      expect(instance.layouts).toEqual({
+        'Name first': {
+          name: 'Name first',
+          gridWidth: '500px',
+          columns: instance.originalColumnProps,
+          filter: {
+            name: 'a',
+          },
+          dynamicFilter: {
+            name: [
+              {
+                operation: 'CONTAINS',
+                relation: 'AND',
+                value: 'a',
+              },
+            ],
+          },
+        },
+      });
+    });
+  });
+
+  describe('discardChanges()', () => {
+    it('should discard changes and restore layout', async () => {
+      const layouts: ITekGridLayoutInfo = {
+        currentLayoutName: 'Name first',
+        layouts: {
+          'Name first': {
+            name: 'Name first',
+            gridWidth: '544px',
+            columns: [
+              {
+                name: 'id',
+                width: '34px',
+                isVisible: true,
+                grouped: false,
+              },
+              {
+                name: 'name',
+                width: '107px',
+                isVisible: true,
+                grouped: false,
+              },
+              {
+                name: 'salary',
+                width: '114px',
+                isVisible: true,
+                grouped: false,
+              },
+            ],
+          },
+        },
+      };
+
+      let viewCalled = false;
+
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+        events: {
+          loadLayouts: async () => layouts,
+        },
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.viewApplyLayout = () => { viewCalled = true; };
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+      instance.applyLayout('Name first');
+      expect(viewCalled).toBeTruthy();
+      expect(instance.layoutEdited).toBeFalsy();
+      expect(instance.currentLayoutName).toBe('Name first');
+
+      instance.layoutEdited = true;
+
+      instance.discardChanges();
+      expect(instance.layoutEdited).toBeFalsy();
+    });
+  });
+
+  describe('updateDefaultLayout()', () => {
+    it('should update default layout', async () => {
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      expect(instance.originalDatasourceOrder).toEqual([]);
+      expect(instance.originalDatasourceFilter).toEqual({});
+      expect(instance.originalDatasourceDynamicFilter).toEqual({});
+      expect(instance.originalColumnProps.map((item) => item.name)).toEqual(['id', 'name', 'salary']);
+
+      const newDynamicFilter = {
+        name: [
+          {
+            operation: 'CONTAINS',
+            relation: 'AND',
+            value: 'a',
+          },
+        ],
+      };
+
+      instance.updateDefaultLayout({
+        name: '',
+        columns: [
+          { name: 'name' },
+          { name: 'id' },
+          { name: 'hire_date' },
+        ],
+        order: ['name.asc'],
+        filter: {
+          name: 'a',
+        },
+        dynamicFilter: newDynamicFilter,
+      });
+
+      expect(instance.originalDatasourceOrder).toEqual(['name.asc']);
+      expect(instance.originalDatasourceFilter).toEqual({ name: 'a' });
+      expect(instance.originalDatasourceDynamicFilter).toEqual(newDynamicFilter);
+      expect(instance.originalColumnProps.map((item) => item.name)).toEqual(['name', 'id', 'hire_date', 'salary']);
+    });
+
+    it('should update default layout with some values', async () => {
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.parent = tag;
+      tag.parent = grid;
+
+      await instance.onMounted({} as HTMLElement);
+
+      const applyLayoutSpy = jest.spyOn(instance, 'applyLayout');
+
+      expect(instance.originalColumnProps.map((item) => item.name)).toEqual(['id', 'name', 'salary']);
+
+      instance.updateDefaultLayout({
+        name: 'default',
+        columns: [
+          { name: 'name' },
+          { name: 'id' },
+          { name: 'hire_date' },
+        ],
+      });
+
+      expect(instance.originalColumnProps.map((item) => item.name)).toEqual(['name', 'id', 'hire_date', 'salary']);
+      expect(applyLayoutSpy).toBeCalled();
+    });
+  });
+
+  describe('loadLayouts()/saveLayouts()', () => {
+    it('should load layouts using config endpoint', async () => {
+      (Config as ITekConfig).loadGridLayoutsEndPoint = '/loadLayoutsRoute';
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      const flushPromises = () => new Promise(setImmediate);
+      instance.parent = tag;
+      tag.parent = grid;
+
+      const layouts = {
+        currentLayoutName: 'layout-test',
+        layouts: {
+          'layout-test': {
+            name: 'layout-test',
+            gridWidth: '100px',
+            columns: [
+              {
+                name: 'id',
+                label: 'ID',
+              },
+            ],
+          },
+        },
+      };
+
+      const spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({ data: { data: { layouts } } }));
+
+      await instance.onMounted({} as HTMLElement);
+      await grid.onMounted({} as HTMLElement);
+
+      await flushPromises();
+      expect(spy).toBeCalled();
+      expect(instance.layouts).toEqual({
+        'layout-test': {
+          name: 'layout-test',
+          gridWidth: '100px',
+          columns: [
+            {
+              name: 'id',
+              label: 'ID',
+            },
+          ],
+        },
+      });
+      spy.mockReset();
+      (Config as ITekConfig).loadGridLayoutsEndPoint = '';
+    });
+
+    it('should load layouts using config endpoint with array data', async () => {
+      (Config as ITekConfig).loadGridLayoutsEndPoint = '/loadLayoutsRoute';
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      const flushPromises = () => new Promise(setImmediate);
+      instance.parent = tag;
+      tag.parent = grid;
+
+      const layouts = {
+        currentLayoutName: 'layout-test',
+        layouts: {
+          'layout-test': {
+            name: 'layout-test',
+            gridWidth: '100px',
+            columns: [
+              {
+                name: 'id',
+                label: 'ID',
+              },
+            ],
+          },
+        },
+      };
+
+      const spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({ data: { data: [{ layouts }] } }));
+
+      await instance.onMounted({} as HTMLElement);
+      await grid.onMounted({} as HTMLElement);
+
+      await flushPromises();
+      expect(spy).toBeCalled();
+      expect(instance.layouts).toEqual({
+        'layout-test': {
+          name: 'layout-test',
+          gridWidth: '100px',
+          columns: [
+            {
+              name: 'id',
+              label: 'ID',
+            },
+          ],
+        },
+      });
+      spy.mockReset();
+      (Config as ITekConfig).loadGridLayoutsEndPoint = '';
+    });
+
+    it('should load layouts using config endpoint with empty data', async () => {
+      (Config as ITekConfig).loadGridLayoutsEndPoint = '/loadLayoutsRoute';
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      const flushPromises = () => new Promise(setImmediate);
+      instance.parent = tag;
+      tag.parent = grid;
+
+      const spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({ data: { data: '' } }));
+
+      await instance.onMounted({} as HTMLElement);
+      await grid.onMounted({} as HTMLElement);
+
+      await flushPromises();
+      expect(spy).toBeCalled();
+      expect(instance.layouts).toEqual({});
+      spy.mockReset();
+      (Config as ITekConfig).loadGridLayoutsEndPoint = '';
+    });
+
+    it('should save layout using endpoint', async () => {
+      (Config as ITekConfig).saveGridLayoutsEndPoint = '/saveLayoutsRoute';
+      const tag = new Tag({
+        name: 'toolbar',
+        component: 'ZdTag',
+        tag: 'span',
+      });
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      const layouts = {
+        name: 'layout-test',
+        gridWidth: '100px',
+        columns: [
+          {
+            name: 'id',
+            label: 'ID',
+          },
+        ],
+      };
+      const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
+      instance.grid = grid;
+      instance.parent = tag;
+      tag.parent = grid;
+      instance.newLayout(layouts);
+      expect(instance.currentLayoutName).toBe('layout-test');
+      (Config as ITekConfig).saveGridLayoutsEndPoint = '';
+    });
+  });
+});