@zeedhi/teknisa-components-common 1.130.0 → 1.131.0

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

@@ -1,9 +1,21 @@
-import { Checkbox, Iterable } from '@zeedhi/common';
-import { I18n } from '@zeedhi/core';
+import { Checkbox, Iterable, IterableColumnsButton } from '@zeedhi/common';
+import { I18n, Metadata } from '@zeedhi/core';
 import { TekGrid, TekGridColumnsButton } from '../../../../src';
 import { TekGridColumnsButtonController } from '../../../../src/components/tek-grid/grid-columns-button-controller';
 
 describe('TekGridColumnsButton', () => {
+  beforeEach(() => {
+    const { instances } = Metadata as any;
+    Object.keys(instances).forEach((key) => {
+      const instance = instances[key];
+      if (Array.isArray(instance)) {
+        instance.forEach((item) => Metadata.clearInstance(key, item.componentId));
+      } else {
+        Metadata.clearInstance(key, instance.componentId);
+      }
+    });
+  });
+
   describe('getAggregationSelectData', () => {
     it('should get aggregation data', () => {
       let I18Called = false;
@@ -39,7 +51,114 @@ describe('TekGridColumnsButton', () => {
   });
 
   describe('controller', () => {
+    it('should create without grid and resolve it by gridName after the grid is created', () => {
+      const instance = new TekGridColumnsButton({
+        name: 'external-columns-button-by-grid-name',
+        component: 'TekGridColumnsButton',
+        gridName: 'grid-created-after-columns-button-by-grid-name',
+      });
+      instance.onCreated();
+
+      expect(instance.iterableComponent).toBeUndefined();
+      expect(instance.filteredColumns()).toEqual([]);
+      expect(instance.controller).toBeUndefined();
+      expect(instance.iterableComponentName).toBe('grid-created-after-columns-button-by-grid-name');
+
+      const grid = new TekGrid({
+        name: 'grid-created-after-columns-button-by-grid-name',
+        component: 'TekGrid',
+        columnsButton: false,
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      grid.onCreated();
+
+      expect(instance.filteredColumns().map((column) => column.name)).toEqual(['id', 'name', 'salary']);
+      expect(instance.iterableComponent).toBe(grid);
+      expect(instance.iterableComponentName).toBe(grid.name);
+      expect(instance.controller).toBeInstanceOf(TekGridColumnsButtonController);
+    });
+
+    it('should create without grid and resolve it after the grid is created', () => {
+      const instance = new TekGridColumnsButton({
+        name: 'external-columns-button',
+        component: 'TekGridColumnsButton',
+        iterableComponentName: 'grid-created-after-columns-button',
+      });
+      instance.onCreated();
+
+      expect(instance.iterableComponent).toBeUndefined();
+      expect(instance.filteredColumns()).toEqual([]);
+      expect(instance.controller).toBeUndefined();
+
+      const grid = new TekGrid({
+        name: 'grid-created-after-columns-button',
+        component: 'TekGrid',
+        columnsButton: false,
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'salary' },
+        ],
+      });
+      grid.onCreated();
+
+      expect(instance.filteredColumns().map((column) => column.name)).toEqual(['id', 'name', 'salary']);
+      expect(instance.iterableComponent).toBe(grid);
+      expect(instance.iterableComponentName).toBe(grid.name);
+      expect(instance.controller).toBeInstanceOf(TekGridColumnsButtonController);
+    });
+
+    it('should prefer gridName when both gridName and iterableComponentName are provided', () => {
+      const grid = new TekGrid({
+        name: 'columns-button-grid-name-wins',
+        component: 'TekGrid',
+        columnsButton: false,
+        columns: [
+          { name: 'id' },
+        ],
+      });
+      grid.onCreated();
+      const ignoredGrid = new TekGrid({
+        name: 'columns-button-iterable-name-loses',
+        component: 'TekGrid',
+        columnsButton: false,
+        columns: [
+          { name: 'ignored' },
+        ],
+      });
+      ignoredGrid.onCreated();
+
+      const instance = new TekGridColumnsButton({
+        name: 'external-columns-button-conflict',
+        component: 'TekGridColumnsButton',
+        gridName: 'columns-button-grid-name-wins',
+        iterableComponentName: 'columns-button-iterable-name-loses',
+      });
+      instance.onCreated();
+
+      expect(instance.iterableComponent).toBe(grid);
+      expect(instance.iterableComponentName).toBe(grid.name);
+      expect(instance.filteredColumns().map((column) => column.name)).toEqual(['id']);
+    });
+
+    it('should return empty columns while grid is unresolved', () => {
+      const instance = new TekGridColumnsButton({
+        name: 'external-columns-button-without-grid',
+        component: 'TekGridColumnsButton',
+        iterableComponentName: 'missing-grid',
+      });
+      instance.onCreated();
+
+      expect(instance.filteredColumns()).toEqual([]);
+      expect(instance.controller).toBeUndefined();
+    });
+
     it('should create component controller', () => {
+      const baseControllerSpy = jest.spyOn(IterableColumnsButton.prototype, 'createController');
       const checkbox = new Checkbox({
         name: 'checkbox',
         component: 'ZdCheckbox',
@@ -66,6 +185,7 @@ describe('TekGridColumnsButton', () => {
         parent: grid,
       });
       instance.onCreated();
+      expect(baseControllerSpy).not.toBeCalled();
       expect(instance.controller).toBeInstanceOf(TekGridColumnsButtonController);
       expect(iterable.columns[0].isVisible).toBeTruthy();
       instance.controller.showHideTekColumn(iterable.columns[0], { component: checkbox });
@@ -75,6 +195,7 @@ describe('TekGridColumnsButton', () => {
       iterable.columns[0].isVisible = false;
       instance.controller.showHideTekColumn(iterable.columns[0], { component: checkbox });
       expect(iterable.columns[0].isVisible).toBeFalsy();
+      baseControllerSpy.mockRestore();
     });
 
     it('changeGroupedColumn', () => {

package/tests/unit/components/tek-grid/grid-export-button.spec.ts

@@ -0,0 +1,403 @@
+import { Button, IButton } from '@zeedhi/common';
+import { Metadata } from '@zeedhi/core';
+import {
+  TekGrid, TekGridExportButton,
+} from '../../../../src';
+import { getChild } from '../../../__helpers__';
+
+describe('TekGridExportButton', () => {
+  beforeEach(() => {
+    const { instances } = Metadata as any;
+    Object.keys(instances).forEach((key) => {
+      const instance = instances[key];
+      if (Array.isArray(instance)) {
+        instance.forEach((item) => Metadata.clearInstance(key, item.componentId));
+      } else {
+        Metadata.clearInstance(key, instance.componentId);
+      }
+    });
+  });
+
+  describe('loadGrid()', () => {
+    it('should load grid by gridName', () => {
+      const grid = new TekGrid({
+        name: 'grid-1',
+        component: 'TekGrid',
+      });
+      grid.onCreated();
+
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+        gridName: 'grid-1',
+      });
+
+      expect(exportButton.grid).toEqual(grid);
+      expect(exportButton.gridName).toBe('grid-1');
+    });
+
+    it('should load grid by gridName after the export button is created', () => {
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+        gridName: 'grid-created-after-export-button',
+      });
+
+      expect(exportButton.grid).toBeUndefined();
+
+      const grid = new TekGrid({
+        name: 'grid-created-after-export-button',
+        component: 'TekGrid',
+      });
+      grid.onCreated();
+
+      exportButton.loadGrid();
+
+      expect(exportButton.grid).toEqual(grid);
+      expect(exportButton.children).toHaveLength(grid.exportConfig.length);
+    });
+
+    it('should load grid by gridName argument', () => {
+      const grid = new TekGrid({
+        name: 'grid-loaded-by-argument',
+        component: 'TekGrid',
+      });
+      grid.onCreated();
+
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+      });
+
+      exportButton.loadGrid('grid-loaded-by-argument');
+
+      expect(exportButton.grid).toBe(grid);
+      expect(exportButton.gridName).toBe(grid.name);
+    });
+  });
+
+  describe('onCreated()', () => {
+    it('should load the grid when the component is created', () => {
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+      });
+      const loadGrid = jest.spyOn(exportButton, 'loadGrid');
+
+      exportButton.onCreated();
+
+      expect(loadGrid).toHaveBeenCalled();
+    });
+  });
+
+  describe('children', () => {
+    it('should return no export config buttons without a grid', () => {
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+      });
+
+      expect((exportButton as any).getExportConfigButtons()).toEqual([]);
+    });
+
+    it('should not load children without a grid', () => {
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+      });
+
+      (exportButton as any).loadChildren();
+
+      expect(exportButton.children).toEqual([]);
+    });
+
+    it('should use grid exportActions when present', () => {
+      const exportActions = [
+        {
+          name: 'custom-export-action',
+          component: 'ZdButton',
+          label: 'Custom export',
+        },
+      ];
+      const grid = new TekGrid({
+        name: 'grid-with-export-actions',
+        component: 'TekGrid',
+        exportActions,
+      });
+
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+        grid,
+      });
+
+      expect(exportButton.children).toBe(exportActions);
+    });
+
+    it('should use component exportActions when present', () => {
+      const exportActions = [
+        {
+          name: 'button-export-action',
+          component: 'ZdButton',
+          label: 'Button export',
+        },
+      ];
+      const grid = new TekGrid({
+        name: 'grid-with-button-export-actions',
+        component: 'TekGrid',
+      });
+
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+        grid,
+        exportActions,
+      });
+
+      expect(exportButton.children).toBe(exportActions);
+    });
+
+    it('component exportActions should override component exportConfig and grid exportActions', () => {
+      const gridExportActions = [
+        {
+          name: 'grid-export-action',
+          component: 'ZdButton',
+          label: 'Grid export',
+        },
+      ];
+      const buttonExportActions = [
+        {
+          name: 'button-export-action',
+          component: 'ZdButton',
+          label: 'Button export',
+        },
+      ];
+      const grid = new TekGrid({
+        name: 'grid-with-all-export-overrides',
+        component: 'TekGrid',
+        exportActions: gridExportActions,
+      });
+
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+        grid,
+        exportActions: buttonExportActions,
+        exportConfig: [
+          {
+            type: 'csv',
+            label: 'Button CSV',
+          },
+        ],
+      });
+
+      expect(exportButton.children).toBe(buttonExportActions);
+    });
+
+    it('should build export buttons from grid exportConfig', () => {
+      const grid = new TekGrid({
+        name: 'grid-with-export-config',
+        component: 'TekGrid',
+        exportConfig: [
+          {
+            type: 'pdf',
+            label: 'Export PDF',
+          },
+        ],
+      });
+
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+        grid,
+      });
+
+      expect(exportButton.children).toHaveLength(1);
+      expect(exportButton.children![0]).toEqual(expect.objectContaining({
+        name: 'grid-with-export-config_export_pdf_portrait',
+        component: 'ZdButton',
+        label: 'Export PDF',
+      }));
+    });
+
+    it('should build export buttons from component exportConfig', () => {
+      const grid = new TekGrid({
+        name: 'grid-with-button-export-config',
+        component: 'TekGrid',
+        exportConfig: [
+          {
+            type: 'pdf',
+            label: 'Grid PDF',
+          },
+        ],
+      });
+
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+        grid,
+        exportConfig: [
+          {
+            type: 'csv',
+            label: 'Button CSV',
+          },
+        ],
+      });
+
+      expect(exportButton.children).toHaveLength(1);
+      expect(exportButton.children![0]).toEqual(expect.objectContaining({
+        name: 'grid-with-button-export-config_export_csv_portrait',
+        component: 'ZdButton',
+        label: 'Button CSV',
+      }));
+    });
+
+    it('component exportConfig should override grid exportActions', () => {
+      const exportActions = [
+        {
+          name: 'custom-export-action',
+          component: 'ZdButton',
+          label: 'Custom export',
+        },
+      ];
+      const grid = new TekGrid({
+        name: 'grid-with-export-actions-and-button-config',
+        component: 'TekGrid',
+        exportActions,
+      });
+
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+        grid,
+        exportConfig: [
+          {
+            type: 'xls',
+            label: 'Button XLS',
+          },
+        ],
+      });
+
+      expect(exportButton.children).not.toBe(exportActions);
+      expect(exportButton.children).toHaveLength(1);
+      expect(exportButton.children![0]).toEqual(expect.objectContaining({
+        name: 'grid-with-export-actions-and-button-config_export_xls_portrait',
+        label: 'Button XLS',
+      }));
+    });
+
+    it('should use component exportConfig after grid is created later', () => {
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+        gridName: 'grid-created-after-button-with-config',
+        exportConfig: [
+          {
+            type: 'csv',
+            label: 'Button CSV',
+          },
+        ],
+      });
+
+      expect(exportButton.grid).toBeUndefined();
+      expect(exportButton.children).toHaveLength(0);
+
+      const grid = new TekGrid({
+        name: 'grid-created-after-button-with-config',
+        component: 'TekGrid',
+      });
+      grid.onCreated();
+
+      exportButton.loadGrid();
+
+      expect(exportButton.grid).toEqual(grid);
+      expect(exportButton.children).toHaveLength(1);
+      expect(exportButton.children![0]).toEqual(expect.objectContaining({
+        name: 'grid-created-after-button-with-config_export_csv_portrait',
+        label: 'Button CSV',
+      }));
+    });
+
+    it('should use component exportActions after grid is created later', () => {
+      const exportActions = [
+        {
+          name: 'delayed-button-export-action',
+          component: 'ZdButton',
+          label: 'Delayed button export',
+        },
+      ];
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+        gridName: 'grid-created-after-button-with-actions',
+        exportActions,
+      });
+
+      expect(exportButton.grid).toBeUndefined();
+      expect(exportButton.children).toHaveLength(0);
+
+      const grid = new TekGrid({
+        name: 'grid-created-after-button-with-actions',
+        component: 'TekGrid',
+      });
+      grid.onCreated();
+
+      exportButton.loadGrid();
+
+      expect(exportButton.grid).toEqual(grid);
+      expect(exportButton.children).toBe(exportActions);
+    });
+
+    it('generated export action should call grid.getReport on click', () => {
+      const grid = new TekGrid({
+        name: 'grid-with-click-export',
+        component: 'TekGrid',
+        exportConfig: [
+          {
+            type: 'csv',
+            label: 'Export CSV',
+          },
+        ],
+      });
+      const getReportSpy = jest.fn();
+      grid.getReport = getReportSpy;
+
+      const exportButton = new TekGridExportButton({
+        name: 'external-export',
+        component: 'TekGridExportButton',
+        grid,
+      });
+
+      const button = new Button(exportButton.children![0] as IButton);
+      button.click();
+
+      expect(getReportSpy).toHaveBeenCalledWith('csv', true);
+    });
+
+    it('should be rendered by the default grid toolbar', () => {
+      const grid = new TekGrid({
+        name: 'grid-with-toolbar-export',
+        component: 'TekGrid',
+      });
+      grid.onCreated();
+
+      const toolbarExport = getChild<any>(grid.toolbarSlot, 'grid-with-toolbar-export_export_dropdown');
+
+      expect(toolbarExport).toEqual(expect.objectContaining({
+        name: 'grid-with-toolbar-export_export_dropdown',
+        component: 'TekGridExportButton',
+        gridName: 'grid-with-toolbar-export',
+      }));
+      expect(toolbarExport.activator).toBeUndefined();
+    });
+
+    it('should not create activator metadata when gridName is not provided', () => {
+      const exportButton = new TekGridExportButton({
+        name: 'standalone-export',
+        component: 'TekGridExportButton',
+      });
+
+      expect((exportButton as any).activator).toBeUndefined();
+    });
+  });
+});