fix some issues related to user avatar

Real-Dev-Squad · Dec 17, 2024 · 9a97533 · 9a97533
1 parent 2072bd6
commit 9a97533
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 97 deletions.
diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx
@@ -6,7 +6,7 @@ import { renderWithRouter } from '@/test_utils/createMockRouter';
 import { mockGetTaskProgress } from '../../../../../__mocks__/db/progresses';
 import LatestProgressUpdateCard from '@/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard';
 import { readMoreFormatter } from '@/utils/common';
-import { DEFAULT_AVATAR, USER_MANAGEMENT_URL } from '@/constants/url';
+import { DEFAULT_AVATAR } from '@/constants/url';
 import { useRouter } from 'next/router';
 jest.mock('next/router', () => ({
     useRouter: jest.fn(),
@@ -29,10 +29,10 @@ describe('LatestProgressUpdateCard Component', () => {
                 <LatestProgressUpdateCard data={mockDataWithNoUserData} />
             </Provider>
         );
-        const profilePicture = screen.getByTestId(
-            'latest-progress-update-card-profile-picture'
-        );
-        expect(profilePicture).toHaveAttribute('src', DEFAULT_AVATAR);
+        const userAvatarImage = screen.getByAltText('Avatar');
+        expect(userAvatarImage).toBeInTheDocument();
+        const imageSrc = userAvatarImage.getAttribute('src');
+        expect(imageSrc).toContain(DEFAULT_AVATAR);
     });
 
     it('should render the component with the passed data', () => {

diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx
@@ -7,6 +7,7 @@ import { mockGetTaskProgress } from '../../../../../__mocks__/db/progresses';
 import ProgressUpdateCard from '@/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard';
 import { DEFAULT_AVATAR } from '@/constants/url';
 import { useRouter } from 'next/router';
+
 jest.mock('next/router', () => ({
     useRouter: jest.fn(),
 }));
@@ -35,10 +36,10 @@ describe('ProgressUpdateCard Component', () => {
                 <ProgressUpdateCard data={mockDataWithNoUserData} />
             </Provider>
         );
-        const profilePicture = screen.getByTestId(
-            'progress-update-card-profile-picture'
-        );
-        expect(profilePicture).toHaveAttribute('src', DEFAULT_AVATAR);
+        const userAvatarImage = screen.getByAltText('Avatar');
+        expect(userAvatarImage).toBeInTheDocument();
+        const imageSrc = userAvatarImage.getAttribute('src');
+        expect(imageSrc).toContain(DEFAULT_AVATAR);
     });
 
     it('should toggle the expanded state when the card is clicked', () => {
@@ -52,14 +53,9 @@ describe('ProgressUpdateCard Component', () => {
             'progress-update-card-container'
         );
 
-        // Initial state
         expect(progressUpdateCardContainer).not.toHaveClass('expand');
-
-        // Click to expand
         fireEvent.click(progressUpdateCardContainer);
         expect(progressUpdateCardContainer).toHaveClass('expand');
-
-        // Click to collapse
         fireEvent.click(progressUpdateCardContainer);
         expect(progressUpdateCardContainer).not.toHaveClass('expand');
     });

diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx
@@ -143,7 +143,9 @@ describe('ProgressUpdateCardPresentation Component', () => {
             </Provider>
         );
         const angleIcon = screen.getByTestId('progress-update-card-angle-icon');
-        expect(angleIcon).toHaveStyle('transform: rotate(90deg)');
+        expect(angleIcon).toHaveClass(
+            'progress-update-card__angle-icon--expanded'
+        );
     });
     it('should have respective classes on date container and date text', () => {
         (useRouter as jest.Mock).mockReturnValue({
@@ -174,7 +176,9 @@ describe('ProgressUpdateCardPresentation Component', () => {
             </Provider>
         );
         const angleIcon = screen.getByTestId('progress-update-card-angle-icon');
-        expect(angleIcon).toHaveStyle('transform: none');
+        expect(angleIcon).not.toHaveClass(
+            'progress-update-card__angle-icon--expanded'
+        );
     });
 
     it('should prevent event propagation when clicking on the date container', () => {
@@ -245,7 +249,7 @@ describe('ProgressUpdateCardPresentation Component', () => {
         const date = screen.getByTestId('progress-update-card-date');
         expect(date).toHaveTextContent(dateInAgoFormat);
     });
-    it('should render the name and profile picture of the updater', () => {
+    it('should render user Image', () => {
         (useRouter as jest.Mock).mockReturnValue({
             query: { dev: 'true' },
         });
@@ -257,17 +261,10 @@ describe('ProgressUpdateCardPresentation Component', () => {
                 <ProgressUpdateCardPresentation {...props} />
             </Provider>
         );
-
-        const userProfileImageUrlElement = screen.getByTestId(
-            'progress-update-card-profile-picture'
-        );
-
-        expect(userProfileImageUrlElement).toBeInTheDocument();
-        expect(userProfileImageUrlElement).toHaveAttribute(
-            'src',
-            userProfileImageUrl
-        );
-        expect(userProfileImageUrlElement).toHaveAttribute('alt', 'Avatar');
+        const userAvatarImage = screen.getByAltText('Avatar');
+        expect(userAvatarImage).toBeInTheDocument();
+        const imageSrc = userAvatarImage.getAttribute('src');
+        expect(imageSrc).toContain(userProfileImageUrl);
     });
 
     it('should have respective classes when element is expanded', () => {

diff --git a/src/components/common/UserAvatar/UserAvatar.tsx b/src/components/common/UserAvatar/UserAvatar.tsx
@@ -0,0 +1,17 @@
+import styles from './userAvatar.module.scss';
+
+type UserAvatarProps = {
+    userProfileImageUrl: string;
+};
+
+const UserAvatar = ({ userProfileImageUrl }: UserAvatarProps) => {
+    return (
+        <img
+            src={userProfileImageUrl}
+            alt="Avatar"
+            className={styles['user-avatar']}
+        />
+    );
+};
+
+export default UserAvatar;
diff --git a/src/components/common/UserAvatar/userAvatar.module.scss b/src/components/common/UserAvatar/userAvatar.module.scss
@@ -0,0 +1,11 @@
+@import '../../../styles/variables';
+.user-avatar {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    object-fit: cover;
+    @media (width<=425px) {
+        width: 1.8rem;
+        height: 1.8rem;
+    }
+}
diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx
@@ -25,8 +25,15 @@ export default function LatestProgressUpdateCard({
     const fullDate = momentDate.format('dddd, MMMM DD, YYYY, hh:mm A [GMT] Z');
     const tooltipText = `Updated at ${fullDate}`;
     const charactersToShow = 70;
-    const username = data.userData?.username ?? '';
-    const userProfileImageUrl = data.userData?.picture?.url ?? DEFAULT_AVATAR;
+    let username = '';
+    let userProfileImageUrl = DEFAULT_AVATAR;
+
+    if (data.userData) {
+        username = data.userData.username ?? '';
+        if (data.userData.picture) {
+            userProfileImageUrl = data.userData.picture.url ?? DEFAULT_AVATAR;
+        }
+    }
 
     const dataToShow = [
         {

diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx
@@ -8,6 +8,7 @@ import {
 import Tooltip from '@/components/common/Tooltip/Tooltip';
 import styles from './latest-progress-update-card.module.scss';
 import { USER_MANAGEMENT_URL } from '@/constants/url';
+import UserAvatar from '@/components/common/UserAvatar/UserAvatar';
 export default function LatestProgressUpdateCardPresentation({
     dataToShowState,
     username,
@@ -93,22 +94,15 @@ export default function LatestProgressUpdateCardPresentation({
                     </Tooltip>
                     {isDevMode &&
                         (username === '' ? (
-                            <img
-                                src={userProfileImageUrl}
-                                alt={'Avatar'}
-                                data-testid="latest-progress-update-card-profile-picture"
-                                className={
-                                    styles[
-                                        'latest-progress-update-card__profile-picture'
-                                    ]
-                                }
+                            <UserAvatar
+                                userProfileImageUrl={userProfileImageUrl}
                             />
                         ) : (
                             <Tooltip
                                 content={username}
                                 tooltipPosition={{
                                     top: '-2.5rem',
-                                    right: '-3.7rem',
+                                    right: '-3.9rem',
                                     width: '10rem',
                                 }}
                             >
@@ -120,14 +114,9 @@ export default function LatestProgressUpdateCardPresentation({
                                         ]
                                     }
                                 >
-                                    <img
-                                        src={userProfileImageUrl}
-                                        alt={'Avatar'}
-                                        data-testid="latest-progress-update-card-profile-picture"
-                                        className={
-                                            styles[
-                                                'latest-progress-update-card__profile-picture'
-                                            ]
+                                    <UserAvatar
+                                        userProfileImageUrl={
+                                            userProfileImageUrl
                                         }
                                     />
                                 </a>

diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx
@@ -8,6 +8,7 @@ import {
     ProgressUpdateCardPresentationProps,
     ProgressUpdateDataToShow,
 } from './progressUpdateCard.types';
+import UserAvatar from '@/components/common/UserAvatar/UserAvatar';
 
 export default function ProgressUpdateCardPresentation({
     titleToShow,
@@ -21,6 +22,7 @@ export default function ProgressUpdateCardPresentation({
     isExpanded,
 }: ProgressUpdateCardPresentationProps) {
     const router = useRouter();
+    console.log(isExpanded);
     const isDevMode = router.query.dev === 'true';
     const progressInfoMapping = dataToShowState.map(
         (datum: ProgressUpdateDataToShow) => (
@@ -103,15 +105,8 @@ export default function ProgressUpdateCardPresentation({
 
                         {isDevMode &&
                             (username === '' ? (
-                                <img
-                                    src={userProfileImageUrl}
-                                    alt={'Avatar'}
-                                    data-testid="progress-update-card-profile-picture"
-                                    className={
-                                        styles[
-                                            'progress-update-card__profile-picture'
-                                        ]
-                                    }
+                                <UserAvatar
+                                    userProfileImageUrl={userProfileImageUrl}
                                 />
                             ) : (
                                 <Tooltip
@@ -134,27 +129,26 @@ export default function ProgressUpdateCardPresentation({
                                             event.stopPropagation()
                                         }
                                     >
-                                        <img
-                                            src={userProfileImageUrl}
-                                            alt={'Avatar'}
-                                            data-testid="progress-update-card-profile-picture"
-                                            className={
-                                                styles[
-                                                    'progress-update-card__profile-picture'
-                                                ]
+                                        <UserAvatar
+                                            userProfileImageUrl={
+                                                userProfileImageUrl
                                             }
                                         />
                                     </a>
                                 </Tooltip>
                             ))}
+
                         <FaAngleRight
                             data-testid="progress-update-card-angle-icon"
-                            style={{
-                                transform: isExpanded
-                                    ? 'rotate(90deg)'
-                                    : 'none',
-                                transition: 'transform 1s',
-                            }}
+                            className={`${
+                                styles['progress-update-card__angle-icon']
+                            } ${
+                                isExpanded
+                                    ? styles[
+                                          'progress-update-card__angle-icon--expanded'
+                                      ]
+                                    : ''
+                            }`}
                         />
                     </div>
                 </div>

diff --git a/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss b/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss
@@ -54,7 +54,7 @@
         &:last-of-type {
             display: flex;
             justify-content: flex-end;
-            margin-right: 8px;
+            margin-right: 12px;
         }
 
         .latest-progress-update-card__more-less-button {
@@ -70,22 +70,10 @@
             display: flex;
             align-items: center;
             justify-content: start;
-            gap: 5px;
+            gap: 4px;
             z-index: 0;
             cursor: pointer;
             font-size: 0.934rem;
         }
-
-        .latest-progress-update-card__profile-picture {
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            object-fit: cover;
-            margin-right: 4px;
-            @media (width<=425px) {
-                width: 28px;
-                height: 28px;
-            }
-        }
     }
 }
diff --git a/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss b/src/components/taskDetails/ProgressUpdateCard/progress-update-card.module.scss
@@ -78,20 +78,9 @@
     .progress-update-card__details-container {
         display: flex;
         direction: row;
+        gap: 4px;
         align-items: center;
     }
-
-    .progress-update-card__profile-picture {
-        width: 32px;
-        height: 32px;
-        margin: 0 4px;
-        border-radius: 50%;
-        object-fit: cover;
-        @media (width<=425px) {
-            width: 28px;
-            height: 28px;
-        }
-    }
 }
 
 .hidden {
@@ -118,6 +107,13 @@
     transition: height 1s cubic-bezier(0.78, 0.2, 0.2, 1.1);
 }
 
+.progress-update-card__angle-icon {
+    transition: transform 1s;
+}
+.progress-update-card__angle-icon--expanded {
+    transform: rotate(90deg);
+}
+
 .progress-update-card__info-container {
     font-size: 1rem;
     display: flex;