@zeedhi/teknisa-components-common 1.45.0 → 1.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/teknisa-components-common",
-  "version": "1.45.0",
+  "version": "1.48.0",
   "description": "Teknisa Components Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -21,6 +21,7 @@
     "@types/lodash.debounce": "^4.0.6",
     "@types/lodash.get": "^4.4.6",
     "@types/lodash.merge": "^4.6.6",
+    "@zeedhi/zd-user-info-common": "^1.0.2",
     "lodash.debounce": "^4.0.8",
     "lodash.get": "^4.4.2",
     "lodash.merge": "^4.6.2"
@@ -28,5 +29,5 @@
   "peerDependencies": {
     "@zeedhi/core": "*"
   },
-  "gitHead": "5cb77925445487ae4412a779f01ee7be41b59817"
+  "gitHead": "2b74af72b5bfd6159d947cba0beb3c990218f093"
 }

package/tests/__helpers__/mock-created-helper.ts

@@ -0,0 +1,10 @@
+import { ComponentRender } from '@zeedhi/common';
+import { UserInfo } from '@zeedhi/zd-user-info-common';
+
+const mockCreated = (component: ComponentRender) => {
+  jest.spyOn(UserInfo.prototype, 'onCreated').mockImplementation(() => {
+    component.componentId = 1;
+  });
+};
+
+export { mockCreated };

package/tests/unit/components/tek-datasource/memory-datasource.spec.ts

@@ -1,4 +1,5 @@
 import {
+  init,
   Router,
   URL,
 } from '@zeedhi/core';
@@ -7,6 +8,14 @@ import {
 } from '../../../../src';
 
 describe('TekMemoryDatasource', () => {
+  init({
+    controllers: {
+      AppController: class AppController {
+        public value = '1';
+      },
+    },
+  });
+
   let datasource: ITekMemoryDatasource;
   let router: any;
 
@@ -56,6 +65,21 @@ describe('TekMemoryDatasource', () => {
       expect(instance.searchJoin).toEqual({ col1: ['1', '2'], col2: [2], col3: [] });
     });
 
+    it('should assign all properties with accessor', async () => {
+      const flushPromises = () => new Promise(setImmediate);
+      const instance = new TekMemoryDatasource({
+        ...datasource,
+        dynamicFilter: {
+          name: [{ operation: 'EQUALS', relation: 'AND', value: '{{AppController.value}}' }],
+        },
+        searchJoin: { col1: ['1', '2'], col2: [2], col3: [] },
+      });
+      await flushPromises();
+
+      expect(instance.dynamicFilter).toEqual({ name: [{ operation: 'EQUALS', relation: 'AND', value: '1' }] });
+      expect(instance.searchJoin).toEqual({ col1: ['1', '2'], col2: [2], col3: [] });
+    });
+
     it('should create using default parameters', async () => {
       const instance = new TekMemoryDatasource({});
 

package/tests/unit/components/tek-datasource/rest-datasource.spec.ts

@@ -1,11 +1,20 @@
 import {
-  IConfig, Config, Router, Http, URL, IDictionary,
+  IConfig, Config, Router, Http, URL, IDictionary, init,
 } from '@zeedhi/core';
 import {
   TekRestDatasource, ITekRestDatasource,
 } from '../../../../src';
 
 describe('TekRestDatasource', () => {
+  init({
+    controllers: {
+      AppController: class AppController {
+        public value = '1';
+
+        public join: string[] | number[] = ['1', '2'];
+      },
+    },
+  });
   let datasource: ITekRestDatasource;
   let router: any;
   const config: IConfig = {
@@ -82,6 +91,24 @@ describe('TekRestDatasource', () => {
       expect(instance.searchJoin).toEqual({ col1: ['1', '2'], col2: [2], col3: [] });
     });
 
+    it('should assign all properties', async () => {
+      const flushPromises = () => new Promise(setImmediate);
+      const instance = new TekRestDatasource({
+        ...datasource,
+        dynamicFilter: {
+          name: { operation: 'EQUALS', relation: 'AND', value: '{{AppController.value}}' },
+        },
+        searchJoin: { col1: '{{AppController.join}}' as any, col2: [2], col3: [] },
+      });
+      await flushPromises();
+
+      expect(instance.route).toBe('/zeedhi');
+      expect(instance.lazyLoad).toBeTruthy();
+      expect(instance.dynamicFilter).toEqual({ name: { operation: 'EQUALS', relation: 'AND', value: '1' } });
+      expect(instance.data.length).toBe(0);
+      expect(instance.searchJoin).toEqual({ col1: ['1', '2'], col2: [2], col3: [] });
+    });
+
     it('should create without lazyLoad', async () => {
       const flushPromises = () => new Promise(setImmediate);
       const instance = new TekRestDatasource({

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

@@ -1,10 +1,13 @@
-import { Config, dayjs } from '@zeedhi/core';
+import { Config, DateHelper, dayjs } from '@zeedhi/core';
 import { TekFilterHelper, TekGrid } from '../../../../src';
 
 describe('TekFilterHelper', () => {
   describe('getLabel', () => {
     it('should return helper label', () => {
-      expect(TekFilterHelper.getLabel('TODAY')).toBe('TEKGRID_HELPERVALUE_TODAY');
+      const dateHelperSpy = jest.spyOn(DateHelper, 'getLabel').mockImplementation((name: string) => name);
+
+      expect(TekFilterHelper.getLabel('TODAY')).toBe('TODAY');
+      dateHelperSpy.mockClear();
     });
   });
 

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

@@ -4,9 +4,10 @@ import {
   Button, Date, Dropdown, Form, IButton, IForm, IModal, Modal, ModalService, Search, Text, TextInput,
 } from '@zeedhi/common';
 import {
-  KeyMap, Http, Metadata, dayjs, Config, IDictionary,
+  KeyMap, Http, Metadata, IDictionary, DateHelper,
 } from '@zeedhi/core';
 import {
+  IFilterPropsComponent,
   ITekGrid,
   TekGrid, TekGridColumn, TekRestDatasource,
 } from '../../../../src';
@@ -1756,6 +1757,8 @@ describe('TekGrid', () => {
 
         return new Modal(modal);
       });
+      const dateHelperSpy = jest.spyOn(DateHelper, 'getLabel').mockImplementation((name: string) => name);
+
       instance.onCreated();
       const filterTooltip = instance.toolbarSlot[6];
       if (filterTooltip && filterTooltip.children && filterTooltip.children.length > 0) {
@@ -1763,29 +1766,11 @@ describe('TekGrid', () => {
         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 ');
+        expect(formElements[1].name).toBe('grid_filterClick7-filter-OR-NOT_EQUALS-date-0');
+        expect(formElements[2].name).toBe('grid_filterClick7-filter-OR-NOT_EQUALS-date-1');
       }
       spy.mockClear();
+      dateHelperSpy.mockClear();
     });
 
     it('should apply helper value', () => {
@@ -1797,11 +1782,11 @@ describe('TekGrid', () => {
         },
         columns: [
           {
-            name: 'date',
-            componentProps: { name: 'date_edit', component: 'ZdDate' },
+            name: 'date1',
+            componentProps: { name: 'date_edit1', component: 'ZdDate' },
             filterProps: {
-              name: 'date_edit',
-              label: 'date',
+              name: 'date_edit1',
+              label: 'date1',
               operation: 'NOT_EQUALS',
               relation: 'OR',
               helperOptions: [
@@ -1810,53 +1795,23 @@ describe('TekGrid', () => {
               ],
             },
           },
-        ],
-      });
-
-      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' },
+            name: 'date2',
+            componentProps: { name: 'date_edit2', component: 'ZdDate' },
             filterProps: [
               {
-                name: 'date_edit',
-                label: 'date',
+                name: 'date_edit21',
+                label: 'date21',
+                operation: 'NOT_EQUALS',
+                relation: 'OR',
+                helperOptions: [
+                  'TODAY',
+                  'TOMORROW',
+                ],
+              },
+              {
+                name: 'date_edit22',
+                label: 'date22',
                 helperOptions: [
                   'TODAY',
                   'TOMORROW',
@@ -1883,68 +1838,20 @@ describe('TekGrid', () => {
         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');
+        const dateComp = new Date(formElements[0]);
+        dateComp.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',
-              ],
-            },
-          },
-        ],
-      });
+        expect((instance.columns[0].filterProps as IFilterPropsComponent).helperValue).toBe('TODAY');
 
-      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;
-        }
+        const dateComp21 = new Date(formElements[1]);
+        dateComp21.helperValue = 'TODAY';
+        dateComp21.change(event, {} as HTMLElement);
+        expect((instance.columns[1].filterProps as IFilterPropsComponent[])[0].helperValue).toBe('TODAY');
 
-        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': null,
-          });
-          spyMetadata.mockClear();
-        }
+        const dateComp22 = new Date(formElements[2]);
+        dateComp22.helperValue = 'TODAY';
+        dateComp22.change(event, {} as HTMLElement);
+        expect((instance.columns[1].filterProps as IFilterPropsComponent[])[1].helperValue).toBe('TODAY');
       }
       spy.mockClear();
     });
@@ -2026,7 +1933,7 @@ describe('TekGrid', () => {
             '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');
+          expect(dateObject.hint).toBe('TODAY');
           spyMetadata.mockClear();
         }
       }

package/tests/unit/components/tek-user-info/TekUserInfoContoller.spec.ts

@@ -0,0 +1,234 @@
+import { TekUserInfo } from '../../../../src';
+import { TekUserInfoController } from '../../../../src/components/tek-user-info/TekUserInfoController';
+
+describe('TekUserInfoController', () => {
+  describe('name property', () => {
+    it('should get name property', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+        versionInfo: {
+          name: 'Zeedhi',
+          version: '1.0.0',
+          frontend: [{ name: 'package 1', version: '1.0.0' }],
+          backend: [{ name: 'package 2', version: '2.0.0' }],
+          modules: [{ name: 'package 3', version: '3.0.0' }],
+        },
+      });
+      const controller = new TekUserInfoController(component);
+
+      expect(controller.name).toBe('Zeedhi');
+    });
+
+    it('when prop is defined, should set the component value', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+        versionInfo: {
+          name: 'Zeedhi',
+          version: '1.0.0',
+          frontend: [{ name: 'package 1', version: '1.0.0' }],
+          backend: [{ name: 'package 2', version: '2.0.0' }],
+          modules: [{ name: 'package 3', version: '3.0.0' }],
+        },
+      });
+      const controller = new TekUserInfoController(component);
+
+      controller.name = 'new name';
+
+      expect(controller.name).toBe('new name');
+      expect(component.versionInfo?.name).toBe('new name');
+    });
+
+    it('when versionInfo is null, should get empty string', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+        versionInfo: null,
+      });
+      const controller = new TekUserInfoController(component);
+
+      expect(controller.name).toBe('');
+    });
+
+    it('when versionInfo is null, should not throw when setting', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+        versionInfo: null,
+      });
+      const controller = new TekUserInfoController(component);
+
+      expect(() => { controller.name = 'new name'; }).not.toThrow();
+    });
+  });
+
+  describe('version property', () => {
+    it('should get version property', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+        versionInfo: {
+          name: 'Zeedhi',
+          version: '1.0.0',
+          frontend: [{ name: 'package 1', version: '1.0.0' }],
+          backend: [{ name: 'package 2', version: '2.0.0' }],
+          modules: [{ name: 'package 3', version: '3.0.0' }],
+        },
+      });
+      const controller = new TekUserInfoController(component);
+
+      expect(controller.version).toBe('1.0.0');
+    });
+
+    it('when prop is defined, should set the component value', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+        versionInfo: {
+          name: 'Zeedhi',
+          version: '1.0.0',
+          frontend: [{ name: 'package 1', version: '1.0.0' }],
+          backend: [{ name: 'package 2', version: '2.0.0' }],
+          modules: [{ name: 'package 3', version: '3.0.0' }],
+        },
+      });
+      const controller = new TekUserInfoController(component);
+
+      controller.version = '2.0.0';
+
+      expect(controller.version).toBe('2.0.0');
+      expect(component.versionInfo?.version).toBe('2.0.0');
+    });
+
+    it('when versionInfo is null, should get empty string', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+        versionInfo: null,
+      });
+      const controller = new TekUserInfoController(component);
+
+      expect(controller.version).toBe('');
+    });
+
+    it('when versionInfo is null, should not throw when setting', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+        versionInfo: null,
+      });
+      const controller = new TekUserInfoController(component);
+
+      expect(() => { controller.version = '2.0.0'; }).not.toThrow();
+    });
+  });
+
+  describe('defaultEmail property', () => {
+    it('should get defaultEmail property', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+        defaultEmail: 'zeedhi@zd.com',
+      });
+      const controller = new TekUserInfoController(component);
+
+      expect(controller.defaultEmail).toBe('zeedhi@zd.com');
+      expect(controller.hasDefaultEmail).toBeTruthy();
+    });
+
+    it('when prop is defined, should set the component value', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+      });
+      const controller = new TekUserInfoController(component);
+
+      controller.defaultEmail = 'teste@email.com';
+
+      expect(controller.defaultEmail).toBe('teste@email.com');
+      expect(component.defaultEmail).toBe('teste@email.com');
+    });
+  });
+
+  describe('mainVersion property', () => {
+    it('should get mainVersion property', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+        versionInfo: {
+          name: 'Zeedhi',
+          version: '1.0.0',
+          frontend: [{ name: 'package 1', version: '1.0.0' }],
+          backend: [{ name: 'package 2', version: '2.0.0' }],
+          modules: [{ name: 'package 3', version: '3.0.0' }],
+        },
+      });
+      const controller = new TekUserInfoController(component);
+
+      expect(controller.mainVersion).toBe('Zeedhi - <b>1.0.0</b>');
+    });
+
+    it('when versionInfo is null, mainVersion should return empty string', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+        versionInfo: null,
+      });
+      const controller = new TekUserInfoController(component);
+
+      expect(controller.mainVersion).toBe('');
+    });
+  });
+
+  describe('item properties', () => {
+    it('should get the items', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+        versionInfo: {
+          name: 'Zeedhi',
+          version: '1.0.0',
+          frontend: [{ name: 'package 1', version: '1.0.0' }],
+          backend: [{ name: 'package 2', version: '2.0.0' }],
+          modules: [{ name: 'package 3', version: '3.0.0' }],
+        },
+      });
+      const controller = new TekUserInfoController(component);
+
+      expect(controller.frontendItems).toEqual(['package 1 - <b>1.0.0</b>']);
+      expect(controller.backendItems).toEqual(['package 2 - <b>2.0.0</b>']);
+      expect(controller.modulesItems).toEqual(['package 3 - <b>3.0.0</b>']);
+    });
+
+    it('when versionInfo is null, should get empty array', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+        versionInfo: null,
+      });
+      const controller = new TekUserInfoController(component);
+
+      expect(controller.frontendItems).toEqual([]);
+      expect(controller.backendItems).toEqual([]);
+      expect(controller.modulesItems).toEqual([]);
+    });
+  });
+
+  describe('aboutImage properties', () => {
+    it('should return true if aboutImage is defined, false otherwise', () => {
+      const component = new TekUserInfo({
+        name: 'user-info',
+        component: 'TekUserInfo',
+        aboutImage: 'path',
+      });
+      const controller = new TekUserInfoController(component);
+
+      expect(controller.hasAboutImage).toBeTruthy();
+
+      component.aboutImage = '';
+
+      expect(controller.hasAboutImage).toBeFalsy();
+    });
+  });
+});

package/tests/unit/components/tek-user-info/tek-user-info-list.spec.ts

@@ -0,0 +1,85 @@
+import { ListItem } from '@zeedhi/common';
+import { Metadata } from '@zeedhi/core';
+import { TekUserInfo, TekUserInfoList, ITekUserInfo } from '../../../../src';
+import { mockCreated } from '../../../__helpers__/mock-created-helper';
+
+function instantiateAndCreate(props: ITekUserInfo) {
+  const instance = new TekUserInfo(props);
+  mockCreated(instance);
+  instance.onCreated();
+  return instance;
+}
+
+describe('TekUserInfoList', () => {
+  afterEach(() => jest.clearAllMocks());
+
+  describe('constructor()', () => {
+    it('when parent is not defined, should throw', () => {
+      expect(() => (new TekUserInfoList({ name: 'TekUserInfo', component: 'TekUserInfoList' }))).toThrow();
+    });
+
+    it('when parentName is defined, should call Metadata.getInstance', () => {
+      const parent = instantiateAndCreate({
+        name: 'parent',
+        component: 'TekUserInfo',
+      });
+      jest.spyOn(Metadata, 'getInstance').mockImplementation(() => (parent));
+
+      const spy = jest.spyOn(Metadata, 'getInstance');
+      const instance = new TekUserInfoList({
+        name: 'TekUserInfo',
+        component: 'TekUserInfoList',
+        parentName: 'parent',
+      });
+
+      expect(instance).toBeDefined();
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('About Click', () => {
+    it('when About item is clicked, should call parent onAboutClick method', () => {
+      const parent = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        defaultEmail: 'zeedhi@zd.com',
+      });
+      jest.spyOn(Metadata, 'getInstance').mockImplementation(() => (parent));
+
+      const spy = jest.spyOn(parent, 'onAboutClick');
+      const instance = new TekUserInfoList({
+        name: 'TekUserInfo',
+        component: 'TekUserInfoList',
+        parentName: 'parent',
+      });
+
+      const item = new ListItem(instance.items[1]);
+      item.click();
+
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe('Report Click', () => {
+    it('when Report item is clicked, should call parent onReportClick method', () => {
+      const parent = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        defaultEmail: 'zeedhi@zd.com',
+      });
+      jest.spyOn(Metadata, 'getInstance').mockImplementation(() => (parent));
+
+      const spy = jest.spyOn(parent, 'onReportClick');
+      const instance = new TekUserInfoList({
+        name: 'TekUserInfo',
+        component: 'TekUserInfoList',
+        parentName: 'parent',
+      });
+
+      const item = new ListItem(instance.items[2]);
+      item.click();
+
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+});