Feature: Display User Details for Task Progress Updates

__mocks__/db/progresses.ts

@@ -10,7 +10,32 @@ export const mockGetTaskProgress = {
             completed: '1',
             planned: '1',
             type: 'task',
-            userId: 'K1X2iixQVx1lnE0WYCtH',
+            userData: {
+                id: 'xpHuUkihhxPeWYfNe38L',
+                incompleteUserDetails: false,
+                roles: {
+                    archived: false,
+                    super_user: false,
+                    admin: false,
+                    member: true,
+                },
+                linkedin_id: 'muralidhar-akkireddy-91b673158',
+                last_name: 'Akkireddy',
+                yoe: 1,
+                github_display_name: 'Muralidhar',
+                github_id: 'Muralidhar22',
+                company: 'Tata Consultancy Services',
+                designation: 'Assistant Systems Engineer',
+                twitter_id: 'murali_14',
+                first_name: 'Muralidhar',
+                username: 'muralidhar',
+                status: 'idle',
+                picture: {
+                    url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1661061375/profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v.jpg',
+                    publicId:
+                        'profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v',
+                },
+            },
             taskId: 'OxYqJgf6Tyl90uci1mzs',
         },
         {
@@ -21,7 +46,32 @@ export const mockGetTaskProgress = {
             completed: 'testig task progress',
             planned: 'plan to test',
             type: 'task',
-            userId: 'K1X2iixQVx1lnE0WYCtH',
+            userData: {
+                id: 'xpHuUkihhxPeWYfNe38L',
+                incompleteUserDetails: false,
+                roles: {
+                    archived: false,
+                    super_user: false,
+                    admin: false,
+                    member: true,
+                },
+                linkedin_id: 'muralidhar-akkireddy-91b673158',
+                last_name: 'Akkireddy',
+                yoe: 1,
+                github_display_name: 'Muralidhar',
+                github_id: 'Muralidhar22',
+                company: 'Tata Consultancy Services',
+                designation: 'Assistant Systems Engineer',
+                twitter_id: 'murali_14',
+                first_name: 'Muralidhar',
+                username: 'muralidhar',
+                status: 'idle',
+                picture: {
+                    url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1661061375/profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v.jpg',
+                    publicId:
+                        'profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v',
+                },
+            },
             taskId: 'OxYqJgf6Tyl90uci1mzs',
         },
         {
@@ -32,10 +82,34 @@ export const mockGetTaskProgress = {
             completed: 'progress 2',
             planned: 'something planned',
             type: 'task',
-            userId: 'K1X2iixQVx1lnE0WYCtH',
+            userData: {
+                id: 'xpHuUkihhxPeWYfNe38L',
+                incompleteUserDetails: false,
+                roles: {
+                    archived: false,
+                    super_user: false,
+                    admin: false,
+                    member: true,
+                },
+                linkedin_id: 'muralidhar-akkireddy-91b673158',
+                last_name: 'Akkireddy',
+                yoe: 1,
+                github_display_name: 'Muralidhar',
+                github_id: 'Muralidhar22',
+                company: 'Tata Consultancy Services',
+                designation: 'Assistant Systems Engineer',
+                twitter_id: 'murali_14',
+                first_name: 'Muralidhar',
+                username: 'muralidhar',
+                status: 'idle',
+                picture: {
+                    url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1661061375/profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v.jpg',
+                    publicId:
+                        'profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v',
+                },
+            },
             taskId: 'OxYqJgf6Tyl90uci1mzs',
         },
-
         {
             id: 'zJHdjzAsvH8K6wg7de07',
             date: 1685491203632,
@@ -47,7 +121,32 @@ export const mockGetTaskProgress = {
             planned:
                 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
             type: 'task',
-            userId: 'demo-user-id-0',
+            userData: {
+                id: 'xpHuUkihhxPeWYfNe38L',
+                incompleteUserDetails: false,
+                roles: {
+                    archived: false,
+                    super_user: false,
+                    admin: false,
+                    member: true,
+                },
+                linkedin_id: 'muralidhar-akkireddy-91b673158',
+                last_name: 'Akkireddy',
+                yoe: 1,
+                github_display_name: 'Muralidhar',
+                github_id: 'Muralidhar22',
+                company: 'Tata Consultancy Services',
+                designation: 'Assistant Systems Engineer',
+                twitter_id: 'murali_14',
+                first_name: 'Muralidhar',
+                username: 'muralidhar',
+                status: 'idle',
+                picture: {
+                    url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1661061375/profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v.jpg',
+                    publicId:
+                        'profile/xpHuUkihhxPeWYfNe38L/ogirikotjnz8esjpm51v',
+                },
+            },
             taskId: 'demo-task-id-0',
         },
     ],

__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx

@@ -1,13 +1,40 @@
 import moment from 'moment';
-import { fireEvent, getAllByTestId, screen } from '@testing-library/react';
+import { fireEvent, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { store } from '@/app/store';
 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 { useRouter } from 'next/router';
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
 
 describe('LatestProgressUpdateCard Component', () => {
+    it('should render the default avatar when userProfileImage is undefined', () => {
+        const mockRouter = {
+            query: { dev: 'true' },
+        };
+        (useRouter as jest.Mock).mockReturnValue(mockRouter);
+
+        const mockDataWithNoUserData = {
+            ...mockGetTaskProgress.data[2],
+            userData: undefined,
+        };
+
+        renderWithRouter(
+            <Provider store={store()}>
+                <LatestProgressUpdateCard data={mockDataWithNoUserData} />
+            </Provider>
+        );
+        const profilePicture = screen.getByTestId(
+            'latest-progress-update-card-profile-picture'
+        );
+        expect(profilePicture).toHaveAttribute('src', DEFAULT_AVATAR);
+    });
+
     it('should render the component with the passed data', () => {
         renderWithRouter(
             <Provider store={store()}>
@@ -46,30 +73,28 @@ describe('LatestProgressUpdateCard Component', () => {
 
         expect(date).toHaveTextContent(dateInAgoFormat);
     });
-
-    it('should render the tooltip on hover on the date and should not render on mouse out off date', () => {
+    it('should render the tooltip on hover on the date and should not render on mouse out of date', () => {
         renderWithRouter(
             <Provider store={store()}>
                 <LatestProgressUpdateCard data={mockGetTaskProgress.data[2]} />
             </Provider>
         );
 
-        const momentDate = moment(mockGetTaskProgress.data[2].createdAt);
-        const fullDate = momentDate.format(
-            'dddd, MMMM DD, YYYY, hh:mm A [GMT] Z'
-        );
-        const tooltipString = `Updated at ${fullDate}`;
-
         const dateElement = screen.getByTestId(
             'latest-progress-update-card-date'
         );
 
         fireEvent.mouseOver(dateElement);
 
-        const tooltip = screen.getByTestId('tooltip');
+        const momentDate = moment(mockGetTaskProgress.data[2].createdAt);
+        const fullDate = momentDate.format(
+            'dddd, MMMM DD, YYYY, hh:mm A [GMT] Z'
+        );
+        const tooltipString = `Updated at ${fullDate}`;
 
+        const tooltip = screen.getByText(tooltipString);
+        expect(tooltip).toBeInTheDocument();
         expect(tooltip).toHaveClass('fade-in');
-        expect(tooltip).toHaveTextContent(tooltipString);
 
         fireEvent.mouseOut(dateElement);
 

__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx

@@ -5,6 +5,11 @@ import { store } from '@/app/store';
 import { renderWithRouter } from '@/test_utils/createMockRouter';
 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(),
+}));
 
 let mockedOpenDetailsFunction: jest.Mock<void, [React.MouseEvent<HTMLElement>]>;
 
@@ -14,6 +19,92 @@ beforeEach(() => {
 });
 
 describe('ProgressUpdateCard Component', () => {
+    it('should render the default avatar when userData is undefined', () => {
+        const mockRouter = {
+            query: { dev: 'true' },
+        };
+        (useRouter as jest.Mock).mockReturnValue(mockRouter);
+
+        const mockDataWithNoUserData = {
+            ...mockGetTaskProgress.data[2],
+            userData: undefined,
+        };
+
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressUpdateCard data={mockDataWithNoUserData} />
+            </Provider>
+        );
+        const profilePicture = screen.getByTestId(
+            'progress-update-card-profile-picture'
+        );
+        expect(profilePicture).toHaveAttribute('src', DEFAULT_AVATAR);
+    });
+
+    it('should toggle the expanded state when the card is clicked', () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressUpdateCard data={mockGetTaskProgress.data[2]} />
+            </Provider>
+        );
+
+        const progressUpdateCardContainer = screen.getByTestId(
+            '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');
+    });
+
+    it('should check if the onCardClick function is called when user click on card', () => {
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressUpdateCard data={mockGetTaskProgress.data[2]} />
+            </Provider>
+        );
+        const progressUpdateCardContainer = screen.getByTestId(
+            'progress-update-card-container'
+        );
+        fireEvent.click(progressUpdateCardContainer);
+        expect(progressUpdateCardContainer).toHaveClass(
+            'progress-update-card__container expand'
+        );
+    });
+
+    it('should toggle "Read More" state when the button is clicked', () => {
+        const mockLongCompletedData = {
+            ...mockGetTaskProgress.data[2],
+            completed:
+                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lacinia bibendum nisi at feugiat.',
+        };
+
+        renderWithRouter(
+            <Provider store={store()}>
+                <ProgressUpdateCard data={mockLongCompletedData} />
+            </Provider>
+        );
+
+        const readMoreButton = screen.getByTestId(
+            'progress-update-card-read-more-completed'
+        );
+        expect(readMoreButton).toBeInTheDocument();
+        expect(readMoreButton).toHaveTextContent('More');
+        fireEvent.click(readMoreButton);
+        expect(readMoreButton).toHaveTextContent('Less');
+
+        fireEvent.click(readMoreButton);
+
+        expect(readMoreButton).toHaveTextContent('More');
+    });
+
     it('should render completed section string as title in card', () => {
         renderWithRouter(
             <Provider store={store()}>
@@ -66,7 +157,7 @@ describe('ProgressUpdateCard Component', () => {
 
         fireEvent.mouseOver(dateElement);
 
-        const tooltip = screen.getByTestId('tooltip');
+        const tooltip = screen.getByText(tooltipString);
 
         expect(tooltip).toHaveClass('fade-in');
         expect(tooltip).toHaveTextContent(tooltipString);