@zeedhi/teknisa-components-common 3.1.0 → 3.3.0

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

@@ -1,1020 +0,0 @@
-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 = '';
-    });
-  });
-});