From 446777605433a836828f63d970a2f4a1d6f7e1c5 Mon Sep 17 00:00:00 2001 From: AnujChhikara Date: Sat, 9 Nov 2024 16:10:11 +0530 Subject: [PATCH 1/5] fetched the user who updated the progress --- src/app/services/usersApi.ts | 9 +++++++++ .../ProgressUpdateCard/LatestProgressUpdateCard.tsx | 10 ++++++++-- .../LatestProgressUpdateCardPresentation.tsx | 10 ++++++++++ .../ProgressUpdateCard/ProgressUpdateCard.tsx | 8 ++++++++ .../ProgressUpdateCardPresentation.tsx | 11 +++++++++++ .../ProgressUpdateCard/progressUpdateCard.types.ts | 2 ++ 6 files changed, 48 insertions(+), 2 deletions(-) diff --git a/src/app/services/usersApi.ts b/src/app/services/usersApi.ts index 94984f134..b34a6475d 100644 --- a/src/app/services/usersApi.ts +++ b/src/app/services/usersApi.ts @@ -15,6 +15,10 @@ type UsernameQueryArgs = { searchString?: string; size?: number; }; +type UserResponse = { + message: string; + user: userDataType; +}; export const usersApi = api.injectEndpoints({ endpoints: (build) => ({ @@ -39,6 +43,10 @@ export const usersApi = api.injectEndpoints({ query: ({ searchString }) => `/users?search=${searchString}`, providesTags: ['Users'], }), + getAllUserByUserId: build.query({ + query: ({ searchString }) => `/users/userId/${searchString}`, + providesTags: ['Users'], + }), }), }); @@ -48,4 +56,5 @@ export const { useGetUsersQuery, useGetAllUsersByUsernameQuery, useGetAllUsersQuery, + useGetAllUserByUserIdQuery, } = usersApi; diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx index 564b5bd61..04cd59439 100644 --- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx @@ -3,6 +3,7 @@ import React, { MouseEvent, useState } from 'react'; import { readMoreFormatter } from '@/utils/common'; import { ProgressDetailsData } from '@/types/standup.type'; import LatestProgressUpdateCardPresentation from './LatestProgressUpdateCardPresentation'; +import { useGetAllUserByUserIdQuery } from '@/app/services/usersApi'; type LatestProgressUpdateCardProps = { data: ProgressDetailsData; @@ -21,11 +22,16 @@ export default function LatestProgressUpdateCard({ data, }: LatestProgressUpdateCardProps) { const momentDate = moment(data?.createdAt); + const userId = data?.userId; + const { data: userData } = useGetAllUserByUserIdQuery({ + searchString: userId, + }); + + const username = userData?.user?.username; const dateInAgoFormat = momentDate.fromNow(); const fullDate = momentDate.format('dddd, MMMM DD, YYYY, hh:mm A [GMT] Z'); const tooltipText = `Updated at ${fullDate}`; const charactersToShow = 70; - const dataToShow = [ { id: `completed-${data.id}`, @@ -55,7 +61,6 @@ export default function LatestProgressUpdateCard({ const [dataToShowState, setDataToShowState] = useState(dataToShow); - function onMoreOrLessButtonClick( e: MouseEvent, clickedOnData: ProgressUpdateDataToShow @@ -74,6 +79,7 @@ export default function LatestProgressUpdateCard({ return ( + + by   + + {username} + + diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx index 707938bb7..054b83fcb 100644 --- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx @@ -6,12 +6,19 @@ import { ProgressUpdateCardProps, ProgressUpdateDataToShow, } from './progressUpdateCard.types'; +import { useGetAllUserByUserIdQuery } from '@/app/services/usersApi'; export default memo(function ProgressUpdateCard({ data, }: ProgressUpdateCardProps) { const momentDate = moment(data?.createdAt); const dateInAgoFormat = momentDate.fromNow(); + const userId = data?.userId; + const { data: userData } = useGetAllUserByUserIdQuery({ + searchString: userId, + }); + + const username = userData?.user?.username; const charactersToShow = 70; const readMoreTitle = readMoreFormatter(data?.completed, charactersToShow); const titleToShow = readMoreTitle; @@ -72,6 +79,7 @@ export default memo(function ProgressUpdateCard({ } return ( {titleToShow} + + + by   + + {username} + +
) => void; export type ProgressUpdateCardPresentationProps = { + username: string; titleToShow: string; dateInAgoFormat: string; tooltipString: string; @@ -21,6 +22,7 @@ export type ProgressUpdateCardPresentationProps = { }; export type LatestProgressUpdateCardPresentationProps = { + username: string; dataToShowState: ProgressUpdateDataToShow[]; tooltipText: string; onMoreOrLessButtonClick: ( From 3e6b6bcc1a1300b419476bc3e1f5c77855cd2275 Mon Sep 17 00:00:00 2001 From: AnujChhikara Date: Wed, 13 Nov 2024 12:46:57 +0530 Subject: [PATCH 2/5] test_added --- .../ProgressUpdateCard.test.tsx | 15 ++ .../ProgressUpdateCardPresentation.test.tsx | 145 +++++++++++++++++- src/app/services/usersApi.ts | 4 +- .../common/Tooltip/tooltip.module.scss | 2 +- .../LatestProgressUpdateCard.tsx | 4 +- .../LatestProgressUpdateCardPresentation.tsx | 30 +++- .../ProgressUpdateCard/ProgressUpdateCard.tsx | 4 +- .../ProgressUpdateCardPresentation.tsx | 35 +++-- .../latest-progress-update-card.module.scss | 3 + 9 files changed, 217 insertions(+), 25 deletions(-) diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx index d006fc9ea..f91e1f86b 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCard.test.tsx @@ -14,6 +14,21 @@ beforeEach(() => { }); describe('ProgressUpdateCard Component', () => { + it('should check if the onCardClick function is called when user click on card', () => { + renderWithRouter( + + + + ); + const progressUpdateCardContainer = screen.getByTestId( + 'progress-update-card-container' + ); + fireEvent.click(progressUpdateCardContainer); + expect(progressUpdateCardContainer).toHaveClass( + 'progress-update-card__container expand' + ); + }); + it('should render completed section string as title in card', () => { renderWithRouter( diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx index 3660fc1ae..ae7269ded 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx @@ -2,11 +2,12 @@ import moment from 'moment'; import { MouseEvent } from 'react'; import { Provider } from 'react-redux'; import { fireEvent, screen } from '@testing-library/react'; - +import { useRouter } from 'next/router'; import { mockGetTaskProgress } from '../../../../../__mocks__/db/progresses'; import { renderWithRouter } from '@/test_utils/createMockRouter'; import { readMoreFormatter } from '@/utils/common'; import { store } from '@/app/store'; +import { USER_MANAGEMENT_URL } from '@/constants/url'; import { ProgressUpdateCardPresentationProps, @@ -17,6 +18,7 @@ import ProgressUpdateCardPresentation from '@/components/taskDetails/ProgressUpd let initialProps: ProgressUpdateCardPresentationProps; const titleToShow = mockGetTaskProgress.data[1].completed; +const username = 'mock-user-name'; const momentDate = moment(mockGetTaskProgress.data[2].createdAt); const fullDate = momentDate.format('DD-MM-YY'); const time = momentDate.format('hh:mmA'); @@ -29,6 +31,9 @@ let mockedOnMoreOrLessButtonClick: jest.Mock< [React.MouseEvent] >; let mockedOnCardClick: jest.Mock]>; +jest.mock('next/router', () => ({ + useRouter: jest.fn(), +})); const charactersToShow = 70; const dataToShowState = [ { @@ -114,6 +119,7 @@ describe('ProgressUpdateCardPresentation Component', () => { jest.fn]>(); mockedOnCardClick = jest.fn]>(); initialProps = { + username: username, titleToShow: titleToShow, isExpanded: false, dateInAgoFormat: dateInAgoFormat, @@ -123,7 +129,76 @@ describe('ProgressUpdateCardPresentation Component', () => { onCardClick: mockedOnCardClick, }; }); + + it('should rotate the angle icon when expanded', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'false' }, + }); + const props = { ...initialProps, isExpanded: true }; + renderWithRouter( + + + + ); + const angleIcon = screen.getByTestId('progress-update-card-angle-icon'); + expect(angleIcon).toHaveStyle('transform: rotate(90deg)'); + }); + it('should have respective classes on date container and date text', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'false' }, + }); + renderWithRouter( + + + + ); + const dateContainer = screen.getByTestId('progress-update-card-date'); + const dateText = screen.getByText(dateInAgoFormat); + + expect(dateContainer).toHaveClass( + 'progress-update-card__date-container' + ); + expect(dateText).toHaveClass('progress-update-card__date-text'); + }); + + it('should not rotate the angle icon when not expanded', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'false' }, + }); + const props = { ...initialProps, isExpanded: false }; + renderWithRouter( + + + + ); + const angleIcon = screen.getByTestId('progress-update-card-angle-icon'); + expect(angleIcon).toHaveStyle('transform: none'); + }); + + it('should prevent event propagation when clicking on the date container', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'false' }, + }); + renderWithRouter( + + + + ); + + const dateContainer = screen.getByTestId('progress-update-card-date'); + const stopPropagationMock = jest.fn(); + dateContainer.addEventListener( + 'click', + (event) => (event.stopPropagation = stopPropagationMock) + ); + fireEvent.click(dateContainer); + expect(stopPropagationMock).toHaveBeenCalled(); + }); + it('should render completed section string as title in card', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'false' }, + }); renderWithRouter( @@ -135,6 +210,9 @@ describe('ProgressUpdateCardPresentation Component', () => { ); }); it('should render date with ago format', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'false' }, + }); renderWithRouter( @@ -144,6 +222,71 @@ describe('ProgressUpdateCardPresentation Component', () => { expect(date).toHaveTextContent(dateInAgoFormat); }); + it('should render the name of the updater', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'true' }, + }); + const props: ProgressUpdateCardPresentationProps = { + ...initialProps, + }; + renderWithRouter( + + + + ); + const usernameElement = screen.getByTestId( + 'progress-update-card-username' + ); + expect(usernameElement).toBeInTheDocument(); + expect(usernameElement.textContent).toContain('mock-user-name'); + }); + it('should render the updater name as a link with the correct href', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'true' }, + }); + const props: ProgressUpdateCardPresentationProps = { + ...initialProps, + }; + renderWithRouter( + + + + ); + + const linkElement = screen + .getByTestId('progress-update-card-username') + .querySelector('a'); + expect(linkElement).toBeInTheDocument(); + expect(linkElement).toHaveAttribute( + 'href', + `${USER_MANAGEMENT_URL}?username=${username}` + ); + expect(linkElement?.textContent).toContain(username); + }); + it('should prevent event propagation when clicking on the username link', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'true' }, + }); + + renderWithRouter( + + + + ); + + const usernameLink = screen.getByRole('link', { name: username }); + + const stopPropagationMock = jest.fn(); + + usernameLink.addEventListener( + 'click', + (event) => (event.stopPropagation = stopPropagationMock) + ); + + fireEvent.click(usernameLink); + expect(stopPropagationMock).toHaveBeenCalled(); + }); + it('should not render the tooltip when isToolisTooltipVisible is false', () => { const props: ProgressUpdateCardPresentationProps = { ...initialProps, diff --git a/src/app/services/usersApi.ts b/src/app/services/usersApi.ts index b34a6475d..25ef6ec07 100644 --- a/src/app/services/usersApi.ts +++ b/src/app/services/usersApi.ts @@ -43,7 +43,7 @@ export const usersApi = api.injectEndpoints({ query: ({ searchString }) => `/users?search=${searchString}`, providesTags: ['Users'], }), - getAllUserByUserId: build.query({ + getUserDetailsById: build.query({ query: ({ searchString }) => `/users/userId/${searchString}`, providesTags: ['Users'], }), @@ -56,5 +56,5 @@ export const { useGetUsersQuery, useGetAllUsersByUsernameQuery, useGetAllUsersQuery, - useGetAllUserByUserIdQuery, + useGetUserDetailsByIdQuery, } = usersApi; diff --git a/src/components/common/Tooltip/tooltip.module.scss b/src/components/common/Tooltip/tooltip.module.scss index ec48ad4ef..21906382c 100644 --- a/src/components/common/Tooltip/tooltip.module.scss +++ b/src/components/common/Tooltip/tooltip.module.scss @@ -2,7 +2,7 @@ .tooltip { position: absolute; - width: 17rem; + width: 18rem; // position - top, bottom, right, left will come from props for reusability background-color: $theme-primary; border: 1px solid $theme-primary; diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx index 04cd59439..f807cfbff 100644 --- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx @@ -3,7 +3,7 @@ import React, { MouseEvent, useState } from 'react'; import { readMoreFormatter } from '@/utils/common'; import { ProgressDetailsData } from '@/types/standup.type'; import LatestProgressUpdateCardPresentation from './LatestProgressUpdateCardPresentation'; -import { useGetAllUserByUserIdQuery } from '@/app/services/usersApi'; +import { useGetUserDetailsByIdQuery } from '@/app/services/usersApi'; type LatestProgressUpdateCardProps = { data: ProgressDetailsData; @@ -23,7 +23,7 @@ export default function LatestProgressUpdateCard({ }: LatestProgressUpdateCardProps) { const momentDate = moment(data?.createdAt); const userId = data?.userId; - const { data: userData } = useGetAllUserByUserIdQuery({ + const { data: userData } = useGetUserDetailsByIdQuery({ searchString: userId, }); diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx index a29e57aa0..562ff7ff1 100644 --- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCardPresentation.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useRouter } from 'next/router'; import { FaRegClock } from 'react-icons/fa6'; import { LatestProgressUpdateCardPresentationProps, @@ -15,6 +16,8 @@ export default function LatestProgressUpdateCardPresentation({ onMoreOrLessButtonClick, dateInAgoFormat, }: LatestProgressUpdateCardPresentationProps) { + const router = useRouter(); + const isDevMode = router.query.dev === 'true'; const progressInfoMapping = dataToShowState.map( (datum: ProgressUpdateDataToShow) => (
@@ -81,14 +88,21 @@ export default function LatestProgressUpdateCardPresentation({ - - by   - - {username} - - + by   + + {username} + + + )}
diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx index 054b83fcb..fac782202 100644 --- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx @@ -6,7 +6,7 @@ import { ProgressUpdateCardProps, ProgressUpdateDataToShow, } from './progressUpdateCard.types'; -import { useGetAllUserByUserIdQuery } from '@/app/services/usersApi'; +import { useGetUserDetailsByIdQuery } from '@/app/services/usersApi'; export default memo(function ProgressUpdateCard({ data, @@ -14,7 +14,7 @@ export default memo(function ProgressUpdateCard({ const momentDate = moment(data?.createdAt); const dateInAgoFormat = momentDate.fromNow(); const userId = data?.userId; - const { data: userData } = useGetAllUserByUserIdQuery({ + const { data: userData } = useGetUserDetailsByIdQuery({ searchString: userId, }); diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx index 92d09b421..232a60de5 100644 --- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { useRouter } from 'next/router'; import { FaAngleRight, FaRegClock } from 'react-icons/fa6'; import Tooltip from '@/components/common/Tooltip/Tooltip'; import styles from './progress-update-card.module.scss'; @@ -18,6 +19,9 @@ export default function ProgressUpdateCardPresentation({ onCardClick, isExpanded, }: ProgressUpdateCardPresentationProps) { + const router = useRouter(); + const isDevMode = router.query.dev === 'true'; + const progressInfoMapping = dataToShowState.map( (datum: ProgressUpdateDataToShow) => (
onMoreOrLessButtonClick(e, datum)} + data-testid="progress-update-more-less-button" className={ styles['progress-update-card__more-less-button'] } @@ -63,7 +68,11 @@ export default function ProgressUpdateCardPresentation({ + + {isDevMode && ( + event.stopPropagation()} + > + by   + + {username} + + + )} - - by   - - {username} - -
+
Date: Fri, 15 Nov 2024 15:01:42 +0530 Subject: [PATCH 3/5] fix the deprecated route --- src/app/services/usersApi.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/services/usersApi.ts b/src/app/services/usersApi.ts index 25ef6ec07..9d528482a 100644 --- a/src/app/services/usersApi.ts +++ b/src/app/services/usersApi.ts @@ -44,7 +44,7 @@ export const usersApi = api.injectEndpoints({ providesTags: ['Users'], }), getUserDetailsById: build.query({ - query: ({ searchString }) => `/users/userId/${searchString}`, + query: ({ searchString }) => `/users?id=${searchString}`, providesTags: ['Users'], }), }), From 50a018b2715d66a4bc7ca9c6a359c9672772a9f8 Mon Sep 17 00:00:00 2001 From: AnujChhikara Date: Sun, 24 Nov 2024 10:47:43 +0530 Subject: [PATCH 4/5] added user image section --- .../ProgressUpdateCardPresentation.test.tsx | 47 ++++++-- .../LatestProgressUpdateCard.tsx | 6 +- .../LatestProgressUpdateCardPresentation.tsx | 29 ++++- .../ProgressUpdateCard/ProgressUpdateCard.tsx | 6 +- .../ProgressUpdateCardPresentation.tsx | 110 ++++++++++++------ .../latest-progress-update-card.module.scss | 24 +++- .../progress-update-card.module.scss | 39 +++++++ .../progressUpdateCard.types.ts | 2 + 8 files changed, 209 insertions(+), 54 deletions(-) diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx index ae7269ded..f43401e12 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx @@ -7,7 +7,7 @@ import { mockGetTaskProgress } from '../../../../../__mocks__/db/progresses'; import { renderWithRouter } from '@/test_utils/createMockRouter'; import { readMoreFormatter } from '@/utils/common'; import { store } from '@/app/store'; -import { USER_MANAGEMENT_URL } from '@/constants/url'; +import { DEFAULT_AVATAR, USER_MANAGEMENT_URL } from '@/constants/url'; import { ProgressUpdateCardPresentationProps, @@ -19,6 +19,7 @@ import ProgressUpdateCardPresentation from '@/components/taskDetails/ProgressUpd let initialProps: ProgressUpdateCardPresentationProps; const titleToShow = mockGetTaskProgress.data[1].completed; const username = 'mock-user-name'; +const profileImageUrl = 'random-profile-pic-url'; const momentDate = moment(mockGetTaskProgress.data[2].createdAt); const fullDate = momentDate.format('DD-MM-YY'); const time = momentDate.format('hh:mmA'); @@ -120,6 +121,7 @@ describe('ProgressUpdateCardPresentation Component', () => { mockedOnCardClick = jest.fn]>(); initialProps = { username: username, + profileImageUrl: profileImageUrl, titleToShow: titleToShow, isExpanded: false, dateInAgoFormat: dateInAgoFormat, @@ -222,7 +224,7 @@ describe('ProgressUpdateCardPresentation Component', () => { expect(date).toHaveTextContent(dateInAgoFormat); }); - it('should render the name of the updater', () => { + it('should render the name and profile picture of the updater', () => { (useRouter as jest.Mock).mockReturnValue({ query: { dev: 'true' }, }); @@ -235,10 +237,37 @@ describe('ProgressUpdateCardPresentation Component', () => { ); const usernameElement = screen.getByTestId( - 'progress-update-card-username' + 'progress-update-card-user-info-container' ); expect(usernameElement).toBeInTheDocument(); expect(usernameElement.textContent).toContain('mock-user-name'); + const profileImageUrlElement = screen.getByTestId( + 'progress-update-card-profile-picture' + ); + + expect(profileImageUrlElement).toBeInTheDocument(); + expect(profileImageUrlElement).toHaveAttribute('src', profileImageUrl); + expect(profileImageUrlElement).toHaveAttribute('alt', 'Avatar'); + }); + it('should display the default avatar if profile url is empty', () => { + (useRouter as jest.Mock).mockReturnValue({ + query: { dev: 'true' }, + }); + const props: ProgressUpdateCardPresentationProps = { + ...initialProps, + profileImageUrl: '', + }; + renderWithRouter( + + + + ); + const profileImageUrlElement = screen.getByTestId( + 'progress-update-card-profile-picture' + ); + + expect(profileImageUrlElement).toBeInTheDocument(); + expect(profileImageUrlElement).toHaveAttribute('src', DEFAULT_AVATAR); }); it('should render the updater name as a link with the correct href', () => { (useRouter as jest.Mock).mockReturnValue({ @@ -254,7 +283,7 @@ describe('ProgressUpdateCardPresentation Component', () => { ); const linkElement = screen - .getByTestId('progress-update-card-username') + .getByTestId('progress-update-card-user-info-container') .querySelector('a'); expect(linkElement).toBeInTheDocument(); expect(linkElement).toHaveAttribute( @@ -263,7 +292,7 @@ describe('ProgressUpdateCardPresentation Component', () => { ); expect(linkElement?.textContent).toContain(username); }); - it('should prevent event propagation when clicking on the username link', () => { + it('should prevent event propagation when clicking on the user info container', () => { (useRouter as jest.Mock).mockReturnValue({ query: { dev: 'true' }, }); @@ -274,16 +303,18 @@ describe('ProgressUpdateCardPresentation Component', () => { ); - const usernameLink = screen.getByRole('link', { name: username }); + const userInfoContainer = screen.getByTestId( + 'progress-update-card-user-info-container' + ); const stopPropagationMock = jest.fn(); - usernameLink.addEventListener( + userInfoContainer.addEventListener( 'click', (event) => (event.stopPropagation = stopPropagationMock) ); - fireEvent.click(usernameLink); + fireEvent.click(userInfoContainer); expect(stopPropagationMock).toHaveBeenCalled(); }); diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx index f807cfbff..2887c4114 100644 --- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx @@ -26,8 +26,9 @@ export default function LatestProgressUpdateCard({ const { data: userData } = useGetUserDetailsByIdQuery({ searchString: userId, }); + const username = userData?.user?.username ?? ''; + const profileImageUrl = userData?.user?.picture?.url ?? ''; - const username = userData?.user?.username; const dateInAgoFormat = momentDate.fromNow(); const fullDate = momentDate.format('dddd, MMMM DD, YYYY, hh:mm A [GMT] Z'); const tooltipText = `Updated at ${fullDate}`; @@ -79,7 +80,8 @@ export default function LatestProgressUpdateCard({ return ( {isDevMode && ( - by   + by + {'Avatar'} {username} diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx index fac782202..7e86fd56e 100644 --- a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard.tsx @@ -17,8 +17,9 @@ export default memo(function ProgressUpdateCard({ const { data: userData } = useGetUserDetailsByIdQuery({ searchString: userId, }); + const username = userData?.user?.username ?? ''; + const profileImageUrl = userData?.user?.picture?.url ?? ''; - const username = userData?.user?.username; const charactersToShow = 70; const readMoreTitle = readMoreFormatter(data?.completed, charactersToShow); const titleToShow = readMoreTitle; @@ -79,7 +80,8 @@ export default memo(function ProgressUpdateCard({ } return ( {titleToShow} - - - event.stopPropagation()} - data-testid="progress-update-card-date" + content={tooltipString} > - event.stopPropagation()} + data-testid="progress-update-card-date" > - {dateInAgoFormat} + + + {dateInAgoFormat} + - - + - {isDevMode && ( - event.stopPropagation()} - > - by   - event.stopPropagation()} > - {username} - - - )} - + by + + {'Avatar'}{' '} + {username} + + + )} + +
) => void; export type ProgressUpdateCardPresentationProps = { username: string; + profileImageUrl: string; titleToShow: string; dateInAgoFormat: string; tooltipString: string; @@ -23,6 +24,7 @@ export type ProgressUpdateCardPresentationProps = { export type LatestProgressUpdateCardPresentationProps = { username: string; + profileImageUrl: string; dataToShowState: ProgressUpdateDataToShow[]; tooltipText: string; onMoreOrLessButtonClick: ( From 1b6374ead470d9a2cf84ad1491364957674c7bf1 Mon Sep 17 00:00:00 2001 From: AnujChhikara Date: Mon, 2 Dec 2024 11:42:41 +0530 Subject: [PATCH 5/5] variable name fix --- .../ProgressUpdateCardPresentation.test.tsx | 26 ++++++++++++------- .../LatestProgressUpdateCard.tsx | 4 +-- .../LatestProgressUpdateCardPresentation.tsx | 6 ++--- .../ProgressUpdateCard/ProgressUpdateCard.tsx | 4 +-- .../ProgressUpdateCardPresentation.tsx | 6 ++--- .../latest-progress-update-card.module.scss | 1 + .../progress-update-card.module.scss | 1 + .../progressUpdateCard.types.ts | 4 +-- 8 files changed, 30 insertions(+), 22 deletions(-) diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx index f43401e12..260d5bffd 100644 --- a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/ProgressUpdateCardPresentation.test.tsx @@ -19,7 +19,7 @@ import ProgressUpdateCardPresentation from '@/components/taskDetails/ProgressUpd let initialProps: ProgressUpdateCardPresentationProps; const titleToShow = mockGetTaskProgress.data[1].completed; const username = 'mock-user-name'; -const profileImageUrl = 'random-profile-pic-url'; +const userProfileImageUrl = 'random-profile-pic-url'; const momentDate = moment(mockGetTaskProgress.data[2].createdAt); const fullDate = momentDate.format('DD-MM-YY'); const time = momentDate.format('hh:mmA'); @@ -121,7 +121,7 @@ describe('ProgressUpdateCardPresentation Component', () => { mockedOnCardClick = jest.fn]>(); initialProps = { username: username, - profileImageUrl: profileImageUrl, + userProfileImageUrl: userProfileImageUrl, titleToShow: titleToShow, isExpanded: false, dateInAgoFormat: dateInAgoFormat, @@ -241,13 +241,16 @@ describe('ProgressUpdateCardPresentation Component', () => { ); expect(usernameElement).toBeInTheDocument(); expect(usernameElement.textContent).toContain('mock-user-name'); - const profileImageUrlElement = screen.getByTestId( + const userProfileImageUrlElement = screen.getByTestId( 'progress-update-card-profile-picture' ); - expect(profileImageUrlElement).toBeInTheDocument(); - expect(profileImageUrlElement).toHaveAttribute('src', profileImageUrl); - expect(profileImageUrlElement).toHaveAttribute('alt', 'Avatar'); + expect(userProfileImageUrlElement).toBeInTheDocument(); + expect(userProfileImageUrlElement).toHaveAttribute( + 'src', + userProfileImageUrl + ); + expect(userProfileImageUrlElement).toHaveAttribute('alt', 'Avatar'); }); it('should display the default avatar if profile url is empty', () => { (useRouter as jest.Mock).mockReturnValue({ @@ -255,19 +258,22 @@ describe('ProgressUpdateCardPresentation Component', () => { }); const props: ProgressUpdateCardPresentationProps = { ...initialProps, - profileImageUrl: '', + userProfileImageUrl: '', }; renderWithRouter( ); - const profileImageUrlElement = screen.getByTestId( + const userProfileImageUrlElement = screen.getByTestId( 'progress-update-card-profile-picture' ); - expect(profileImageUrlElement).toBeInTheDocument(); - expect(profileImageUrlElement).toHaveAttribute('src', DEFAULT_AVATAR); + expect(userProfileImageUrlElement).toBeInTheDocument(); + expect(userProfileImageUrlElement).toHaveAttribute( + 'src', + DEFAULT_AVATAR + ); }); it('should render the updater name as a link with the correct href', () => { (useRouter as jest.Mock).mockReturnValue({ diff --git a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx index 2887c4114..8ae6ba79a 100644 --- a/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx +++ b/src/components/taskDetails/ProgressUpdateCard/LatestProgressUpdateCard.tsx @@ -27,7 +27,7 @@ export default function LatestProgressUpdateCard({ searchString: userId, }); const username = userData?.user?.username ?? ''; - const profileImageUrl = userData?.user?.picture?.url ?? ''; + const userProfileImageUrl = userData?.user?.picture?.url ?? ''; const dateInAgoFormat = momentDate.fromNow(); const fullDate = momentDate.format('dddd, MMMM DD, YYYY, hh:mm A [GMT] Z'); @@ -81,7 +81,7 @@ export default function LatestProgressUpdateCard({ return ( {'Avatar'} {'Avatar'}) => void; export type ProgressUpdateCardPresentationProps = { username: string; - profileImageUrl: string; + userProfileImageUrl: string; titleToShow: string; dateInAgoFormat: string; tooltipString: string; @@ -24,7 +24,7 @@ export type ProgressUpdateCardPresentationProps = { export type LatestProgressUpdateCardPresentationProps = { username: string; - profileImageUrl: string; + userProfileImageUrl: string; dataToShowState: ProgressUpdateDataToShow[]; tooltipText: string; onMoreOrLessButtonClick: (