From a1a3d68e45cd3ac99d46a0d785b7b7670eb69561 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 17 May 2023 15:19:59 +1000
Subject: [PATCH] feat: added data test ids

---
 .../conversation/TimerNotification.tsx        |  1 +
 .../header/ConversationHeaderSubtitle.tsx     | 10 +++++++++
 .../header/ConversationHeaderTitle.tsx        |  6 +++++-
 .../message/message-item/ReadableMessage.tsx  |  5 +++--
 .../DisappearingModes.tsx                     | 21 +++++++++++++++++++
 .../OverlayDisappearingMessages.tsx           |  1 +
 .../disappearing-messages/TimeOptions.tsx     |  1 +
 7 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/ts/components/conversation/TimerNotification.tsx b/ts/components/conversation/TimerNotification.tsx
index a6e0c7dcd..be5c2c2de 100644
--- a/ts/components/conversation/TimerNotification.tsx
+++ b/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}
diff --git a/ts/components/conversation/header/ConversationHeaderSubtitle.tsx b/ts/components/conversation/header/ConversationHeaderSubtitle.tsx
index 47a0d3b25..d44c4e92a 100644
--- a/ts/components/conversation/header/ConversationHeaderSubtitle.tsx
+++ b/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>
diff --git a/ts/components/conversation/header/ConversationHeaderTitle.tsx b/ts/components/conversation/header/ConversationHeaderTitle.tsx
index 71afa726f..6d374e0db 100644
--- a/ts/components/conversation/header/ConversationHeaderTitle.tsx
+++ b/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>
           ) : (
diff --git a/ts/components/conversation/message/message-item/ReadableMessage.tsx b/ts/components/conversation/message/message-item/ReadableMessage.tsx
index bcaba031e..6324e0e55 100644
--- a/ts/components/conversation/message/message-item/ReadableMessage.tsx
+++ b/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>
diff --git a/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx b/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx
index ae8842f1d..12098063e 100644
--- a/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx
+++ b/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)}
             />
           );
         })}
diff --git a/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx b/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx
index 2c785f37d..bfbd1b158 100644
--- a/ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx
+++ b/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>
diff --git a/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx b/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx
index cfd0bbf32..09a101e9a 100644
--- a/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx
+++ b/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`}
             />
           );
         })}