@zeedhi/teknisa-components-common 3.0.0 → 3.0.2

package/tests/unit/components/tek-grid/{layout_options.spec.ts → layout-options.spec.ts}

@@ -1,13 +1,15 @@
 import { Grid, Tag } from '@zeedhi/common';
-import { Config, Http } from '@zeedhi/core';
+import { Config, Http, Loader, SimpleControllerBuilder } from '@zeedhi/core';
 import {
-  type ITekConfig,
-  type ITekGridLayoutInfo,
+  ITekConfig,
+  ITekGridLayoutInfo,
   TekGrid,
   TekGridLayoutOptions,
+  ITekGridProps,
 } from '../../../../src';
+import { flushPromises } from '../../__helpers__';
 
-let savedLayouts = '';
+let savedLayouts: string = '';
 const testLayouts: ITekGridLayoutInfo = {
   layouts: {
     'Name first': {
@@ -37,7 +39,42 @@ const testLayouts: ITekGridLayoutInfo = {
   },
 };
 
+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' });
@@ -56,7 +93,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -103,9 +140,10 @@ describe('LayoutOptions', () => {
           maxWidth: undefined,
           aggregation: undefined,
           align: 'left',
-          groupOpened: undefined,
+          groupOpened: false,
           label: '',
           filterHelperValue: [],
+          width: undefined,
         },
         {
           name: 'name',
@@ -116,9 +154,10 @@ describe('LayoutOptions', () => {
           maxWidth: undefined,
           aggregation: undefined,
           align: 'left',
-          groupOpened: undefined,
+          groupOpened: false,
           label: '',
           filterHelperValue: [],
+          width: undefined,
         },
         {
           name: 'salary',
@@ -129,9 +168,10 @@ describe('LayoutOptions', () => {
           maxWidth: undefined,
           aggregation: undefined,
           align: 'left',
-          groupOpened: undefined,
+          groupOpened: false,
           label: '',
           filterHelperValue: [],
+          width: undefined,
         },
         {
           name: 'date1',
@@ -142,9 +182,10 @@ describe('LayoutOptions', () => {
           maxWidth: undefined,
           aggregation: undefined,
           align: 'left',
-          groupOpened: undefined,
+          groupOpened: false,
           label: '',
           filterHelperValue: 'TODAY',
+          width: undefined
         },
         {
           name: 'date2',
@@ -155,9 +196,10 @@ describe('LayoutOptions', () => {
           maxWidth: undefined,
           aggregation: undefined,
           align: 'left',
-          groupOpened: undefined,
+          groupOpened: false,
           label: '',
           filterHelperValue: ['TODAY', 'TOMORROW'],
+          width: undefined,
         },
       ]);
     });
@@ -172,6 +214,7 @@ describe('LayoutOptions', () => {
           { name: 'salary' },
         ],
       });
+      grid.onCreated();
       const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
       instance.parent = grid;
 
@@ -258,7 +301,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -287,7 +330,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -300,14 +343,16 @@ describe('LayoutOptions', () => {
       instance.parent = tag;
       tag.parent = grid;
 
-      const localStorageMock = ((() => ({
+      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,
@@ -352,7 +397,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -410,7 +455,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -445,7 +490,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -474,7 +519,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -506,7 +551,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -535,7 +580,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -565,7 +610,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -660,7 +705,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -697,7 +742,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -753,7 +798,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -794,7 +839,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -804,7 +849,6 @@ describe('LayoutOptions', () => {
         ],
       });
       const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      const flushPromises = () => new Promise(setImmediate);
       instance.parent = tag;
       tag.parent = grid;
 
@@ -830,7 +874,7 @@ describe('LayoutOptions', () => {
       await grid.onMounted({} as HTMLElement);
 
       await flushPromises();
-      expect(spy).toBeCalled();
+      expect(spy).toHaveBeenCalled();
       expect(instance.layouts).toEqual({
         'layout-test': {
           name: 'layout-test',
@@ -854,7 +898,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -864,7 +908,6 @@ describe('LayoutOptions', () => {
         ],
       });
       const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
-      const flushPromises = () => new Promise(setImmediate);
       instance.parent = tag;
       tag.parent = grid;
 
@@ -890,7 +933,7 @@ describe('LayoutOptions', () => {
       await grid.onMounted({} as HTMLElement);
 
       await flushPromises();
-      expect(spy).toBeCalled();
+      expect(spy).toHaveBeenCalled();
       expect(instance.layouts).toEqual({
         'layout-test': {
           name: 'layout-test',
@@ -914,7 +957,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [
@@ -924,17 +967,16 @@ describe('LayoutOptions', () => {
         ],
       });
       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);
+      grid.onMounted({} as HTMLElement);
 
       await flushPromises();
-      expect(spy).toBeCalled();
+      expect(spy).toHaveBeenCalled();
       expect(instance.layouts).toEqual({});
       spy.mockReset();
       (Config as ITekConfig).loadGridLayoutsEndPoint = '';
@@ -947,7 +989,7 @@ describe('LayoutOptions', () => {
         component: 'ZdTag',
         tag: 'span',
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid',
         component: 'TekGrid',
         columns: [

package/tests/unit/components/tek-grid/multi-option.spec.ts

@@ -0,0 +1,139 @@
+import { Button, IText, Text } from '@zeedhi/common';
+import { ITekGridExportConfig, TekGrid, MultiOption } from '../../../../src';
+import { Loader, SimpleControllerBuilder } from '@zeedhi/core';
+
+describe('MultiOption', () => {
+  beforeAll(() => {
+    Loader.setBuilder(new SimpleControllerBuilder());
+  });
+
+  describe('buildComponent()', () => {
+    it('when called, should build a row with multiple buttons', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const config: ITekGridExportConfig = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+        multiOption: [
+          { label: 'portrait', iconName: 'icon-portrait' },
+          { label: 'landscape', iconName: 'icon-landscape' },
+        ],
+      };
+      const option = new MultiOption(config);
+
+      const component = option.buildComponent(grid);
+
+      expect(component).toEqual({
+        name: 'Grid_export_pdf_row',
+        component: 'ZdRow',
+        cssClass: 'zd-display-flex zd-ma-0 zd-py-0 zd-gap-x-1 tek-grid-export-multioption-row',
+        children: [
+          expect.objectContaining({
+            name: 'Grid_export_pdf_text',
+            component: 'ZdText',
+            text: 'Exportar PDF',
+            cssClass: 'zd-display-flex zd-align-center zd-flex-grow-1 tek-grid-export-multioption-text',
+          }),
+          {
+            name: 'Grid_export_pdf_tooltip_portrait',
+            component: 'ZdTooltip',
+            bottom: true,
+            label: 'portrait',
+            children: [
+              expect.objectContaining({
+                name: 'Grid_export_pdf_button_portrait',
+                component: 'ZdButton',
+                icon: true,
+                iconName: 'icon-portrait',
+              }),
+            ],
+          },
+          expect.objectContaining({
+            name: 'Grid_export_pdf_divider_portrait',
+            component: 'ZdDivider',
+            cssClass: 'zd-my-1',
+            vertical: true,
+          }),
+          {
+            name: 'Grid_export_pdf_tooltip_landscape',
+            component: 'ZdTooltip',
+            bottom: true,
+            label: 'landscape',
+            children: [
+              expect.objectContaining({
+                name: 'Grid_export_pdf_button_landscape',
+                component: 'ZdButton',
+                icon: true,
+                iconName: 'icon-landscape',
+              }),
+            ],
+          },
+        ],
+      });
+    });
+
+    it('the generated text component should call stopPropagation on click', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const config: ITekGridExportConfig = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+        multiOption: [
+          { label: 'portrait', iconName: 'icon-portrait' },
+          { label: 'landscape', iconName: 'icon-landscape' },
+        ],
+      };
+      const option = new MultiOption(config);
+
+      const component = option.buildComponent(grid);
+
+      const instance = new Text(component.children![0] as IText);
+      const spy = jest.fn();
+      const event = { stopPropagation: spy } as unknown as Event;
+      instance.click(event);
+
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it('the generated text component should not throw if event is undefined', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const config: ITekGridExportConfig = {
+        type: 'pdf',
+        label: 'Exportar PDF',
+        multiOption: [
+          { label: 'portrait', iconName: 'icon-portrait' },
+          { label: 'landscape', iconName: 'icon-landscape' },
+        ],
+      };
+      const option = new MultiOption(config);
+
+      const component = option.buildComponent(grid);
+
+      const instance = new Text(component.children![0] as IText);
+
+      expect(() => instance.callEvent('click', { event: undefined })).not.toThrow();
+    });
+
+    it('the generated button components should call grid.getReport on click', () => {
+      const grid = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const spy = jest.fn();
+      grid.getReport = spy;
+      const config: ITekGridExportConfig = {
+        type: 'pdf',
+        multiOption: [
+          { label: 'portrait', iconName: 'icon-portrait' },
+          { label: 'landscape', iconName: 'icon-landscape' },
+        ],
+      };
+      const option = new MultiOption(config);
+
+      const component = option.buildComponent(grid);
+
+      const instance = new Button(component.children![1].children![0]);
+      instance.click();
+
+      const instance2 = new Button(component.children![3].children![0]);
+      instance2.click();
+
+      expect(spy).toHaveBeenCalledTimes(2);
+    });
+  });
+});

package/tests/unit/components/tek-grid/{grid-column.spec.ts → tek-grid-column.spec.ts}

@@ -1,20 +1,24 @@
-import { Http } from '@zeedhi/core';
+import { Http, Loader, SimpleControllerBuilder } from '@zeedhi/core';
 import {
-  type IFilterOperation,
-  type IFilterPropsComponent,
-  type IFilterRelation,
-  type ITekGridColumn,
+  IFilterOperation,
+  IFilterPropsComponent,
+  IFilterRelation,
+  ITekGridColumn,
   TekGrid,
   TekGridColumn,
 } from '../../../../src';
+import { flushPromises } from '../../__helpers__';
 
 jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
-const flushPromises = () => new Promise(setImmediate);
 
 describe('TekGridColumn', () => {
   let baseProps: ITekGridColumn;
   let httpSpy: jest.SpyInstance;
 
+  beforeAll(() => {
+    Loader.setBuilder(new SimpleControllerBuilder());
+  });
+
   beforeEach(() => {
     httpSpy = jest.spyOn(Http, 'get').mockImplementation((url: string) => {
       if (url === '/zeedhi') {
@@ -120,6 +124,7 @@ describe('TekGridColumn', () => {
     it('should get lookup data', async () => {
       const grid = new TekGrid({ name: 'grid', component: 'TekGrid' });
       const column = new TekGridColumn(baseProps, grid);
+      column.initialize();
 
       let data = column.getLookupData('name', 'employee 1');
       expect(data).toEqual({});
@@ -153,6 +158,7 @@ describe('TekGridColumn', () => {
       const grid = new TekGrid({ name: 'grid', component: 'TekGrid' });
       baseProps.storeData = false;
       const column = new TekGridColumn(baseProps, grid);
+      column.initialize();
 
       let data = column.getLookupData('name', 'employee 1');
       expect(data).toEqual({});
@@ -267,4 +273,40 @@ describe('TekGridColumn', () => {
       await expect(column.memorySearch('')).rejects.toThrow();
     });
   });
+
+  describe('change grouping', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+
+    it('when grouped property changes, should call grid updateGrouping', () => {
+      const grid = { updateGrouping: jest.fn() } as any as TekGrid;
+      const column = new TekGridColumn(baseProps, grid);
+      column.grouped = true;
+
+      jest.runAllTimers();
+
+      expect(grid.updateGrouping).toHaveBeenCalled();
+    });
+
+    it('when aggregation property changes, should call grid updateGrouping', () => {
+      const grid = { updateGrouping: jest.fn() } as any as TekGrid;
+      const column = new TekGridColumn(baseProps, grid);
+      column.aggregation = 'COUNT';
+
+      jest.runAllTimers();
+
+      expect(grid.updateGrouping).toHaveBeenCalled();
+    });
+
+    it('when groupOpened property changes, should call grid updateGrouping', () => {
+      const grid = { updateGrouping: jest.fn() } as any as TekGrid;
+      const column = new TekGridColumn(baseProps, grid);
+      column.groupOpened = true;
+
+      jest.runAllTimers();
+
+      expect(grid.updateGrouping).toHaveBeenCalled();
+    });
+  });
 });

package/tests/unit/components/tek-grid/{grid-columns-button.spec.ts → tek-grid-columns-button.spec.ts}

@@ -1,9 +1,42 @@
-import { Checkbox, Iterable } from '@zeedhi/common';
-import { I18n } from '@zeedhi/core';
-import { TekGrid, TekGridColumnsButton } from '../../../../src';
-import { TekGridColumnsButtonController } from '../../../../src/components/tek-grid/grid-columns-button-controller';
+import { I18n, Loader, SimpleControllerBuilder } from '@zeedhi/core';
+import { TekGrid, TekGridColumnsButton, TekGridColumnsButtonController, Grid, Checkbox, ITekGridProps } from '../../../../src';
+
+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('TekGridColumnsButton', () => {
+  beforeAll(() => {
+    Loader.setBuilder(new SimpleControllerBuilder());
+  });
+
   describe('getAggregationSelectData', () => {
     it('should get aggregation data', () => {
       let I18Called = false;
@@ -12,7 +45,7 @@ describe('TekGridColumnsButton', () => {
         if (Array.isArray(code)) return code[0];
         return code;
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid-1',
         component: 'TekGrid',
       });
@@ -45,7 +78,7 @@ describe('TekGridColumnsButton', () => {
         component: 'ZdCheckbox',
         value: false,
       });
-      const iterable = new Iterable({
+      const iterable = new Grid({
         name: 'iterable',
         component: 'ZdIterable',
         columns: [
@@ -55,7 +88,7 @@ describe('TekGridColumnsButton', () => {
           },
         ],
       });
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid-1',
         component: 'TekGrid',
         parent: iterable,
@@ -78,7 +111,7 @@ describe('TekGridColumnsButton', () => {
     });
 
     it('changeGroupedColumn', () => {
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid-2',
         component: 'TekGrid',
         columns: [
@@ -130,7 +163,7 @@ describe('TekGridColumnsButton', () => {
     });
 
     it('changeAggregationColumn', () => {
-      const grid = new TekGrid({
+      const grid = setupInstance({
         name: 'grid-2',
         component: 'TekGrid',
         columns: [