From 3cf526f94c9d9d080024e875ad18bb07397f753c Mon Sep 17 00:00:00 2001
From: thieuthang-dev <thang.thieuquang@ncc.asia>
Date: Thu, 25 Sep 2025 13:07:51 +0700
Subject: [PATCH] feat: e2e for change channel status

---
 apps/chat/src/app/pages/channel/index.tsx     |  2 ++
 .../components/ChannelLink/ChannelLink.tsx    |  1 +
 .../Component/Modal/modalAskChangeChannel.tsx | 13 +++++++--
 .../PermissionManage/index.tsx                |  3 +-
 .../Component/PermissionsChannel/index.tsx    | 12 +++++---
 .../listMemberPermission.tsx                  |  8 ++++--
 .../PermissionsChannel/listRolePermission.tsx |  8 ++++--
 .../MemberProfile/MemberProfile.tsx           |  7 ++++-
 libs/ui/src/lib/Icons/icons.tsx               | 19 +++++++++++--
 libs/utils/src/lib/e2e-testing/constants.ts   | 28 +++++++++++++++++++
 10 files changed, 87 insertions(+), 14 deletions(-)

diff --git a/apps/chat/src/app/pages/channel/index.tsx b/apps/chat/src/app/pages/channel/index.tsx
index 05e27c5b99..5c6eb3eeb0 100644
--- a/apps/chat/src/app/pages/channel/index.tsx
+++ b/apps/chat/src/app/pages/channel/index.tsx
@@ -40,6 +40,7 @@ import {
 	EOverriddenPermission,
 	ParticipantMeetState,
 	SubPanelName,
+	generateE2eId,
 	isBackgroundModeActive,
 	isLinuxDesktop,
 	isWindowsDesktop,
@@ -350,6 +351,7 @@ const ChannelMainContent = ({ channelId }: ChannelMainContentProps) => {
 							onContextMenu={(event) => event.preventDefault()}
 							className={`border-l border-solid border-color-primary text-theme-primary relative overflow-y-scroll hide-scrollbar flex} ${closeMenu && !statusMenu && isShowMemberList ? 'w-full' : 'w-widthMemberList'}`}
 							id="memberList"
+							data-e2e={generateE2eId('clan_page.secondary_side_bar')}
 						>
 							<MemberList />
 						</div>
diff --git a/libs/components/src/lib/components/ChannelLink/ChannelLink.tsx b/libs/components/src/lib/components/ChannelLink/ChannelLink.tsx
index 352fa2e2eb..7d0640ad9f 100644
--- a/libs/components/src/lib/components/ChannelLink/ChannelLink.tsx
+++ b/libs/components/src/lib/components/ChannelLink/ChannelLink.tsx
@@ -241,6 +241,7 @@ 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/ChannelSetting/Component/Modal/modalAskChangeChannel.tsx b/libs/components/src/lib/components/ChannelSetting/Component/Modal/modalAskChangeChannel.tsx
index 873f9f97aa..3f2786166b 100644
--- a/libs/components/src/lib/components/ChannelSetting/Component/Modal/modalAskChangeChannel.tsx
+++ b/libs/components/src/lib/components/ChannelSetting/Component/Modal/modalAskChangeChannel.tsx
@@ -1,3 +1,4 @@
+import { generateE2eId } from '@mezon/utils';
 import { useTranslation } from 'react-i18next';
 
 export type ModalAskChangeChannelProps = {
@@ -18,10 +19,18 @@ const ModalAskChangeChannel = (props: ModalAskChangeChannelProps) => {
 				<p className={`text-[15px] ${className ? 'hidden' : ''}`}>{t('unsavedChanges.warning')}</p>
 			</div>
 			<div className="flex flex-row justify-end gap-3">
-				<button className="text-[15px] bg-gray-600 rounded-[4px] p-[8px]" onClick={onReset}>
+				<button
+					className="text-[15px] bg-gray-600 rounded-[4px] p-[8px]"
+					onClick={onReset}
+					data-e2e={generateE2eId('channel_setting_page.permissions.modal.ask_change.button.reset')}
+				>
 					{t('unsavedChanges.reset')}
 				</button>
-				<button className="text-[15px] ml-auto bg-blue-600 rounded-[4px] p-[8px] text-nowrap" onClick={onSave}>
+				<button
+					className="text-[15px] ml-auto bg-blue-600 rounded-[4px] p-[8px] text-nowrap"
+					onClick={onSave}
+					data-e2e={generateE2eId('channel_setting_page.permissions.modal.ask_change.button.save_changes')}
+				>
 					{t('unsavedChanges.saveChanges')}
 				</button>
 			</div>
diff --git a/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/PermissionManage/index.tsx b/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/PermissionManage/index.tsx
index 5bbf80aea3..e848ccba7e 100644
--- a/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/PermissionManage/index.tsx
+++ b/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/PermissionManage/index.tsx
@@ -1,4 +1,5 @@
 import { Icons } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 import React, { memo, useState } from 'react';
 import MainPermissionManage from './MainPermissionManage';
 
@@ -22,7 +23,7 @@ const PermissionManage: React.FC<PermissionManageProps> = ({
 	const [showRole, setShowRole] = useState(true);
 	return (
 		channelPrivate && (
-			<div>
+			<div data-e2e={generateE2eId('channel_setting_page.permissions.section.advanced_permissions')}>
 				<HeaderPermissionManage showRole={showRole} setShowRole={setShowRole} />
 				{showRole && (
 					<MainPermissionManage
diff --git a/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/index.tsx b/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/index.tsx
index f7d1d31ec3..eb416a7d3d 100644
--- a/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/index.tsx
+++ b/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/index.tsx
@@ -1,7 +1,7 @@
 import { useAuth } from '@mezon/core';
 import { channelsActions, useAppDispatch } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import type { IChannel } from '@mezon/utils';
+import { generateE2eId, type IChannel } from '@mezon/utils';
 import type { MutableRefObject, RefObject } from 'react';
 import { memo, useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -116,10 +116,14 @@ const PermissionsChannel = (props: PermissionsChannelProps) => {
 								checked={valueToggle}
 								id="id-c01"
 								onChange={handleToggle}
+								data-e2e={generateE2eId('channel_setting_page.permissions.button.change_status')}
 							/>
 						</div>
 						{valueToggle && (
-							<div className="p-4 bg-theme-setting-nav border-theme-primary">
+							<div
+								className="p-4 bg-theme-setting-nav border-theme-primary"
+								data-e2e={generateE2eId('channel_setting_page.permissions.section.member_role_management')}
+							>
 								<div className="flex justify-between items-center pb-4">
 									<p className="uppercase font-bold text-xs text-theme-primary">{t('channelPermission.whoCanAccess')}</p>
 									<button className="btn-primary btn-primary-hover px-4 py-1 rounded-lg " onClick={openAddMemRoleModal}>
@@ -129,14 +133,14 @@ const PermissionsChannel = (props: PermissionsChannelProps) => {
 								<hr className="border-t border-solid dark:border-borderDefault border-bgModifierHoverLight" />
 								<div className="py-4">
 									<p className="uppercase font-bold text-xs pb-4 text-theme-primary">{t('channelPermission.roles')}</p>
-									<div>
+									<div data-e2e={generateE2eId('channel_setting_page.permissions.section.member_role_management.role_list')}>
 										<ListRolePermission channel={channel} selectedRoleIds={selectedRoleIds} />
 									</div>
 								</div>
 								<hr className="border-t border-solid dark:border-borderDefault border-bgModifierHoverLight" />
 								<div className="py-4">
 									<p className="uppercase font-bold text-xs pb-4 text-theme-primary">{t('channelPermission.members')}</p>
-									<div>
+									<div data-e2e={generateE2eId('channel_setting_page.permissions.section.member_role_management.member_list')}>
 										<ListMemberPermission channel={channel} selectedUserIds={selectedUserIds} />
 									</div>
 								</div>
diff --git a/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/listMemberPermission.tsx b/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/listMemberPermission.tsx
index ca56b7db17..f3122776da 100644
--- a/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/listMemberPermission.tsx
+++ b/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/listMemberPermission.tsx
@@ -1,7 +1,7 @@
 import { useAppNavigation, useAuth, useCustomNavigate } from '@mezon/core';
 import { channelUsersActions, removeChannelUsersPayload, selectAllUserChannel, selectCurrentClanId, useAppDispatch } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { IChannel, createImgproxyUrl, getAvatarForPrioritize, getNameForPrioritize } from '@mezon/utils';
+import { IChannel, createImgproxyUrl, generateE2eId, getAvatarForPrioritize, getNameForPrioritize } from '@mezon/utils';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { AvatarImage } from '../../../AvatarImage/AvatarImage';
@@ -81,7 +81,11 @@ const ItemMemberPermission = (props: ItemMemberPermissionProps) => {
 	};
 
 	return (
-		<div className={`flex justify-between py-2 rounded text-theme-primary`} key={id}>
+		<div
+			className={`flex justify-between py-2 rounded text-theme-primary`}
+			key={id}
+			data-e2e={generateE2eId('channel_setting_page.permissions.section.member_role_management.member_list.member_item')}
+		>
 			<div className="flex gap-x-2 items-center">
 				<AvatarImage
 					alt={username}
diff --git a/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/listRolePermission.tsx b/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/listRolePermission.tsx
index aea09a82a0..ac20551794 100644
--- a/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/listRolePermission.tsx
+++ b/libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/listRolePermission.tsx
@@ -1,6 +1,6 @@
 import { channelUsersActions, selectAllRolesClan, selectCurrentClanId, selectRolesByChannelId, useAppDispatch } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { IChannel } from '@mezon/utils';
+import { generateE2eId, IChannel } from '@mezon/utils';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 type ListRolePermissionProps = {
@@ -36,7 +36,11 @@ const ListRolePermission = (props: ListRolePermissionProps) => {
 	};
 	return listRolesInChannel.length !== 0 ? (
 		listRolesInChannel.map((role) => (
-			<div className={`flex justify-between text-theme-primary py-2 rounded`} key={role.id}>
+			<div
+				className={`flex justify-between text-theme-primary py-2 rounded`}
+				key={role.id}
+				data-e2e={generateE2eId('channel_setting_page.permissions.section.member_role_management.role_list.role_item')}
+			>
 				<div className="flex gap-x-2 items-center">
 					<Icons.RoleIcon defaultSize="w-5 h-5 min-w-5" />
 					<p className="text-sm">{role.title}</p>
diff --git a/libs/components/src/lib/components/MemberProfile/MemberProfile.tsx b/libs/components/src/lib/components/MemberProfile/MemberProfile.tsx
index 0391164840..0b8b8cd11b 100644
--- a/libs/components/src/lib/components/MemberProfile/MemberProfile.tsx
+++ b/libs/components/src/lib/components/MemberProfile/MemberProfile.tsx
@@ -42,7 +42,12 @@ export const BaseMemberProfile = ({ id, user, userMeta, username, avatar, isOwne
 
 	return (
 		<div className={`relative group w-full ${isOffline ? 'opacity-50' : ''}`}>
-			<div onContextMenu={handleContextMenu} onClick={onClick} className="cursor-pointer flex items-center gap-[9px] relative">
+			<div
+				onContextMenu={handleContextMenu}
+				onClick={onClick}
+				className="cursor-pointer flex items-center gap-[9px] relative"
+				data-e2e={generateE2eId('clan_page.secondary_side_bar.member')}
+			>
 				<div className="relative">
 					<AvatarImage
 						alt={username}
diff --git a/libs/ui/src/lib/Icons/icons.tsx b/libs/ui/src/lib/Icons/icons.tsx
index 00997927ea..fe9c607eb6 100644
--- a/libs/ui/src/lib/Icons/icons.tsx
+++ b/libs/ui/src/lib/Icons/icons.tsx
@@ -1,3 +1,4 @@
+import { generateE2eId } from '@mezon/utils';
 import React, { useState } from 'react';
 
 export * from './attachmentThumb';
@@ -1274,7 +1275,15 @@ export const SpeakerLocked: React.FC<IconProps> = ({ defaultFill, defaultSize =
 
 export const HashtagLocked: React.FC<IconProps> = ({ defaultSize = 'w-5 h-5' }) => {
 	return (
-		<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={`block  ${defaultSize}`}>
+		<svg
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={`block  ${defaultSize}`}
+			data-e2e={generateE2eId('clan_page.channel_list.item.icon.hashtag_lock')}
+		>
 			<g>
 				<path
 					d="M17.4393 9.4715L17.6833 8.6585H11.7483C11.5857 8.6585 11.4231 8.49589 11.4231 8.33329V7.76419H9.14667L10.2036 3.86175H8.41496L7.35805 7.76419H3.37431L2.8865 9.4715H6.87024L6.05724 12.3983H2.1548L1.66699 14.1056H5.65073L4.51252 18.3333H6.30114L7.43935 14.1056H10.5288L9.39057 18.3333H11.1792L12.3174 14.1056H16.3011L16.7889 12.3983H12.8052L13.6182 9.4715H17.4393ZM10.9353 12.3983H7.84585L8.65886 9.4715H11.7483L10.9353 12.3983Z"
@@ -1312,7 +1321,13 @@ export function HashtagWarning(props: React.HTMLAttributes<SVGElement>) {
 
 export const Hashtag: React.FC<IconProps> = ({ defaultSize = 'w-5 h-5', className = '' }) => {
 	return (
-		<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={`block ${defaultSize} ${className}`}>
+		<svg
+			viewBox="0 0 20 20"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={`block ${defaultSize} ${className}`}
+			data-e2e={generateE2eId('clan_page.channel_list.item.icon.hashtag')}
+		>
 			<g className="translate-x-[1px] translate-y-[2px]">
 				<path
 					d="M3.56915 15.415L4.73001 11.0721H0.666992L1.13341 9.31012H5.20679L6.00489 6.28358H1.94187L2.41865 4.53192H6.48167L7.55961 0.5H9.38382L8.29552 4.53192H11.4568L12.5347 0.5H14.3589L13.2706 4.53192H17.3337L16.8672 6.28358H12.8042L11.9854 9.31012H16.0484L15.582 11.0721H11.519L10.3581 15.415H8.54427L9.69477 11.0721H6.54386L5.383 15.415H3.56915ZM7.02064 9.31012H10.1716L10.98 6.28358H7.8291L7.02064 9.31012Z"
diff --git a/libs/utils/src/lib/e2e-testing/constants.ts b/libs/utils/src/lib/e2e-testing/constants.ts
index 5120f617fe..4a023fa2c4 100644
--- a/libs/utils/src/lib/e2e-testing/constants.ts
+++ b/libs/utils/src/lib/e2e-testing/constants.ts
@@ -233,6 +233,7 @@ export const DATA_E2E_IDENTIFIER = {
 			item: {
 				icon: {
 					hashtag: '',
+					hashtag_lock: '',
 					voice: '',
 					stream: ''
 				},
@@ -247,12 +248,39 @@ export const DATA_E2E_IDENTIFIER = {
 			settings: {
 				overview: ''
 			}
+		},
+		secondary_side_bar: {
+			member: ''
 		}
 	},
 	channel_setting_page: {
 		side_bar: {
 			item: ''
 		},
+		permissions: {
+			button: {
+				change_status: ''
+			},
+			section: {
+				member_role_management: {
+					role_list: {
+						role_item: ''
+					},
+					member_list: {
+						member_item: ''
+					}
+				},
+				advanced_permissions: ''
+			},
+			modal: {
+				ask_change: {
+					button: {
+						reset: '',
+						save_changes: ''
+					}
+				}
+			}
+		},
 		webhook: {
 			button: {
 				create_webhook: '',