feat: add e2e for category management

libs/components/src/lib/components/CategorySetting/CategorySettingSidebar.tsx

@@ -1,6 +1,6 @@
 import { useCategory } from '@mezon/core';
 import { selectCurrentChannel, selectWelcomeChannelByClanId } from '@mezon/store';
-import type { ICategoryChannel, IChannel } from '@mezon/utils';
+import { ICategoryChannel, IChannel, generateE2eId } from '@mezon/utils';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -66,6 +66,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>

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>

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';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -71,10 +72,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')}
 					>
 						{t('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>

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

libs/utils/src/lib/e2e-testing/constants.ts

@@ -33,6 +33,9 @@ export const DATA_E2E_IDENTIFIER = {
 			topic: ''
 		}
 	},
+	panel: {
+		panel_item: ''
+	},
 	homepage: {
 		header: {
 			link: '',
@@ -81,12 +84,19 @@ export const DATA_E2E_IDENTIFIER = {
 				name: ''
 			},
 			channel_list: {
-				category: ''
+				category: {
+					name: ''
+				}
 			},
 			button: {
 				add_clan: '',
 				add_channel: '',
 				events: ''
+			},
+			panel: {
+				category_panel: '',
+				add_channel: '',
+				events: ''
 			}
 		},
 		modal: {
@@ -128,6 +138,11 @@ export const DATA_E2E_IDENTIFIER = {
 					cancel: ''
 				}
 			},
+			delete_category: {
+				button: {
+					delete: ''
+				}
+			},
 			create_event: {
 				button_create: '',
 				next: '',
@@ -397,6 +412,12 @@ export const DATA_E2E_IDENTIFIER = {
 		validate_file: {
 			title: '',
 			content: ''
+		},
+		confirm_modal: {
+			button: {
+				confirm: '',
+				cancel: ''
+			}
 		}
 	}
 };