From a7bc4527bf9f9dcd8de7aaa3a4523056c029aecd Mon Sep 17 00:00:00 2001
From: thieuthang-dev <thang.thieuquang@ncc.asia>
Date: Tue, 9 Dec 2025 12:03:00 +0700
Subject: [PATCH] feat: add e2e for case change category for channel

---
 .../ChannelSetting/Component/CategoryChannel/index.tsx   | 9 ++++++---
 libs/ui/src/lib/DropDown/Dropdown.Content.tsx            | 3 ++-
 libs/utils/src/lib/e2e-testing/constants.ts              | 9 +++++++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/libs/components/src/lib/components/ChannelSetting/Component/CategoryChannel/index.tsx b/libs/components/src/lib/components/ChannelSetting/Component/CategoryChannel/index.tsx
index 712afad13a..a2f8134699 100644
--- a/libs/components/src/lib/components/ChannelSetting/Component/CategoryChannel/index.tsx
+++ b/libs/components/src/lib/components/ChannelSetting/Component/CategoryChannel/index.tsx
@@ -2,7 +2,7 @@ import { useAppNavigation } from '@mezon/core';
 import type { CategoriesEntity, IUpdateChannelRequest } from '@mezon/store';
 import { channelsActions, selectAllCategories, selectChannelById, useAppDispatch, useAppSelector } from '@mezon/store';
 import { Icons, Menu } from '@mezon/ui';
-import type { IChannel } from '@mezon/utils';
+import { generateE2eId, type IChannel } from '@mezon/utils';
 import type { ReactElement } from 'react';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -81,8 +81,11 @@ const SettingCategoryChannel = (props: CategoryChannelProps) => {
 				<p className="text-xs font-bold text-theme-primary mt-4">{t('categoryManagement.category')}</p>
 
 				<Menu menu={menu}>
-					<div className="w-full h-12 rounded-md border-theme-primary text-theme-message bg-input-secondary  flex flex-row px-3 justify-between items-center uppercase">
-						<p>{categoryName}</p>
+					<div
+						className="w-full h-12 rounded-md border-theme-primary text-theme-message bg-input-secondary  flex flex-row px-3 justify-between items-center uppercase"
+						data-e2e={generateE2eId('channel_setting_page.category.dropdown')}	
+					>
+						<p data-e2e={generateE2eId('channel_setting_page.category.dropdown.value')}>{categoryName}</p>
 						<Icons.ArrowDownFill />
 					</div>
 				</Menu>
diff --git a/libs/ui/src/lib/DropDown/Dropdown.Content.tsx b/libs/ui/src/lib/DropDown/Dropdown.Content.tsx
index 3a5d467655..cb0011ed1a 100644
--- a/libs/ui/src/lib/DropDown/Dropdown.Content.tsx
+++ b/libs/ui/src/lib/DropDown/Dropdown.Content.tsx
@@ -1,3 +1,4 @@
+import { generateE2eId } from '@mezon/utils';
 import { ReactNode } from 'react';
 
 type MenuItemProps = {
@@ -7,7 +8,7 @@ type MenuItemProps = {
 };
 const Item = ({ children, onClick, className }: MenuItemProps) => {
 	return (
-		<div className={`rounded-lg p-2 ${className}`} onClick={onClick}>
+		<div className={`rounded-lg p-2 ${className}`} onClick={onClick} data-e2e={generateE2eId('dropdown.item')}>
 			{children}
 		</div>
 	);
diff --git a/libs/utils/src/lib/e2e-testing/constants.ts b/libs/utils/src/lib/e2e-testing/constants.ts
index 9b0fac7358..a81ee2102a 100644
--- a/libs/utils/src/lib/e2e-testing/constants.ts
+++ b/libs/utils/src/lib/e2e-testing/constants.ts
@@ -23,6 +23,9 @@ export const DATA_E2E_IDENTIFIER = {
 		base: '',
 		copy: ''
 	},
+	dropdown: {
+		item: ''
+	},
 	base_profile: {
 		display_name: '',
 		user_status: ''
@@ -510,6 +513,12 @@ export const DATA_E2E_IDENTIFIER = {
 				type: '',
 				message_content: ''
 			}
+		},
+		category: {
+			channel_name: '',
+			dropdown: {
+				value: '',
+			}
 		}
 	},
 	chat: {