kientrinh-dev · dungxbuif-ncc · Oct 2, 2025 · Sep 29, 2025
diff --git a/libs/components/src/lib/components/Avatar/AvatarGroup.tsx b/libs/components/src/lib/components/Avatar/AvatarGroup.tsx
@@ -1,3 +1,4 @@
+import { generateE2eId } from '@mezon/utils';
 import { ReactNode } from 'react';
 
 interface IAvatarGroup {
@@ -14,7 +15,10 @@ export const AvatarRound = ({ className, src }: { className?: string; src: strin
 
 export const AvatarCount = ({ number }: { number: number }) => {
 	return (
-		<div className="h-6 w-6 rounded-full aspect-square text-xs font-medium border-2 border-bgModifierHover flex items-center justify-center dark:text-bgLightPrimary text-bgPrimary ring-transparent dark:bg-bgTertiary bg-bgLightTertiary dark:hover:bg-bgTertiary hover:bg-bgLightTertiary">
+		<div
+			className="h-6 w-6 rounded-full aspect-square text-xs font-medium border-2 border-bgModifierHover flex items-center justify-center dark:text-bgLightPrimary text-bgPrimary ring-transparent dark:bg-bgTertiary bg-bgLightTertiary dark:hover:bg-bgTertiary hover:bg-bgLightTertiary"
+			data-e2e={generateE2eId('clan_page.channel_list.item.user_list_collapsed.item_count')}
+		>
 			+{number}
 		</div>
 	);

diff --git a/libs/components/src/lib/components/ChannelLink/ChannelLink.tsx b/libs/components/src/lib/components/ChannelLink/ChannelLink.tsx
@@ -241,7 +241,6 @@ const ChannelLinkComponent = ({
 					<span
 						ref={channelLinkRef}
 						className={`flex flex-row items-center rounded relative flex-1 pointer-events-none  ${hightLightTextChannel ? ' font-semibold text-theme-primary-active' : 'font-medium '}`}
-						data-e2e={generateE2eId('clan_page.channel_list.item')}
 					>
 						{state === 'inactiveUnread' && <div className="absolute left-0 -ml-2 w-1 h-2 bg-white rounded-r-full"></div>}
 

diff --git a/libs/components/src/lib/components/ChannelList/ChannelList.tsx b/libs/components/src/lib/components/ChannelList/ChannelList.tsx
@@ -19,7 +19,7 @@ import {
 	useAppSelector
 } from '@mezon/store';
 import type { ChannelThreads, ICategoryChannel, IChannel } from '@mezon/utils';
-import { EPermission, createImgproxyUrl, isLinuxDesktop, isWindowsDesktop, toggleDisableHover, useSyncEffect } from '@mezon/utils';
+import { EPermission, createImgproxyUrl, generateE2eId, isLinuxDesktop, isWindowsDesktop, toggleDisableHover, useSyncEffect } from '@mezon/utils';
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useModal } from 'react-modal-hook';
 import { useSelector } from 'react-redux';
@@ -391,6 +391,7 @@ const RowVirtualizerDynamic = memo(({ permissions }: { permissions: IChannelLink
 										onDragEnter={(e) => handleDragEnter(virtualRow.index, e, `${item.category_id}-${item.id}`)}
 										onDragEnd={() => handleDragEnd(virtualRow.index)}
 										ref={virtualizer.measureElement}
+										data-e2e={generateE2eId('clan_page.channel_list.item')}
 									>
 										<ChannelListItem
 											isActive={currentChannelId === (item as IChannel).channel_id && !(item as IChannel).isFavor}

diff --git a/libs/components/src/lib/components/ClanSettings/SettingChannel/index.tsx b/libs/components/src/lib/components/ClanSettings/SettingChannel/index.tsx
@@ -7,7 +7,7 @@ import {
 	useAppSelector
 } from '@mezon/store';
 import { Icons, Menu, Pagination } from '@mezon/ui';
-import { createImgproxyUrl, getAvatarForPrioritize } from '@mezon/utils';
+import { createImgproxyUrl, generateE2eId, getAvatarForPrioritize } from '@mezon/utils';
 import { formatDistance } from 'date-fns';
 import { ChannelType } from 'mezon-js';
 import type { ApiChannelMessageHeader, ApiChannelSettingItem } from 'mezon-js/api.gen';
@@ -366,7 +366,7 @@ export const AvatarUserShort = ({ id, showName = false }: { id: string; showName
 	const avatarUrl = getAvatarForPrioritize(member?.clan_avatar, member?.user?.avatar_url) || 'assets/avatar-user.svg';
 
 	return (
-		<div className="flex items-center gap-3">
+		<div className="flex items-center gap-3" data-e2e={generateE2eId('clan_page.channel_list.item.user_list_collapsed.item')}>
 			<img
 				src={createImgproxyUrl(avatarUrl, { width: 24, height: 24, resizeType: 'fit' })}
 				className="rounded-full h-6 aspect-square object-cover"

diff --git a/libs/components/src/lib/components/MemberList/listMember.tsx b/libs/components/src/lib/components/MemberList/listMember.tsx
@@ -85,7 +85,7 @@ const MemoizedMemberItem = memo((props: MemberClanProps) => {
 			userStatus={
 				<>
 					{userVoiceStatus ? (
-						<span className="flex items-center gap-1">
+						<span className="flex items-center gap-1" data-e2e={generateE2eId('clan_page.secondary_side_bar.member.in_voice')}>
 							<Icons.Speaker className="text-green-500 !w-3 !h-3" />
 							In voice
 						</span>

diff --git a/libs/components/src/lib/components/UserListVoiceChannel/UserListItemVoiceChannel.tsx b/libs/components/src/lib/components/UserListVoiceChannel/UserListItemVoiceChannel.tsx
@@ -1,7 +1,7 @@
 import { selectMemberClanByUserId, useAppSelector } from '@mezon/store';
 import { Icons, NameComponent } from '@mezon/ui';
 import type { IChannelMember } from '@mezon/utils';
-import { createImgproxyUrl, getAvatarForPrioritize, getNameForPrioritize } from '@mezon/utils';
+import { createImgproxyUrl, generateE2eId, getAvatarForPrioritize, getNameForPrioritize } from '@mezon/utils';
 import { AvatarImage } from '../../components';
 
 function UserListItem({ user, channelID, isPttList }: { user: IChannelMember; channelID: string; isPttList?: boolean }) {
@@ -12,6 +12,7 @@ function UserListItem({ user, channelID, isPttList }: { user: IChannelMember; ch
 	return (
 		<div
 			className={`bg-item-hover text-theme-primary-hover w-[90%] flex p-1 ${isPttList ? 'w-full' : 'ml-5'} items-center gap-3 cursor-pointer rounded-sm`}
+			data-e2e={generateE2eId('clan_page.channel_list.item.user_list.item')}
 		>
 			<div className="w-5 h-5 rounded-full scale-75">
 				<div className="w-8 h-8 mt-[-0.3rem]">

diff --git a/libs/components/src/lib/components/VoiceChannel/PreJoinVoiceChannel/PreJoinVoiceChannel.tsx b/libs/components/src/lib/components/VoiceChannel/PreJoinVoiceChannel/PreJoinVoiceChannel.tsx
@@ -1,4 +1,5 @@
 import { ChannelsEntity, selectStatusMenu, selectVoiceChannelMembersByChannelId, useAppSelector } from '@mezon/store';
+import { generateE2eId } from '@mezon/utils';
 import { VoiceChannelUsers } from './VoiceChannelUsers/VoiceChannelUsers';
 
 interface PreJoinVoiceChannelProps {
@@ -37,6 +38,7 @@ export const PreJoinVoiceChannel: React.FC<PreJoinVoiceChannelProps> = ({ channe
 					disabled={!roomName || loading}
 					className={`bg-green-700 rounded-3xl p-2 ${roomName ? 'hover:bg-green-600' : 'opacity-50'}`}
 					onClick={handleJoinRoom}
+					data-e2e={generateE2eId('clan_page.screen.voice_room.button.join_voice')}
 				>
 					{loading ? 'Joining...' : 'Join Voice'}
 				</button>

diff --git a/libs/components/src/lib/components/VoiceChannel/VoiceInfo/VoiceInfo.tsx b/libs/components/src/lib/components/VoiceChannel/VoiceInfo/VoiceInfo.tsx
@@ -11,7 +11,7 @@ import {
 	voiceActions
 } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { ParticipantMeetState, useMediaPermissions } from '@mezon/utils';
+import { ParticipantMeetState, generateE2eId, useMediaPermissions } from '@mezon/utils';
 import isElectron from 'is-electron';
 import { ChannelType } from 'mezon-js';
 import Tooltip from 'rc-tooltip';
@@ -144,6 +144,7 @@ const VoiceInfo = React.memo(() => {
 		<div
 			className={`flex flex-col gap-2 rounded-t-lg border-b-2 border-theme-primary px-4 py-2 hover:bg-gray-550/[0.16] shadow-sm transition
 			bg-theme-chat w-full group`}
+			data-e2e={generateE2eId('modal.voice_management')}
 		>
 			<div className="flex justify-between items-center">
 				<div className="flex flex-col max-w-[200px]">
@@ -222,6 +223,7 @@ const ButtonControlVoice = memo(({ onClick, overlay, danger = false, icon }: But
 			<button
 				className={`flex h-8 flex-1 justify-center items-center ${danger ? 'bg-[#da373c] hover:bg-[#a12829]' : 'bg-buttonSecondary hover:bg-buttonSecondaryHover'} p-[6px] rounded-md`}
 				onClick={onClick}
+				data-e2e={generateE2eId('modal.voice_management.button.control_item')}
 			>
 				{icon}
 			</button>

diff --git a/libs/ui/src/lib/Icons/icons.tsx b/libs/ui/src/lib/Icons/icons.tsx
@@ -3316,7 +3316,15 @@ export function Stream({ defaultFill, defaultSize = 'w-5 h-5' }: IconProps) {
 
 export function EndCall(props: React.HTMLAttributes<SVGElement>) {
 	return (
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" preserveAspectRatio="xMidYMid meet" {...props}>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			width="24"
+			height="24"
+			preserveAspectRatio="xMidYMid meet"
+			{...props}
+			data-e2e={generateE2eId('icon.end_call')}
+		>
 			<defs>
 				<clipPath id="__lottie_element_258">
 					<rect width="24" height="24" x="0" y="0"></rect>

diff --git a/libs/utils/src/lib/e2e-testing/constants.ts b/libs/utils/src/lib/e2e-testing/constants.ts
@@ -238,7 +238,14 @@ export const DATA_E2E_IDENTIFIER = {
 					voice: '',
 					stream: ''
 				},
-				name: ''
+				name: '',
+				user_list: {
+					item: ''
+				},
+				user_list_collapsed: {
+					item: '',
+					item_count: ''
+				}
 			},
 			thread_item: {
 				name: ''
@@ -251,7 +258,16 @@ export const DATA_E2E_IDENTIFIER = {
 			}
 		},
 		secondary_side_bar: {
-			member: ''
+			member: {
+				in_voice: ''
+			}
+		},
+		screen: {
+			voice_room: {
+				button: {
+					join_voice: ''
+				}
+			}
 		}
 	},
 	channel_setting_page: {
@@ -510,7 +526,15 @@ export const DATA_E2E_IDENTIFIER = {
 				confirm: '',
 				cancel: ''
 			}
+		},
+		voice_management: {
+			button: {
+				control_item: ''
+			}
 		}
+	},
+	icon: {
+		end_call: ''
 	}
 };
 type DotNestedKeys<T> = T extends object