@zeedhi/common 1.111.1 → 3.0.0

package/tests/unit/components/zd-iterable/iterable-page-info.spec.ts

@@ -0,0 +1,19 @@
+import { IterablePageInfo, Grid } from '../../../../src';
+
+describe('IterablePageInfo', () => {
+  describe('constructor()', () => {
+    it('should create new iterable page info with default values', () => {
+      const iterable = new Grid({
+        name: 'iterable',
+        component: 'ZdIterable',
+      });
+      const instance = new IterablePageInfo({
+        name: 'iterable-page-info',
+        component: 'ZdIterablePageInfo',
+        parent: iterable,
+      });
+      expect(instance.name).toBe('iterable-page-info');
+      expect(instance.component).toBe('ZdIterablePageInfo');
+    });
+  });
+});

package/tests/unit/components/zd-iterable/iterable-page-size.spec.ts

@@ -0,0 +1,123 @@
+import { Loader, Metadata, SimpleControllerBuilder } from '@zeedhi/core';
+import { IterablePageSize, Grid, IIterable, IGridProps } from '../../../../src';
+
+const setupInstance = (props: Partial<IGridProps> = {}) => {
+  const instance = new Grid({
+    name: 'Grid',
+    component: 'ZdGrid',
+    columns: [
+      { name: 'first' },
+      { name: 'second' },
+      { name: 'third' },
+    ],
+    datasource: {
+      limit: 2,
+      page: 1,
+      data: [
+        { id: 1 },
+        { id: 2 },
+        { id: 3 },
+        { id: 4 },
+        { id: 5 },
+        { id: 6 },
+        { id: 7 },
+      ],
+    },
+    ...props,
+  });
+  instance.onCreated();
+
+  return instance;
+};
+
+describe('IterablePageSize', () => {
+  beforeAll(() => {
+    Loader.setBuilder(new SimpleControllerBuilder());
+  });
+
+  describe('constructor()', () => {
+    it('should create new iterable page size with default values', () => {
+      const iterable = setupInstance({
+        name: 'iterable',
+        component: 'ZdIterable',
+      });
+      const instance = new IterablePageSize({
+        name: 'iterable-page-size',
+        component: 'ZdIterablePageSize',
+        parent: iterable,
+      });
+      expect(instance.name).toBe('iterable-page-size');
+      expect(instance.component).toBe('ZdIterablePageSize');
+      expect(instance.dense).toBeFalsy();
+    });
+
+    it('should create new iterable pagination replacing default values', () => {
+      const iterable = setupInstance({
+        name: 'iterable',
+        component: 'ZdIterable',
+      });
+      const iterable2 = setupInstance({
+        name: 'iterable-2',
+        component: 'ZdIterable',
+      });
+
+      const spy = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => iterable2);
+
+      const instance = new IterablePageSize({
+        name: 'iterable-page-component',
+        component: 'ZdIterablePageComponent',
+        parent: iterable,
+        iterableComponentName: 'iterable-2',
+        dense: true,
+      });
+      expect(instance.name).toBe('iterable-page-component');
+      expect(instance.component).toBe('ZdIterablePageComponent');
+      expect(instance.parent).toEqual(iterable);
+      expect(instance.iterableComponent).toEqual(iterable2);
+      expect(instance.iterableComponentName).toBe('iterable-2');
+      expect(instance.dense).toBeTruthy();
+      spy.mockClear();
+    });
+
+    it('should throw error if parent and iterableComponentName are undefined', () => {
+      let instance;
+
+      const fn = () => {
+        instance = new IterablePageSize({
+          name: 'iterable-page-component',
+          component: 'ZdIterablePageComponent',
+        });
+      };
+      expect(fn).toThrow('Could not find the iterable component associated with iterable-page-component');
+      expect(instance).toBeUndefined();
+    });
+  });
+
+  describe('changePageSize()', () => {
+    it('should change datasource limit', () => {
+      const iterable = setupInstance({
+        name: 'Iterable',
+        component: 'ZdIterable',
+        datasource: {
+          limit: 2,
+          data: [],
+        },
+      });
+      const spy = jest.spyOn(iterable.datasource, 'get');
+      const instance = new IterablePageSize({
+        name: 'iterable-page-size',
+        component: 'ZdIterablePageSize',
+        parent: iterable,
+      });
+      instance.onMounted({});
+      expect((instance.parent as IIterable).datasource.limit).toBe(2);
+      instance.selectChange({ value: '10' });
+      expect((instance.parent as IIterable).datasource.limit).toBe(10);
+      expect(spy).toHaveBeenCalledTimes(1);
+      instance.changePageSize(10);
+      expect(spy).toHaveBeenCalledTimes(1);
+      instance.selectChange(null);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/tests/unit/components/zd-iterable/iterable-pagination.spec.ts

@@ -0,0 +1,42 @@
+import { IterablePagination, Grid } from '../../../../src';
+
+describe('IterablePagination', () => {
+  describe('constructor()', () => {
+    it('should create new iterable pagination with default values', () => {
+      const iterable = new Grid({
+        name: 'iterable',
+        component: 'ZdIterable',
+      });
+      const instance = new IterablePagination({
+        name: 'iterable-pagination',
+        component: 'ZdIterablePagination',
+        parent: iterable,
+      });
+      expect(instance.name).toBe('iterable-pagination');
+      expect(instance.component).toBe('ZdIterablePagination');
+      expect(instance.circle).toBeFalsy();
+      expect(instance.nextIcon).toBe('next');
+      expect(instance.prevIcon).toBe('prev');
+    });
+
+    it('should create new iterable pagination replacing default values', () => {
+      const iterable = new Grid({
+        name: 'iterable',
+        component: 'ZdIterable',
+      });
+      const instance = new IterablePagination({
+        name: 'iterable-pagination',
+        component: 'ZdIterablePagination',
+        circle: true,
+        nextIcon: 'next',
+        prevIcon: 'prev',
+        parent: iterable,
+      });
+      expect(instance.name).toBe('iterable-pagination');
+      expect(instance.component).toBe('ZdIterablePagination');
+      expect(instance.circle).toBeTruthy();
+      expect(instance.nextIcon).toBe('next');
+      expect(instance.prevIcon).toBe('prev');
+    });
+  });
+});

package/tests/unit/components/zd-iterable/search.spec.ts

@@ -0,0 +1,168 @@
+import { Loader, Metadata, SimpleControllerBuilder } from '@zeedhi/core';
+import { Search, Grid, IGridProps } from '../../../../src';
+
+jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
+
+const setupInstance = (props: Partial<IGridProps> = {}) => {
+  const instance = new Grid({
+    name: 'Grid',
+    component: 'ZdGrid',
+    columns: [
+      { name: 'first' },
+      { name: 'second' },
+      { name: 'third' },
+    ],
+    datasource: {
+      limit: 2,
+      page: 1,
+      data: [
+        { id: 1 },
+        { id: 2 },
+        { id: 3 },
+        { id: 4 },
+        { id: 5 },
+        { id: 6 },
+        { id: 7 },
+      ],
+    },
+    ...props,
+  });
+  instance.onCreated();
+
+  return instance;
+};
+
+describe('Search', () => {
+  beforeAll(() => {
+    Loader.setBuilder(new SimpleControllerBuilder());
+  });
+
+  describe('constructor()', () => {
+    it('should create new search with default values', () => {
+      const iterable = setupInstance({
+        name: 'iterable',
+        component: 'ZdIterable',
+      });
+      const instance = new Search({
+        name: 'search',
+        component: 'ZdSearch',
+        parent: iterable,
+      });
+      expect(instance.name).toBe('search');
+      expect(instance.component).toBe('ZdSearch');
+      expect(instance.showLabel).toBeFalsy();
+      expect(instance.showHelper).toBeFalsy();
+      expect(instance.appendIcon).toBe('magnify');
+      expect(instance.placeholder).toBe('SEARCH');
+      expect(instance.lazyAttach).toBeFalsy();
+    });
+
+    it('should create new search replacing default values', () => {
+      const iterable = setupInstance({
+        name: 'iterable',
+        component: 'ZdIterable',
+      });
+      const iterable2 = setupInstance({
+        name: 'iterable-2',
+        component: 'ZdIterable',
+      });
+
+      const spy = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => iterable2);
+
+      const instance = new Search({
+        name: 'search',
+        component: 'ZdSearch',
+        parent: iterable,
+        iterableComponentName: 'iterable-2',
+        showHelper: true,
+        showLabel: true,
+        appendIcon: 'icon',
+        placeholder: 'placeholder',
+        cssClass: 'css',
+      });
+      expect(instance.name).toBe('search');
+      expect(instance.component).toBe('ZdSearch');
+      expect(instance.parent).toEqual(iterable);
+      expect(instance.iterableComponent).toEqual(iterable2);
+      expect(instance.iterableComponentName).toBe('iterable-2');
+      expect(instance.showHelper).toBeTruthy();
+      expect(instance.showLabel).toBeTruthy();
+      expect(instance.appendIcon).toBe('icon');
+      expect(instance.placeholder).toBe('placeholder');
+      expect(instance.cssClass).toBe('css');
+      spy.mockClear();
+    });
+
+    it('should throw error if parent and iterableComponentName are undefined', () => {
+      let instance;
+
+      const fn = () => {
+        instance = new Search({
+          name: 'search',
+          component: 'ZdSearch',
+        });
+      };
+      expect(fn).toThrow('Could not find the iterable component associated with search');
+      expect(instance).toBeUndefined();
+    });
+  });
+
+  describe('debounceSetSearch', () => {
+    it('should set the iterable component search', async () => {
+      const iterable = setupInstance({
+        name: 'iterable',
+        component: 'ZdIterable',
+      });
+      const instance = new Search({
+        name: 'search',
+        component: 'ZdSearch',
+        parent: iterable,
+      });
+
+      instance.debounceSetSearch('a');
+
+      expect(instance.iterableComponent.datasource.search).toBe('a');
+    });
+  });
+
+  describe('lazyAttach', () => {
+    it('should not attach iterable to search', async () => {
+      const iterable = setupInstance({
+        name: 'iterable_3',
+        component: 'ZdIterable',
+      });
+      const spy1 = jest.spyOn(Metadata, 'getInstances').mockImplementation(() => [iterable]);
+      const spy2 = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => iterable);
+      const instance = new Search({
+        name: 'search_3',
+        component: 'ZdSearch',
+        lazyAttach: true,
+      });
+
+      expect(instance.iterableComponent).toBeUndefined();
+      instance.setIterableComponent('iterable_3');
+      expect(instance.iterableComponent).toEqual(iterable);
+
+      spy1.mockClear();
+      spy2.mockClear();
+    });
+  });
+
+  describe('value', () => {
+    test('when value is set, should change iterableComponent search', () => {
+      const iterable = setupInstance({
+        name: 'iterable',
+        component: 'ZdIterable',
+      });
+      const instance = new Search({
+        name: 'search',
+        component: 'ZdSearch',
+        parent: iterable,
+      });
+
+      instance.value = 'test';
+
+      expect(iterable.datasource.search).toBe('test');
+    });
+  });
+});

package/tests/unit/components/zd-iterable-component-render/iterable-component-render.spec.ts

@@ -0,0 +1,216 @@
+import { Column, IterableComponentRender } from '../../../../src';
+
+describe('IterableComponentRender', () => {
+  describe('constructor()', () => {
+    it('should create new IterableComponentRender with default values', () => {
+      const instance = new IterableComponentRender({
+        name: 'IterableComponent',
+        component: 'TekIterableComponentRender',
+      });
+      expect(instance.rowPropName).toBe('row');
+      expect(instance.componentMetadata).toEqual(undefined);
+      expect(instance.footerSlot).toEqual([]);
+      expect(instance.toolbarSlot).toEqual([]);
+      expect(instance.errorSlot).toEqual([]);
+      expect(instance.noDataSlot).toEqual([{
+        name: 'IterableComponent_no-data',
+        component: 'ZdText',
+        cssClass: 'no-data',
+        text: 'NO_DATA',
+      }]);
+      expect(instance.noResultSlot).toEqual([
+        {
+          name: 'IterableComponent_no-result',
+          component: 'ZdText',
+          cssClass: 'no-result',
+          text: 'NO_RESULT',
+        },
+      ]);
+      expect(instance.height).toBe('auto');
+      expect(instance.minHeight).toBe('auto');
+      expect(instance.maxHeight).toBe('none');
+      expect(instance.fillHeight).toBeFalsy();
+      expect(instance.width).toBe('100%');
+      expect(instance.minWidth).toBe('auto');
+      expect(instance.maxWidth).toBe('none');
+    });
+
+    it('should create new IterableComponentRender replacing default values', () => {
+      const instance = new IterableComponentRender({
+        name: 'IterableComponent',
+        component: 'TekIterableComponentRender',
+        rowPropName: 'div',
+        noDataSlot: [{
+          name: 'noData',
+          component: 'ZdText',
+          cssClass: 'noData',
+          text: 'Sem dados',
+        }],
+        noResultSlot: [{
+          name: 'noResult',
+          component: 'ZdText',
+          cssClass: 'noResult',
+          text: 'Sem resultado',
+        }],
+        errorSlot: [{
+          name: 'error',
+          component: 'ZdText',
+          cssClass: 'error',
+          text: 'Error',
+        }],
+        toolbarSlot: [{
+          name: 'toolbar',
+          component: 'ZdText',
+          text: 'toolbar',
+        }],
+        footerSlot: [{
+          name: 'footer',
+          component: 'ZdText',
+          text: 'footer',
+        }],
+				columns: [
+					{ name: 'id', label: 'id' },
+				],
+        height: '400px',
+        maxHeight: '500px',
+        minHeight: '500px',
+        width: '400px',
+        maxWidth: '500px',
+        minWidth: '500px',
+        fillHeight: true,
+      });
+
+      expect(instance.height).toBe('400px');
+      expect(instance.maxHeight).toBe('500px');
+      expect(instance.minHeight).toBe('500px');
+      expect(instance.width).toBe('400px');
+      expect(instance.maxWidth).toBe('500px');
+      expect(instance.minWidth).toBe('500px');
+      expect(instance.fillHeight).toBeTruthy();
+      expect(instance.rowPropName).toBe('div');
+      expect(instance.componentMetadata).toStrictEqual(undefined);
+      expect(instance.footerSlot).toEqual([
+        {
+          name: 'footer',
+          component: 'ZdText',
+          text: 'footer',
+        },
+      ]);
+      expect(instance.toolbarSlot).toEqual([
+        {
+          name: 'toolbar',
+          component: 'ZdText',
+          text: 'toolbar',
+        },
+      ]);
+      expect(instance.errorSlot).toEqual([
+        {
+          name: 'error',
+          component: 'ZdText',
+          cssClass: 'error',
+          text: 'Error',
+        },
+      ]);
+      expect(instance.noDataSlot).toEqual([
+        {
+          name: 'noData',
+          component: 'ZdText',
+          cssClass: 'noData',
+          text: 'Sem dados',
+        },
+      ]);
+      expect(instance.noResultSlot).toEqual([
+        {
+          name: 'noResult',
+          component: 'ZdText',
+          cssClass: 'noResult',
+          text: 'Sem resultado',
+        },
+      ]);
+			expect(instance.columns[0]).toBeInstanceOf(Column);
+    });
+  });
+
+  describe('getComponentMetaData()', () => {
+    it('call getComponentMetaData()', () => {
+      const instance = new IterableComponentRender({
+        name: 'IterableComponent',
+        component: 'TekIterableComponentRender',
+        datasource: {
+          uniqueKey: 'id',
+          data: [{ id: 'id1', name: 'Item 1' }],
+        },
+        componentMetadata: {
+          name: 'name-<<row.id>>',
+          component: 'Col',
+          children: [
+            {
+              name: 'name-<<row.id>>-button',
+              component: 'Button',
+              label: '<<row.name>>-button',
+              value: '<<row.value>>',
+            },
+          ],
+        },
+      });
+      expect(instance.getComponentMetadata({ id: 'id1', name: 'Item 1', value: true })).toEqual({
+        name: 'name-id1',
+        component: 'Col',
+        children: [
+          {
+            name: 'name-id1-button',
+            component: 'Button',
+            label: 'Item 1-button',
+            value: true,
+          },
+        ],
+      });
+    });
+  });
+
+  describe('addSlashes()', () => {
+    it('add regexp slashes', () => {
+      const instance = new IterableComponentRender({
+        name: 'IterableComponent',
+        component: 'TekIterableComponentRender',
+        componentMetadata: {
+          name: 'name-<<row.id>>',
+          component: 'Col',
+          children: [
+            {
+              name: 'name-<<row.id>>-button',
+              component: 'Button',
+              label: '<<row.name>>',
+            },
+          ],
+        },
+      });
+
+      const metadata1: any = instance.getComponentMetadata({ id: 'id1', name: 'It \t em \n 1' });
+      expect(metadata1).toEqual({
+        name: 'name-id1',
+        component: 'Col',
+        children: [
+          {
+            name: 'name-id1-button',
+            component: 'Button',
+            label: 'It \t em \n 1',
+          },
+        ],
+      });
+
+      const metadata2: any = instance.getComponentMetadata({ id: 'id2', name: 'It \r em \f \x22 2' });
+      expect(metadata2).toEqual({
+        name: 'name-id2',
+        component: 'Col',
+        children: [
+          {
+            name: 'name-id2-button',
+            component: 'Button',
+            label: 'It \r em \f \x22 2',
+          },
+        ],
+      });
+    });
+  });
+});

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

@@ -0,0 +1,28 @@
+import { Layout } from '../../../../src';
+
+describe('Layout', () => {
+	describe('constructor()', () => {
+		it('should create new Layout with default values', () => {
+			const instance = new Layout({ name: 'layout', component: 'Layout', height: '100%' });
+			expect(instance.fullHeight).toBeFalsy();
+			expect(instance.scrollable).toBeFalsy();
+			expect(instance.tag).toBe('main');
+			expect(instance.height).toBe('100%');
+		});
+
+		it('should create new Layout replacing default values', () => {
+			const instance = new Layout({
+				name: 'layout',
+				component: 'Layout',
+				fullHeight: true,
+				scrollable: true,
+				tag: 'div',
+				height: '100px',
+			});
+			expect(instance.fullHeight).toBeTruthy();
+			expect(instance.scrollable).toBeTruthy();
+			expect(instance.tag).toBe('div');
+			expect(instance.height).toBe('100px');
+		});
+	});
+});

package/tests/unit/components/zd-list/list-group.spec.ts

@@ -0,0 +1,96 @@
+import { ListGroup } from '../../../../src';
+import { ItemNotFoundError } from '../../../../src/components/zd-list/item-not-found';
+
+describe('ListGroup', () => {
+  describe('constructor', () => {
+    test('should create a new list group with the default values', () => {
+      const listGroup = new ListGroup({ name: 'listGroup', component: 'ZdListGroup' });
+
+      expect(listGroup.lazyLoad).toBeFalsy();
+      expect(listGroup.opened).toBeFalsy();
+      expect(listGroup.appendIcon).toEqual('expand');
+    });
+
+    test('should create a new list group with the defined values', () => {
+      const listGroup = new ListGroup({
+        name: 'listGroup',
+        component: 'ZdListGroup',
+        lazyLoad: true,
+        opened: true,
+        appendIcon: 'plus',
+      });
+
+      expect(listGroup.lazyLoad).toBeTruthy();
+      expect(listGroup.opened).toBeTruthy();
+      expect(listGroup.appendIcon).toEqual('plus');
+    });
+
+    test('should change group opened property to true', () => {
+      const listGroup = new ListGroup(
+        {
+          name: 'listGroup',
+          component: 'ZdListGroup',
+          opened: false,
+        },
+      );
+
+      listGroup.toggle();
+
+      expect(listGroup.opened).toBeTruthy();
+    });
+
+    test('should change group opened property to false', () => {
+      const listGroup = new ListGroup(
+        {
+          name: 'listGroup',
+          component: 'ZdListGroup',
+          opened: true,
+        },
+      );
+
+      listGroup.toggle();
+
+      expect(listGroup.opened).toBeFalsy();
+    });
+  });
+
+  describe('getItem', () => {
+    test('should get the item if it exists', () => {
+      const list = new ListGroup({
+        name: 'listGroup',
+        component: 'ZdListGroup',
+        items: [
+          {
+            name: 'item',
+            component: 'ZdListItem',
+          },
+          {
+            name: 'item 2',
+            component: 'ZdListItem',
+          },
+        ],
+      });
+
+      expect(list.getItem('item')).toEqual({ name: 'item', component: 'ZdListItem' });
+    });
+
+    test('should throw when item doesn\'t exist', () => {
+      const list = new ListGroup({
+        name: 'listGroup',
+        component: 'ZdListGroup',
+        items: [
+          {
+            name: 'item',
+            component: 'ZdListItem',
+          },
+          {
+            name: 'item 2',
+            component: 'ZdListItem',
+          },
+        ],
+      });
+
+      expect(() => list.getItem('item 5')).toThrowError(new ItemNotFoundError('item 5', 'listGroup'));
+    });
+  });
+});