@zeedhi/teknisa-components-common 1.40.0 → 1.44.0

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

@@ -1,10 +1,10 @@
 /* eslint-disable no-underscore-dangle */
 
 import {
-  Button, Date, Form, IButton, IForm, IModal, Modal, ModalService, Text,
+  Button, Date, Dropdown, Form, IButton, IForm, IModal, Modal, ModalService, Search, Text, TextInput,
 } from '@zeedhi/common';
 import {
-  KeyMap, Http, Metadata, dayjs, Config,
+  KeyMap, Http, Metadata, dayjs, Config, IDictionary,
 } from '@zeedhi/core';
 import {
   ITekGrid,
@@ -31,6 +31,7 @@ describe('TekGrid', () => {
       expect(instance.dragColumns).toBeTruthy();
       expect(instance.resizeColumns).toBeTruthy();
       expect(instance.showLayoutOptions).toBeTruthy();
+      expect(instance.showSearch).toBeTruthy();
       expect(instance.showSummaryTotal).toBeTruthy();
       expect(instance.showReload).toBeTruthy();
       expect(instance.columnsButton).toBeFalsy();
@@ -49,6 +50,7 @@ describe('TekGrid', () => {
         dragColumns: false,
         resizeColumns: false,
         showLayoutOptions: false,
+        showSearch: false,
         showSummaryTotal: false,
         showReload: false,
         columns: [
@@ -65,6 +67,7 @@ describe('TekGrid', () => {
       expect(instance.dragColumns).toBeFalsy();
       expect(instance.resizeColumns).toBeFalsy();
       expect(instance.showLayoutOptions).toBeFalsy();
+      expect(instance.showSearch).toBeFalsy();
       expect(instance.showSummaryTotal).toBeFalsy();
       expect(instance.showReload).toBeFalsy();
       expect(instance.columns[0]).toBeInstanceOf(TekGridColumn);
@@ -656,6 +659,114 @@ describe('TekGrid', () => {
         done();
       }, 1000);
     });
+
+    it('should open filter modal input with keymap', async () => {
+      const flushPromises = () => new Promise(setImmediate);
+      const instance = new TekGrid({
+        name: 'grid_navigation_2',
+        component: 'TekGrid',
+        filterButton: true,
+      });
+      const elem = document.createElement('DIV');
+
+      (KeyMap as any).isElementActive = () => true;
+
+      instance.onMounted(elem);
+      await flushPromises();
+
+      const method = jest.fn();
+
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => new Button({
+        name: 'grid_navigation_2_filterButton',
+        component: 'ZdButton',
+        events: {
+          click: method,
+        },
+      }));
+
+      dispatchEvent(76, { ctrlKey: true }); // ctrl+l keydown
+      await flushPromises();
+
+      instance.onBeforeDestroy();
+      await flushPromises();
+
+      expect(method).toHaveBeenCalled();
+      (KeyMap as any).isElementActive = () => false;
+      spyMetadata.mockClear();
+    });
+
+    it('should open action dropdown with keymap', async () => {
+      const flushPromises = () => new Promise(setImmediate);
+      const instance = new TekGrid({
+        name: 'grid_navigation_2',
+        component: 'TekGrid',
+      });
+      const elem = document.createElement('DIV');
+
+      (KeyMap as any).isElementActive = () => true;
+
+      instance.onMounted(elem);
+      await flushPromises();
+
+      const instanceDropDown = new Dropdown({
+        name: 'grid_navigation_2_actions_dropdown',
+        component: 'ZdDropdown',
+        activator: {
+          name: 'grid_navigation_2_actionsButton',
+          component: 'ZdButton',
+        },
+        children: [],
+      });
+      const instanceDropDownSpy = jest.spyOn(instanceDropDown, 'setFocus').mockImplementation(() => true);
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => instanceDropDown);
+
+      dispatchEvent(13, { ctrlKey: true, enterKey: true }); // ctrl + enter keydown
+      await flushPromises();
+
+      expect(spyMetadata).toHaveBeenCalled();
+      expect(instanceDropDownSpy).toHaveBeenCalled();
+
+      instance.onBeforeDestroy();
+      await flushPromises();
+
+      (KeyMap as any).isElementActive = () => false;
+      spyMetadata.mockClear();
+      instanceDropDownSpy.mockClear();
+    });
+
+    it('should focus in searchInput with keymap', async () => {
+      const flushPromises = () => new Promise(setImmediate);
+      const instance = new TekGrid({
+        name: 'grid_navigation_3',
+        component: 'TekGrid',
+      });
+      const elem = document.createElement('DIV');
+
+      (KeyMap as any).isElementActive = () => true;
+      instance.onMounted(elem);
+      await flushPromises();
+
+      const searchInput = new Search({
+        name: 'grid_navigation_3_gridSearch',
+        component: 'ZdSearch',
+        parent: instance,
+      });
+
+      const spySetFocus = jest.spyOn(searchInput, 'setFocus').mockImplementation(() => true);
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => searchInput);
+
+      dispatchEvent(70, { ctrlKey: true }); // ctrl+f keydown
+      await flushPromises();
+
+      expect(spySetFocus).toHaveBeenCalled();
+
+      instance.onBeforeDestroy();
+      await flushPromises();
+
+      (KeyMap as any).isElementActive = () => false;
+      spySetFocus.mockClear();
+      spyMetadata.mockClear();
+    });
   });
 
   describe('reloadClick()', () => {
@@ -1328,6 +1439,50 @@ describe('TekGrid', () => {
         done();
       }, 1000);
     });
+
+    it('should call debounced updateGroupData', async (done) => {
+      const flushPromises = () => new Promise(setImmediate);
+      const instance = new TekGrid({
+        name: 'grid_grouping_1',
+        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 },
+          ],
+        },
+      });
+
+      await flushPromises();
+
+      instance.updateGroupedData = jest.fn();
+      instance.columns[2].groupOpened = true;
+
+      setTimeout(() => {
+        expect(instance.updateGroupedData).toBeCalled();
+        done();
+      }, 1000);
+    });
   });
 
   describe('filterClick()', () => {
@@ -1456,6 +1611,54 @@ describe('TekGrid', () => {
       spy.mockClear();
     });
 
+    it('should create modal with filterable and ordered form elements', () => {
+      const instance = new TekGrid({
+        name: 'grid-filter-order',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          {
+            name: 'first_name',
+            filterable: true,
+            filterProps: [{ name: 'first_name_edit', label: 'first_name' }],
+          },
+          {
+            name: 'last_name',
+            filterable: true,
+            filterIndex: 1,
+            filterProps: [{ name: 'last_name_edit', label: 'last_name' }],
+          },
+          {
+            name: 'dob',
+            filterable: true,
+            filterIndex: 0,
+            filterProps: [{ name: 'dob_edit', label: 'dob' }],
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        if (modal.children && modal.children.length > 1) {
+          const form = modal.children[1];
+          formElements = form.children;
+        }
+
+        return new Modal(modal);
+      });
+      instance.onCreated();
+      const filterTooltip = instance.toolbarSlot[6];
+      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
+        const button = new Button(filterTooltip.children[0]);
+        const event = new Event('click');
+        button.click(event, {} as HTMLElement);
+        expect(formElements[0].name).toBe('grid-filter-order-filter-AND-CONTAINS-dob-0');
+        expect(formElements[1].name).toBe('grid-filter-order-filter-AND-CONTAINS-last_name-0');
+        expect(formElements[2].name).toBe('grid-filter-order-filter-AND-CONTAINS-first_name-0');
+      }
+      spy.mockClear();
+    });
+
     it('should create modal with filterable form elements and TekRestDatasource', () => {
       const instance = new TekGrid({
         name: 'grid_filterClick6',
@@ -1985,11 +2188,90 @@ describe('TekGrid', () => {
       spyModalService.mockClear();
     });
 
+    it('should clear data from form', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick12',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+        },
+        columns: [
+          {
+            name: 'id',
+            filterProps: [{ name: 'id_edit', operation: 'IN', relation: 'AND' }],
+          },
+          {
+            name: 'name',
+            componentProps: { name: 'name_edit', component: 'ZdSelect' },
+            filterProps: [{
+              name: 'name_edit', label: 'name', operation: 'NOT_EQUALS', relation: 'OR',
+            }],
+          },
+          {
+            name: 'phone',
+            filterProps: [{ name: 'phone_edit' }],
+          },
+          {
+            name: 'salary',
+            filterProps: [
+              { name: 'salary_min', operation: 'GREATER_THAN_EQUALS', relation: 'AND' },
+              { name: 'salary_max', operation: 'LESS_THAN_EQUALS', relation: 'AND' },
+            ],
+          },
+        ],
+      });
+
+      let form: IForm = { name: 'form', component: 'ZdForm' };
+      let clearButton: IButton = { name: 'clear', component: 'ZdButton' };
+      const spyModalService = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        if (modal.children && modal.children.length > 2) {
+          form = modal.children[1] as IForm;
+          const modalFooter = modal.children[2];
+          if (modalFooter.leftSlot && modalFooter.leftSlot.length > 0) {
+            clearButton = modalFooter.leftSlot[0] as IButton;
+          }
+        }
+
+        return new Modal(modal);
+      });
+
+      instance.onCreated();
+
+      const filterTooltip = instance.toolbarSlot[6];
+      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
+        const button = new Button(filterTooltip.children[0]);
+        const event = new Event('click');
+        button.click(event, {} as HTMLElement);
+        const formObject = new Form(form);
+        const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => formObject);
+        const spyDatasourceGet = jest.spyOn(instance.datasource, 'get');
+        formObject.value = {
+          'grid_filterClick12-filter-AND-IN-id-0': ['1', '2', '3'],
+          'grid_filterClick12-filter-OR-NOT_EQUALS-name-0': 'teste',
+          'grid_filterClick12-filter-AND-CONTAINS-phone-0': '',
+          'grid_filterClick12-filter-AND-GREATER_THAN_EQUALS-salary-0': '1000',
+          'grid_filterClick12-filter-AND-LESS_THAN_EQUALS-salary-0': '2000',
+        };
+        const clearButtonObject = new Button(clearButton);
+        clearButtonObject.click(event, {} as HTMLElement);
+        expect(formObject.value).toEqual({
+          'grid_filterClick12-filter-AND-IN-id-0': null,
+          'grid_filterClick12-filter-OR-NOT_EQUALS-name-0': null,
+          'grid_filterClick12-filter-AND-CONTAINS-phone-0': null,
+          'grid_filterClick12-filter-AND-GREATER_THAN_EQUALS-salary-0': null,
+          'grid_filterClick12-filter-AND-LESS_THAN_EQUALS-salary-0': null,
+        });
+        spyMetadata.mockClear();
+        spyDatasourceGet.mockClear();
+      }
+      spyModalService.mockClear();
+    });
+
     it('should apply filter from form to datasource', () => {
       let beforeApplyFilterCalled = false;
       let changeLayoutCalled = false;
       const instance = new TekGrid({
-        name: 'grid_filterClick12',
+        name: 'grid_filterClick13',
         component: 'TekGrid',
         columns: [
           {
@@ -2036,10 +2318,10 @@ describe('TekGrid', () => {
         const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => formObject);
         const spyDatasourceGet = jest.spyOn(instance.datasource, 'get');
         formObject.value = {
-          'grid_filterClick12-filter-AND-CONTAINS-id-0': '1;2;3',
-          'grid_filterClick12-filter-AND-CONTAINS-name-0': 'teste',
-          'grid_filterClick12-filter-AND-CONTAINS-phone-0': '',
-          'grid_filterClick12-filter-AND-CONTAINS-salary-0': '1000',
+          'grid_filterClick13-filter-AND-CONTAINS-id-0': '1;2;3',
+          'grid_filterClick13-filter-AND-CONTAINS-name-0': 'teste',
+          'grid_filterClick13-filter-AND-CONTAINS-phone-0': '',
+          'grid_filterClick13-filter-AND-CONTAINS-salary-0': '1000',
         };
         const applyButtonObject = new Button(applyButton);
         applyButtonObject.click({ defaultPrevented: true } as Event, {} as HTMLElement);
@@ -2425,4 +2707,161 @@ describe('TekGrid', () => {
       expect(groupUnselected).toHaveBeenCalled();
     });
   });
+
+  describe('layoutOptions', () => {
+    it('should return layout options instance', async () => {
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        showLayoutOptions: false,
+      });
+
+      expect(grid.layoutOptions).toBeUndefined();
+
+      grid.showLayoutOptions = true;
+      const layoutOptionsComp = { name: 'grid_layout_options' };
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => layoutOptionsComp);
+      expect(grid.layoutOptions).toEqual(layoutOptionsComp);
+      spyMetadata.mockClear();
+    });
+  });
+
+  describe('getAtomInstance', () => {
+    const createAtom = (name: string) => new Text({
+      name: `${name}_gridTitle`,
+      component: 'ZdText',
+      text: 'Employees',
+    });
+
+    it('when called, should return the instance of an atom component', () => {
+      const instance = new TekGrid({ name: 'Grid', component: 'TekGrid' });
+      const atom = createAtom(instance.name);
+      const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => atom);
+
+      const gridAtom = instance.getAtomInstance<Text>('TITLE');
+
+      expect(gridAtom).toEqual(atom);
+      spyMetadata.mockClear();
+    });
+  });
+
+  describe('getFilterInputs', () => {
+    const mockMetadata = (instance: TekGrid) => {
+      const inputs: IDictionary = {};
+      instance.columns.forEach((col) => {
+        if (!col.filterable || !col.filterProps) return;
+
+        col.filterProps.forEach((filter: any, index: number) => {
+          const relation = filter.relation || 'AND';
+          const operation = filter.operation || 'CONTAINS';
+
+          const name = `${instance.name}-filter-${relation}-${operation}-${col.name}-${index}`;
+          inputs[name] = new TextInput({
+            name,
+            ...filter.filterProps,
+          });
+        });
+      });
+      return jest.spyOn(Metadata, 'getInstance').mockImplementation((name: string) => inputs[name]);
+    };
+
+    it('when called with null parameter, should return all the filter inputs', () => {
+      const instance = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+          uniqueKey: 'id',
+          route: '/zeedhi',
+          lazyLoad: false,
+        },
+        columns: [
+          { name: 'id' },
+          { name: 'name', filterable: true, filterProps: [{ name: 'name_edit', label: 'name' }] },
+          {
+            name: 'salary',
+            filterable: true,
+            filterProps: [
+              {
+                name: 'salary_edit',
+                component: 'ZdCurrency',
+                operation: 'GREATER_THAN_EQUALS',
+                label: 'Salary (min)',
+              },
+              {
+                name: 'salary_edit',
+                component: 'ZdCurrency',
+                operation: 'LESS_THAN_EQUALS',
+                label: 'Salary (max)',
+              },
+            ],
+          },
+        ],
+      });
+
+      const spy = mockMetadata(instance);
+      instance.onCreated();
+      const filterTooltip = instance.toolbarSlot[6];
+      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
+        const button = new Button(filterTooltip.children[0]);
+        const event = new Event('click');
+        button.click(event, {} as HTMLElement);
+      }
+
+      const inputs = instance.getFilterInputs();
+      expect(inputs[0].name).toBe('grid-filter-AND-CONTAINS-name-0');
+      expect(inputs[1].name).toBe('grid-filter-AND-GREATER_THAN_EQUALS-salary-0');
+      expect(inputs[2].name).toBe('grid-filter-AND-LESS_THAN_EQUALS-salary-1');
+      spy.mockClear();
+    });
+
+    it('when called, should return the instances of filters with multiple inputs', () => {
+      const instance = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+          uniqueKey: 'id',
+          route: '/zeedhi',
+          lazyLoad: false,
+        },
+        columns: [
+          { name: 'id' },
+          { name: 'name', filterable: true, filterProps: [{ name: 'name_edit', label: 'name' }] },
+          {
+            name: 'salary',
+            filterable: true,
+            filterProps: [
+              {
+                name: 'salary_edit',
+                component: 'ZdCurrency',
+                operation: 'GREATER_THAN_EQUALS',
+                label: 'Salary (min)',
+              },
+              {
+                name: 'salary_edit',
+                component: 'ZdCurrency',
+                operation: 'LESS_THAN_EQUALS',
+                label: 'Salary (max)',
+              },
+            ],
+          },
+        ],
+      });
+
+      const spy = mockMetadata(instance);
+      instance.onCreated();
+      const filterTooltip = instance.toolbarSlot[6];
+      if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
+        const button = new Button(filterTooltip.children[0]);
+        const event = new Event('click');
+        button.click(event, {} as HTMLElement);
+      }
+
+      const inputs = instance.getFilterInputs('salary');
+      expect(inputs[0].name).toBe('grid-filter-AND-GREATER_THAN_EQUALS-salary-0');
+      expect(inputs[1].name).toBe('grid-filter-AND-LESS_THAN_EQUALS-salary-1');
+      spy.mockClear();
+    });
+  });
 });