add data-testid for leftpane sections and edit profile dialog

ts/components/Avatar.tsx

@@ -23,6 +23,7 @@ type Props = {
   base64Data?: string; // if this is not empty, it will be used to render the avatar with base64 encoded data
   memberAvatars?: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
   onAvatarClick?: () => void;
+  dataTestId?: string;
 };
 
 const Identicon = (props: Props) => {
@@ -92,7 +93,7 @@ const AvatarImage = (props: {
 };
 
 const AvatarInner = (props: Props) => {
-  const { avatarPath, base64Data, size, memberAvatars, name } = props;
+  const { avatarPath, base64Data, size, memberAvatars, name, dataTestId } = props;
   const [imageBroken, setImageBroken] = useState(false);
   // contentType is not important
   const { urlToLoad } = useEncryptedFileFetch(avatarPath || '', '');
@@ -122,6 +123,7 @@ const AvatarInner = (props: Props) => {
         props.onAvatarClick?.();
       }}
       role="button"
+      data-testid={dataTestId}
     >
       {hasImage ? (
         <AvatarImage

ts/components/conversation/ConversationHeader.tsx

@@ -107,7 +107,7 @@ const SelectionOverlay = () => {
   return (
     <div className="message-selection-overlay">
       <div className="close-button">
-        <SessionIconButton iconType="exit" iconSize={'medium'} onClick={onCloseOverlay} />
+        <SessionIconButton iconType="exit" iconSize="medium" onClick={onCloseOverlay} />
       </div>
 
       <div className="button-group">
@@ -145,7 +145,7 @@ const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) =
         });
       }}
     >
-      <SessionIconButton iconType="ellipses" iconSize={'medium'} />
+      <SessionIconButton iconType="ellipses" iconSize="medium" />
     </div>
   );
 };

ts/components/conversation/media-gallery/MediaGallery.tsx

@@ -45,7 +45,7 @@ const Sections = (props: Props & { selectedTab: TabType }) => {
     const label =
       type === 'media' ? window.i18n('mediaEmptyState') : window.i18n('documentsEmptyState');
 
-    return <EmptyState data-test="EmptyState" label={label} />;
+    return <EmptyState data-testid="EmptyState" label={label} />;
   }
 
   return (

ts/components/dialog/EditProfileDialog.tsx

@@ -82,7 +82,7 @@ export class EditProfileDialog extends React.Component<{}, State> {
         : undefined;
 
     return (
-      <div className="edit-profile-dialog">
+      <div className="edit-profile-dialog" data-testid="edit-profile-dialog">
         <SessionWrapperModal
           title={i18n('editProfileModalTitle')}
           onClose={this.closeDialog}
@@ -97,7 +97,10 @@ export class EditProfileDialog extends React.Component<{}, State> {
 
           <div className="session-id-section">
             <PillDivider text={window.i18n('yourSessionID')} />
-            <p className={classNames('text-selectable', 'session-id-section-display')}>
+            <p
+              className={classNames('text-selectable', 'session-id-section-display')}
+              data-testid="your-session-id"
+            >
               {sessionID}
             </p>
 
@@ -182,10 +185,10 @@ export class EditProfileDialog extends React.Component<{}, State> {
         {this.renderProfileHeader()}
 
         <div className="profile-name-uneditable">
-          <p>{name}</p>
+          <p data-testid="your-profile-name">{name}</p>
           <SessionIconButton
             iconType="pencil"
-            iconSize={'medium'}
+            iconSize="medium"
             onClick={() => {
               this.setState({ mode: 'edit' });
             }}

ts/components/dialog/OnionStatusPathDialog.tsx

@@ -150,8 +150,9 @@ export const ModalStatusLight = (props: StatusLightType) => {
 export const ActionPanelOnionStatusLight = (props: {
   isSelected: boolean;
   handleClick: () => void;
+  dataTestId?: string;
 }) => {
-  const { isSelected, handleClick } = props;
+  const { isSelected, handleClick, dataTestId } = props;
 
   const onionPathsCount = useSelector(getOnionPathsCount);
   const firstPathLength = useSelector(getFirstOnionPathLength);
@@ -179,6 +180,7 @@ export const ActionPanelOnionStatusLight = (props: {
       glowStartDelay={0}
       noScale={true}
       isSelected={isSelected}
+      dataTestId={dataTestId}
     />
   );
 };

ts/components/session/ActionsPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { SessionIconButton, SessionIconType } from './icon';
+import { SessionIconButton } from './icon';
 import { Avatar, AvatarSize } from '../Avatar';
 import { SessionToastContainer } from './SessionToastContainer';
 import { getConversationController } from '../../session/conversations';
@@ -96,47 +96,71 @@ const Section = (props: { type: SectionType; avatarPath?: string | null }) => {
         onAvatarClick={handleClick}
         name={userName}
         pubkey={ourNumber}
+        dataTestId="leftpane-primary-avatar"
       />
     );
   }
 
   const unreadToShow = type === SectionType.Message ? unreadMessageCount : undefined;
 
-  let iconType: SessionIconType;
   switch (type) {
     case SectionType.Message:
-      iconType = 'chatBubble';
-      break;
+      return (
+        <SessionIconButton
+          iconSize="medium"
+          dataTestId="message-section"
+          iconType={'chatBubble'}
+          iconColor={undefined}
+          notificationCount={unreadToShow}
+          onClick={handleClick}
+          isSelected={isSelected}
+        />
+      );
     case SectionType.Contact:
-      iconType = 'users';
-      break;
+      return (
+        <SessionIconButton
+          iconSize="medium"
+          dataTestId="contact-section"
+          iconType={'users'}
+          iconColor={undefined}
+          notificationCount={unreadToShow}
+          onClick={handleClick}
+          isSelected={isSelected}
+        />
+      );
     case SectionType.Settings:
-      iconType = 'gear';
-      break;
-    case SectionType.Moon:
-      iconType = 'moon';
-      break;
+      return (
+        <SessionIconButton
+          iconSize="medium"
+          dataTestId="settings-section"
+          iconType={'gear'}
+          iconColor={undefined}
+          notificationCount={unreadToShow}
+          onClick={handleClick}
+          isSelected={isSelected}
+        />
+      );
+    case SectionType.PathIndicator:
+      return (
+        <ActionPanelOnionStatusLight
+          dataTestId="onion-status-section"
+          handleClick={handleClick}
+          isSelected={isSelected}
+        />
+      );
     default:
-      iconType = 'moon';
-  }
-  const iconColor = undefined;
-
-  return (
-    <>
-      {type === SectionType.PathIndicator ? (
-        <ActionPanelOnionStatusLight handleClick={handleClick} isSelected={isSelected} />
-      ) : (
+      return (
         <SessionIconButton
-          iconSize={'medium'}
-          iconType={iconType}
-          iconColor={iconColor}
+          iconSize="medium"
+          iconType={'moon'}
+          dataTestId="theme-section"
+          iconColor={undefined}
           notificationCount={unreadToShow}
           onClick={handleClick}
           isSelected={isSelected}
         />
-      )}
-    </>
-  );
+      );
+  }
 };
 
 const cleanUpMediasInterval = DURATION.MINUTES * 30;
@@ -300,7 +324,10 @@ export const ActionsPanel = () => {
       <ModalContainer />
 
       <CallContainer />
-      <div className="module-left-pane__sections-container">
+      <div
+        className="module-left-pane__sections-container"
+        data-testid="leftpane-section-container"
+      >
         <Section type={SectionType.Profile} avatarPath={ourPrimaryConversation.avatarPath} />
         <Section type={SectionType.Message} />
         <Section type={SectionType.Contact} />

ts/components/session/LeftPaneSettingSection.tsx

@@ -58,7 +58,7 @@ const LeftPaneSettingsCategoryRow = (props: { item: any }) => {
 
       <div>
         {item.id === focusedSettingsSection && (
-          <SessionIcon iconSize={'medium'} iconType="chevron" iconRotation={270} />
+          <SessionIcon iconSize="medium" iconType="chevron" iconRotation={270} />
         )}
       </div>
     </div>

ts/components/session/SessionInput.tsx

@@ -108,7 +108,7 @@ export class SessionInput extends React.PureComponent<Props, State> {
     return (
       <SessionIconButton
         iconType="eye"
-        iconSize={'medium'}
+        iconSize="medium"
         onClick={() => {
           this.setState({
             forceShow: !this.state.forceShow,

ts/components/session/SessionMemberListItem.tsx

@@ -72,7 +72,7 @@ export const SessionMemberListItem = (props: Props) => {
         <span className="session-member-item__name">{name}</span>
       </div>
       <span className={classNames('session-member-item__checkmark', isSelected && 'selected')}>
-        <SessionIcon iconType="check" iconSize={'medium'} iconColor={Constants.UI.COLORS.GREEN} />
+        <SessionIcon iconType="check" iconSize="medium" iconColor={Constants.UI.COLORS.GREEN} />
       </span>
     </div>
   );

ts/components/session/SessionSearchInput.tsx

@@ -21,7 +21,7 @@ export const SessionSearchInput = (props: Props) => {
 
   return (
     <div className="session-search-input">
-      <SessionIconButton iconSize={'medium'} iconType="search" />
+      <SessionIconButton iconSize="medium" iconType="search" />
       <input
         value={searchString}
         onChange={e => onChange(e.target.value)}

ts/components/session/conversation/SessionRecording.tsx

@@ -125,16 +125,16 @@ export class SessionRecording extends React.Component<Props, State> {
             {isRecording && (
               <SessionIconButton
                 iconType="pause"
-                iconSize={'medium'}
+                iconSize="medium"
                 iconColor={Constants.UI.COLORS.DANGER_ALT}
                 onClick={actionPauseFn}
               />
             )}
             {actionPauseAudio && (
-              <SessionIconButton iconType="pause" iconSize={'medium'} onClick={actionPauseFn} />
+              <SessionIconButton iconType="pause" iconSize="medium" onClick={actionPauseFn} />
             )}
             {hasRecordingAndPaused && (
-              <SessionIconButton iconType="play" iconSize={'medium'} onClick={this.playAudio} />
+              <SessionIconButton iconType="play" iconSize="medium" onClick={this.playAudio} />
             )}
             {hasRecording && (
               <SessionIconButton

ts/components/session/conversation/SessionRightPanel.tsx

@@ -133,7 +133,7 @@ const HeaderItem = () => {
     <div className="group-settings-header">
       <SessionIconButton
         iconType="chevron"
-        iconSize={'medium'}
+        iconSize="medium"
         iconRotation={270}
         onClick={() => {
           dispatch(closeRightPanel());

ts/components/session/icon/SessionIconButton.tsx

@@ -10,6 +10,7 @@ interface SProps extends SessionIconProps {
   isSelected?: boolean;
   isHidden?: boolean;
   margin?: string;
+  dataTestId?: string;
 }
 
 const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props, ref) => {
@@ -43,6 +44,7 @@ const SessionIconButtonInner = React.forwardRef<HTMLDivElement, SProps>((props,
       ref={ref}
       onClick={clickHandler}
       style={{ display: isHidden ? 'none' : 'flex', margin: margin ? margin : '' }}
+      data-testid={props.dataTestId}
     >
       <SessionIcon
         iconType={iconType}

ts/components/session/settings/SessionSettings.tsx

@@ -48,7 +48,7 @@ const SessionInfo = () => {
     <div className="session-settings__version-info">
       <span className="text-selectable">v{window.versionInfo.version}</span>
       <span>
-        <SessionIconButton iconSize={'medium'} iconType="oxen" onClick={openOxenWebsite} />
+        <SessionIconButton iconSize="medium" iconType="oxen" onClick={openOxenWebsite} />
       </span>
       <span className="text-selectable">{window.versionInfo.commitHash}</span>
     </div>