@zeedhi/teknisa-components-common 3.0.4 → 3.2.0

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

@@ -1,139 +0,0 @@
-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

@@ -1,312 +0,0 @@
-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

@@ -1,228 +0,0 @@
-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();
-    });
-  });
-});