mark e2e flow delete pin message

libs/components/src/lib/components/ChannelTopbar/TopBarComponents/PinnedMessages/ItemPinMessage.tsx

@@ -1,6 +1,6 @@
 import { useGetPriorityNameFromUserClan } from '@mezon/core';
 import { PinMessageEntity, messagesActions, selectCurrentClanId, selectMessageByMessageId, useAppDispatch, useAppSelector } from '@mezon/store';
-import { IMessageWithUser, TOPBARS_MAX_WIDTH, convertTimeString } from '@mezon/utils';
+import { IMessageWithUser, TOPBARS_MAX_WIDTH, convertTimeString, generateE2eId } from '@mezon/utils';
 import { ChannelStreamMode, safeJSONParse } from 'mezon-js';
 import { ApiMessageAttachment } from 'mezon-js/api.gen';
 import { useMemo } from 'react';
@@ -71,6 +71,7 @@ const ItemPinMessage = (props: ItemPinMessageProps) => {
 	return (
 		<div
 			key={pinMessage.id}
+			data-e2e={generateE2eId('common.pin_message', `msg-${pinMessage.id}`)}
 			className="relative flex flex-row justify-between  py-3 px-3 mx-2 w-widthPinMess cursor-default rounded overflow-hidden border-theme-primary bg-item-theme group/item-pinMess"
 		>
 			<div className="flex items-start gap-2 w-full ">

libs/components/src/lib/components/ContextMenu/DynamicContextMenu.tsx

@@ -15,7 +15,7 @@ import {
 	useAppSelector
 } from '@mezon/store';
 import { Menu as Dropdown } from '@mezon/ui';
-import { ContextMenuItem, IEmoji, IMessageWithUser, QUICK_MENU_TYPE, SHOW_POSITION, isPublicChannel } from '@mezon/utils';
+import { ContextMenuItem, IEmoji, IMessageWithUser, QUICK_MENU_TYPE, SHOW_POSITION, generateE2eId, isPublicChannel } from '@mezon/utils';
 import React, { ReactElement, useCallback, useMemo, useState } from 'react';
 import { Item, Menu, Separator, Submenu } from 'react-contexify';
 import { useSelector } from 'react-redux';
@@ -309,6 +309,7 @@ export default function DynamicContextMenu({ menuId, items, messageId, message,
 						<div>
 							<Item key={index} onClick={item.handleItemClick} disabled={item.disabled}>
 								<div
+									data-e2e={generateE2eId('chat.message_action_modal.button.base')}
 									className={`flex justify-between items-center w-full font-['gg_sans','Noto_Sans',sans-serif] text-sm font-medium p-1 ${lableItemWarning ? ' text-[#E13542] hover:text-[#FFFFFF] ' : 'text-theme-primary text-theme-primary-hover'}`}
 								>
 									<span>Add Reaction</span>
@@ -335,6 +336,7 @@ export default function DynamicContextMenu({ menuId, items, messageId, message,
 						}}
 					>
 						<div
+							data-e2e={generateE2eId('chat.message_action_modal.button.base')}
 							className={`flex justify-between items-center w-full font-['gg_sans','Noto_Sans',sans-serif] text-sm font-medium p-1 ${lableItemWarning ? ' text-[#E13542]  ' : 'text-theme-primary text-theme-primary-hover'}`}
 						>
 							<span>{item.label}</span>

libs/components/src/lib/components/DeleteMessageModal/ModalDeleteMess.tsx

@@ -8,7 +8,7 @@ import {
 	useAppSelector
 } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { IMessageWithUser, TypeMessage } from '@mezon/utils';
+import { generateE2eId, IMessageWithUser, TypeMessage } from '@mezon/utils';
 import { ApiMessageAttachment } from 'mezon-js/api.gen';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -153,11 +153,13 @@ const ModalDeleteMess = (props: ModalDeleteMessProps) => {
 							onClick={closeModal}
 							className="px-4 py-2 hover:underline rounded disabled:cursor-not-allowed disabled:hover:no-underline disabled:opacity-85 text-theme-primary"
 							disabled={isLoading}
+							data-e2e={generateE2eId('chat.message_action_modal.confirm_modal.button.cancel')}
 						>
 							Cancel
 						</button>
 						<button
 							onClick={handleAction}
+							data-e2e={generateE2eId('chat.message_action_modal.confirm_modal.button.confirm')}
 							className="px-4 py-2 bg-[#DA363C] rounded hover:bg-opacity-85 text-white disabled:cursor-not-allowed disabled:opacity-85 disabled:hover:opacity-85 flex items-center gap-1"
 							disabled={isLoading}
 						>

libs/components/src/lib/components/PinMessModal/index.tsx

@@ -1,6 +1,6 @@
 import { ColorRoleProvider, useEscapeKeyClose } from '@mezon/core';
 import { selectAllAccount, selectMemberClanByUserId2, useAppSelector } from '@mezon/store';
-import { IMessageWithUser, KEY_KEYBOARD } from '@mezon/utils';
+import { generateE2eId, IMessageWithUser, KEY_KEYBOARD } from '@mezon/utils';
 import { useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import MessageWithUser from '../MessageWithUser';
@@ -65,10 +65,15 @@ export const ModalAddPinMess = (props: ModalAddPinMessProps) => {
 						</ColorRoleProvider>
 					</div>
 					<div className="w-full  p-4 flex justify-end gap-x-4 bg-theme-setting-nav">
-						<button onClick={closeModal} className="px-4 py-2 hover:underline rounded">
+						<button
+							onClick={closeModal}
+							className="px-4 py-2 hover:underline rounded"
+							data-e2e={generateE2eId('chat.message_action_modal.confirm_modal.button.cancel')}
+						>
 							Cancel
 						</button>
 						<button
+							data-e2e={generateE2eId('chat.message_action_modal.confirm_modal.button.confirm')}
 							onClick={handlePinMessageAndCloseModal}
 							className="px-4 py-2 hover:bg-opacity-80 rounded-lg btn-primary-hover btn-primary font-medium"
 						>

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

@@ -22,7 +22,7 @@ export const DATA_E2E_IDENTIFIER = {
 	},
 	mention: {
 		input: '',
-		selected_file: '',
+		selected_file: ''
 	},
 	discussion: {
 		box: {
@@ -254,6 +254,17 @@ export const DATA_E2E_IDENTIFIER = {
 			emoji: '',
 			sticker: ''
 		},
+		message_action_modal: {
+			button: {
+				base: ''
+			},
+			confirm_modal: {
+				button: {
+					confirm: '',
+					cancel: ''
+				}
+			}
+		},
 		suggest_item: ''
 	},
 	onboarding: {
@@ -291,7 +302,7 @@ export const DATA_E2E_IDENTIFIER = {
 				button_change_avatar: '',
 				button_reset: '',
 				button_save_changes: ''
-			},
+			}
 		}
 	},
 	common: {
@@ -301,9 +312,7 @@ export const DATA_E2E_IDENTIFIER = {
 		item_pin_message: {
 			username: ''
 		},
-		delete_pin_message: {
-			username: ''
-		}
+		pin_message: ''
 	}
 };
 type DotNestedKeys<T> = T extends object
@@ -313,4 +322,3 @@ type DotNestedKeys<T> = T extends object
 	: never;
 
 export type E2eKeyType = DotNestedKeys<typeof DATA_E2E_IDENTIFIER>;
-