mark e2e to verify message is pinned

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

@@ -71,8 +71,8 @@ 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"
+			data-e2e={generateE2eId('common.pin_message')}
 		>
 			<div className="flex items-start gap-2 w-full ">
 				<div className="pointer-events-none">
@@ -118,12 +118,17 @@ const ItemPinMessage = (props: ItemPinMessageProps) => {
 				</div>
 			</div>
 			<div className="absolute h-fit flex gap-x-2 items-center opacity-0 right-2 top-2 group-hover/item-pinMess:opacity-100">
-				<button onClick={handleJumpMess} className="text-xs border-theme-primary rounded-lg p-1 h-fit text-theme-primary-hover">
+				<button
+					onClick={handleJumpMess}
+					className="text-xs border-theme-primary rounded-lg p-1 h-fit text-theme-primary-hover"
+					data-e2e={generateE2eId('common.pin_message.button.jump')}
+				>
 					Jump
 				</button>
 				<button
 					className=" mr-1 bg-theme-input bg-secondary-button-hover text-theme-primary-hover rounded-full w-6 h-6 items-center justify-center text-[10px] px-3 py-2 flex"
 					onClick={handleUnpinConfirm}
+					data-e2e={generateE2eId('common.pin_message.button.remove_pin')}
 				>
 					✕
 				</button>

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

@@ -899,6 +899,7 @@ function PinButton({ styleCss, mode }: { styleCss: string; mode?: number }) {
 						className="absolute border-theme-primary
 		 w-[8px] h-[8px] rounded-full bg-colorDanger outline outline-1 outline-transparent
 		  font-bold text-[11px] flex items-center justify-center -bottom-[0.05rem] -right-[0.075rem]"
+						data-e2e={generateE2eId('chat.channel_message.header.button.pin.pin_badge')}
 					></div>
 				)}
 			</button>

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import type { MessagesEntity } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { TypeMessage, addMention, convertDateStringI18n } from '@mezon/utils';
+import { TypeMessage, addMention, convertDateStringI18n, generateE2eId } from '@mezon/utils';
 import type { ReactNode } from 'react';
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -46,7 +46,10 @@ function MessageWithSystem({
 					messageId={message?.id}
 					className={'fullBoxText relative group'}
 				>
-					<div className={`flex items-start min-h-8 relative w-full px-3 text-theme-primary pt-2 pl-5 ${isCustom ? 'pb-2' : ''}`}>
+					<div
+						className={`flex items-start min-h-8 relative w-full px-3 text-theme-primary pt-2 pl-5 ${isCustom ? 'pb-2' : ''}`}
+						data-e2e={generateE2eId('chat.system_message', message?.code.toString())}
+					>
 						{message?.code === TypeMessage.Welcome && <Icons.WelcomeIcon defaultSize="size-8 flex-shrink-0" />}
 						{message?.code === TypeMessage.UpcomingEvent && <Icons.UpcomingEventIcon defaultSize="size-8 flex-shrink-0" />}
 						{message?.code === TypeMessage.CreateThread && <Icons.ThreadIcon defaultSize="size-6 flex-shrink-0" />}
@@ -122,6 +125,7 @@ const HoverStateWrapper: React.FC<HoverStateWrapperProps> = ({
 			onMouseLeave={handleMouseLeave}
 			onContextMenu={onContextMenu}
 			id={`msg-${messageId}`}
+			data-e2e={generateE2eId('chat.system_message')}
 		>
 			{children}
 			{isHover && popup && popup()}

libs/components/src/lib/components/MessageWithUser/MessageLineSystem.tsx

@@ -1,5 +1,6 @@
 import { channelsActions, messagesActions, pinMessageActions, threadsActions, useAppDispatch } from '@mezon/store';
-import { ETokenMessage, IExtendedMessage, IMessageWithUser, TypeMessage, convertTimeStringI18n, parseThreadInfo } from '@mezon/utils';
+import type { IExtendedMessage, IMessageWithUser } from '@mezon/utils';
+import { ETokenMessage, TypeMessage, convertTimeStringI18n, generateE2eId, parseThreadInfo } from '@mezon/utils';
 import { ChannelStreamMode } from 'mezon-js';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -148,11 +149,19 @@ const RenderContentSystem = ({ message, data, mode, isSearchMessage, isJumMessag
 				{message.code === TypeMessage.CreatePin && (
 					<>
 						{translateMessage('systemMessages.pinned')}{' '}
-						<span onClick={getIdMessageToJump} className="font-semibold cursor-pointer hover:underline">
+						<span
+							onClick={getIdMessageToJump}
+							className="font-semibold cursor-pointer hover:underline"
+							data-e2e={generateE2eId('chat.system_message.pin_message.button.jump_to_message')}
+						>
 							{translateMessage('systemMessages.aMessage')}
 						</span>{' '}
 						{translateMessage('systemMessages.toThisChannel')}{' '}
-						<span onClick={handleShowPinMessage} className="font-semibold cursor-pointer hover:underline">
+						<span
+							onClick={handleShowPinMessage}
+							className="font-semibold cursor-pointer hover:underline"
+							data-e2e={generateE2eId('chat.system_message.pin_message.button.see_all_pinned')}
+						>
 							{translateMessage('systemMessages.allPinned')}
 						</span>{' '}
 						{translateMessage('systemMessages.messages')}

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

@@ -297,7 +297,9 @@ export const DATA_E2E_IDENTIFIER = {
 					file: '',
 					mute: '',
 					inbox: '',
-					pin: '',
+					pin: {
+						pin_badge: ''
+					},
 					canvas: '',
 					thread: {
 						modal: {
@@ -352,7 +354,15 @@ export const DATA_E2E_IDENTIFIER = {
 				}
 			}
 		},
-		suggest_item: ''
+		suggest_item: '',
+		system_message: {
+			pin_message: {
+				button: {
+					jump_to_message: '',
+					see_all_pinned: ''
+				}
+			}
+		}
 	},
 	onboarding: {
 		chat: {
@@ -405,7 +415,12 @@ export const DATA_E2E_IDENTIFIER = {
 		item_pin_message: {
 			username: ''
 		},
-		pin_message: ''
+		pin_message: {
+			button: {
+				jump: '',
+				remove_pin: ''
+			}
+		}
 	},
 	modal: {
 		too_many_upload: '',