@zeedhi/teknisa-components-common 1.37.0 → 1.41.0

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

@@ -1,10 +1,10 @@
 /* eslint-disable no-underscore-dangle */
 
 import {
-  Button, Form, IButton, IForm, IModal, Modal, ModalService,
+  Button, Date, Form, IButton, IForm, IModal, Modal, ModalService, Text,
 } from '@zeedhi/common';
 import {
-  KeyMap, Http, Metadata,
+  KeyMap, Http, Metadata, dayjs, Config,
 } from '@zeedhi/core';
 import {
   ITekGrid,
@@ -113,26 +113,40 @@ describe('TekGrid', () => {
         component: 'TekGrid',
       });
 
-      expect((instance as any).exportConfigButtons[0].label).toBe('Export as PDF');
-      expect((instance as any).exportConfigButtons[0].iconName).toBeUndefined();
-      expect((instance as any).exportConfigButtons[0].name).toBe('grid_export_pdf_portrait');
-      expect((instance as any).exportConfigButtons[0].component).toBe('ZdButton');
-      expect((instance as any).exportConfigButtons[0].flat).toBeTruthy();
-      expect((instance as any).exportConfigButtons[0].events).toBeDefined();
-
-      expect((instance as any).exportConfigButtons[1].label).toBe('Export as XLS');
-      expect((instance as any).exportConfigButtons[1].iconName).toBeUndefined();
-      expect((instance as any).exportConfigButtons[1].name).toBe('grid_export_xls_portrait');
-      expect((instance as any).exportConfigButtons[1].component).toBe('ZdButton');
-      expect((instance as any).exportConfigButtons[1].flat).toBeTruthy();
-      expect((instance as any).exportConfigButtons[1].events).toBeDefined();
-
-      expect((instance as any).exportConfigButtons[2].label).toBe('Export as CSV');
-      expect((instance as any).exportConfigButtons[2].iconName).toBeUndefined();
-      expect((instance as any).exportConfigButtons[2].name).toBe('grid_export_csv_portrait');
-      expect((instance as any).exportConfigButtons[2].component).toBe('ZdButton');
-      expect((instance as any).exportConfigButtons[2].flat).toBeTruthy();
-      expect((instance as any).exportConfigButtons[2].events).toBeDefined();
+      expect((instance as any).gridBase.exportConfigButtons[0].label).toBe('Export as PDF');
+      expect((instance as any).gridBase.exportConfigButtons[0].iconName).toBeUndefined();
+      expect((instance as any).gridBase.exportConfigButtons[0].name).toBe('grid_export_pdf_portrait');
+      expect((instance as any).gridBase.exportConfigButtons[0].component).toBe('ZdButton');
+      expect((instance as any).gridBase.exportConfigButtons[0].flat).toBeTruthy();
+      expect((instance as any).gridBase.exportConfigButtons[0].events).toBeDefined();
+
+      expect((instance as any).gridBase.exportConfigButtons[1].label).toBe('Export as XLS TEKGRID_WITHOUT_GROUPS');
+      expect((instance as any).gridBase.exportConfigButtons[1].iconName).toBeUndefined();
+      expect((instance as any).gridBase.exportConfigButtons[1].name).toBe('grid_export_xls_portrait');
+      expect((instance as any).gridBase.exportConfigButtons[1].component).toBe('ZdButton');
+      expect((instance as any).gridBase.exportConfigButtons[1].flat).toBeTruthy();
+      expect((instance as any).gridBase.exportConfigButtons[1].events).toBeDefined();
+
+      expect((instance as any).gridBase.exportConfigButtons[2].label).toBe('Export as XLS TEKGRID_WITH_GROUPS');
+      expect((instance as any).gridBase.exportConfigButtons[2].iconName).toBeUndefined();
+      expect((instance as any).gridBase.exportConfigButtons[2].name).toBe('grid_export_xls2_portrait');
+      expect((instance as any).gridBase.exportConfigButtons[2].component).toBe('ZdButton');
+      expect((instance as any).gridBase.exportConfigButtons[2].flat).toBeTruthy();
+      expect((instance as any).gridBase.exportConfigButtons[2].events).toBeDefined();
+
+      expect((instance as any).gridBase.exportConfigButtons[3].label).toBe('Export as XLS TEKGRID_GRID_MIRROR');
+      expect((instance as any).gridBase.exportConfigButtons[3].iconName).toBeUndefined();
+      expect((instance as any).gridBase.exportConfigButtons[3].name).toBe('grid_export_xls3_portrait');
+      expect((instance as any).gridBase.exportConfigButtons[3].component).toBe('ZdButton');
+      expect((instance as any).gridBase.exportConfigButtons[3].flat).toBeTruthy();
+      expect((instance as any).gridBase.exportConfigButtons[3].events).toBeDefined();
+
+      expect((instance as any).gridBase.exportConfigButtons[4].label).toBe('Export as CSV');
+      expect((instance as any).gridBase.exportConfigButtons[4].iconName).toBeUndefined();
+      expect((instance as any).gridBase.exportConfigButtons[4].name).toBe('grid_export_csv_portrait');
+      expect((instance as any).gridBase.exportConfigButtons[4].component).toBe('ZdButton');
+      expect((instance as any).gridBase.exportConfigButtons[4].flat).toBeTruthy();
+      expect((instance as any).gridBase.exportConfigButtons[4].events).toBeDefined();
     });
 
     it('should change export buttons from exportConfig', () => {
@@ -148,12 +162,12 @@ describe('TekGrid', () => {
         ],
       });
 
-      expect((instance as any).exportConfigButtons[0].label).toBeUndefined();
-      expect((instance as any).exportConfigButtons[0].iconName).toBe('icon');
-      expect((instance as any).exportConfigButtons[0].name).toBe('grid_export_pdf_landscape');
-      expect((instance as any).exportConfigButtons[0].component).toBe('ZdButton');
-      expect((instance as any).exportConfigButtons[0].flat).toBeTruthy();
-      expect((instance as any).exportConfigButtons[0].events).toBeDefined();
+      expect((instance as any).gridBase.exportConfigButtons[0].label).toBeUndefined();
+      expect((instance as any).gridBase.exportConfigButtons[0].iconName).toBe('icon');
+      expect((instance as any).gridBase.exportConfigButtons[0].name).toBe('grid_export_pdf_landscape');
+      expect((instance as any).gridBase.exportConfigButtons[0].component).toBe('ZdButton');
+      expect((instance as any).gridBase.exportConfigButtons[0].flat).toBeTruthy();
+      expect((instance as any).gridBase.exportConfigButtons[0].events).toBeDefined();
     });
   });
 
@@ -187,7 +201,7 @@ describe('TekGrid', () => {
       const spy = jest.spyOn(instance, 'getReport');
       instance.onCreated();
 
-      const buttonProps = (instance as any).exportConfigButtons[0] as IButton;
+      const buttonProps = (instance as any).gridBase.exportConfigButtons[0] as IButton;
       const button = new Button(buttonProps);
 
       const event = new Event('click');
@@ -1334,7 +1348,7 @@ describe('TekGrid', () => {
         button.click(event, {} as HTMLElement);
         expect(spy).toBeCalledTimes(1);
         expect(button.isVisible).toBeFalsy();
-        instance.hideFilterModal();
+        (instance as any).gridBase.hideFilterModal();
       }
       spy.mockClear();
     });
@@ -1437,7 +1451,7 @@ describe('TekGrid', () => {
         const button = new Button(filterTooltip.children[0]);
         const event = new Event('click');
         button.click(event, {} as HTMLElement);
-        expect(formElements[0].name).toBe('grid_filterClick5-filter-AND-CONTAINS-name');
+        expect(formElements[0].name).toBe('grid_filterClick5-filter-AND-CONTAINS-name-0');
       }
       spy.mockClear();
     });
@@ -1480,17 +1494,262 @@ describe('TekGrid', () => {
         const button = new Button(filterTooltip.children[0]);
         const event = new Event('click');
         button.click(event, {} as HTMLElement);
-        expect(formElements[0].name).toBe('grid_filterClick6-filter-AND-CONTAINS-id');
-        expect(formElements[1].name).toBe('grid_filterClick6-filter-OR-NOT_EQUALS-name');
+        expect(formElements[0].name).toBe('grid_filterClick6-filter-AND-CONTAINS-id-0');
+        expect(formElements[1].name).toBe('grid_filterClick6-filter-OR-NOT_EQUALS-name-0');
         expect(formElements[1].component).toBe('ZdSelect');
       }
       spy.mockClear();
     });
 
-    it('should load form values from tekdatasource', () => {
+    it('should create modal with helper component', () => {
       const instance = new TekGrid({
         name: 'grid_filterClick7',
         component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+        },
+        columns: [
+          {
+            name: 'id',
+            filterProps: [{ name: 'id_edit' }],
+          },
+          {
+            name: 'date',
+            componentProps: { name: 'date_edit', component: 'ZdDate' },
+            filterProps: [
+              {
+                name: 'date_edit1',
+                label: 'date1',
+                operation: 'NOT_EQUALS',
+                relation: 'OR',
+                helperOptions: [
+                  'TODAY',
+                  'TOMORROW',
+                ],
+              },
+              {
+                name: 'date_edit2',
+                label: 'date2',
+                showLabel: false,
+                operation: 'NOT_EQUALS',
+                relation: 'OR',
+                helperOptions: [
+                  'TODAY',
+                  'TOMORROW',
+                ],
+              },
+            ],
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      let form: IForm;
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        if (modal.children && modal.children.length > 1) {
+          form = modal.children[1] as IForm;
+          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_filterClick7-filter-AND-CONTAINS-id-0');
+        expect(formElements[1].name).toBe('grid_filterClick7-filter-OR-NOT_EQUALS-date-0_helperspan');
+        expect(formElements[1].component).toBe('ZdTag');
+        expect(formElements[1].children.length).toBe(2);
+        expect(formElements[1].children[0].name).toBe('grid_filterClick7-filter-OR-NOT_EQUALS-date-0');
+        expect(formElements[1].children[0].component).toBe('ZdDate');
+        expect(formElements[1].children[1].name).toBe('grid_filterClick7-filter-OR-NOT_EQUALS-date-0_helperdropdown');
+        expect(formElements[1].children[1].component).toBe('ZdDropdown');
+        expect(formElements[1].children[1].activator.cssClass).toBe('filter-helper-values-button with-label');
+        expect(formElements[1].children[1].children.length).toBe(2);
+        expect(formElements[1].children[1].children[0].component).toBe('ZdText');
+        expect(formElements[1].children[1].children[0].text).toBe('TEKGRID_HELPERVALUE_TODAY');
+        expect(formElements[1].children[1].children[1].component).toBe('ZdText');
+        expect(formElements[1].children[1].children[1].text).toBe('TEKGRID_HELPERVALUE_TOMORROW');
+        expect(formElements[2].name).toBe('grid_filterClick7-filter-OR-NOT_EQUALS-date-1_helperspan');
+        expect(formElements[2].component).toBe('ZdTag');
+        expect(formElements[2].children.length).toBe(2);
+        expect(formElements[2].children[0].name).toBe('grid_filterClick7-filter-OR-NOT_EQUALS-date-1');
+        expect(formElements[2].children[0].component).toBe('ZdDate');
+        expect(formElements[2].children[1].name).toBe('grid_filterClick7-filter-OR-NOT_EQUALS-date-1_helperdropdown');
+        expect(formElements[2].children[1].component).toBe('ZdDropdown');
+        expect(formElements[2].children[1].activator.cssClass).toBe('filter-helper-values-button ');
+      }
+      spy.mockClear();
+    });
+
+    it('should apply helper value', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick8',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+        },
+        columns: [
+          {
+            name: 'date',
+            componentProps: { name: 'date_edit', component: 'ZdDate' },
+            filterProps: {
+              name: 'date_edit',
+              label: 'date',
+              operation: 'NOT_EQUALS',
+              relation: 'OR',
+              helperOptions: [
+                'TODAY',
+                'TOMORROW',
+              ],
+            },
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      let form: IForm;
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        if (modal.children && modal.children.length > 1) {
+          form = modal.children[1] as IForm;
+          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);
+        const todayHelper = new Text(formElements[0].children[1].children[0]);
+        const dateComp = new Date(formElements[0].children[0]);
+        const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => dateComp);
+        todayHelper.click(event, {} as HTMLElement);
+        expect(dateComp.value).toBe(dayjs().format(Config.dateFormat));
+        expect(dateComp.hint).toBe('TEKGRID_HELPERVALUE_TODAY');
+        dateComp.change(event, {} as HTMLElement);
+        expect(dateComp.hint).toBe('');
+        spyMetadata.mockClear();
+      }
+      spy.mockClear();
+    });
+
+    it('should apply helper value on filterProps as an array', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick8_1',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+        },
+        columns: [
+          {
+            name: 'date',
+            componentProps: { name: 'date_edit', component: 'ZdDate' },
+            filterProps: [
+              {
+                name: 'date_edit',
+                label: 'date',
+                helperOptions: [
+                  'TODAY',
+                  'TOMORROW',
+                ],
+              },
+            ],
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      let form: IForm;
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        if (modal.children && modal.children.length > 1) {
+          form = modal.children[1] as IForm;
+          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);
+        const todayHelper = new Text(formElements[0].children[1].children[0]);
+        const dateComp = new Date(formElements[0].children[0]);
+        const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => dateComp);
+        todayHelper.click(event, {} as HTMLElement);
+        expect(dateComp.value).toBe(dayjs().format(Config.dateFormat));
+        expect(dateComp.hint).toBe('TEKGRID_HELPERVALUE_TODAY');
+        dateComp.change(event, {} as HTMLElement);
+        expect(dateComp.hint).toBe('');
+        spyMetadata.mockClear();
+      }
+      spy.mockClear();
+    });
+
+    it('should apply helper value on filterProps as an array', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick8_2',
+        component: 'TekGrid',
+        datasource: {
+          type: 'tek-rest',
+        },
+        columns: [
+          {
+            name: 'date',
+            componentProps: { name: 'date_edit', component: 'ZdDate' },
+            filterProps: {
+              name: 'date_edit',
+              label: 'date',
+              helperOptions: [
+                'TODAY',
+                'TOMORROW',
+              ],
+            },
+          },
+        ],
+      });
+
+      let formElements: any = [];
+      let form: IForm | undefined;
+      const spy = jest.spyOn(ModalService, 'create').mockImplementation((modal: IModal) => {
+        if (modal.children && modal.children.length > 1) {
+          form = modal.children[1] as IForm;
+          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);
+        const dateComp = new Date(formElements[0].children[0]);
+        if (form) {
+          const formObj = new Form(form);
+          const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => formObj);
+          dateComp.onMounted({} as HTMLElement);
+          expect(formObj.value).toEqual({
+            'grid_filterClick8_2-filter-AND-CONTAINS-date-0': undefined,
+          });
+          spyMetadata.mockClear();
+        }
+      }
+      spy.mockClear();
+    });
+
+    it('should load form values from tekdatasource', () => {
+      const instance = new TekGrid({
+        name: 'grid_filterClick9',
+        component: 'TekGrid',
         datasource: {
           type: 'tek-rest',
           dynamicFilter: {
@@ -1507,6 +1766,13 @@ describe('TekGrid', () => {
                 value: '9',
               },
             ],
+            date: [
+              {
+                operation: 'IN',
+                relation: 'OR',
+                value: ['2021-11-12', '2021-12-12'],
+              },
+            ],
           },
         },
         columns: [
@@ -1517,14 +1783,18 @@ describe('TekGrid', () => {
           {
             name: 'name',
             componentProps: { name: 'name_edit', component: 'ZdSelect' },
-            filterProps: [{
+            filterProps: {
               name: 'name_edit', label: 'name', operation: 'NOT_EQUALS', relation: 'OR',
-            }],
+            },
           },
           {
             name: 'phone',
             filterProps: [{ name: 'phone_edit' }],
           },
+          {
+            name: 'date',
+            filterProps: { name: 'date_edit', helperValue: 'TODAY' },
+          },
         ],
       });
 
@@ -1542,20 +1812,27 @@ describe('TekGrid', () => {
         const button = new Button(filterTooltip.children[0]);
         const event = new Event('click');
         button.click(event, {} as HTMLElement);
-        expect(form.name).toBe('grid_filterClick7-filter-form');
-        const formObject = new Form(form);
-        formObject.onMounted({} as HTMLElement);
-        expect(formObject.value).toEqual({
-          'grid_filterClick7-filter-OR-NOT_EQUALS-name': 'teste',
-          'grid_filterClick7-filter-AND-CONTAINS-phone': '9',
-        });
+        expect(form.name).toBe('grid_filterClick9-filter-form');
+        if (form) {
+          const formObject = new Form(form);
+          const dateObject = new Date({ name: 'date', component: 'ZdDate' });
+          const spyMetadata = jest.spyOn(Metadata, 'getInstances').mockImplementation(() => [dateObject]);
+          formObject.onMounted({} as HTMLElement);
+          expect(formObject.value).toEqual({
+            'grid_filterClick9-filter-OR-NOT_EQUALS-name-0': 'teste',
+            'grid_filterClick9-filter-AND-CONTAINS-phone-0': '9',
+            'grid_filterClick9-filter-OR-IN-date-0': ['2021-11-12', '2021-12-12'],
+          });
+          expect(dateObject.hint).toBe('TEKGRID_HELPERVALUE_TODAY');
+          spyMetadata.mockClear();
+        }
       }
       spy.mockClear();
     });
 
     it('should load form values from datasource', () => {
       const instance = new TekGrid({
-        name: 'grid_filterClick8',
+        name: 'grid_filterClick10',
         component: 'TekGrid',
         datasource: {
           filter: {
@@ -1594,8 +1871,8 @@ describe('TekGrid', () => {
         const formObject = new Form(form);
         formObject.onMounted({} as HTMLElement);
         expect(formObject.value).toEqual({
-          'grid_filterClick8-filter-AND-CONTAINS-name': 'teste',
-          'grid_filterClick8-filter-AND-CONTAINS-phone': '9',
+          'grid_filterClick10-filter-AND-CONTAINS-name-0': 'teste',
+          'grid_filterClick10-filter-AND-CONTAINS-phone-0': '9',
         });
       }
       spy.mockClear();
@@ -1603,7 +1880,7 @@ describe('TekGrid', () => {
 
     it('should apply filter from form to tekdatasource', () => {
       const instance = new TekGrid({
-        name: 'grid_filterClick9',
+        name: 'grid_filterClick11',
         component: 'TekGrid',
         datasource: {
           type: 'tek-rest',
@@ -1659,11 +1936,11 @@ describe('TekGrid', () => {
         const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => formObject);
         const spyDatasourceGet = jest.spyOn(instance.datasource, 'get');
         formObject.value = {
-          'grid_filterClick9-filter-AND-IN-id': '1; 2; 3',
-          'grid_filterClick9-filter-OR-NOT_EQUALS-name': 'teste',
-          'grid_filterClick9-filter-AND-CONTAINS-phone': '',
-          'grid_filterClick9-filter-AND-GREATER_THAN_EQUALS-salary': '1000',
-          'grid_filterClick9-filter-AND-LESS_THAN_EQUALS-salary': '2000',
+          'grid_filterClick11-filter-AND-IN-id-0': ['1', '2', '3'],
+          'grid_filterClick11-filter-OR-NOT_EQUALS-name-0': 'teste',
+          'grid_filterClick11-filter-AND-CONTAINS-phone-0': '',
+          'grid_filterClick11-filter-AND-GREATER_THAN_EQUALS-salary-0': '1000',
+          'grid_filterClick11-filter-AND-LESS_THAN_EQUALS-salary-0': '2000',
         };
         const applyButtonObject = new Button(applyButton);
         formObject.validate = () => false;
@@ -1712,7 +1989,7 @@ describe('TekGrid', () => {
       let beforeApplyFilterCalled = false;
       let changeLayoutCalled = false;
       const instance = new TekGrid({
-        name: 'grid_filterClick10',
+        name: 'grid_filterClick12',
         component: 'TekGrid',
         columns: [
           {
@@ -1759,15 +2036,15 @@ describe('TekGrid', () => {
         const spyMetadata = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => formObject);
         const spyDatasourceGet = jest.spyOn(instance.datasource, 'get');
         formObject.value = {
-          'grid_filterClick10-filter-AND-CONTAINS-id': '1; 2; 3',
-          'grid_filterClick10-filter-AND-CONTAINS-name': 'teste',
-          'grid_filterClick10-filter-AND-CONTAINS-phone': '',
-          'grid_filterClick10-filter-AND-CONTAINS-salary': '1000',
+          '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',
         };
         const applyButtonObject = new Button(applyButton);
         applyButtonObject.click({ defaultPrevented: true } as Event, {} as HTMLElement);
         expect((instance.datasource as TekRestDatasource).filter).toEqual({
-          id: '1; 2; 3',
+          id: '1;2;3',
           name: 'teste',
           salary: '1000',
         });
@@ -2107,4 +2384,45 @@ describe('TekGrid', () => {
       expect(groupRowClick).not.toHaveBeenCalled();
     });
   });
+
+  describe('selectGroupClick', () => {
+    it('should trigger events', async () => {
+      const flushPromises = () => new Promise(setImmediate);
+      const groupSelected = jest.fn();
+      const groupUnselected = jest.fn();
+
+      const data = [
+        { id: '1', name: 'First', department: 1 },
+        { id: '2', name: 'Second', department: 1 },
+        { id: '3', name: 'Third', department: 1 },
+      ];
+      const grid = new TekGrid({
+        name: 'grid',
+        component: 'TekGrid',
+        columns: [
+          { name: 'id' },
+          { name: 'name' },
+          { name: 'department', grouped: true },
+        ],
+        datasource: {
+          data,
+        },
+        events: {
+          groupSelected,
+          groupUnselected,
+        },
+      });
+
+      await flushPromises();
+
+      const event = new Event('click');
+      const element = document.createElement('div');
+
+      grid.selectGroupClick(grid.groupedData[0], true, event, element);
+      expect(groupSelected).toHaveBeenCalled();
+
+      grid.selectGroupClick(grid.groupedData[0], false, event, element);
+      expect(groupUnselected).toHaveBeenCalled();
+    });
+  });
 });

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

@@ -61,6 +61,26 @@ describe('LayoutOptions', () => {
           { name: 'id' },
           { name: 'name' },
           { name: 'salary' },
+          {
+            name: 'date1',
+            filterProps: {
+              name: 'date1-filter',
+              helperValue: 'TODAY',
+            },
+          },
+          {
+            name: 'date2',
+            filterProps: [
+              {
+                name: 'date2-filter1',
+                helperValue: 'TODAY',
+              },
+              {
+                name: 'date2-filter2',
+                helperValue: 'TOMORROW',
+              },
+            ],
+          },
         ],
       });
       const instance = new TekGridLayoutOptions({ name: 'layout', component: 'TekGridLayoutOptions' });
@@ -83,6 +103,7 @@ describe('LayoutOptions', () => {
           align: 'left',
           groupOpened: undefined,
           label: '',
+          filterHelperValue: [],
         },
         {
           name: 'name',
@@ -95,6 +116,7 @@ describe('LayoutOptions', () => {
           align: 'left',
           groupOpened: undefined,
           label: '',
+          filterHelperValue: [],
         },
         {
           name: 'salary',
@@ -107,6 +129,33 @@ describe('LayoutOptions', () => {
           align: 'left',
           groupOpened: undefined,
           label: '',
+          filterHelperValue: [],
+        },
+        {
+          name: 'date1',
+          isVisible: true,
+          fixed: false,
+          grouped: false,
+          minWidth: '',
+          maxWidth: '',
+          aggregation: undefined,
+          align: 'left',
+          groupOpened: undefined,
+          label: '',
+          filterHelperValue: 'TODAY',
+        },
+        {
+          name: 'date2',
+          isVisible: true,
+          fixed: false,
+          grouped: false,
+          minWidth: '',
+          maxWidth: '',
+          aggregation: undefined,
+          align: 'left',
+          groupOpened: undefined,
+          label: '',
+          filterHelperValue: ['TODAY', 'TOMORROW'],
         },
       ]);
     });
@@ -136,6 +185,9 @@ describe('LayoutOptions', () => {
           align: 'left',
           groupOpened: undefined,
           label: '',
+          filterHelperValue: '',
+          fixed: undefined,
+          grouped: undefined,
         },
         {
           name: 'name',
@@ -146,6 +198,9 @@ describe('LayoutOptions', () => {
           align: 'left',
           groupOpened: undefined,
           label: '',
+          filterHelperValue: '',
+          fixed: undefined,
+          grouped: undefined,
         },
         {
           name: 'salary',
@@ -156,6 +211,9 @@ describe('LayoutOptions', () => {
           align: 'left',
           groupOpened: undefined,
           label: '',
+          filterHelperValue: '',
+          fixed: undefined,
+          grouped: undefined,
         },
       ]);
     });