@zeedhi/common 1.111.1 → 3.0.0

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/tek-grid-column.spec.ts

@@ -0,0 +1,312 @@
+import { Http, Loader, SimpleControllerBuilder } from '@zeedhi/core';
+import {
+  IFilterOperation,
+  IFilterPropsComponent,
+  IFilterRelation,
+  ITekGridColumn,
+  TekGrid,
+  TekGridColumn,
+} from '../../../../src';
+import { flushPromises } from '../../__helpers__';
+
+jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
+
+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') {
+        return Promise.resolve({
+          data: {
+            data: [
+              { id: 1, name: 'employee 1', department: 1 },
+              { id: 2, name: 'employee 2', department: 1 },
+              { id: 3, name: 'employee 3', department: 1 },
+              { id: 4, name: 'employee 4', department: 2 },
+              { id: 5, name: 'employee 5', department: 2 },
+              { id: 15, name: 'employee 15', department: 2 },
+            ],
+            pagination: {
+              page: 1,
+              total: 5,
+              limit: 15,
+            },
+          },
+        });
+      }
+
+      if (url === '/grid') {
+        return Promise.resolve({
+          data: {
+            data: [
+              { id: 1, employee_id: 1, department: 1 },
+              { id: 2, employee_id: 2, department: 1 },
+              { id: 3, employee_id: 3, department: 1 },
+            ],
+            pagination: {
+              page: 1,
+              total: 5,
+              limit: 15,
+            },
+          },
+        });
+      }
+
+      return Promise.reject();
+    });
+
+    baseProps = {
+      name: 'employee_id',
+      componentProps: {
+        name: 'ZdSelect',
+        dataText: 'name',
+        datasource: {
+          type: 'tek-rest',
+          route: '/zeedhi',
+          lazyLoad: false,
+        },
+      },
+    };
+  });
+
+  afterEach(() => {
+    httpSpy.mockClear();
+  });
+
+  describe('constructor()', () => {
+    it('should create new column with default values', () => {
+      const props: ITekGridColumn = {
+        name: 'employee_id',
+      };
+      const grid = new TekGrid({ name: 'grid', component: 'TekGrid' });
+      const column = new TekGridColumn(props, grid);
+
+      expect(column.filterProps).toEqual([]);
+      expect(column.groupLabelForEmptyValue).toBe('');
+      expect(column.filterable).toBeTruthy();
+      expect(column.isVisible).toBeTruthy();
+      expect(column.storeData).toBeTruthy();
+    });
+
+    it('should create new column replacing default values', () => {
+      const filterProps: IFilterPropsComponent = {
+        name: 'name',
+        relation: 'AND' as IFilterRelation,
+        operation: 'CONTAINS' as IFilterOperation,
+      };
+      const groupLabelForEmptyValue = 'Empty';
+      const props: ITekGridColumn = {
+        filterProps,
+        groupLabelForEmptyValue,
+        name: 'employee_id',
+        isVisible: false,
+        filterable: false,
+        storeData: false,
+      };
+      const grid = new TekGrid({ name: 'grid', component: 'TekGrid' });
+      const column = new TekGridColumn(props, grid);
+
+      expect(column.filterProps).toEqual(filterProps);
+      expect(column.groupLabelForEmptyValue).toBe(groupLabelForEmptyValue);
+      expect(column.filterable).toBeFalsy();
+      expect(column.isVisible).toBeFalsy();
+      expect(column.storeData).toBeFalsy();
+    });
+  });
+
+  describe('getLookupData()', () => {
+    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({});
+
+      await flushPromises();
+      data = column.getLookupData('name', 'employee 1');
+      expect(data).toEqual({ id: 1, name: 'employee 1', department: 1 });
+      expect(httpSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should get lookup data using memory', async () => {
+      const grid = new TekGrid({ name: 'grid', component: 'TekGrid' });
+      baseProps.componentProps!.datasource = {
+        data: [
+          { id: 1, name: 'employee 1 memory', department: 1 },
+          { id: 2, name: 'employee 2 memory', department: 1 },
+          { id: 3, name: 'employee 3 memory', department: 1 },
+          { id: 4, name: 'employee 4 memory', department: 2 },
+          { id: 5, name: 'employee 5 memory', department: 2 },
+          { id: 15, name: 'employee 15 memory', department: 2 },
+        ],
+      };
+      const column = new TekGridColumn(baseProps, grid);
+
+      const data = column.getLookupData('name', 'employee 1 memory');
+      expect(data).toEqual({ id: 1, name: 'employee 1 memory', department: 1 });
+      expect(httpSpy).toHaveBeenCalledTimes(0);
+    });
+
+    it('should get lookup data using filter when storeData is false', async () => {
+      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({});
+
+      await flushPromises();
+      data = column.getLookupData('name', 'employee 1');
+      expect(data).toEqual({ id: 1, name: 'employee 1', department: 1 });
+      expect(httpSpy).toHaveBeenCalledWith('/zeedhi', expect.objectContaining({
+        params: expect.objectContaining({
+          name: ['employee 1'],
+        }),
+      }));
+    });
+  });
+
+  describe('getBatchLookupData', () => {
+    it('when called, should lookup for a batch of values asynchonously, adding them to lookupData', async () => {
+      const grid = new TekGrid({ name: 'grid', component: 'TekGrid' });
+      baseProps.storeData = false;
+      const column = new TekGridColumn(baseProps, grid);
+
+      const data = await column.getBatchLookupData('id', [1, 2]);
+      expect(data).toEqual([
+        { id: 1, name: 'employee 1', department: 1 },
+        { id: 2, name: 'employee 2', department: 1 },
+      ]);
+
+      expect(column.getLookupData('id', '1')).toEqual({ id: 1, name: 'employee 1', department: 1 });
+      expect(column.getLookupData('id', '2')).toEqual({ id: 2, name: 'employee 2', department: 1 });
+
+      expect(httpSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('when called with values that are already in lookupData, should not call datasource.get', async () => {
+      const grid = new TekGrid({ name: 'grid', component: 'TekGrid' });
+      baseProps.storeData = false;
+      const column = new TekGridColumn(baseProps, grid);
+
+      column.lookupData = {
+        1: { id: 1, name: 'employee 1', department: 1 },
+      };
+      (column as any).lookupDatasource?.data.push({ id: 2, name: 'employee 2', department: 1 });
+
+      const data = await column.getBatchLookupData('id', [1, 2]);
+      expect(data).toEqual([
+        { id: 1, name: 'employee 1', department: 1 },
+        { id: 2, name: 'employee 2', department: 1 },
+      ]);
+
+      expect(httpSpy).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  describe('memorySearch()', () => {
+    it('should search in memory', async () => {
+      const grid = new TekGrid({ name: 'grid', component: 'TekGrid' });
+      const column = new TekGridColumn(baseProps, grid);
+
+      let data = await column.memorySearch('employee 15');
+      expect(data).toEqual([{ id: 15, name: 'employee 15', department: 2 }]);
+      expect(httpSpy).toHaveBeenCalledTimes(1);
+
+      baseProps.componentProps!.dataText = ['id'];
+      const column2 = new TekGridColumn(baseProps, grid);
+
+      data = await column2.memorySearch('3');
+      expect(data).toEqual([{ id: 3, name: 'employee 3', department: 1 }]);
+      expect(httpSpy).toHaveBeenCalledTimes(2);
+    });
+
+    it('should not make request if data is already in memory', async () => {
+      const grid = new TekGrid({ name: 'grid', component: 'TekGrid' });
+      const column = new TekGridColumn(baseProps, grid);
+
+      let data = await column.memorySearch('employee 15');
+      expect(data).toEqual([{ id: 15, name: 'employee 15', department: 2 }]);
+      expect(httpSpy).toHaveBeenCalledTimes(1);
+
+      data = await column.memorySearch('employee 2');
+      expect(data).toEqual([{ id: 2, name: 'employee 2', department: 1 }]);
+      expect(httpSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('should always make another request when storeData is false', async () => {
+      const grid = new TekGrid({ name: 'grid', component: 'TekGrid' });
+      baseProps.storeData = false;
+      const column = new TekGridColumn(baseProps, grid);
+
+      let data = await column.memorySearch('employee 15');
+      expect(data).toEqual([{ id: 15, name: 'employee 15', department: 2 }]);
+      expect(httpSpy).toHaveBeenCalledTimes(1);
+
+      data = await column.memorySearch('employee 2');
+      expect(data).toEqual([{ id: 2, name: 'employee 2', department: 1 }]);
+      expect(httpSpy).toHaveBeenCalledTimes(2);
+
+      data = await column.memorySearch('employee 3');
+      expect(data).toEqual([{ id: 3, name: 'employee 3', department: 1 }]);
+      expect(httpSpy).toHaveBeenCalledTimes(3);
+    });
+
+    it('should throw error if column doesn\'t have a datasource', async () => {
+      baseProps = {
+        name: 'employee_id',
+        componentProps: {
+          name: 'ZdTextInput',
+        },
+      };
+      const grid = new TekGrid({ name: 'grid', component: 'TekGrid' });
+      const column = new TekGridColumn(baseProps, grid);
+
+      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/tek-grid-columns-button.spec.ts

@@ -0,0 +1,228 @@
+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;
+      const spy = jest.spyOn(I18n, 'translate').mockImplementation((code: string | string[]) => {
+        I18Called = true;
+        if (Array.isArray(code)) return code[0];
+        return code;
+      });
+      const grid = setupInstance({
+        name: 'grid-1',
+        component: 'TekGrid',
+      });
+      const instance = new TekGridColumnsButton({
+        name: 'columns-button-1',
+        component: 'TekGridColumnsButton',
+        parent: grid,
+      });
+      instance.onCreated();
+      let data = instance.getAggregationSelectData();
+      expect(data).toEqual([
+        { text: 'TEKGRID_AGGREGATION_SUM', value: 'SUM' },
+        { text: 'TEKGRID_AGGREGATION_MIN', value: 'MIN' },
+        { text: 'TEKGRID_AGGREGATION_MAX', value: 'MAX' },
+        { text: 'TEKGRID_AGGREGATION_AVG', value: 'AVG' },
+        { text: 'TEKGRID_AGGREGATION_COUNT', value: 'COUNT' },
+      ]);
+      expect(I18Called).toBeTruthy();
+      I18Called = false;
+      data = instance.getAggregationSelectData();
+      expect(I18Called).toBeFalsy();
+      spy.mockClear();
+    });
+  });
+
+  describe('controller', () => {
+    it('should create component controller', () => {
+      const checkbox = new Checkbox({
+        name: 'checkbox',
+        component: 'ZdCheckbox',
+        value: false,
+      });
+      const iterable = new Grid({
+        name: 'iterable',
+        component: 'ZdIterable',
+        columns: [
+          {
+            name: 'id',
+            grouped: false,
+          },
+        ],
+      });
+      const grid = setupInstance({
+        name: 'grid-1',
+        component: 'TekGrid',
+        parent: iterable,
+      });
+      const instance = new TekGridColumnsButton({
+        name: 'columns-button-2',
+        component: 'TekGridColumnsButton',
+        parent: grid,
+      });
+      instance.onCreated();
+      expect(instance.controller).toBeInstanceOf(TekGridColumnsButtonController);
+      expect(iterable.columns[0].isVisible).toBeTruthy();
+      instance.controller.showHideTekColumn(iterable.columns[0], { component: checkbox });
+      expect(iterable.columns[0].isVisible).toBeFalsy();
+
+      (iterable.columns[0] as any).grouped = true;
+      iterable.columns[0].isVisible = false;
+      instance.controller.showHideTekColumn(iterable.columns[0], { component: checkbox });
+      expect(iterable.columns[0].isVisible).toBeFalsy();
+    });
+
+    it('changeGroupedColumn', () => {
+      const grid = setupInstance({
+        name: 'grid-2',
+        component: 'TekGrid',
+        columns: [
+          {
+            name: 'id',
+            label: 'id',
+          },
+          {
+            name: 'name',
+            label: 'name',
+          },
+          {
+            name: 'department',
+            label: 'department',
+            grouped: true,
+          },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          order: ['name.asc'],
+          data: [
+            { id: 2, name: 'employee 2', department: 1 },
+            { id: 5, name: 'employee 5', department: 2 },
+            { id: 4, name: 'employee 4', department: 2 },
+            { id: 3, name: 'employee 3', department: 1 },
+            { id: 1, name: 'employee 1', department: 1 },
+          ],
+        },
+      });
+      const instance = new TekGridColumnsButton({
+        name: 'columns-button-3',
+        component: 'TekGridColumnsButton',
+        parent: grid,
+      });
+      instance.onCreated();
+      expect(grid.columns[0].grouped).toBeFalsy();
+      instance.controller.changeGroupedColumn(grid.columns[0], {
+        component: {
+          value: true,
+        },
+      });
+      expect(grid.columns[0].grouped).toBeTruthy();
+      instance.controller.changeGroupedColumn(grid.columns[0], {
+        component: {
+          value: false,
+        },
+      });
+      expect(grid.columns[0].grouped).toBeFalsy();
+    });
+
+    it('changeAggregationColumn', () => {
+      const grid = setupInstance({
+        name: 'grid-2',
+        component: 'TekGrid',
+        columns: [
+          {
+            name: 'id',
+            label: 'id',
+          },
+          {
+            name: 'name',
+            label: 'name',
+          },
+          {
+            name: 'department',
+            label: 'department',
+            grouped: true,
+          },
+        ],
+        datasource: {
+          uniqueKey: 'id',
+          order: ['name.asc'],
+          data: [
+            { id: 2, name: 'employee 2', department: 1 },
+            { id: 5, name: 'employee 5', department: 2 },
+            { id: 4, name: 'employee 4', department: 2 },
+            { id: 3, name: 'employee 3', department: 1 },
+            { id: 1, name: 'employee 1', department: 1 },
+          ],
+        },
+      });
+      const spy = jest.spyOn(grid, 'changeLayout');
+      const instance = new TekGridColumnsButton({
+        name: 'columns-button-4',
+        component: 'TekGridColumnsButton',
+        parent: grid,
+      });
+      instance.onCreated();
+      expect(grid.columns[0].aggregation).toBeUndefined();
+      expect(spy).toBeCalledTimes(0);
+      instance.controller.changeAggregationColumn(grid.columns[0], {
+        component: {
+          value: 'COUNT',
+        },
+      });
+      expect(spy).toBeCalledTimes(1);
+      instance.controller.changeAggregationColumn(grid.columns[0], {
+        component: {
+          value: 'COUNT',
+        },
+      });
+      expect(spy).toBeCalledTimes(1);
+      expect(grid.columns[0].aggregation).toBe('COUNT');
+      instance.controller.changeAggregationColumn(grid.columns[0], {
+        component: {
+          value: null,
+        },
+      });
+      expect(grid.columns[0].aggregation).toBeUndefined();
+      expect(spy).toBeCalledTimes(2);
+      spy.mockClear();
+    });
+  });
+});