diff --git a/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressUpdateCard/LatestProgressUpdateCard.test.tsx
index a11065f6e..e3fc0cc8c 100644
--- 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', () => {
);
- 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
index 300998f88..2ec000fcd 100644
--- 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', () => {
);
- 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
index 3fe3ce342..5d3ac6dbf 100644
--- 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', () => {
);
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', () => {
);
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', () => {
);
-
- 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
new file mode 100644
index 000000000..18e1ec8d4
--- /dev/null
+++ 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 (
+ 
+ );
+};
+
+export default UserAvatar;
diff --git a/src/components/common/UserAvatar/userAvatar.module.scss b/src/components/common/UserAvatar/userAvatar.module.scss
new file mode 100644
index 000000000..6a139edde
--- /dev/null
+++ 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
index 3385a702b..44d3471e8 100644
--- 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
index 8d5a56a05..6c631dd4d 100644
--- 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({
{isDevMode &&
(username === '' ? (
-
) : (
@@ -120,14 +114,9 @@ export default function LatestProgressUpdateCardPresentation({
]
}
>
-
diff --git a/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx b/src/components/taskDetails/ProgressUpdateCard/ProgressUpdateCardPresentation.tsx
index 1dad51501..96c9df538 100644
--- 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 === '' ? (
-
) : (
-
))}
+
diff --git a/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss b/src/components/taskDetails/ProgressUpdateCard/latest-progress-update-card.module.scss
index eba6ca1ad..31b323c4c 100644
--- 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
index 37b4fe56a..afed110b8 100644
--- 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;