Feature: Display User Details for Task Progress Updates

__mocks__/db/progresses.ts

@@ -10,7 +10,42 @@ export const mockGetTaskProgress = {
             completed: '1',
             planned: '1',
             type: 'task',
-            userId: 'K1X2iixQVx1lnE0WYCtH',
+            userData: {
+                id: 'XAF7rSUvk4p0d098qWYS',
+                profileURL: 'https://my.realdevsquad.com/identity',
+                discordJoinedAt: '2020-02-01T08:33:38.278000+00:00',
+                roles: {
+                    archived: false,
+                    in_discord: true,
+                    member: true,
+                    super_user: true,
+                    admin: true,
+                },
+                created_at: 1693166951852,
+                yoe: '8',
+                github_created_at: 1341655281000,
+                updated_at: 1693224375990,
+                company: 'Amazon',
+                twitter_id: 'ankushdharkar',
+                first_name: 'Ankush',
+                ' instagram_id': 'ankushdharkar',
+                website: 'NA',
+                incompleteUserDetails: false,
+                discordId: '154585730465660929',
+                linkedin_id: 'ankushdharkar',
+                last_name: 'Dharkar',
+                picture: {
+                    publicId:
+                        'profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe',
+                    url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1692058952/profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe.jpg',
+                },
+                github_display_name: 'Ankush Dharkar',
+                company_name: 'Amazon',
+                github_id: 'ankushdharkar',
+                designation: 'SDE',
+                status: 'idle',
+                username: 'ankush',
+            },
             taskId: 'OxYqJgf6Tyl90uci1mzs',
         },
         {
@@ -21,7 +56,42 @@ export const mockGetTaskProgress = {
             completed: 'testig task progress',
             planned: 'plan to test',
             type: 'task',
-            userId: 'K1X2iixQVx1lnE0WYCtH',
+            userData: {
+                id: 'XAF7rSUvk4p0d098qWYS',
+                profileURL: 'https://my.realdevsquad.com/identity',
+                discordJoinedAt: '2020-02-01T08:33:38.278000+00:00',
+                roles: {
+                    archived: false,
+                    in_discord: true,
+                    member: true,
+                    super_user: true,
+                    admin: true,
+                },
+                created_at: 1693166951852,
+                yoe: '8',
+                github_created_at: 1341655281000,
+                updated_at: 1693224375990,
+                company: 'Amazon',
+                twitter_id: 'ankushdharkar',
+                first_name: 'Ankush',
+                ' instagram_id': 'ankushdharkar',
+                website: 'NA',
+                incompleteUserDetails: false,
+                discordId: '154585730465660929',
+                linkedin_id: 'ankushdharkar',
+                last_name: 'Dharkar',
+                picture: {
+                    publicId:
+                        'profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe',
+                    url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1692058952/profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe.jpg',
+                },
+                github_display_name: 'Ankush Dharkar',
+                company_name: 'Amazon',
+                github_id: 'ankushdharkar',
+                designation: 'SDE',
+                status: 'idle',
+                username: 'ankush',
+            },
             taskId: 'OxYqJgf6Tyl90uci1mzs',
         },
         {
@@ -32,10 +102,44 @@ export const mockGetTaskProgress = {
             completed: 'progress 2',
             planned: 'something planned',
             type: 'task',
-            userId: 'K1X2iixQVx1lnE0WYCtH',
+            userData: {
+                id: 'XAF7rSUvk4p0d098qWYS',
+                profileURL: 'https://my.realdevsquad.com/identity',
+                discordJoinedAt: '2020-02-01T08:33:38.278000+00:00',
+                roles: {
+                    archived: false,
+                    in_discord: true,
+                    member: true,
+                    super_user: true,
+                    admin: true,
+                },
+                created_at: 1693166951852,
+                yoe: '8',
+                github_created_at: 1341655281000,
+                updated_at: 1693224375990,
+                company: 'Amazon',
+                twitter_id: 'ankushdharkar',
+                first_name: 'Ankush',
+                ' instagram_id': 'ankushdharkar',
+                website: 'NA',
+                incompleteUserDetails: false,
+                discordId: '154585730465660929',
+                linkedin_id: 'ankushdharkar',
+                last_name: 'Dharkar',
+                picture: {
+                    publicId:
+                        'profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe',
+                    url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1692058952/profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe.jpg',
+                },
+                github_display_name: 'Ankush Dharkar',
+                company_name: 'Amazon',
+                github_id: 'ankushdharkar',
+                designation: 'SDE',
+                status: 'idle',
+                username: 'ankush',
+            },
             taskId: 'OxYqJgf6Tyl90uci1mzs',
         },
-
         {
             id: 'zJHdjzAsvH8K6wg7de07',
             date: 1685491203632,
@@ -47,7 +151,42 @@ 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: 'XAF7rSUvk4p0d098qWYS',
+                profileURL: 'https://my.realdevsquad.com/identity',
+                discordJoinedAt: '2020-02-01T08:33:38.278000+00:00',
+                roles: {
+                    archived: false,
+                    in_discord: true,
+                    member: true,
+                    super_user: true,
+                    admin: true,
+                },
+                created_at: 1693166951852,
+                yoe: '8',
+                github_created_at: 1341655281000,
+                updated_at: 1693224375990,
+                company: 'Amazon',
+                twitter_id: 'ankushdharkar',
+                first_name: 'Ankush',
+                ' instagram_id': 'ankushdharkar',
+                website: 'NA',
+                incompleteUserDetails: false,
+                discordId: '154585730465660929',
+                linkedin_id: 'ankushdharkar',
+                last_name: 'Dharkar',
+                picture: {
+                    publicId:
+                        'profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe',
+                    url: 'https://res.cloudinary.com/realdevsquad/image/upload/v1692058952/profile/XAF7rSUvk4p0d098qWYS/me40uk7taytbjaa67mhe.jpg',
+                },
+                github_display_name: 'Ankush Dharkar',
+                company_name: 'Amazon',
+                github_id: 'ankushdharkar',
+                designation: 'SDE',
+                status: 'idle',
+                username: 'ankush',
+            },
             taskId: 'demo-task-id-0',
         },
     ],

__tests__/Unit/Components/Calendar/UserSearchField.test.tsx

@@ -46,9 +46,10 @@ describe('SearchField component', () => {
 
         const input = screen.getByPlaceholderText('Enter username');
         userEvent.type(input, 'muhammadmusab');
+
         await waitFor(() => expect(input).toHaveValue('muhammadmusab'));
 
-        const listItems = screen.getAllByRole('listitem');
+        const listItems = await screen.findAllByRole('listitem');
         expect(listItems[0].innerHTML).toEqual('muhammadmusab');
 
         const button = screen.getByRole('button', { name: 'Submit' });
@@ -177,16 +178,16 @@ describe('SearchField component', () => {
         userEvent.type(input, 'mu');
         await waitFor(() => expect(input).toHaveValue('mu'));
 
-        const suggestionsAfterFirstTyping = await waitFor(() =>
-            screen.queryAllByRole('listitem')
+        const suggestionsAfterFirstTyping = await screen.findAllByRole(
+            'listitem'
         );
         expect(suggestionsAfterFirstTyping.length).toBeGreaterThan(0);
 
         userEvent.type(input, 'hammad');
         await waitFor(() => expect(input).toHaveValue('muhammad'));
 
-        const suggestionsAfterSecondTyping = await waitFor(() =>
-            screen.queryAllByRole('listitem')
+        const suggestionsAfterSecondTyping = await screen.findAllByRole(
+            'listitem'
         );
         expect(suggestionsAfterSecondTyping.length).toBeGreaterThan(0);
         expect(suggestionsAfterSecondTyping.length).toBeLessThan(
@@ -197,6 +198,6 @@ describe('SearchField component', () => {
         await waitFor(() => expect(input).toHaveValue(''));
 
         const noSuggestions = screen.queryAllByRole('listitem');
-        expect(noSuggestions).toEqual([]);
+        expect(noSuggestions).toHaveLength(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 } 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 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', () => {
         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);