From 135b32ffe93e690e117c5d0524267f2f3a6db45a Mon Sep 17 00:00:00 2001
From: thieuthang-dev <thang.thieuquang@ncc.asia>
Date: Tue, 16 Sep 2025 17:42:03 +0700
Subject: [PATCH 1/3] feat: add e2e for category management

---
 .../src/lib/components/ModalConfirm/index.tsx      |  8 +++++++-
 .../src/lib/components/PanelCategory/index.tsx     |  2 ++
 .../src/lib/components/PanelChannel/ItemPanel.tsx  |  2 ++
 libs/utils/src/lib/e2e-testing/constants.ts        | 14 ++++++++++++++
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/libs/components/src/lib/components/ModalConfirm/index.tsx b/libs/components/src/lib/components/ModalConfirm/index.tsx
index 09304ad087..6cd81eab6b 100644
--- a/libs/components/src/lib/components/ModalConfirm/index.tsx
+++ b/libs/components/src/lib/components/ModalConfirm/index.tsx
@@ -1,4 +1,5 @@
 import { useEscapeKeyClose } from '@mezon/core';
+import { generateE2eId } from '@mezon/utils';
 import { useEffect, useRef } from 'react';
 
 interface ModalConfirmProps {
@@ -66,10 +67,15 @@ const ModalConfirm = ({
 					<div
 						onClick={handleCancel}
 						className="hover:underline px-4 rounded-lg text-theme-primary text-theme-primary-hover  cursor-pointer"
+						data-e2e={generateE2eId('modal.confirm_modal.button.cancel')}
 					>
 						Cancel
 					</div>
-					<div className={`${buttonColor}  text-white rounded-lg px-[25px] py-[8px] cursor-pointer`} onClick={handleConfirm}>
+					<div
+						className={`${buttonColor}  text-white rounded-lg px-[25px] py-[8px] cursor-pointer`}
+						onClick={handleConfirm}
+						data-e2e={generateE2eId('modal.confirm_modal.button.confirm')}
+					>
 						{buttonName}
 					</div>
 				</div>
diff --git a/libs/components/src/lib/components/PanelCategory/index.tsx b/libs/components/src/lib/components/PanelCategory/index.tsx
index 00d76efbbb..4bcda36ee6 100644
--- a/libs/components/src/lib/components/PanelCategory/index.tsx
+++ b/libs/components/src/lib/components/PanelCategory/index.tsx
@@ -19,6 +19,7 @@ import {
 	FOR_24_HOURS,
 	FOR_3_HOURS,
 	FOR_8_HOURS,
+	generateE2eId,
 	ICategoryChannel,
 	MUTE
 } from '@mezon/utils';
@@ -216,6 +217,7 @@ const PanelCategory: React.FC<IPanelCategoryProps> = ({
 			role={'button'}
 			style={{ left: coords.mouseX, bottom: positionTop ? '12px' : 'auto', top: positionTop ? 'auto' : coords.mouseY }}
 			className="outline-none fixed top-full rounded-lg z-30 w-[200px] py-[10px] px-[10px] shadow-md bg-theme-contexify"
+			data-e2e={generateE2eId('clan_page.side_bar.panel.category_panel')}
 		>
 			<GroupPanels>
 				<ItemPanel
diff --git a/libs/components/src/lib/components/PanelChannel/ItemPanel.tsx b/libs/components/src/lib/components/PanelChannel/ItemPanel.tsx
index 832b5e2dd6..97808dd718 100644
--- a/libs/components/src/lib/components/PanelChannel/ItemPanel.tsx
+++ b/libs/components/src/lib/components/PanelChannel/ItemPanel.tsx
@@ -1,4 +1,5 @@
 import { Icons } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 
 type ItemPanelProps = {
 	children: string;
@@ -36,6 +37,7 @@ const ItemPanel = ({
 			disabled={disabled}
 			onClick={onClick}
 			className={`flex flex-col justify-center w-full rounded-sm bg-item-hover pr-2 ${danger ? 'hover:bg-[#f67e882a]' : ''}`}
+			data-e2e={generateE2eId('panel.panel_item')}
 		>
 			<div className={'flex flex-row items-center justify-between w-full'}>
 				<li
diff --git a/libs/utils/src/lib/e2e-testing/constants.ts b/libs/utils/src/lib/e2e-testing/constants.ts
index d16d4c63db..dbd445599a 100644
--- a/libs/utils/src/lib/e2e-testing/constants.ts
+++ b/libs/utils/src/lib/e2e-testing/constants.ts
@@ -30,6 +30,17 @@ export const DATA_E2E_IDENTIFIER = {
 			topic: ''
 		}
 	},
+	panel: {
+		panel_item: ''
+	},
+	modal: {
+		confirm_modal: {
+			button: {
+				confirm: '',
+				cancel: ''
+			}
+		}
+	},
 	homepage: {
 		header: {
 			link: '',
@@ -83,6 +94,9 @@ export const DATA_E2E_IDENTIFIER = {
 			button: {
 				add_clan: '',
 				add_channel: ''
+			},
+			panel: {
+				category_panel: ''
 			}
 		},
 		modal: {

From 8c348e1b3e812c0578965f3a61c11fbe37afcdf0 Mon Sep 17 00:00:00 2001
From: thieuthang-dev <thang.thieuquang@ncc.asia>
Date: Wed, 17 Sep 2025 17:43:25 +0700
Subject: [PATCH 2/3] feat: add e2e for delete category

---
 .../CategorySetting/CategorySettingSidebar.tsx         |  3 ++-
 .../ChannelList/CategorizedChannels/index.tsx          | 10 ++++++++--
 libs/utils/src/lib/e2e-testing/constants.ts            |  9 ++++++++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/libs/components/src/lib/components/CategorySetting/CategorySettingSidebar.tsx b/libs/components/src/lib/components/CategorySetting/CategorySettingSidebar.tsx
index d7dfeb340d..eff6229221 100644
--- a/libs/components/src/lib/components/CategorySetting/CategorySettingSidebar.tsx
+++ b/libs/components/src/lib/components/CategorySetting/CategorySettingSidebar.tsx
@@ -1,6 +1,6 @@
 import { useCategory } from '@mezon/core';
 import { selectCurrentChannel, selectWelcomeChannelByClanId } from '@mezon/store';
-import { ICategoryChannel, IChannel } from '@mezon/utils';
+import { generateE2eId, ICategoryChannel, IChannel } from '@mezon/utils';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -65,6 +65,7 @@ const CategorySettingSidebar: React.FC<ICategorySettingSidebarProps> = ({ onClic
 				<button
 					className={`mt-[5px] text-red-500 w-full py-1 px-[10px] mb-1 text-[16px] font-medium rounded text-left hover:bg-[#f67e882a] ${hasWelcomeChannel ? 'text-red-500' : ''}`}
 					onClick={openModalDeleteCategory}
+					data-e2e={generateE2eId('clan_page.modal.delete_category.button.delete')}
 				>
 					{t('categoryOverview.deleteCategory')}
 				</button>
diff --git a/libs/components/src/lib/components/ChannelList/CategorizedChannels/index.tsx b/libs/components/src/lib/components/ChannelList/CategorizedChannels/index.tsx
index d1fb27e55b..cdbc7bea64 100644
--- a/libs/components/src/lib/components/ChannelList/CategorizedChannels/index.tsx
+++ b/libs/components/src/lib/components/ChannelList/CategorizedChannels/index.tsx
@@ -171,13 +171,19 @@ const CategorizedItem: React.FC<CategorizedChannelsProps> = ({ category }) => {
 
 	return (
 		category.category_name && (
-			<div className="flex flex-row px-2 relative gap-1" onMouseDown={handleMouseClick} ref={panelRef} role={'button'}>
+			<div
+				className="flex flex-row px-2 relative gap-1"
+				onMouseDown={handleMouseClick}
+				ref={panelRef}
+				role={'button'}
+				data-e2e={generateE2eId('clan_page.side_bar.channel_list.category')}
+			>
 				<button
 					onClick={handleToggleCategory}
 					className="text-theme-primary flex items-center px-0.5 w-full font-title tracking-wide text-theme-primary-hover uppercase text-sm font-medium"
 				>
 					{categoryExpandState ? <Icons.ArrowDown /> : <Icons.ArrowRight />}
-					<span className="one-line" data-e2e={generateE2eId('clan_page.side_bar.channel_list.category')}>
+					<span className="one-line" data-e2e={generateE2eId('clan_page.side_bar.channel_list.category.name')}>
 						{category.category_name}
 					</span>
 				</button>
diff --git a/libs/utils/src/lib/e2e-testing/constants.ts b/libs/utils/src/lib/e2e-testing/constants.ts
index e6b80a44eb..4348859253 100644
--- a/libs/utils/src/lib/e2e-testing/constants.ts
+++ b/libs/utils/src/lib/e2e-testing/constants.ts
@@ -89,7 +89,9 @@ export const DATA_E2E_IDENTIFIER = {
 				name: ''
 			},
 			channel_list: {
-				category: ''
+				category: {
+					name: ''
+				}
 			},
 			button: {
 				add_clan: '',
@@ -136,6 +138,11 @@ export const DATA_E2E_IDENTIFIER = {
 					confirm: '',
 					cancel: ''
 				}
+			},
+			delete_category: {
+				button: {
+					delete: ''
+				}
 			}
 		},
 		settings: {

From 9e665f07e456fdfd34e0c816b7875e892f102337 Mon Sep 17 00:00:00 2001
From: thieuthang-dev <thang.thieuquang@ncc.asia>
Date: Fri, 19 Sep 2025 14:51:31 +0700
Subject: [PATCH 3/3] feat: update e2e for category management

---
 libs/utils/src/lib/e2e-testing/constants.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/utils/src/lib/e2e-testing/constants.ts b/libs/utils/src/lib/e2e-testing/constants.ts
index 3c2cc6e4c2..9859d097f6 100644
--- a/libs/utils/src/lib/e2e-testing/constants.ts
+++ b/libs/utils/src/lib/e2e-testing/constants.ts
@@ -90,7 +90,8 @@ export const DATA_E2E_IDENTIFIER = {
 			},
 			button: {
 				add_clan: '',
-				add_channel: ''
+				add_channel: '',
+				events: ''
 			},
 			panel: {
 				category_panel: '',