mark e2e to flow create public voice event

libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/eventInfoModal.tsx

@@ -201,10 +201,11 @@ const EventInfoModal = (props: EventInfoModalProps) => {
 					value={contentSubmit.topic}
 					className={`font-[400] rounded w-full  outline-none text-[15px]border border-theme-primary p-2 focus:outline-none focus:border-white-500 bg-theme-input ${appearanceTheme === 'light' ? 'lightEventInputAutoFill' : ''}`}
 					maxLength={Number(process.env.NX_MAX_LENGTH_NAME_ALLOWED) * 2}
+					data-e2e={generateE2eId('clan_page.modal.create_event.event_info.input.event_topic')}
 				/>
 			</div>
 			<div className="mb-4 flex gap-x-4">
-				<div className="w-1/2">
+				<div className="w-1/2" data-e2e={generateE2eId('clan_page.modal.create_event.event_info.input.start_date')}>
 					<h3 className="uppercase text-[11px] font-semibold inline-flex gap-x-2">
 						{t('fields.startDate.title')}
 						<p className="w-fit h-fit text-left text-xs font-medium leading-[150%] text-[#dc2626]">✱</p>
@@ -220,7 +221,7 @@ const EventInfoModal = (props: EventInfoModalProps) => {
 						/>
 					</Suspense>
 				</div>
-				<div className="w-1/2">
+				<div className="w-1/2" data-e2e={generateE2eId('clan_page.modal.create_event.event_info.input.start_time')}>
 					<h3 className="uppercase text-[11px] font-semibold inline-flex gap-x-2">
 						{t('fields.startTime.title')}
 						<p className="w-fit h-fit text-left text-xs font-medium leading-[150%] text-[#dc2626]">✱</p>
@@ -229,7 +230,7 @@ const EventInfoModal = (props: EventInfoModalProps) => {
 				</div>
 			</div>
 			<div className="mb-4 flex gap-x-4">
-				<div className="w-1/2">
+				<div className="w-1/2" data-e2e={generateE2eId('clan_page.modal.create_event.event_info.input.end_date')}>
 					<h3 className="uppercase text-[11px] font-semibold inline-flex gap-x-2">
 						{t('fields.endDate.title')}
 						<p className="w-fit h-fit text-left text-xs font-medium leading-[150%] text-[#dc2626]">✱</p>
@@ -245,7 +246,7 @@ const EventInfoModal = (props: EventInfoModalProps) => {
 						/>
 					</Suspense>
 				</div>
-				<div className="w-1/2">
+				<div className="w-1/2" data-e2e={generateE2eId('clan_page.modal.create_event.event_info.input.end_time')}>
 					<h3 className="uppercase text-[11px] font-semibold inline-flex gap-x-2">
 						{t('fields.endTime.title')}
 						<p className="w-fit h-fit text-left text-xs font-medium leading-[150%] text-[#dc2626]">✱</p>
@@ -260,6 +261,7 @@ const EventInfoModal = (props: EventInfoModalProps) => {
 					className={`cursor-pointer block w-full bg-theme-input   bg-option-theme rounded p-2 font-normal text-sm tracking-wide outline-none border-none ${appearanceTheme === 'light' ? 'customScrollLightMode' : 'app-scroll'}`}
 					value={selectedFrequency}
 					onChange={handleFrequencyChange}
+					data-e2e={generateE2eId('clan_page.modal.create_event.event_info.input.event_frequency')}
 				>
 					{frequencies.map((frequency) => (
 						<option className="text-sm bg-option-theme text-theme-primary" key={frequency.value} value={frequency.value}>
@@ -274,7 +276,7 @@ const EventInfoModal = (props: EventInfoModalProps) => {
 			</div>
 			<div className="mb-4">
 				<h3 className="uppercase text-[11px] font-semibold">{t('fields.description.title')}</h3>
-				<div className="relative">
+				<div className="relative" data-e2e={generateE2eId('clan_page.modal.create_event.event_info.input.description')}>
 					<TextArea
 						placeholder={t('fields.description.description')}
 						className="resize-none h-auto min-h-[87px] w-full bg-theme-input overflow-y-hidden outline-none py-2 pl-3 pr-5"
@@ -296,7 +298,13 @@ const EventInfoModal = (props: EventInfoModalProps) => {
 					>
 						{t('actions.uploadImage')}
 					</div>
-					<input type="file" hidden onChange={(e) => handleFile(e)} className="w-full text-sm text-slate-500 " data-e2e={generateE2eId('clan_page.modal.create_event.upload.image_cover_input')} />
+					<input
+						type="file"
+						hidden
+						onChange={(e) => handleFile(e)}
+						className="w-full text-sm text-slate-500 "
+						data-e2e={generateE2eId('clan_page.modal.create_event.upload.image_cover_input')}
+					/>
 				</label>
 				{contentSubmit.logo && <img src={contentSubmit.logo} alt="logo" className="max-h-[180px] rounded w-full object-cover" />}
 			</div>

libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/index.tsx

@@ -394,6 +394,7 @@ const ModalCreate = (props: ModalCreateProps) => {
 								className={`px-4 py-2 rounded font-semibold text-white bg-primary ${(option === '' || errorOption) && ' bg-opacity-50'}`}
 								// eslint-disable-next-line @typescript-eslint/no-empty-function
 								onClick={option === '' || errorOption ? () => {} : () => handleSubmit()}
+								data-e2e={generateE2eId('clan_page.modal.create_event.button_create')}
 							>
 								{t('actions.create')}
 							</button>

libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/itemEventManagement.tsx

@@ -12,8 +12,9 @@ import {
 	useAppSelector
 } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { EEventStatus, EPermission, OptionEvent, createImgproxyUrl } from '@mezon/utils';
+import { EEventStatus, EPermission, OptionEvent, createImgproxyUrl, generateE2eId } from '@mezon/utils';
 import isElectron from 'is-electron';
+import { ButtonCopy } from 'libs/components/src/lib/components';
 import { ChannelType } from 'mezon-js';
 import type { ApiUserEventRequest } from 'mezon-js/api.gen';
 import Tooltip from 'rc-tooltip';
@@ -29,7 +30,6 @@ import { createI18nTimeFormatter } from '../timeFomatEvent';
 import ModalDelEvent from './modalDelEvent';
 import ModalShareEvent from './modalShareEvent';
 import PanelEventItem from './panelEventItem';
-import { ButtonCopy } from 'libs/components/src/lib/components';
 
 export type ItemEventManagementProps = {
 	reviewDescription?: string;
@@ -230,21 +230,21 @@ const ItemEventManagement = (props: ItemEventManagementProps) => {
 				<div className="flex justify-between">
 					<div className="flex items-center gap-x-2 mb-4">
 						<Icons.IconEvents defaultSize={`font-semibold ${cssEventStatus}`} />
-						<p className={`font-semibold ${cssEventStatus}`}>
+						<p className={`font-semibold ${cssEventStatus}`} data-e2e={generateE2eId('clan_page.modal.create_event.review.start_time')}>
 							{actualEventStatus.isUpcoming
 								? timeUntilEvent || formatTimeI18n(event?.start_time || start)
 								: actualEventStatus.isOngoing
 									? t('countdown.joinNow')
 									: formatTimeI18n(event?.start_time || start)}
 						</p>
 						{isClanEvent && (
-							<p className="bg-blue-500 text-white rounded-sm px-1 text-center">{t('eventCreator:eventDetail.clanEvent')}</p>
+							<p className="bg-blue-500 text-white rounded-sm px-1 text-center"  data-e2e={generateE2eId('clan_page.modal.create_event.review.type')} >{t('eventCreator:eventDetail.clanEvent')}</p>
 						)}
 						{isChannelEvent && (
-							<p className="bg-orange-500 text-white rounded-sm px-1 text-center">{t('eventCreator:eventDetail.channelEvent')}</p>
+							<p className="bg-orange-500 text-white rounded-sm px-1 text-center" data-e2e={generateE2eId('clan_page.modal.create_event.review.type')} >{t('eventCreator:eventDetail.channelEvent')}</p>
 						)}
 						{isPrivateEvent && (
-							<p className="bg-red-500 text-white rounded-sm px-1 text-center">{t('eventCreator:eventDetail.privateEvent')}</p>
+							<p className="bg-red-500 text-white rounded-sm px-1 text-center" data-e2e={generateE2eId('clan_page.modal.create_event.review.type')} >{t('eventCreator:eventDetail.privateEvent')}</p>
 						)}
 					</div>
 					{event?.creator_id && (
@@ -257,7 +257,7 @@ const ItemEventManagement = (props: ItemEventManagementProps) => {
 								>{`Created by ${userCreate?.user?.username}`}</p>
 							}
 						>
-							<div className="flex  items-center gap-x-4 mb-3 mr-4">
+							<div className="flex  items-center gap-x-4 mb-3 mr-4" data-e2e={generateE2eId('clan_page.modal.create_event.event_management.item.button.open_detail_modal')}>
 								<AvatarImage
 									alt={userCreate?.user?.username || ''}
 									username={userCreate?.user?.username}
@@ -280,9 +280,9 @@ const ItemEventManagement = (props: ItemEventManagementProps) => {
 
 				<div className="flex justify-between gap-4 select-text">
 					<div className={`${isReviewEvent || !logoRight ? 'w-full' : 'w-3/5'} `}>
-						<p className="hover:underline font-bold  text-base">{topic}</p>
+						<p className="hover:underline font-bold  text-base" data-e2e={generateE2eId('clan_page.modal.create_event.review.event_topic')}>{topic}</p>
 						<div className="flex justify-between">
-							<div className="break-all max-h-[75px] eventDescriptionTruncate whitespace-pre-wrap">
+							<div className="break-all max-h-[75px] eventDescriptionTruncate whitespace-pre-wrap" data-e2e={generateE2eId('clan_page.modal.create_event.review.description')}>
 								{isReviewEvent ? reviewDescription : event?.description}
 							</div>
 						</div>
@@ -317,7 +317,7 @@ const ItemEventManagement = (props: ItemEventManagementProps) => {
 							return (
 								<a {...linkProps} className="flex gap-x-2 cursor-pointer">
 									<Icons.Speaker />
-									<p>{channelVoice?.channel_label}</p>
+									<p data-e2e={generateE2eId('clan_page.modal.create_event.review.voice_channel')}>{channelVoice?.channel_label}</p>
 								</a>
 							);
 						})()}
@@ -416,7 +416,7 @@ const ItemEventManagement = (props: ItemEventManagementProps) => {
 						<p className="">
 							{t('eventCreator:eventDetail.audienceConsists')}{' '}
 							{isThread ? t('eventCreator:eventDetail.thread') : t('eventCreator:eventDetail.channel')}
-							<strong className="">{textChannel.channel_label}</strong>
+							<strong className="" data-e2e={generateE2eId('clan_page.modal.create_event.review.text_channel')}>{textChannel.channel_label}</strong>
 						</p>
 					</span>
 				) : isClanEvent ? (

libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/locationModal.tsx

@@ -3,7 +3,7 @@ import type { ChannelsEntity } from '@mezon/store';
 import { selectTheme } from '@mezon/store';
 import { Icons } from '@mezon/ui';
 import type { ContenSubmitEventProps } from '@mezon/utils';
-import { OptionEvent, filterOptionReactSelect } from '@mezon/utils';
+import { OptionEvent, filterOptionReactSelect, generateE2eId } from '@mezon/utils';
 import { ChannelType } from 'mezon-js';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -80,7 +80,7 @@ const LocationModal = (props: LocationModalProps) => {
 	const options = voicesChannel.map((voice) => ({
 		value: voice.id,
 		label: (
-			<div className="flex items-center gap-x-2 ">
+			<div className="flex items-center gap-x-2 " data-e2e={generateE2eId('clan_page.modal.create_event.location.channel.item')}>
 				{voice.channel_private ? <Icons.SpeakerLocked /> : <Icons.Speaker />}
 				{voice.channel_label}
 			</div>
@@ -137,7 +137,7 @@ const LocationModal = (props: LocationModalProps) => {
 				return {
 					value: channel.id,
 					label: (
-						<div className="flex items-center gap-x-2 ">
+						<div className="flex items-center gap-x-2 " data-e2e={generateE2eId('clan_page.modal.create_event.location.channel.item')}>
 							{icon}
 							{channel.channel_label}
 						</div>
@@ -158,7 +158,7 @@ const LocationModal = (props: LocationModalProps) => {
 	const memoizedFilterOption = useMemo<FilterOptionType>(() => (option, inputValue) => filterOptionReactSelect(option, inputValue), []);
 
 	return (
-		<div ref={modalRef}>
+		<div ref={modalRef} className="p-6" data-e2e={generateE2eId('clan_page.modal.create_event.location')}>
 			<div className="flex flex-col mb-4">
 				<h3 className="text-xl text-center font-semibold ">{t('screens.eventType.title')}</h3>
 				<p className=" text-center">{t('screens.eventType.subtitle')}</p>
@@ -278,7 +278,9 @@ const TitleOptionEvent = ({
 			<div className={`flex items-center gap-x-2 ${choose ? 'text-theme-primary-active' : ''} `}>
 				{icon}
 				<div>
-					<h4 className={`font-semibold`}>{title}</h4>
+					<h4 className={`font-semibold`} data-e2e={generateE2eId('clan_page.modal.create_event.location.type')}>
+						{title}
+					</h4>
 					<p>{desc}</p>
 				</div>
 			</div>

libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/modalDetailItemEvent.tsx

@@ -12,7 +12,7 @@ import {
 	useAppSelector
 } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { createImgproxyUrl } from '@mezon/utils';
+import { createImgproxyUrl, generateE2eId } from '@mezon/utils';
 import { ChannelType } from 'mezon-js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -68,6 +68,7 @@ const ModalDetailItemEvent = (props?: ModalDetailItemEventProps) => {
 			<div
 				ref={panelRef}
 				className="w-[600px] min-h-[400px] max-h-[600px] rounded-lg overflow-hidden text-base dark:bg-[#313339] bg-white dark:text-white text-black"
+				data-e2e={generateE2eId('clan_page.modal.create_event.event_management.item.modal_detail_item')}
 			>
 				{event?.logo && <img src={event?.logo} alt={event?.title} className="w-full h-44 object-cover" />}
 				<div className="flex justify-between items-center pt-4 border-b font-bold border-zinc-600 cursor-pointer ">
@@ -142,16 +143,27 @@ const EventInfoDetail = (props: EventInfoDetailProps) => {
 
 	return (
 		<div className="px-4 py-8 space-y-2 text-theme-primary max-h-[370px] h-fit hide-scrollbar overflow-auto">
-			<h4 className="font-semibold inline-flex gap-x-3">
+			<h4
+				className="font-semibold inline-flex gap-x-3"
+				data-e2e={generateE2eId('clan_page.modal.create_event.event_management.item.modal_detail_item.start_date_time')}
+			>
 				<Icons.IconEvents />
 				{time}
 			</h4>
-			<p className="font-bold text-theme-primary-active text-lg">{event?.title}</p>
+			<p
+				className="font-bold text-theme-primary-active text-lg"
+				data-e2e={generateE2eId('clan_page.modal.create_event.event_management.item.modal_detail_item.topic')}
+			>
+				{event?.title}
+			</p>
 			<div className="flex items-center gap-x-3">
 				<img src={currentClan?.logo} alt={currentClan?.clan_name} className="size-5 rounded-full" />
 				<p className="hover:underline">{currentClan?.clan_name}</p>
 			</div>
-			<div className="flex items-center gap-x-3 ">
+			<div
+				className="flex items-center gap-x-3 "
+				data-e2e={generateE2eId('clan_page.modal.create_event.event_management.item.modal_detail_item.channel_name')}
+			>
 				{(() => {
 					if (hasAddress) {
 						return (
@@ -205,7 +217,9 @@ const EventInfoDetail = (props: EventInfoDetailProps) => {
 					{t('eventDetail.createdBy')} <span className="hover:underline">{userCreate?.user?.username}</span>
 				</p>
 			</div>
-			<div className="break-all">{event?.description}</div>
+			<div className="break-all" data-e2e={generateE2eId('clan_page.modal.create_event.event_management.item.modal_detail_item.description')}>
+				{event?.description}
+			</div>
 		</div>
 	);
 };

libs/components/src/lib/components/ChannelList/EventChannelModal/StartEvent/ListEventManagement.tsx

@@ -1,5 +1,6 @@
-import { EventManagementEntity, selectAllAccount, selectAllTextChannel } from '@mezon/store';
-import { OptionEvent } from '@mezon/utils';
+import type { EventManagementEntity } from '@mezon/store';
+import { selectAllAccount, selectAllTextChannel } from '@mezon/store';
+import { OptionEvent, generateE2eId } from '@mezon/utils';
 import { useSelector } from 'react-redux';
 import ItemEventManagement from '../ModalCreate/itemEventManagement';
 
@@ -24,7 +25,7 @@ const ListEventManagement = (props: ListEventManagementProps) => {
 		)
 		.map((event, index) => {
 			return (
-				<div key={index}>
+				<div key={index} data-e2e={generateE2eId('clan_page.modal.create_event.event_management.item')}>
 					<ItemEventManagement
 						topic={event.title || ''}
 						voiceChannel={event.channel_voice_id || ''}

libs/components/src/lib/components/ChannelList/EventChannelModal/StartEvent/StartEvent.tsx

@@ -32,7 +32,11 @@ export const StartEventModal = (props: StartEventModalProps) => {
 						</h4>
 					</div>
 					<div className="w-[0.1px] h-4 bg-gray-400"></div>
-					<div className="btn-primary btn-primary-hover  px-2 py-1 rounded-lg text-white font-medium cursor-pointer" onClick={onOpenCreate} data-e2e={generateE2eId('clan_page.modal.create_event.button_create')}>
+					<div
+						className="btn-primary btn-primary-hover  px-2 py-1 rounded-lg text-white font-medium cursor-pointer"
+						onClick={onOpenCreate}
+						data-e2e={generateE2eId('clan_page.modal.create_event.button_create')}
+					>
 						{t('actions.create')}
 					</div>
 				</div>

libs/components/src/lib/components/ChannelList/EventChannelModal/index.tsx

@@ -1,4 +1,5 @@
 import { selectShowModelDetailEvent } from '@mezon/store';
+import { generateE2eId } from '@mezon/utils';
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { ModalLayout } from '../../../components';
@@ -30,11 +31,14 @@ const EventModal = (props: EventModalProps) => {
 		<ModalLayout onClose={onClose}>
 			<div className={`relative w-full sm:h-auto rounded-lg ${openModal ? 'max-w-[472px]' : 'max-w-[600px]'}`}>
 				{!openModal ? (
-					<div className="rounded-lg text-sm overflow-hidden bg-theme-setting-primary text-theme-primary">
+					<div
+						className="rounded-lg text-sm overflow-hidden bg-theme-setting-primary text-theme-primary"
+						data-e2e={generateE2eId('clan_page.modal.create_event.start_modal')}
+					>
 						<StartEventModal onClose={onClose} onOpenCreate={() => setOpenModal(true)} onEventUpdateId={onEventUpdateId} />
 					</div>
 				) : (
-					<div className="rounded-lg text-sm">
+					<div className="rounded-lg text-sm" data-e2e={generateE2eId('clan_page.modal.create_event')}>
 						<ModalCreate
 							onClose={() => setOpenModal(false)}
 							onCloseEventModal={onClose}

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

@@ -164,10 +164,53 @@ export const DATA_E2E_IDENTIFIER = {
 				}
 			},
 			create_event: {
+				start_modal: '',
 				button_create: '',
 				next: '',
 				upload: {
 					image_cover_input: ''
+				},
+				location: {
+					type: '',
+					channel: {
+						item: ''
+					}
+				},
+				event_info: {
+					input: {
+						event_topic: '',
+						start_date: '',
+						start_time: '',
+						end_date: '',
+						end_time: '',
+						event_frequency: '',
+						description: ''
+					}
+				},
+				review: {
+					type: {
+						clan: '',
+						channel: '',
+						private: ''
+					},
+					start_time: '',
+					event_topic: '',
+					description: '',
+					voice_channel: '',
+					text_channel: ''
+				},
+				event_management: {
+					item: {
+						modal_detail_item: {
+							start_date_time: '',
+							topic: '',
+							channel_name: '',
+							description: ''
+						},
+						button: {
+							open_detail_modal: ''
+						}
+					}
 				}
 			}
 		},