ProfilePicture.vue, ProfilePic.vue, profile-pic.spec.ts- add onclick …

…event to prevent default behaviour of link and execute a function
orangehrm · Nov 1, 2024 · b2384fe · b2384fe
1 parent 232237b
commit b2384fe
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 34 deletions.
diff --git a/components/src/core/components/CardTable/Cell/ProfilePicture.vue b/components/src/core/components/CardTable/Cell/ProfilePicture.vue
@@ -12,8 +12,8 @@
     :link="profilePicture.link"
     :imageSrc="profilePicture.src"
     :link-mode="profilePicture.target"
-    :header="profilePicture.header"
-    :rowItem="profilePicture.rowItem"
+    :isCustomFunctionExist="isCustomFunctionExist"
+    @linkClick="handleLinkClick"
     v-bind="$attrs"
   />
 </template>
@@ -92,20 +92,29 @@ export default defineComponent({
             ? props.rowItem[props.link]
             : null,
         target: props.target ?? TARGET_SELF,
-        header: props.header,
-        rowItem: props.rowItem,
       };
     });
 
     const isLoading = computed(() => props.loading || imgLoading.value);
 
+    const handleLinkClick = (event: MouseEvent | KeyboardEvent) => {
+      props.header?.cellConfig.onClick(props.rowItem, event);
+    };
+
+    const isCustomFunctionExist = computed(() => {
+      const cellConfig = props.header?.cellConfig;
+      return cellConfig && typeof cellConfig?.onClick === 'function';
+    });
+
     watchEffect(async () => {
       imgSrc.value = await loadImage(props.item as string);
     });
 
     return {
       isLoading,
       profilePicture,
+      handleLinkClick,
+      isCustomFunctionExist
     };
   },
 });

diff --git a/components/src/core/components/ProfilePic/ProfilePic.vue b/components/src/core/components/ProfilePic/ProfilePic.vue
@@ -29,6 +29,11 @@ import {
 import {defaultUser} from './images';
 export default defineComponent({
   name: 'oxd-profile-pic',
+
+  emits: [
+    'linkClick',
+  ],
+
   props: {
     size: {
       type: String,
@@ -55,21 +60,16 @@ export default defineComponent({
         return TARGETS.indexOf(value) !== -1;
       },
     },
-    header: {
-      type: Object,
-      default: () => ({}),
-    },
-    rowItem: {
-      type: Object,
-      default: () => ({}),
+    isCustomFunctionExist: {
+      type: Boolean,
+      default: false,
     },
   },
   methods: {
     handleLinkClick(event: MouseEvent | KeyboardEvent) {
-      const cellConfig = this.header?.cellConfig;
-      if (cellConfig && typeof cellConfig?.onClick === 'function') {
+      if(this.isCustomFunctionExist) {
         event.preventDefault();
-        this.header.cellConfig.onClick(this.rowItem, event);
+        this.$emit('linkClick', event);
       }
     },
   },

diff --git a/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts b/components/src/core/components/ProfilePic/__tests__/profile-pic.spec.ts
@@ -24,44 +24,32 @@ describe('ProfilePic.vue', () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 
-  it('should trigger handleLinkClick on link click', async () => {
-    const mockOnClick = jest.fn();
-    const rowItem = {
-      id: 1,
-      name: 'John Doe',
-    };
-
+  it('should emit linkClick with event payload on link click when isCustomFunctionExist is true', async () => {
     const wrapper = mount(ProfilePic, {
       props: {
         link: 'https://orangehrm.com',
-        rowItem: rowItem,
-        header: {
-          cellConfig: {
-            onClick: mockOnClick,
-          },
-        },
+        isCustomFunctionExist: true,
       },
     });
 
     const link = wrapper.find('a');
     await link.trigger('click');
 
-    expect(mockOnClick).toHaveBeenCalledWith(rowItem, expect.any(MouseEvent));
+    expect(wrapper.emitted('linkClick')).toBeTruthy();
   });
 
-  it('should not prevent default behavior if no onClick handler is present', async () => {
+  it('should not emit linkClick when isCustomFunctionExist is false', async () => {
     const wrapper = mount(ProfilePic, {
       props: {
         link: 'https://orangehrm.com',
+        isCustomFunctionExist: false,
       },
     });
 
     const link = wrapper.find('a');
-    const event = { preventDefault: jest.fn() };
-
-    await link.trigger('click', event);
+    await link.trigger('click');
 
-    expect(event.preventDefault).not.toHaveBeenCalled();
+    expect(wrapper.emitted('linkClick')).toBeFalsy();
   });
 
 });
diff --git a/storybook/stories/core/components/ListTable/ListSkeleton.story.vue b/storybook/stories/core/components/ListTable/ListSkeleton.story.vue
@@ -157,7 +157,6 @@ export default {
       this.LinkPhillResult = 'Link with Pill with onClick function executed: ' + row.col2;
     },
     onClickProfilePic(row, event) {
-      console.log('Profile Pic with onClick function executed: ', row.col2);
       this.profilePicResult = 'Profile Pic with onClick function executed: ' + row.col2;
     },
   },