@zeedhi/common 1.115.0 → 3.0.1

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

@@ -0,0 +1,1020 @@
+import { Grid, Tag } from '@zeedhi/common';
+import { Config, Http, Loader, SimpleControllerBuilder } from '@zeedhi/core';
+import {
+  ITekConfig,
+  ITekGridLayoutInfo,
+  TekGrid,
+  TekGridLayoutOptions,
+  ITekGridProps,
+} from '../../../../src';
+import { flushPromises } from '../../__helpers__';
+
+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,
+        },
+      ],
+    },
+  },
+};
+
+const setupInstance = (props: Partial<ITekGridProps> = {}) => {
+  const instance = new TekGrid({
+    name: 'Grid',
+    component: 'TekGrid',
+    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');
+  instance.onCreated();
+  instance.onMounted(elem);
+
+  return instance;
+};
+
+describe('LayoutOptions', () => {
+  beforeAll(() => {
+    Loader.setBuilder(new SimpleControllerBuilder());
+  });
+
+  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 = setupInstance({
+        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: false,
+          label: '',
+          filterHelperValue: [],
+          width: undefined,
+        },
+        {
+          name: 'name',
+          isVisible: true,
+          fixed: false,
+          grouped: false,
+          minWidth: undefined,
+          maxWidth: undefined,
+          aggregation: undefined,
+          align: 'left',
+          groupOpened: false,
+          label: '',
+          filterHelperValue: [],
+          width: undefined,
+        },
+        {
+          name: 'salary',
+          isVisible: true,
+          fixed: false,
+          grouped: false,
+          minWidth: undefined,
+          maxWidth: undefined,
+          aggregation: undefined,
+          align: 'left',
+          groupOpened: false,
+          label: '',
+          filterHelperValue: [],
+          width: undefined,
+        },
+        {
+          name: 'date1',
+          isVisible: true,
+          fixed: false,
+          grouped: false,
+          minWidth: undefined,
+          maxWidth: undefined,
+          aggregation: undefined,
+          align: 'left',
+          groupOpened: false,
+          label: '',
+          filterHelperValue: 'TODAY',
+          width: undefined
+        },
+        {
+          name: 'date2',
+          isVisible: true,
+          fixed: false,
+          grouped: false,
+          minWidth: undefined,
+          maxWidth: undefined,
+          aggregation: undefined,
+          align: 'left',
+          groupOpened: false,
+          label: '',
+          filterHelperValue: ['TODAY', 'TOMORROW'],
+          width: undefined,
+        },
+      ]);
+    });
+
+    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' },
+        ],
+      });
+      grid.onCreated();
+      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 = setupInstance({
+        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 = setupInstance({
+        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 = setupInstance({
+        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 = setupInstance({
+        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 = setupInstance({
+        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 = setupInstance({
+        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 = setupInstance({
+        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 = setupInstance({
+        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 = setupInstance({
+        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 = setupInstance({
+        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 = setupInstance({
+        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 = setupInstance({
+        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 = setupInstance({
+        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 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).toHaveBeenCalled();
+      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 = setupInstance({
+        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 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).toHaveBeenCalled();
+      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 = setupInstance({
+        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 spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({ data: { data: '' } }));
+
+      await instance.onMounted({} as HTMLElement);
+      grid.onMounted({} as HTMLElement);
+
+      await flushPromises();
+      expect(spy).toHaveBeenCalled();
+      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 = setupInstance({
+        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 = '';
+    });
+  });
+});