From 9ddd50f82cf558c538bea9824ac93b0e89964f30 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Tue, 10 Sep 2024 14:16:12 +1000 Subject: [PATCH] test: add data-testid to all context menu items --- ts/components/calling/CallButtons.tsx | 15 ++-- .../message-content/MessageContextMenu.tsx | 37 +++++---- .../blockOrUnblock/BlockOrUnblockDialog.tsx | 4 +- .../menu/ConversationListItemContextMenu.tsx | 5 +- ts/components/menu/Menu.tsx | 81 ++++++++++--------- .../menu/MessageRequestBannerContextMenu.tsx | 7 +- .../CopyAccountId/CopyAccountIdMenuItem.tsx | 6 +- .../CopyCommunityUrlMenuItem.tsx | 6 +- .../menu/items/MenuItemWithDataTestId.tsx | 9 +++ 9 files changed, 99 insertions(+), 71 deletions(-) create mode 100644 ts/components/menu/items/MenuItemWithDataTestId.tsx diff --git a/ts/components/calling/CallButtons.tsx b/ts/components/calling/CallButtons.tsx index 17de2e086..c802337e8 100644 --- a/ts/components/calling/CallButtons.tsx +++ b/ts/components/calling/CallButtons.tsx @@ -1,5 +1,5 @@ import { MouseEvent, useEffect, useState } from 'react'; -import { contextMenu, Item, Menu } from 'react-contexify'; +import { contextMenu, Menu } from 'react-contexify'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; @@ -10,6 +10,7 @@ import { getHasOngoingCallWithPubkey } from '../../state/selectors/call'; import { SessionIconButton } from '../icon'; import { DropDownAndToggleButton } from '../icon/DropDownAndToggleButton'; import { SessionContextMenuContainer } from '../SessionContextMenuContainer'; +import { ItemWithDataTestId } from '../menu/items/MenuItemWithDataTestId'; const VideoInputMenu = ({ triggerId, @@ -23,14 +24,14 @@ const VideoInputMenu = ({ {camerasList.map(m => { return ( - { void CallManager.selectCameraByDeviceId(m.deviceId); }} > {m.label.substr(0, 40)} - + ); })} @@ -96,14 +97,14 @@ const AudioInputMenu = ({ {audioInputsList.map(m => { return ( - { void CallManager.selectAudioInputByDeviceId(m.deviceId); }} > {m.label.substr(0, 40)} - + ); })} @@ -165,14 +166,14 @@ const AudioOutputMenu = ({ {audioOutputsList.map(m => { return ( - { void CallManager.selectAudioOutputByDeviceId(m.deviceId); }} > {m.label.substr(0, 40)} - + ); })} diff --git a/ts/components/conversation/message/message-content/MessageContextMenu.tsx b/ts/components/conversation/message/message-content/MessageContextMenu.tsx index cc00448f9..ec297356f 100644 --- a/ts/components/conversation/message/message-content/MessageContextMenu.tsx +++ b/ts/components/conversation/message/message-content/MessageContextMenu.tsx @@ -2,7 +2,7 @@ import { Dispatch, useCallback, useEffect, useRef, useState } from 'react'; import { isNumber } from 'lodash'; -import { Item, ItemParams, Menu, useContextMenu } from 'react-contexify'; +import { ItemParams, Menu, useContextMenu } from 'react-contexify'; import { useDispatch } from 'react-redux'; import useClickAway from 'react-use/lib/useClickAway'; import useMouse from 'react-use/lib/useMouse'; @@ -51,6 +51,7 @@ import { MessageReactBar } from './MessageReactBar'; import { showCopyAccountIdAction } from '../../../menu/items/CopyAccountId'; import { CopyAccountIdMenuItem } from '../../../menu/items/CopyAccountId/CopyAccountIdMenuItem'; import { Localizer } from '../../../basic/Localizer'; +import { ItemWithDataTestId } from '../../../menu/items/MenuItemWithDataTestId'; export type MessageContextMenuSelectorProps = Pick< MessageRenderingProps, @@ -109,7 +110,7 @@ const DeleteItem = ({ messageId }: { messageId: string }) => { return null; } - return {window.i18n('delete')}; + return {window.i18n('delete')}; }; type MessageId = { messageId: string }; @@ -146,12 +147,16 @@ const AdminActionItems = ({ messageId }: MessageId) => { return showAdminActions ? ( <> - {window.i18n('banUser')} - {window.i18n('banUnbanUser')} + {window.i18n('banUser')} + {window.i18n('banUnbanUser')} {isSenderAdmin ? ( - {window.i18n('adminRemoveAsAdmin')} + + {window.i18n('adminRemoveAsAdmin')} + ) : ( - {window.i18n('adminPromoteToAdmin')} + + {window.i18n('adminPromoteToAdmin')} + )} ) : null; @@ -170,7 +175,9 @@ const RetryItem = ({ messageId }: MessageId) => { await found.retrySend(); } }, [messageId]); - return showRetry ? {window.i18n('resend')} : null; + return showRetry ? ( + {window.i18n('resend')} + ) : null; }; export const showMessageInfoOverlay = async ({ @@ -372,26 +379,28 @@ export const MessageContextMenu = (props: Props) => { /> )} {attachments?.length && attachments.every(m => !m.pending && m.path) ? ( - {window.i18n('save')} + {window.i18n('save')} ) : null} - {window.i18n('copy')} - {(isSent || !isOutgoing) && {window.i18n('reply')}} - {window.i18n('copy')} + {(isSent || !isOutgoing) && ( + {window.i18n('reply')} + )} + { void showMessageInfoOverlay({ messageId, dispatch }); }} > - + {/* this is a message in the view, so always private */} {sender && showCopyAccountIdAction({ isPrivate: true, pubkey: sender }) ? ( ) : null} {isDeletable ? ( - + - + ) : null} diff --git a/ts/components/dialog/blockOrUnblock/BlockOrUnblockDialog.tsx b/ts/components/dialog/blockOrUnblock/BlockOrUnblockDialog.tsx index 4d5ea7bff..fea7051e7 100644 --- a/ts/components/dialog/blockOrUnblock/BlockOrUnblockDialog.tsx +++ b/ts/components/dialog/blockOrUnblock/BlockOrUnblockDialog.tsx @@ -86,7 +86,7 @@ export const BlockOrUnblockDialog = ({ pubkeys, action, onConfirmed }: NonNullab return ( - + @@ -97,12 +97,14 @@ export const BlockOrUnblockDialog = ({ pubkeys, action, onConfirmed }: NonNullab buttonColor={SessionButtonColor.Danger} onClick={onConfirm} text={localizedAction} + dataTestId="session-confirm-ok-button" /> diff --git a/ts/components/menu/ConversationListItemContextMenu.tsx b/ts/components/menu/ConversationListItemContextMenu.tsx index f1b110c06..e8e6e76ad 100644 --- a/ts/components/menu/ConversationListItemContextMenu.tsx +++ b/ts/components/menu/ConversationListItemContextMenu.tsx @@ -1,4 +1,4 @@ -import { Item, Menu } from 'react-contexify'; +import { Menu } from 'react-contexify'; import { useSelector } from 'react-redux'; import { useConvoIdFromContext } from '../../contexts/ConvoIdContext'; @@ -27,6 +27,7 @@ import { } from './Menu'; import { CopyCommunityUrlMenuItem } from './items/CopyCommunityUrl/CopyCommunityUrlMenuItem'; import { CopyAccountIdMenuItem } from './items/CopyAccountId/CopyAccountIdMenuItem'; +import { ItemWithDataTestId } from './items/MenuItemWithDataTestId'; export type PropsContextConversationItem = { triggerId: string; @@ -92,7 +93,7 @@ export const PinConversationMenuItem = (): JSX.Element | null => { }; const menuText = isPinned ? window.i18n('pinUnpin') : window.i18n('pin'); - return {menuText}; + return {menuText}; } return null; }; diff --git a/ts/components/menu/Menu.tsx b/ts/components/menu/Menu.tsx index d742b2f85..27fd58547 100644 --- a/ts/components/menu/Menu.tsx +++ b/ts/components/menu/Menu.tsx @@ -1,4 +1,4 @@ -import { Item, Submenu } from 'react-contexify'; +import { Submenu } from 'react-contexify'; import { useDispatch, useSelector } from 'react-redux'; import { useConvoIdFromContext } from '../../contexts/ConvoIdContext'; import { @@ -57,6 +57,7 @@ import { getIsMessageSection } from '../../state/selectors/section'; import { useSelectedConversationKey } from '../../state/selectors/selectedConversation'; import type { LocalizerToken } from '../../types/localizer'; import { SessionButtonColor } from '../basic/SessionButton'; +import { ItemWithDataTestId } from './items/MenuItemWithDataTestId'; /** Menu items standardized */ @@ -66,13 +67,13 @@ export const InviteContactMenuItem = (): JSX.Element | null => { if (isPublic) { return ( - { showInviteContactByConvoId(convoId); }} > {window.i18n('membersInvite')} - + ); } return null; @@ -91,7 +92,11 @@ export const MarkConversationUnreadMenuItem = (): JSX.Element | null => { void conversation?.markAsUnread(true); }; - return {window.i18n('messageMarkUnread')}; + return ( + + {window.i18n('messageMarkUnread')} + + ); } return null; }; @@ -133,7 +138,7 @@ export const DeletePrivateContactMenuItem = () => { ); }; - return {menuItemText}; + return {menuItemText}; } return null; }; @@ -149,7 +154,7 @@ export const LeaveGroupOrCommunityMenuItem = () => { if (!isKickedFromGroup && !isLeft && !isPrivate) { return ( - { void showLeaveGroupByConvoId(convoId, username); }} @@ -160,7 +165,7 @@ export const LeaveGroupOrCommunityMenuItem = () => { lastMessage?.interactionStatus === ConversationInteractionStatus.Error ? window.i18n('conversationsDelete') : window.i18n('groupLeave')} - + ); } @@ -177,7 +182,7 @@ export const ShowUserDetailsMenuItem = () => { if (isPrivate && !isBlinded) { return ( - { dispatch( updateUserDetailsModal({ @@ -189,7 +194,7 @@ export const ShowUserDetailsMenuItem = () => { }} > {window.i18n('contactUserDetails')} - + ); } @@ -204,13 +209,13 @@ export const UpdateGroupNameMenuItem = () => { if (!isKickedFromGroup && !left && weAreAdmin) { return ( - { void showUpdateGroupNameByConvoId(convoId); }} > {window.i18n('groupEdit')} - + ); } return null; @@ -224,13 +229,13 @@ export const RemoveModeratorsMenuItem = (): JSX.Element | null => { if (!isKickedFromGroup && weAreAdmin && isPublic) { return ( - { showRemoveModeratorsByConvoId(convoId); }} > {window.i18n('adminRemove')} - + ); } return null; @@ -244,13 +249,13 @@ export const AddModeratorsMenuItem = (): JSX.Element | null => { if (!isKickedFromGroup && weAreAdmin && isPublic) { return ( - { showAddModeratorsByConvoId(convoId); }} > {window.i18n('adminPromote')} - + ); } return null; @@ -264,13 +269,13 @@ export const UnbanMenuItem = (): JSX.Element | null => { if (isPublic && !isKickedFromGroup && weAreAdmin) { return ( - { showUnbanUserByConvoId(convoId); }} > {window.i18n('banUnbanUser')} - + ); } return null; @@ -284,13 +289,13 @@ export const BanMenuItem = (): JSX.Element | null => { if (isPublic && !isKickedFromGroup && weAreAdmin) { return ( - { showBanUserByConvoId(convoId); }} > {window.i18n('banUser')} - + ); } return null; @@ -302,9 +307,9 @@ export const MarkAllReadMenuItem = (): JSX.Element | null => { if (!isIncomingRequest && !PubKey.isBlinded(convoId)) { return ( // eslint-disable-next-line @typescript-eslint/no-misused-promises - markAllReadByConvoId(convoId)}> + markAllReadByConvoId(convoId)}> {window.i18n('messageMarkRead')} - + ); } return null; @@ -323,7 +328,7 @@ export const BlockMenuItem = (): JSX.Element | null => { ? async () => unblockConvoById(convoId) : async () => blockConvoById(convoId); // eslint-disable-next-line @typescript-eslint/no-misused-promises - return {blockTitle}; + return {blockTitle}; } return null; }; @@ -341,9 +346,9 @@ export const ClearNicknameMenuItem = (): JSX.Element | null => { return ( // eslint-disable-next-line @typescript-eslint/no-misused-promises - clearNickNameByConvoId(convoId)}> + clearNickNameByConvoId(convoId)}> {window.i18n('nicknameRemove')} - + ); }; @@ -358,13 +363,13 @@ export const ChangeNicknameMenuItem = () => { return null; } return ( - { dispatch(changeNickNameModal({ conversationId: convoId })); }} > {window.i18n('nicknameSet')} - + ); }; @@ -380,14 +385,14 @@ export const DeleteMessagesMenuItem = () => { return null; } return ( - { deleteAllMessagesByConvoIdWithConfirmation(convoId); }} > {/* just more than 1 to have the string Delete Messages */} {window.i18n('deleteMessage', { count: 2 })} - + ); }; @@ -407,13 +412,13 @@ export const DeletePrivateConversationMenuItem = () => { } return ( - { showLeavePrivateConversationbyConvoId(convoId); }} > {isMe ? window.i18n('noteToSelfHide') : window.i18n('conversationsDelete')} - + ); }; @@ -425,7 +430,7 @@ export const AcceptMsgRequestMenuItem = () => { if (isRequest && isPrivate) { return ( - { await convo.setDidApproveMe(true); @@ -434,7 +439,7 @@ export const AcceptMsgRequestMenuItem = () => { }} > {window.i18n('accept')} - + ); } return null; @@ -448,7 +453,7 @@ export const DeclineMsgRequestMenuItem = () => { if (isPrivate && isRequest) { return ( - { declineConversationWithConfirm({ conversationId: convoId, @@ -459,7 +464,7 @@ export const DeclineMsgRequestMenuItem = () => { }} > {window.i18n('decline')} - + ); } return null; @@ -473,7 +478,7 @@ export const DeclineAndBlockMsgRequestMenuItem = () => { if (isRequest && isPrivate) { return ( - { declineConversationWithConfirm({ conversationId: convoId, @@ -484,7 +489,7 @@ export const DeclineAndBlockMsgRequestMenuItem = () => { }} > {window.i18n('block')} - + ); } return null; @@ -540,7 +545,7 @@ export const NotificationForConvoMenuItem = (): JSX.Element | null => { const disabled = item.value === currentNotificationSetting; return ( - { void setNotificationForConvoId(convoId, item.value); @@ -548,7 +553,7 @@ export const NotificationForConvoMenuItem = (): JSX.Element | null => { disabled={disabled} > {item.name} - + ); })} diff --git a/ts/components/menu/MessageRequestBannerContextMenu.tsx b/ts/components/menu/MessageRequestBannerContextMenu.tsx index 8a28ba7cb..053fadfb7 100644 --- a/ts/components/menu/MessageRequestBannerContextMenu.tsx +++ b/ts/components/menu/MessageRequestBannerContextMenu.tsx @@ -1,9 +1,10 @@ -import { Item, Menu } from 'react-contexify'; +import { Menu } from 'react-contexify'; import { useDispatch } from 'react-redux'; import { SessionContextMenuContainer } from '../SessionContextMenuContainer'; import { hideMessageRequestBanner } from '../../state/ducks/userConfig'; +import { ItemWithDataTestId } from './items/MenuItemWithDataTestId'; export type PropsContextConversationItem = { triggerId: string; @@ -12,13 +13,13 @@ export type PropsContextConversationItem = { const HideBannerMenuItem = (): JSX.Element => { const dispatch = useDispatch(); return ( - { dispatch(hideMessageRequestBanner()); }} > {window.i18n('hide')} - + ); }; diff --git a/ts/components/menu/items/CopyAccountId/CopyAccountIdMenuItem.tsx b/ts/components/menu/items/CopyAccountId/CopyAccountIdMenuItem.tsx index d1e457571..4bd303f57 100644 --- a/ts/components/menu/items/CopyAccountId/CopyAccountIdMenuItem.tsx +++ b/ts/components/menu/items/CopyAccountId/CopyAccountIdMenuItem.tsx @@ -1,8 +1,8 @@ -import { Item } from 'react-contexify'; import { useIsPrivate } from '../../../../hooks/useParamSelector'; import { copyPublicKeyByConvoId } from '../../../../interactions/conversationInteractions'; import { Localizer } from '../../../basic/Localizer'; import { showCopyAccountIdAction } from '.'; +import { ItemWithDataTestId } from '../MenuItemWithDataTestId'; /** * Can be used to copy the conversation AccountID or the message's author sender'id. @@ -15,13 +15,13 @@ export const CopyAccountIdMenuItem = ({ pubkey }: { pubkey: string }): JSX.Eleme if (showCopyAccountIdAction({ isPrivate, pubkey })) { return ( - { void copyPublicKeyByConvoId(pubkey); }} > - + ); } return null; diff --git a/ts/components/menu/items/CopyCommunityUrl/CopyCommunityUrlMenuItem.tsx b/ts/components/menu/items/CopyCommunityUrl/CopyCommunityUrlMenuItem.tsx index e587e3a0c..5614c7555 100644 --- a/ts/components/menu/items/CopyCommunityUrl/CopyCommunityUrlMenuItem.tsx +++ b/ts/components/menu/items/CopyCommunityUrl/CopyCommunityUrlMenuItem.tsx @@ -1,8 +1,8 @@ -import { Item } from 'react-contexify'; import { showCopyCommunityUrlMenuItem } from '.'; import { useIsPublic } from '../../../../hooks/useParamSelector'; import { copyPublicKeyByConvoId } from '../../../../interactions/conversationInteractions'; import { Localizer } from '../../../basic/Localizer'; +import { ItemWithDataTestId } from '../MenuItemWithDataTestId'; export const CopyCommunityUrlMenuItem = ({ convoId }: { convoId: string }): JSX.Element | null => { const isPublic = useIsPublic(convoId); @@ -11,13 +11,13 @@ export const CopyCommunityUrlMenuItem = ({ convoId }: { convoId: string }): JSX. if (showCopyCommunityUrlMenuItem({ isPublic })) { return ( - { void copyPublicKeyByConvoId(convoId); }} > - + ); } return null; diff --git a/ts/components/menu/items/MenuItemWithDataTestId.tsx b/ts/components/menu/items/MenuItemWithDataTestId.tsx new file mode 100644 index 000000000..9301dd5ba --- /dev/null +++ b/ts/components/menu/items/MenuItemWithDataTestId.tsx @@ -0,0 +1,9 @@ +import { Item, ItemProps } from 'react-contexify'; + +export function ItemWithDataTestId({ children, ...props }: ItemProps) { + return ( + + {children} + + ); +}