feat: added data test ids

ts/components/conversation/TimerNotification.tsx

@@ -76,6 +76,7 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
       marginInlineStart={'calc(var(--margins-lg) + 6px)'}
       marginInlineEnd={'calc(var(--margins-lg) + 6px)'}
       key={`readable-message-${messageId}`}
+      dataTestId={'disappear-control-message'}
     >
       <StyledTimerNotification
         container={true}

ts/components/conversation/header/ConversationHeaderSubtitle.tsx

@@ -3,6 +3,15 @@ import styled, { CSSProperties } from 'styled-components';
 import { Flex } from '../../basic/Flex';
 import { SessionIconButton } from '../../icon';
 
+// NOTE the subtitle toggling logic needs improvment
+function loadDataTestId(subtitles: Array<string>, currentIndex: number) {
+  if (currentIndex === subtitles.length - 1) {
+    return 'disappear-messages-type-and-time';
+  } else {
+    return 'conversation-header-subtitle';
+  }
+}
+
 export const StyledSubtitleContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -125,6 +134,7 @@ export const ConversationHeaderSubitle = (props: ConversationHeaderSubitleProps)
             }
           }}
           tabIndex={0}
+          data-testid={loadDataTestId(subtitles, currentIndex)}
         >
           {subtitles[currentIndex]}
         </span>

ts/components/conversation/header/ConversationHeaderTitle.tsx

@@ -133,7 +133,11 @@ export const ConversationHeaderTitle = () => {
       <div className="module-conversation-header__title-flex">
         <div className="module-conversation-header__title">
           {isMe ? (
-            <span onClick={handleRightPanelToggle} role="button">
+            <span
+              onClick={handleRightPanelToggle}
+              role="button"
+              data-testid="header-conversation-name"
+            >
               {i18n('noteToSelf')}
             </span>
           ) : (

ts/components/conversation/message/message-item/ReadableMessage.tsx

@@ -30,6 +30,7 @@ export type ReadableMessageProps = {
   className?: string;
   receivedAt: number | undefined;
   isUnread: boolean;
+  dataTestId?: string;
   onContextMenu?: (e: React.MouseEvent<HTMLElement>) => void;
 };
 
@@ -58,7 +59,7 @@ const debouncedTriggerLoadMoreBottom = debounce(
 );
 
 export const ReadableMessage = (props: ReadableMessageProps) => {
-  const { messageId, onContextMenu, className, receivedAt, isUnread } = props;
+  const { messageId, onContextMenu, className, receivedAt, isUnread, dataTestId } = props;
 
   const isAppFocused = useSelector(getIsAppFocused);
   const dispatch = useDispatch();
@@ -186,7 +187,7 @@ export const ReadableMessage = (props: ReadableMessageProps) => {
       triggerOnce={false}
       trackVisibility={true}
       key={`inview-msg-${messageId}`}
-      data-testid="readable-message"
+      data-testid={dataTestId || 'readable-message'}
     >
       {props.children}
     </InView>

ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx

@@ -3,6 +3,26 @@ import { DisappearingMessageConversationType } from '../../../../../util/expirin
 import { PanelButtonGroup, PanelLabel } from '../../../../buttons/PanelButton';
 import { PanelRadioButton } from '../../../../buttons/PanelRadioButton';
 
+function loadDataTestId(mode: DisappearingMessageConversationType) {
+  let dataTestId = 'disappear-%-option';
+  switch (mode) {
+    case 'legacy':
+      dataTestId = dataTestId.replace('%', 'legacy');
+      break;
+    case 'deleteAfterRead':
+      dataTestId = dataTestId.replace('%', 'after-read');
+      break;
+    case 'deleteAfterSend':
+      dataTestId = dataTestId.replace('%', 'after-send');
+      break;
+    case 'off':
+    default:
+      dataTestId = dataTestId.replace('%', 'off');
+  }
+
+  return dataTestId;
+}
+
 type DisappearingModesProps = {
   options: Record<DisappearingMessageConversationType, boolean>;
   selected?: DisappearingMessageConversationType;
@@ -52,6 +72,7 @@ export const DisappearingModes = (props: DisappearingModesProps) => {
               }}
               disabled={options[mode]}
               noBackgroundColor={true}
+              dataTestId={loadDataTestId(mode)}
             />
           );
         })}

ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx

@@ -196,6 +196,7 @@ export const OverlayDisappearingMessages = (props: OverlayDisappearingMessagesPr
               ? disappearingModeOptions[modeSelected]
               : undefined
           }
+          dataTestId={'disappear-set-button'}
         >
           {window.i18n('set')}
         </SessionButton>

ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx

@@ -35,6 +35,7 @@ export const TimeOptions = (props: TimerOptionsProps) => {
               }}
               noBackgroundColor={true}
               disabled={disabled}
+              dataTestId={`disappear-time-${option.name.replace(' ', '-')}-option`}
             />
           );
         })}