From 58646d6b6bad94c8ac2356e9520a1f9ec0e4313c Mon Sep 17 00:00:00 2001 From: thieuthang-dev Date: Mon, 29 Sep 2025 17:23:34 +0700 Subject: [PATCH] feat: data e2e for testcase join, leave voice channel --- .../src/lib/components/Avatar/AvatarGroup.tsx | 6 +++- .../components/ChannelLink/ChannelLink.tsx | 1 - .../components/ChannelList/ChannelList.tsx | 3 +- .../ClanSettings/SettingChannel/index.tsx | 4 +-- .../lib/components/MemberList/listMember.tsx | 2 +- .../UserListItemVoiceChannel.tsx | 3 +- .../PreJoinVoiceChannel.tsx | 2 ++ .../VoiceChannel/VoiceInfo/VoiceInfo.tsx | 4 ++- libs/ui/src/lib/Icons/icons.tsx | 10 ++++++- libs/utils/src/lib/e2e-testing/constants.ts | 28 +++++++++++++++++-- 10 files changed, 52 insertions(+), 11 deletions(-) diff --git a/libs/components/src/lib/components/Avatar/AvatarGroup.tsx b/libs/components/src/lib/components/Avatar/AvatarGroup.tsx index bc418368df..f14823fb03 100644 --- 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 ( -
+
+{number}
); diff --git a/libs/components/src/lib/components/ChannelLink/ChannelLink.tsx b/libs/components/src/lib/components/ChannelLink/ChannelLink.tsx index 7d0640ad9f..352fa2e2eb 100644 --- a/libs/components/src/lib/components/ChannelLink/ChannelLink.tsx +++ b/libs/components/src/lib/components/ChannelLink/ChannelLink.tsx @@ -241,7 +241,6 @@ const ChannelLinkComponent = ({ {state === 'inactiveUnread' &&
} diff --git a/libs/components/src/lib/components/ChannelList/ChannelList.tsx b/libs/components/src/lib/components/ChannelList/ChannelList.tsx index 7dd046e7ba..b083a92313 100644 --- 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')} > +
{ userStatus={ <> {userVoiceStatus ? ( - + In voice diff --git a/libs/components/src/lib/components/UserListVoiceChannel/UserListItemVoiceChannel.tsx b/libs/components/src/lib/components/UserListVoiceChannel/UserListItemVoiceChannel.tsx index 0d2322965d..62c0a82834 100644 --- 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 (
diff --git a/libs/components/src/lib/components/VoiceChannel/PreJoinVoiceChannel/PreJoinVoiceChannel.tsx b/libs/components/src/lib/components/VoiceChannel/PreJoinVoiceChannel/PreJoinVoiceChannel.tsx index 3ed5271b67..21cd1572fd 100644 --- 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 = ({ 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'} diff --git a/libs/components/src/lib/components/VoiceChannel/VoiceInfo/VoiceInfo.tsx b/libs/components/src/lib/components/VoiceChannel/VoiceInfo/VoiceInfo.tsx index f563eef98d..eebe9ea1e4 100644 --- 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(() => {
@@ -222,6 +223,7 @@ const ButtonControlVoice = memo(({ onClick, overlay, danger = false, icon }: But diff --git a/libs/ui/src/lib/Icons/icons.tsx b/libs/ui/src/lib/Icons/icons.tsx index fe9c607eb6..987598c749 100644 --- 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) { return ( - + diff --git a/libs/utils/src/lib/e2e-testing/constants.ts b/libs/utils/src/lib/e2e-testing/constants.ts index a645978700..e578ff18f6 100644 --- 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 extends object