@zeedhi/teknisa-components-common 1.107.2 → 1.108.0

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

@@ -1,430 +1,430 @@
-import {
-  Button, ListItem, Modal, ModalService,
-} from '@zeedhi/common';
-import { Metadata, Http } from '@zeedhi/core';
-import { UserInfo } from '@zeedhi/zd-user-info-common';
-import { ITekUserInfo, TekUserInfo, TekUserInfoList } from '../../../../src';
-import { mockCreated } from '../../../__helpers__/mock-created-helper';
-
-function instantiateAndCreate(props: ITekUserInfo) {
-  const instance = new TekUserInfo(props);
-  mockCreated(instance, UserInfo.prototype);
-  instance.onCreated();
-  return instance;
-}
-
-describe('TekUserInfo', () => {
-  afterEach(() => jest.clearAllMocks());
-
-  describe('constructor()', () => {
-    it('when called, should assign the default values', () => {
-      const instance = new TekUserInfo({
-        name: 'TekUserInfo',
-        component: 'TekUserInfo',
-      });
-      expect(instance.bottomSlot).toMatchObject([]);
-      expect(instance.aboutImage).toBe('');
-      expect(instance.defaultEmail).toBe('');
-      expect(instance.versionInfo).toBeNull();
-      expect(instance.versionUrl).toBe('');
-    });
-
-    it('when called with props, should assign the defined values', () => {
-      const instance = instantiateAndCreate({
-        name: 'TekUserInfo',
-        component: 'TekUserInfo',
-        bottomSlot: [
-          { name: 'test', component: 'ZdText' },
-        ],
-        aboutImage: 'path',
-        defaultEmail: 'zeedhi@zd.com',
-        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' }],
-        },
-        versionUrl: '/version',
-      });
-
-      expect(instance.bottomSlot).toEqual([
-        { name: 'test', component: 'ZdText' },
-      ]);
-      expect(instance.aboutImage).toBe('path');
-      expect(instance.defaultEmail).toBe('zeedhi@zd.com');
-      expect(instance.versionInfo).toEqual({
-        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' }],
-      });
-      expect(instance.versionUrl).toBe('/version');
-    });
-  });
-
-  describe('About Modal', () => {
-    it('when about item is clicked, should open about modal', () => {
-      const instance = instantiateAndCreate({
-        name: 'TekUserInfo',
-        component: 'TekUserInfo',
-        aboutImage: 'path',
-        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' }],
-        },
-      });
-      instance.onAboutClick();
-
-      expect(instance.aboutModal).toMatchObject({
-        children: [
-          {
-            component: 'ZdHeader',
-            rightSlot: [{ component: 'ZdModalCloseButton' }],
-          },
-          {
-            component: 'ZdTag',
-            children: [{ component: 'ZdImage', src: 'path' }],
-          },
-          {
-            component: 'ZdTabs',
-            tabs: [
-              {
-                tabTitle: 'Frontend',
-                children: [
-                  { component: 'ZdText', text: '{{TekUserInfoController_1.mainVersion}}' },
-                  { component: 'ZdText', text: '{{TekUserInfoController_1.frontendItems}}' },
-                ],
-              },
-              {
-                tabTitle: 'Backend',
-                children: [
-                  { component: 'ZdText', text: '{{TekUserInfoController_1.mainVersion}}' },
-                  { component: 'ZdText', text: '{{TekUserInfoController_1.backendItems}}' },
-                ],
-              },
-              {
-                tabTitle: 'Modules',
-                children: [
-                  { component: 'ZdText', text: '{{TekUserInfoController_1.mainVersion}}' },
-                  { component: 'ZdText', text: '{{TekUserInfoController_1.modulesItems}}' },
-                ],
-              },
-            ],
-          },
-        ],
-      });
-    });
-
-    it('when about item is clicked twice, should create the modal only once', () => {
-      const spy = jest.spyOn(ModalService, 'create');
-      const instance = instantiateAndCreate({
-        name: 'TekUserInfo',
-        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' }],
-        },
-      });
-      instance.onAboutClick();
-      instance.onAboutClick();
-
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-
-    it('when versionInfo is undefined, should create empty tabs inside the modal', () => {
-      const instance = instantiateAndCreate({
-        name: 'TekUserInfo',
-        component: 'TekUserInfo',
-      });
-      instance.onAboutClick();
-
-      expect(instance.aboutModal).toMatchObject({
-        children: [
-          {
-            component: 'ZdHeader',
-            rightSlot: [{ component: 'ZdModalCloseButton' }],
-          },
-          {
-            component: 'ZdTag',
-            children: [{ component: 'ZdImage', src: '' }],
-          },
-          {
-            component: 'ZdTabs',
-            tabs: [
-              { tabTitle: 'Frontend', children: [] },
-              { tabTitle: 'Backend', children: [] },
-              { tabTitle: 'Modules', children: [] },
-            ],
-          },
-        ],
-      });
-    });
-  });
-
-  describe('Report Modal', () => {
-    it('when onReportClick is called, should open report modal', () => {
-      const instance = instantiateAndCreate({
-        name: 'TekUserInfo',
-        component: 'TekUserInfo',
-        defaultEmail: 'zeedhi@zd.com',
-      });
-      instance.onReportClick();
-
-      expect(instance.reportModal).toMatchObject({
-        children: [
-          {
-            component: 'ZdHeader',
-            leftSlot: [{ component: 'ZdText', text: 'TEKUSERINFO_REPORT_ERROR' }],
-            rightSlot: [{ component: 'ZdModalCloseButton' }],
-          },
-          {
-            component: 'ZdForm',
-            children: [
-              {
-                name: 'report_email',
-                component: 'ZdTextInput',
-                label: 'E-mail',
-                value: 'zeedhi@zd.com',
-              },
-              {
-                name: 'report_cc',
-                component: 'ZdTextInput',
-                label: 'CC',
-                placeholder: 'TEKUSERINFO_EMAIL_PLACEHOLDER',
-              },
-              {
-                name: 'report_type',
-                component: 'ZdSelect',
-                label: 'TEKUSERINFO_TYPE',
-                datasource: {
-                  uniqueKey: 'value',
-                  translate: true,
-                  data: [
-                    { value: '0', text: 'TEKUSERINFO_ERROR' },
-                    { value: '1', text: 'TEKUSERINFO_IMPROVEMENT' },
-                  ],
-                },
-              },
-              {
-                name: 'report_description',
-                component: 'ZdTextarea',
-                label: 'TEKUSERINFO_DESCRIPTION',
-              },
-            ],
-          },
-          {
-            component: 'ZdFooter',
-            rightSlot: [
-              { component: 'ZdButton', label: 'TEKUSERINFO_CANCEL' },
-              { component: 'ZdButton', label: 'TEKUSERINFO_SEND' },
-            ],
-          },
-        ],
-      });
-    });
-
-    it('when onReportClick is called twice, should create the modal only once', () => {
-      const spy = jest.spyOn(ModalService, 'create');
-      const instance = instantiateAndCreate({
-        name: 'TekUserInfo',
-        component: 'TekUserInfo',
-        defaultEmail: 'zeedhi@zd.com',
-      });
-
-      instance.onReportClick();
-      instance.onReportClick();
-
-      expect(spy).toHaveBeenCalledTimes(1);
-
-      spy.mockClear();
-    });
-
-    it('when send button is clicked, should call onSendReport event', () => {
-      const onSendReport = jest.fn();
-      const spy = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => ({
-        validate: () => true,
-      }));
-      const instance = instantiateAndCreate({
-        name: 'TekUserInfo',
-        component: 'TekUserInfo',
-        events: {
-          onSendReport,
-        },
-      });
-      instance.onReportClick();
-      const button = instance.reportModal?.children[2].rightSlot[1];
-      const buttonInstance = new Button(button);
-
-      buttonInstance.click();
-
-      expect(onSendReport).toHaveBeenCalled();
-      spy.mockClear();
-    });
-
-    it('when send button is clicked and form is invalid, should not call onSendReport event', () => {
-      const onSendReport = jest.fn();
-      const spy = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => ({
-        validate: () => false,
-      }));
-      const instance = instantiateAndCreate({
-        name: 'TekUserInfo',
-        component: 'TekUserInfo',
-        events: {
-          onSendReport,
-        },
-      });
-      instance.onReportClick();
-      const button = instance.reportModal?.children[2].rightSlot[1];
-      const buttonInstance = new Button(button);
-
-      buttonInstance.click();
-
-      expect(onSendReport).not.toHaveBeenCalled();
-      spy.mockClear();
-    });
-
-    it('when reportModal is undefined, should not call onSendReport event', () => {
-      const onSendReport = jest.fn();
-      const spy = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => ({
-        validate: () => false,
-      }));
-      const instance = instantiateAndCreate({
-        name: 'TekUserInfo',
-        component: 'TekUserInfo',
-        events: {
-          onSendReport,
-        },
-      });
-      instance.onReportClick();
-      const button = instance.reportModal?.children[2].rightSlot[1];
-      const buttonInstance = new Button(button);
-
-      instance.reportModal = undefined;
-      buttonInstance.click();
-
-      expect(onSendReport).not.toHaveBeenCalled();
-      spy.mockClear();
-    });
-
-    it('when cancel button is clicked, should close the modal', () => {
-      const instance = instantiateAndCreate({
-        name: 'TekUserInfo',
-        component: 'TekUserInfo',
-      });
-      instance.onReportClick();
-      const spy = jest.spyOn(instance.reportModal as Modal, 'hide');
-      const button = instance.reportModal?.children[2].rightSlot[0];
-      const buttonInstance = new Button(button);
-
-      buttonInstance.click();
-
-      expect(spy).toHaveBeenCalled();
-      spy.mockClear();
-    });
-
-    it('when cancel button is clicked, should not throw if reportModal is undefined', () => {
-      const instance = instantiateAndCreate({
-        name: 'TekUserInfo',
-        component: 'TekUserInfo',
-      });
-      instance.onReportClick();
-      const button = instance.reportModal?.children[2].rightSlot[0];
-      const buttonInstance = new Button(button);
-
-      instance.reportModal = undefined;
-
-      expect(() => buttonInstance.click()).not.toThrow();
-    });
-  });
-
-  describe('onMounted', () => {
-    it('when onMounted is called and versionUrl is defined, should make a GET request to versionUrl', async () => {
-      const spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
-        data: {
-          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 instance = new TekUserInfo({
-        name: 'TekUserInfo',
-        component: 'TekUserInfo',
-        versionUrl: '/version',
-      });
-
-      await instance.onMounted({});
-
-      expect(instance.versionInfo).toEqual({
-        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' }],
-      });
-      spy.mockClear();
-    });
-  });
-
-  describe('onCreated', () => {
-    it('when onCreated is called and bottomSlot is empty, should assign default value to the latter', () => {
-      const instance = instantiateAndCreate({
-        name: 'TekUserInfo',
-        component: 'TekUserInfo',
-      });
-
-      expect(instance.bottomSlot).toMatchObject([
-        {
-          name: 'TekUserInfo_bottom_list',
-          component: 'TekUserInfoList',
-          parentName: 'TekUserInfo',
-        },
-      ]);
-    });
-  });
-
-  describe('visibleItems', () => {
-    it('when visibleItems is changed, should hide or show an item', () => {
-      const instance = instantiateAndCreate({
-        name: 'UserInfo',
-        component: 'UserInfo',
-        visibleItems: {
-          reportError: false,
-          versionInfo: false,
-          about: false,
-        },
-      });
-      const spy = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => (instance));
-
-      const list = new TekUserInfoList({ parentName: 'UserInfo', ...instance.bottomSlot[0] });
-      const versionInfo = new ListItem({ ...list.items[0] });
-      const about = new ListItem({ ...list.items[1] });
-      const reportError = new ListItem({ ...list.items[2] });
-
-      expect(versionInfo.isVisible).toBeFalsy();
-      expect(about.isVisible).toBeFalsy();
-      expect(reportError.isVisible).toBeFalsy();
-
-      instance.visibleItems.versionInfo = true;
-      instance.visibleItems.about = true;
-      instance.visibleItems.reportError = true;
-
-      expect(versionInfo.isVisible).toBeTruthy();
-      expect(about.isVisible).toBeTruthy();
-      expect(reportError.isVisible).toBeTruthy();
-
-      spy.mockReset();
-    });
-  });
-});
+import {
+  Button, ListItem, Modal, ModalService,
+} from '@zeedhi/common';
+import { Metadata, Http } from '@zeedhi/core';
+import { UserInfo } from '@zeedhi/zd-user-info-common';
+import { ITekUserInfo, TekUserInfo, TekUserInfoList } from '../../../../src';
+import { mockCreated } from '../../../__helpers__/mock-created-helper';
+
+function instantiateAndCreate(props: ITekUserInfo) {
+  const instance = new TekUserInfo(props);
+  mockCreated(instance, UserInfo.prototype);
+  instance.onCreated();
+  return instance;
+}
+
+describe('TekUserInfo', () => {
+  afterEach(() => jest.clearAllMocks());
+
+  describe('constructor()', () => {
+    it('when called, should assign the default values', () => {
+      const instance = new TekUserInfo({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+      });
+      expect(instance.bottomSlot).toMatchObject([]);
+      expect(instance.aboutImage).toBe('');
+      expect(instance.defaultEmail).toBe('');
+      expect(instance.versionInfo).toBeNull();
+      expect(instance.versionUrl).toBe('');
+    });
+
+    it('when called with props, should assign the defined values', () => {
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        bottomSlot: [
+          { name: 'test', component: 'ZdText' },
+        ],
+        aboutImage: 'path',
+        defaultEmail: 'zeedhi@zd.com',
+        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' }],
+        },
+        versionUrl: '/version',
+      });
+
+      expect(instance.bottomSlot).toEqual([
+        { name: 'test', component: 'ZdText' },
+      ]);
+      expect(instance.aboutImage).toBe('path');
+      expect(instance.defaultEmail).toBe('zeedhi@zd.com');
+      expect(instance.versionInfo).toEqual({
+        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' }],
+      });
+      expect(instance.versionUrl).toBe('/version');
+    });
+  });
+
+  describe('About Modal', () => {
+    it('when about item is clicked, should open about modal', () => {
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        aboutImage: 'path',
+        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' }],
+        },
+      });
+      instance.onAboutClick();
+
+      expect(instance.aboutModal).toMatchObject({
+        children: [
+          {
+            component: 'ZdHeader',
+            rightSlot: [{ component: 'ZdModalCloseButton' }],
+          },
+          {
+            component: 'ZdTag',
+            children: [{ component: 'ZdImage', src: 'path' }],
+          },
+          {
+            component: 'ZdTabs',
+            tabs: [
+              {
+                tabTitle: 'Frontend',
+                children: [
+                  { component: 'ZdText', text: '{{TekUserInfoController_1.mainVersion}}' },
+                  { component: 'ZdText', text: '{{TekUserInfoController_1.frontendItems}}' },
+                ],
+              },
+              {
+                tabTitle: 'Backend',
+                children: [
+                  { component: 'ZdText', text: '{{TekUserInfoController_1.mainVersion}}' },
+                  { component: 'ZdText', text: '{{TekUserInfoController_1.backendItems}}' },
+                ],
+              },
+              {
+                tabTitle: 'Modules',
+                children: [
+                  { component: 'ZdText', text: '{{TekUserInfoController_1.mainVersion}}' },
+                  { component: 'ZdText', text: '{{TekUserInfoController_1.modulesItems}}' },
+                ],
+              },
+            ],
+          },
+        ],
+      });
+    });
+
+    it('when about item is clicked twice, should create the modal only once', () => {
+      const spy = jest.spyOn(ModalService, 'create');
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        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' }],
+        },
+      });
+      instance.onAboutClick();
+      instance.onAboutClick();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('when versionInfo is undefined, should create empty tabs inside the modal', () => {
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+      });
+      instance.onAboutClick();
+
+      expect(instance.aboutModal).toMatchObject({
+        children: [
+          {
+            component: 'ZdHeader',
+            rightSlot: [{ component: 'ZdModalCloseButton' }],
+          },
+          {
+            component: 'ZdTag',
+            children: [{ component: 'ZdImage', src: '' }],
+          },
+          {
+            component: 'ZdTabs',
+            tabs: [
+              { tabTitle: 'Frontend', children: [] },
+              { tabTitle: 'Backend', children: [] },
+              { tabTitle: 'Modules', children: [] },
+            ],
+          },
+        ],
+      });
+    });
+  });
+
+  describe('Report Modal', () => {
+    it('when onReportClick is called, should open report modal', () => {
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        defaultEmail: 'zeedhi@zd.com',
+      });
+      instance.onReportClick();
+
+      expect(instance.reportModal).toMatchObject({
+        children: [
+          {
+            component: 'ZdHeader',
+            leftSlot: [{ component: 'ZdText', text: 'TEKUSERINFO_REPORT_ERROR' }],
+            rightSlot: [{ component: 'ZdModalCloseButton' }],
+          },
+          {
+            component: 'ZdForm',
+            children: [
+              {
+                name: 'report_email',
+                component: 'ZdTextInput',
+                label: 'E-mail',
+                value: 'zeedhi@zd.com',
+              },
+              {
+                name: 'report_cc',
+                component: 'ZdTextInput',
+                label: 'CC',
+                placeholder: 'TEKUSERINFO_EMAIL_PLACEHOLDER',
+              },
+              {
+                name: 'report_type',
+                component: 'ZdSelect',
+                label: 'TEKUSERINFO_TYPE',
+                datasource: {
+                  uniqueKey: 'value',
+                  translate: true,
+                  data: [
+                    { value: '0', text: 'TEKUSERINFO_ERROR' },
+                    { value: '1', text: 'TEKUSERINFO_IMPROVEMENT' },
+                  ],
+                },
+              },
+              {
+                name: 'report_description',
+                component: 'ZdTextarea',
+                label: 'TEKUSERINFO_DESCRIPTION',
+              },
+            ],
+          },
+          {
+            component: 'ZdFooter',
+            rightSlot: [
+              { component: 'ZdButton', label: 'TEKUSERINFO_CANCEL' },
+              { component: 'ZdButton', label: 'TEKUSERINFO_SEND' },
+            ],
+          },
+        ],
+      });
+    });
+
+    it('when onReportClick is called twice, should create the modal only once', () => {
+      const spy = jest.spyOn(ModalService, 'create');
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        defaultEmail: 'zeedhi@zd.com',
+      });
+
+      instance.onReportClick();
+      instance.onReportClick();
+
+      expect(spy).toHaveBeenCalledTimes(1);
+
+      spy.mockClear();
+    });
+
+    it('when send button is clicked, should call onSendReport event', () => {
+      const onSendReport = jest.fn();
+      const spy = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => ({
+        validate: () => true,
+      }));
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        events: {
+          onSendReport,
+        },
+      });
+      instance.onReportClick();
+      const button = instance.reportModal?.children[2].rightSlot[1];
+      const buttonInstance = new Button(button);
+
+      buttonInstance.click();
+
+      expect(onSendReport).toHaveBeenCalled();
+      spy.mockClear();
+    });
+
+    it('when send button is clicked and form is invalid, should not call onSendReport event', () => {
+      const onSendReport = jest.fn();
+      const spy = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => ({
+        validate: () => false,
+      }));
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        events: {
+          onSendReport,
+        },
+      });
+      instance.onReportClick();
+      const button = instance.reportModal?.children[2].rightSlot[1];
+      const buttonInstance = new Button(button);
+
+      buttonInstance.click();
+
+      expect(onSendReport).not.toHaveBeenCalled();
+      spy.mockClear();
+    });
+
+    it('when reportModal is undefined, should not call onSendReport event', () => {
+      const onSendReport = jest.fn();
+      const spy = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => ({
+        validate: () => false,
+      }));
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        events: {
+          onSendReport,
+        },
+      });
+      instance.onReportClick();
+      const button = instance.reportModal?.children[2].rightSlot[1];
+      const buttonInstance = new Button(button);
+
+      instance.reportModal = undefined;
+      buttonInstance.click();
+
+      expect(onSendReport).not.toHaveBeenCalled();
+      spy.mockClear();
+    });
+
+    it('when cancel button is clicked, should close the modal', () => {
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+      });
+      instance.onReportClick();
+      const spy = jest.spyOn(instance.reportModal as Modal, 'hide');
+      const button = instance.reportModal?.children[2].rightSlot[0];
+      const buttonInstance = new Button(button);
+
+      buttonInstance.click();
+
+      expect(spy).toHaveBeenCalled();
+      spy.mockClear();
+    });
+
+    it('when cancel button is clicked, should not throw if reportModal is undefined', () => {
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+      });
+      instance.onReportClick();
+      const button = instance.reportModal?.children[2].rightSlot[0];
+      const buttonInstance = new Button(button);
+
+      instance.reportModal = undefined;
+
+      expect(() => buttonInstance.click()).not.toThrow();
+    });
+  });
+
+  describe('onMounted', () => {
+    it('when onMounted is called and versionUrl is defined, should make a GET request to versionUrl', async () => {
+      const spy = jest.spyOn(Http, 'get').mockImplementation(() => Promise.resolve({
+        data: {
+          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 instance = new TekUserInfo({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+        versionUrl: '/version',
+      });
+
+      await instance.onMounted({});
+
+      expect(instance.versionInfo).toEqual({
+        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' }],
+      });
+      spy.mockClear();
+    });
+  });
+
+  describe('onCreated', () => {
+    it('when onCreated is called and bottomSlot is empty, should assign default value to the latter', () => {
+      const instance = instantiateAndCreate({
+        name: 'TekUserInfo',
+        component: 'TekUserInfo',
+      });
+
+      expect(instance.bottomSlot).toMatchObject([
+        {
+          name: 'TekUserInfo_bottom_list',
+          component: 'TekUserInfoList',
+          parentName: 'TekUserInfo',
+        },
+      ]);
+    });
+  });
+
+  describe('visibleItems', () => {
+    it('when visibleItems is changed, should hide or show an item', () => {
+      const instance = instantiateAndCreate({
+        name: 'UserInfo',
+        component: 'UserInfo',
+        visibleItems: {
+          reportError: false,
+          versionInfo: false,
+          about: false,
+        },
+      });
+      const spy = jest.spyOn(Metadata, 'getInstance').mockImplementation(() => (instance));
+
+      const list = new TekUserInfoList({ parentName: 'UserInfo', ...instance.bottomSlot[0] });
+      const versionInfo = new ListItem({ ...list.items[0] });
+      const about = new ListItem({ ...list.items[1] });
+      const reportError = new ListItem({ ...list.items[2] });
+
+      expect(versionInfo.isVisible).toBeFalsy();
+      expect(about.isVisible).toBeFalsy();
+      expect(reportError.isVisible).toBeFalsy();
+
+      instance.visibleItems.versionInfo = true;
+      instance.visibleItems.about = true;
+      instance.visibleItems.reportError = true;
+
+      expect(versionInfo.isVisible).toBeTruthy();
+      expect(about.isVisible).toBeTruthy();
+      expect(reportError.isVisible).toBeTruthy();
+
+      spy.mockReset();
+    });
+  });
+});