From 82fcc3be982b87ecd3c9bd0d4ece8133205fb417 Mon Sep 17 00:00:00 2001 From: thieuthang-dev Date: Mon, 15 Sep 2025 14:48:38 +0700 Subject: [PATCH 1/4] feat: data e2e for thread management --- .../Threads/CreateThread/PrivateThread.tsx | 9 ++++++++- .../Threads/ThreadModal/index.tsx | 10 ++++++---- .../components/ThreadListChannel/ThreadLink.tsx | 12 +++++++++--- libs/utils/src/lib/e2e-testing/constants.ts | 16 ++++++++++++++-- 4 files changed, 37 insertions(+), 10 deletions(-) diff --git a/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/CreateThread/PrivateThread.tsx b/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/CreateThread/PrivateThread.tsx index 7104a72a4a..7352a017cf 100644 --- a/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/CreateThread/PrivateThread.tsx +++ b/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/CreateThread/PrivateThread.tsx @@ -1,4 +1,5 @@ import { selectIsPrivate, threadsActions, useAppDispatch } from '@mezon/store'; +import { generateE2eId } from '@mezon/utils'; import { useSelector } from 'react-redux'; type PrivateThreadProps = { @@ -19,7 +20,13 @@ const PrivateThread = ({ label, title }: PrivateThreadProps) => {
{title}
- + diff --git a/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/ThreadModal/index.tsx b/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/ThreadModal/index.tsx index 1b14195991..29799c6846 100644 --- a/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/ThreadModal/index.tsx +++ b/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/ThreadModal/index.tsx @@ -1,6 +1,6 @@ import { useAppNavigation, useEscapeKeyClose, useOnClickOutside, usePermissionChecker, useReference } from '@mezon/core'; +import type { ChannelsEntity } from '@mezon/store'; import { - ChannelsEntity, hasGrandchildModal, searchMessagesActions, selectCurrentChannel, @@ -12,8 +12,9 @@ import { useAppDispatch } from '@mezon/store'; import { Icons } from '@mezon/ui'; -import { EOverriddenPermission, LIMIT, checkIsThread } from '@mezon/utils'; -import { RefObject, useCallback, useEffect, useRef, useState } from 'react'; +import { EOverriddenPermission, LIMIT, checkIsThread, generateE2eId } from '@mezon/utils'; +import type { RefObject } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import EmptyThread from './EmptyThread'; @@ -38,7 +39,7 @@ const ThreadModal = ({ onClose, rootRef }: ThreadsProps) => { const setIsShowCreateThread = useCallback( (isShowCreateThread: boolean, channelId?: string) => { - channelId && dispatch(threadsActions.setIsShowCreateThread({ channelId: channelId, isShowCreateThread })); + channelId && dispatch(threadsActions.setIsShowCreateThread({ channelId, isShowCreateThread })); dispatch(topicsActions.setIsShowCreateTopic(false)); }, [currentChannel] @@ -134,6 +135,7 @@ const ThreadModal = ({ onClose, rootRef }: ThreadsProps) => { diff --git a/libs/components/src/lib/components/ThreadListChannel/ThreadLink.tsx b/libs/components/src/lib/components/ThreadListChannel/ThreadLink.tsx index 94d58028cf..98cac24ee3 100644 --- a/libs/components/src/lib/components/ThreadListChannel/ThreadLink.tsx +++ b/libs/components/src/lib/components/ThreadListChannel/ThreadLink.tsx @@ -7,13 +7,15 @@ import { useAppSelector } from '@mezon/store'; import { Icons } from '@mezon/ui'; -import { IChannel } from '@mezon/utils'; +import type { IChannel } from '@mezon/utils'; +import { generateE2eId } from '@mezon/utils'; import { ChannelStreamMode } from 'mezon-js'; import React, { memo, useCallback, useImperativeHandle, useRef } from 'react'; import { useModal } from 'react-modal-hook'; import { Link } from 'react-router-dom'; import BuzzBadge from '../BuzzBadge'; -import { Coords, classes } from '../ChannelLink'; +import type { Coords } from '../ChannelLink'; +import { classes } from '../ChannelLink'; import SettingChannel from '../ChannelSetting'; import { DeleteModal } from '../ChannelSetting/Component/Modal/deleteChannelModal'; import EventSchedule from '../EventSchedule'; @@ -119,7 +121,11 @@ const ThreadLink = React.forwardRef(({ thread, h
{events[0] && } - = 15 ? thread?.channel_label : ''} className="truncate"> + = 15 ? thread?.channel_label : ''} + className="truncate" + data-e2e={generateE2eId('clan_page.channel_list.thread_item.name')} + > {thread.channel_label}
diff --git a/libs/utils/src/lib/e2e-testing/constants.ts b/libs/utils/src/lib/e2e-testing/constants.ts index 1e1d6007b5..68697373f0 100644 --- a/libs/utils/src/lib/e2e-testing/constants.ts +++ b/libs/utils/src/lib/e2e-testing/constants.ts @@ -144,6 +144,9 @@ export const DATA_E2E_IDENTIFIER = { stream: '' }, name: '' + }, + thread_item: { + name: '' } } }, @@ -204,7 +207,15 @@ export const DATA_E2E_IDENTIFIER = { inbox: '', pin: '', canvas: '', - thread: '', + thread: { + modal: { + thread_management: { + button: { + create_thread: '' + } + } + } + }, chat: '' } }, @@ -222,7 +233,8 @@ export const DATA_E2E_IDENTIFIER = { delete_message: '' }, thread_name_input: { - thread_box: '' + thread_box: '', + thread_private_checkbox: '' } }, mention: { From 2af3b2e34b85f34e0872bf7ca8e669b10607b6d7 Mon Sep 17 00:00:00 2001 From: thieuthang-dev Date: Mon, 15 Sep 2025 15:47:11 +0700 Subject: [PATCH 2/4] fix: fix format --- .../TopBarComponents/Threads/ThreadModal/index.tsx | 7 +++---- .../src/lib/components/ThreadListChannel/ThreadLink.tsx | 6 ++---- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/ThreadModal/index.tsx b/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/ThreadModal/index.tsx index 29799c6846..d19b3c9c2e 100644 --- a/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/ThreadModal/index.tsx +++ b/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/ThreadModal/index.tsx @@ -1,6 +1,6 @@ import { useAppNavigation, useEscapeKeyClose, useOnClickOutside, usePermissionChecker, useReference } from '@mezon/core'; -import type { ChannelsEntity } from '@mezon/store'; import { + ChannelsEntity, hasGrandchildModal, searchMessagesActions, selectCurrentChannel, @@ -13,8 +13,7 @@ import { } from '@mezon/store'; import { Icons } from '@mezon/ui'; import { EOverriddenPermission, LIMIT, checkIsThread, generateE2eId } from '@mezon/utils'; -import type { RefObject } from 'react'; -import { useCallback, useEffect, useRef, useState } from 'react'; +import { RefObject, useCallback, useEffect, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import EmptyThread from './EmptyThread'; @@ -39,7 +38,7 @@ const ThreadModal = ({ onClose, rootRef }: ThreadsProps) => { const setIsShowCreateThread = useCallback( (isShowCreateThread: boolean, channelId?: string) => { - channelId && dispatch(threadsActions.setIsShowCreateThread({ channelId, isShowCreateThread })); + channelId && dispatch(threadsActions.setIsShowCreateThread({ channelId: channelId, isShowCreateThread })); dispatch(topicsActions.setIsShowCreateTopic(false)); }, [currentChannel] diff --git a/libs/components/src/lib/components/ThreadListChannel/ThreadLink.tsx b/libs/components/src/lib/components/ThreadListChannel/ThreadLink.tsx index 98cac24ee3..9181790ff4 100644 --- a/libs/components/src/lib/components/ThreadListChannel/ThreadLink.tsx +++ b/libs/components/src/lib/components/ThreadListChannel/ThreadLink.tsx @@ -7,15 +7,13 @@ import { useAppSelector } from '@mezon/store'; import { Icons } from '@mezon/ui'; -import type { IChannel } from '@mezon/utils'; -import { generateE2eId } from '@mezon/utils'; +import { IChannel, generateE2eId } from '@mezon/utils'; import { ChannelStreamMode } from 'mezon-js'; import React, { memo, useCallback, useImperativeHandle, useRef } from 'react'; import { useModal } from 'react-modal-hook'; import { Link } from 'react-router-dom'; import BuzzBadge from '../BuzzBadge'; -import type { Coords } from '../ChannelLink'; -import { classes } from '../ChannelLink'; +import { Coords, classes } from '../ChannelLink'; import SettingChannel from '../ChannelSetting'; import { DeleteModal } from '../ChannelSetting/Component/Modal/deleteChannelModal'; import EventSchedule from '../EventSchedule'; From b88902c20b448a53ee602e00a8e1072f678657f8 Mon Sep 17 00:00:00 2001 From: thieuthang-dev Date: Tue, 16 Sep 2025 11:49:52 +0700 Subject: [PATCH 3/4] refactor: refactor thread box e2e --- .../TopBarComponents/Threads/CreateThread/PrivateThread.tsx | 2 +- .../Threads/CreateThread/ThreadNameTextField.tsx | 2 +- libs/utils/src/lib/e2e-testing/constants.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/CreateThread/PrivateThread.tsx b/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/CreateThread/PrivateThread.tsx index 7352a017cf..19842e10d1 100644 --- a/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/CreateThread/PrivateThread.tsx +++ b/libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/CreateThread/PrivateThread.tsx @@ -25,7 +25,7 @@ const PrivateThread = ({ label, title }: PrivateThreadProps) => { onChange={handleToggle} id="private" className="w-6 h-6 rounded-lg focus:ring-transparent cursor-pointer" - data-e2e={generateE2eId('chat.channel_message.thread_name_input.thread_private_checkbox')} + data-e2e={generateE2eId('chat.channel_message.thread_box.thread_private_checkbox')} />