Feat/63412/change avatar profile

libs/components/src/lib/components/ChannelTopbar/index.tsx

@@ -222,7 +222,10 @@ const TopBarChannelText = memo(() => {
 				)}
 
 				{currentClanId === '0' && (
-					<div className="flex items-center gap-3 flex-1 overflow-hidden">
+					<div
+						className="flex items-center gap-3 flex-1 overflow-hidden"
+						data-e2e={generateE2eId(`chat.direct_message.header.left_container`)}
+					>
 						<DmTopbarAvatar
 							isGroup={currentDmGroup?.type === ChannelType.CHANNEL_TYPE_GROUP}
 							avatar={dmUserAvatar}
@@ -446,7 +449,7 @@ const DmTopbarAvatar = ({ isGroup, avatar, avatarName }: { isGroup: boolean; ava
 	return (
 		<div className="flex items-center justify-center ">
 			{avatar ? (
-				<img className="w-8 h-8 rounded-full object-cover " src={createImgproxyUrl(avatar)} alt="" />
+				<img className="w-8 h-8 rounded-full object-cover " src={createImgproxyUrl(avatar)} alt="" data-e2e={generateE2eId(`avatar.image`)} />
 			) : (
 				<div className="w-8 h-8 rounded-full uppercase flex items-center justify-center font-semibold dark:bg-bgAvatarLight dark:text-bgAvatarDark text-bgAvatarLight">
 					{avatarName}
@@ -682,7 +685,11 @@ const DmTopbarTools = memo(() => {
 						</button>
 					)}
 					{currentDmGroup?.type === ChannelType.CHANNEL_TYPE_DM && (
-						<button title={t('tooltips.showUserProfile')} onClick={() => setIsUseProfileDM(!isUseProfileDM)}>
+						<button
+							title={t('tooltips.showUserProfile')}
+							onClick={() => setIsUseProfileDM(!isUseProfileDM)}
+							data-e2e={generateE2eId(`chat.direct_message.header.right_container.user_profile`)}
+						>
 							<span>
 								<Icons.IconUserProfileDM defaultSize="size-5" />
 							</span>

libs/components/src/lib/components/ChatWelcome/index.tsx

@@ -80,7 +80,7 @@ function ChatWelCome({ name, username, avatarDM, mode, isPrivate }: ChatWelComeP
 
 	return (
 		<div className="flex flex-col gap-3">
-			<div className="space-y-2 px-4 mb-0  flex-1 flex flex-col justify-end">
+			<div className="space-y-2 px-4 mb-0  flex-1 flex flex-col justify-end" data-e2e={generateE2eId('chat_welcome')}>
 				{
 					<>
 						{isChannel && (

libs/components/src/lib/components/SettingAccount/index.tsx

@@ -77,7 +77,7 @@ const SettingAccount = ({ onSettingProfile, menuIsOpen }: SettingAccountProps) =
 			<div className="w-full rounded-lg overflow-hidden bg-theme-setting-nav">
 				<div style={{ backgroundColor: color }} className="h-[100px]  "></div>
 				<div className="flex justify-between relative -top-5 px-4 flex-col sbm:flex-row sbm:items-center">
-					<div className="flex items-center gap-x-4">
+					<div className="flex items-center gap-x-4" data-e2e={generateE2eId(`user_setting.account.info`)}>
 						<AvatarImage
 							alt={userProfile?.user?.username || ''}
 							username={userProfile?.user?.username}

libs/components/src/lib/components/SettingProfile/SettingUserClanProfileCard.tsx

@@ -1,6 +1,7 @@
 import { useAuth, useMemberStatus } from '@mezon/core';
 import { selectAccountCustomStatus } from '@mezon/store';
 import { Icons } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import AvatarProfile from '../ModalUserProfile/AvatarProfile';
@@ -57,7 +58,7 @@ const SettingUserClanProfileCard = (props: propProfilesform) => {
 			<div className="p-4 flex flex-col gap-4">
 				<div className="bg-theme-setting-primary text-theme-primary border-theme-primary shadow w-full p-4 rounded-[10px] flex flex-col gap-y-6 xl:gap-y-7">
 					<div className="w-[300px]">
-						<p className="font-bold tracking-wider text-xl one-line">
+						<p className="font-bold tracking-wider text-xl one-line" data-e2e={generateE2eId('user_setting.profile.user_profile.preview.display_name')}>
 							{profiles.displayName || currentDisplayName || userProfile?.user?.username}
 						</p>
 						<p className="font-medium tracking-wide text-sm">{userProfile?.user?.username}</p>

libs/utils/src/lib/e2e-testing/constants.ts

@@ -40,6 +40,7 @@ export const DATA_E2E_IDENTIFIER = {
 	panel: {
 		panel_item: ''
 	},
+	chat_welcome: '',
 	homepage: {
 		header: {
 			link: '',
@@ -294,6 +295,12 @@ export const DATA_E2E_IDENTIFIER = {
 	},
 	chat: {
 		direct_message: {
+			header: {
+				left_container: '',
+				right_container: {
+					user_profile: ''
+				}
+			},
 			chat_list: '',
 			chat_item: {
 				username: '',
@@ -438,14 +445,16 @@ export const DATA_E2E_IDENTIFIER = {
 			edit_display_name: '',
 			edit_username: '',
 			set_password: '',
-			tab_account: ''
+			tab_account: '',
+			info: ''
 		},
 		profile: {
 			button_setting: '',
 			tab_profile: '',
 			user_profile: {
 				preview: {
-					avatar: ''
+					avatar: '',
+					display_name: ''
 				},
 				input: {
 					display_name: '',