e2e develop

apps/chat/src/app/pages/channel/index.tsx

@@ -585,7 +585,10 @@ export const BanCountDown = ({ banTime, clanId, channelId, userId }: { banTime:
 	}, [time]);
 
 	return (
-		<div className="flex h-12 gap-3 items-center opacity-80 bg-theme-contexify text-theme-primary-active ml-4 mb-4 p-2 w-widthInputViewChannelPermission rounded">
+		<div
+			className="flex h-12 gap-3 items-center opacity-80 bg-theme-contexify text-theme-primary-active ml-4 mb-4 p-2 w-widthInputViewChannelPermission rounded"
+			data-e2e={generateE2eId('mention.banned')}
+		>
 			<svg width="28" height="28" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
 				<path
 					fill="#e03c47"
@@ -598,7 +601,7 @@ export const BanCountDown = ({ banTime, clanId, channelId, userId }: { banTime:
 				<span className="leading-3 text-xs">{t('timeoutDesc')}</span>
 			</div>
 
-			<span>{time ? `${time}s` : banTime !== Infinity && countdown}</span>
+			<span data-e2e={generateE2eId('mention.banned.time')}>{time ? `${time}s` : banTime !== Infinity && countdown}</span>
 		</div>
 	);
 };

apps/chat/src/app/pages/directMessage/FriendsPage/index.tsx

@@ -201,7 +201,10 @@ const FriendsPage = () => {
 									{tab.title}
 								</button>
 								{tab.value === 'pending' && quantityPendingRequest !== 0 && (
-									<div className="absolute grid place-items-center w-[20px] h-[20px] rounded-full bg-colorDanger text-[10px] font-medium top-[2px] right-3">
+									<div 
+										className="absolute grid place-items-center w-[20px] h-[20px] rounded-full bg-colorDanger text-[10px] font-medium top-[2px] right-3"
+										data-e2e={generateE2eId('badge.friend_pending')}
+									>
 										{quantityPendingRequest}
 									</div>
 								)}

apps/chat/src/app/pages/main/directUnreads.tsx

@@ -2,7 +2,7 @@ import { AvatarImage } from '@mezon/components';
 import { useCustomNavigate } from '@mezon/core';
 import type { DMMetaEntity } from '@mezon/store';
 import { directActions, selectDirectById, useAppDispatch, useAppSelector } from '@mezon/store';
-import { createImgproxyUrl } from '@mezon/utils';
+import { createImgproxyUrl, generateE2eId } from '@mezon/utils';
 import { ChannelType } from 'mezon-js';
 import { memo, useCallback, useMemo } from 'react';
 import { NavLink } from 'react-router-dom';
@@ -77,7 +77,7 @@ const DirectUnreadComponent = ({ directMessage, shouldAnimateOut = false, onMemb
 
 	return (
 		<NavLink to="#" onClick={handleClick} draggable="false" className={linkClassName}>
-			<div className={innerDivClassName}>
+			<div className={innerDivClassName} data-e2e={generateE2eId('chat.direct_message.side_bar.item', direct.id)}>
 				<AvatarImage draggable="false" {...avatarProps} />
 				{badgeContent && <div className={badgeClassName}>{badgeContent}</div>}
 			</div>

apps/mobile/src/app/screens/channelPermissionSetting/BasicView/index.tsx

@@ -1,9 +1,9 @@
-import { BottomSheetModal } from '@gorhom/bottom-sheet';
+import type { BottomSheetModal } from '@gorhom/bottom-sheet';
 import { useAuth, useCheckOwnerForUser } from '@mezon/core';
 import { ActionEmitEvent } from '@mezon/mobile-components';
 import { baseColor, useTheme } from '@mezon/mobile-ui';
+import type { IUpdateChannelRequest } from '@mezon/store-mobile';
 import {
-	IUpdateChannelRequest,
 	appActions,
 	channelsActions,
 	fetchUserChannels,
@@ -16,7 +16,7 @@ import {
 } from '@mezon/store-mobile';
 import { isPublicChannel } from '@mezon/utils';
 import { FlashList } from '@shopify/flash-list';
-import { ApiChangeChannelPrivateRequest } from 'mezon-js/api.gen';
+import type { ApiChangeChannelPrivateRequest } from 'mezon-js/api.gen';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DeviceEventEmitter, Text, TouchableOpacity, View } from 'react-native';
@@ -29,7 +29,7 @@ import { AddMemberOrRoleBS } from '../components/AddMemberOrRoleBS';
 import { MemberItem } from '../components/MemberItem';
 import { RoleItem } from '../components/RoleItem';
 import { EOverridePermissionType, ERequestStatus } from '../types/channelPermission.enum';
-import { IBasicViewProps } from '../types/channelPermission.type';
+import type { IBasicViewProps } from '../types/channelPermission.type';
 import { style } from './styles';
 
 export const BasicView = memo(({ channel }: IBasicViewProps) => {

apps/mobile/src/app/screens/home/homedrawer/components/ClanMenu/ClanMenu/index.tsx

@@ -26,8 +26,8 @@ import MezonClanAvatar from '../../../../../../componentUI/MezonClanAvatar';
 import MezonMenu, { IMezonMenuItemProps, IMezonMenuSectionProps } from '../../../../../../componentUI/MezonMenu';
 import MezonSwitch from '../../../../../../componentUI/MezonSwitch';
 import DeleteClanModal from '../../../../../../components/DeleteClanModal';
+import type { AppStackScreenProps } from '../../../../../../navigation/ScreenTypes';
 import { APP_SCREEN, AppStackScreenProps } from '../../../../../../navigation/ScreenTypes';
-import { EProfileTab } from '../../../../../settings/ProfileSetting';
 import InviteToChannel from '../../InviteToChannel';
 import ClanMenuInfo from '../ClanMenuInfo';
 import { style } from './styles';

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

@@ -1,3 +1,4 @@
+import { generateE2eId } from '@mezon/utils';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 export interface ButtonSwitchProps {
@@ -44,6 +45,7 @@ export const ButtonSwitch: React.FC<ButtonSwitchProps> = ({ title, duration = 10
 			className={`flex items-center p-1 rounded-sm bg-bgSecondary bg-item-theme-hover ${className ?? ''} `}
 			onClick={handleOnClickButton}
 			disabled={disabled}
+			data-e2e={generateE2eId('button.copy')}
 		>
 			{displayedIcon} {title && <p>{title}</p>}
 		</button>

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

@@ -13,7 +13,7 @@ import {
 	selectTheme,
 	selectTitle
 } from '@mezon/store';
-import { EEventAction } from '@mezon/utils';
+import { EEventAction, generateE2eId } from '@mezon/utils';
 import { lazy, Suspense, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -201,8 +201,9 @@ const Canvas = () => {
 				rows={1}
 				disabled={!isEditAndDelCanvas}
 				className="w-full px-4 py-2 mt-[25px] text-theme-message bg-inherit focus:outline-none text-[28px] resize-none leading-[34px] font-bold "
+				data-e2e={generateE2eId('clan_page.screen.canvas_editor.input.title')}
 			/>
-			<div className="w-full">
+			<div className="w-full" data-e2e={generateE2eId('clan_page.screen.canvas_editor.input.content')}>
 				<Suspense fallback={<CanvasContentPlaceholder />}>
 					<CanvasContent
 						key={idCanvas}

libs/components/src/lib/components/ChannelLink/ChannelLink.tsx

@@ -274,6 +274,7 @@ const ChannelLinkComponent = ({
 						/>
 						<div
 							className={`absolute ml-auto w-5 h-5 text-white right-3 group-hover:hidden bg-red-600 rounded-full text-[12px] flex items-center justify-center top-2`}
+							data-e2e={generateE2eId('clan_page.channel_list.item.badge')}
 						>
 							{countNumberNotification}
 						</div>

libs/components/src/lib/components/ChannelSetting/Component/Modal/addMemRoleModal.tsx

@@ -11,7 +11,7 @@ import {
 } from '@mezon/store';
 import { ButtonLoading, Icons, InputField } from '@mezon/ui';
 import type { IChannel, UsersClanEntity } from '@mezon/utils';
-import { ChannelStatusEnum } from '@mezon/utils';
+import { ChannelStatusEnum, generateE2eId } from '@mezon/utils';
 import { ChannelType } from 'mezon-js';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -197,7 +197,10 @@ export const AddMemRole: React.FC<AddMemRoleProps> = ({
 	return (
 		<div ref={modalRef} tabIndex={-1} className="fixed  inset-0 flex items-center justify-center z-50 ">
 			<div className="fixed inset-0 bg-black opacity-80"></div>
-			<div className="relative z-10 p-6 bg-theme-setting-primary text-theme-primary rounded-[5px] w-[440px] text-[15px]">
+			<div
+				className="relative z-10 p-6 bg-theme-setting-primary text-theme-primary rounded-[5px] w-[440px] text-[15px]"
+				data-e2e={generateE2eId('channel_setting_page.permissions.section.member_role_management.modal')}
+			>
 				<h2 className="text-[24px] font-semibold text-center text-theme-primary-active">{t('addMembersRoles.title')}</h2>
 				<div className="flex justify-center">
 					{isPrivate === ChannelStatusEnum.isPrivate && channel.type === ChannelType.CHANNEL_TYPE_MEZON_VOICE && (
@@ -225,7 +228,7 @@ export const AddMemRole: React.FC<AddMemRoleProps> = ({
 					{filterItem.listRolesNotAddChannel.length !== 0 && (
 						<div>
 							<p className="uppercase font-bold text-xs pb-4">{t('addMembersRoles.roles')}</p>
-							<div>
+							<div data-e2e={generateE2eId('channel_setting_page.permissions.section.member_role_management.modal.role_list')}>
 								<ListRole
 									listItem={filterItem.listRolesNotAddChannel}
 									selectedRoleIds={selectedRoleIds}
@@ -237,7 +240,7 @@ export const AddMemRole: React.FC<AddMemRoleProps> = ({
 					{userChannelIds.length !== 0 && (
 						<div className="mt-2">
 							<p className="uppercase font-bold text-xs pb-4">{t('addMembersRoles.members')}</p>
-							<div>
+							<div data-e2e={generateE2eId('channel_setting_page.permissions.section.member_role_management.modal.member_list')}>
 								<ListMembers
 									listItem={filterItem.listMembersNotInChannel}
 									selectedUserIds={selectedUserIds}

libs/components/src/lib/components/ChannelSetting/Component/Modal/listMembers.tsx

@@ -1,6 +1,6 @@
 import { Icons } from '@mezon/ui';
 import type { UsersClanEntity } from '@mezon/utils';
-import { createImgproxyUrl, getAvatarForPrioritize, getNameForPrioritize } from '@mezon/utils';
+import { createImgproxyUrl, generateE2eId, getAvatarForPrioritize, getNameForPrioritize } from '@mezon/utils';
 import { AvatarImage } from '../../../AvatarImage/AvatarImage';
 
 type ListMembersProps = {
@@ -42,7 +42,10 @@ const ItemMember = (props: ItemMemberProps) => {
 	const namePrioritize = getNameForPrioritize(clanName, displayName, username);
 	const avatarPrioritize = getAvatarForPrioritize(clanAvatar, avatar);
 	return (
-		<div className={`flex justify-between py-2 rounded bg-item-hover px-[6px]`}>
+		<div
+			className={`flex justify-between py-2 rounded bg-item-hover px-[6px]`}
+			data-e2e={generateE2eId('channel_setting_page.permissions.section.member_role_management.modal.member_list.member_item')}
+		>
 			<label className="flex gap-x-2 items-center w-full">
 				<div className="relative flex flex-row justify-center">
 					<input
@@ -51,6 +54,9 @@ const ItemMember = (props: ItemMemberProps) => {
 						checked={checked}
 						onChange={onChange}
 						className="peer appearance-none forced-colors:appearance-auto relative w-4 h-4  border-theme-primary rounded-lg focus:outline-none"
+						data-e2e={generateE2eId(
+							'channel_setting_page.permissions.section.member_role_management.modal.member_list.member_item.input'
+						)}
 					/>
 					<Icons.Check className="absolute invisible peer-checked:visible forced-colors:hidden w-4 h-4" />
 				</div>
@@ -62,8 +68,20 @@ const ItemMember = (props: ItemMemberProps) => {
 					src={avatarPrioritize}
 					classNameText="text-[9px] pt-[3px]"
 				/>
-				<p className="text-sm one-line text-theme-primary-active">{namePrioritize}</p>
-				<p className=" font-light">{username}</p>
+				<p
+					className="text-sm one-line text-theme-primary-active"
+					data-e2e={generateE2eId(
+						'channel_setting_page.permissions.section.member_role_management.modal.member_list.member_item.name_prioritize'
+					)}
+				>
+					{namePrioritize}
+				</p>
+				<p
+					className=" font-light"
+					data-e2e={generateE2eId('channel_setting_page.permissions.section.member_role_management.modal.member_list.member_item.username')}
+				>
+					{username}
+				</p>
 			</label>
 		</div>
 	);

libs/components/src/lib/components/ChannelSetting/Component/Modal/listRoles.tsx

@@ -1,5 +1,6 @@
 import type { RolesClanEntity } from '@mezon/store';
 import { Icons } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 
 type ListRoleProps = {
 	listItem: RolesClanEntity[];
@@ -10,7 +11,11 @@ type ListRoleProps = {
 const ListRole = (props: ListRoleProps) => {
 	const { listItem, selectedRoleIds, handleCheckboxRoleChange } = props;
 	return listItem.map((role, index) => (
-		<div className={'flex justify-between py-2 bg-item-hover px-[6px] rounded'} key={role.id}>
+		<div
+			className={'flex justify-between py-2 bg-item-hover px-[6px] rounded'}
+			key={role.id}
+			data-e2e={generateE2eId('channel_setting_page.permissions.section.member_role_management.modal.role_list.role_item')}
+		>
 			<label className="flex gap-x-2 items-center w-full">
 				<div className="relative flex flex-row justify-center">
 					<input
@@ -20,11 +25,17 @@ const ListRole = (props: ListRoleProps) => {
 						checked={selectedRoleIds.includes(role.id)}
 						onChange={(event) => handleCheckboxRoleChange(event, role?.id || '')}
 						className="peer appearance-none forced-colors:appearance-auto relative w-4 h-4  border-theme-primary rounded-lg focus:outline-none"
+						data-e2e={generateE2eId('channel_setting_page.permissions.section.member_role_management.modal.role_list.role_item.input')}
 					/>
 					<Icons.Check className="absolute invisible peer-checked:visible forced-colors:hidden w-4 h-4" />
 				</div>
 				{role.role_icon ? <img src={role.role_icon} alt="" className={'size-5'} /> : <Icons.RoleIcon defaultSize="w-5 h-5 min-w-5" />}
-				<p className="text-sm one-line">{role.title}</p>
+				<p
+					className="text-sm one-line"
+					data-e2e={generateE2eId('channel_setting_page.permissions.section.member_role_management.modal.role_list.role_item.title')}
+				>
+					{role.title}
+				</p>
 			</label>
 		</div>
 	));

libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/PermissionManage/ListRoleMember.tsx

@@ -2,7 +2,7 @@ import type { RolesClanEntity } from '@mezon/store';
 import { channelUsersActions, selectChannelById, selectCurrentClanId, useAppDispatch, useAppSelector } from '@mezon/store';
 import { Icons } from '@mezon/ui';
 import type { UsersClanEntity } from '@mezon/utils';
-import { createImgproxyUrl, getAvatarForPrioritize, getNameForPrioritize, searchNormalizeText } from '@mezon/utils';
+import { createImgproxyUrl, generateE2eId, getAvatarForPrioritize, getNameForPrioritize, searchNormalizeText } from '@mezon/utils';
 import { memo, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -38,14 +38,15 @@ const ListRoleMember = memo((props: ListRoleMemberProps) => {
 	return (
 		<div className="basis-1/3">
 			<HeaderAddRoleMember listManageNotInChannel={listManageNotInChannel} usersClan={usersClan} channelId={channelId} />
-			<div className="mt-2">
+			<div className="mt-2" data-e2e={generateE2eId('channel_setting_page.permissions.section.list_roles_members')}>
 				{listManageInChannel.map((item) => (
 					<div
 						key={item.id}
 						onClick={() => handleItemClick(item)}
 						className={`w-full py-1.5 px-[10px] text-[15px] text-theme-primary bg-item-hover font-medium inline-flex gap-x-2 items-center rounded ${
 							selectedItemId === item.id ? 'bg-item-theme' : ''
 						}`}
+						data-e2e={generateE2eId('channel_setting_page.permissions.section.list_roles_members.role_member_item')}
 					>
 						{item.title}
 					</div>

libs/components/src/lib/components/ChannelSetting/Component/PermissionsChannel/index.tsx

@@ -141,7 +141,11 @@ const PermissionsChannel = (props: PermissionsChannelProps) => {
 							>
 								<div className="flex justify-between items-center pb-4">
 									<p className="uppercase font-bold text-xs text-theme-primary">{t('channelPermission.whoCanAccess')}</p>
-									<button className="btn-primary btn-primary-hover px-4 py-1 rounded-lg " onClick={openAddMemRoleModal}>
+									<button
+										className="btn-primary btn-primary-hover px-4 py-1 rounded-lg "
+										onClick={openAddMemRoleModal}
+										data-e2e={generateE2eId('channel_setting_page.permissions.section.member_role_management.button.add')}
+									>
 										{t('channelPermission.addMemberAndRoles')}
 									</button>
 								</div>

libs/components/src/lib/components/ChannelSetting/channelSettingItem.tsx

@@ -161,6 +161,7 @@ const ChannelSettingItem = (props: ChannelSettingItemProps) => {
 					onClick={() => {
 						setShowModal(true);
 					}}
+					data-e2e={generateE2eId('button.base')}
 				>
 					{isThread ? t('fields.threadDelete.delete') : t('fields.channelDelete.delete')}
 				</button>

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

@@ -29,7 +29,15 @@ import {
 } from '@mezon/store';
 import { Icons } from '@mezon/ui';
 import type { IImageWindowProps } from '@mezon/utils';
-import { EMimeTypes, ETypeLinkMedia, LoadMoreDirection, convertDateStringI18n, createImgproxyUrl, getAttachmentDataForWindow } from '@mezon/utils';
+import {
+	EMimeTypes,
+	ETypeLinkMedia,
+	LoadMoreDirection,
+	convertDateStringI18n,
+	createImgproxyUrl,
+	generateE2eId,
+	getAttachmentDataForWindow
+} from '@mezon/utils';
 import { endOfDay, format, getUnixTime, isSameDay, startOfDay } from 'date-fns';
 import isElectron from 'is-electron';
 import type { RefObject } from 'react';
@@ -635,6 +643,7 @@ export function GalleryModal({ onClose, rootRef }: GalleryModalProps) {
 			ref={modalRef}
 			tabIndex={-1}
 			className="absolute top-8 right-0 rounded-md dark:shadow-shadowBorder shadow-shadowInbox z-[9999] origin-top-right"
+			data-e2e={generateE2eId('clan_page.modal.gallery')}
 		>
 			<div className="flex bg-theme-setting-primary flex-col rounded-md min-h-[400px] md:w-[480px] max-h-[80vh] lg:w-[540px] shadow-sm overflow-hidden">
 				<div className="bg-theme-setting-nav flex flex-col p-[16px]">
@@ -656,6 +665,7 @@ export function GalleryModal({ onClose, rootRef }: GalleryModalProps) {
 										? 'bg-theme-primary text-white'
 										: 'bg-theme-surface text-theme-primary hover:bg-theme-surface-hover'
 								}`}
+								data-e2e={generateE2eId('clan_page.modal.gallery.tab.all')}
 							>
 								{t('gallery.filters.all')}
 							</button>
@@ -666,6 +676,7 @@ export function GalleryModal({ onClose, rootRef }: GalleryModalProps) {
 										? 'bg-theme-primary text-white'
 										: 'bg-theme-surface text-theme-primary hover:bg-theme-surface-hover'
 								}`}
+								data-e2e={generateE2eId('clan_page.modal.gallery.tab.image')}
 							>
 								{t('gallery.filters.images')}
 							</button>
@@ -676,6 +687,7 @@ export function GalleryModal({ onClose, rootRef }: GalleryModalProps) {
 										? 'bg-theme-primary text-white'
 										: 'bg-theme-surface text-theme-primary hover:bg-theme-surface-hover'
 								}`}
+								data-e2e={generateE2eId('clan_page.modal.gallery.tab.video')}
 							>
 								{t('gallery.filters.videos')}
 							</button>
@@ -931,6 +943,7 @@ const ImageWithLoading = React.memo<ImageWithLoadingProps>(
 								preload="metadata"
 								muted
 								playsInline
+								data-e2e={generateE2eId('clan_page.modal.gallery.video')}
 							/>
 						) : (
 							<div className="w-full h-full bg-gray-800" />
@@ -950,6 +963,7 @@ const ImageWithLoading = React.memo<ImageWithLoadingProps>(
 						className={`w-full h-full object-cover ${isLoading ? 'opacity-0' : 'opacity-100'} ${className}`}
 						onLoad={handleLoad}
 						onError={handleError}
+						data-e2e={generateE2eId('clan_page.modal.gallery.image')}
 					/>
 				)}
 			</div>