Merge pull request #1863 from session-foundation/chore-add-datatestids-convo-flags

chore: add datatestids to convo item flags

Author: Bilb

ts/components/icon/MailWithUnreadIcon.tsx

@@ -1,3 +1,4 @@
+import type { SessionDataTestId } from 'react';
 import styled from 'styled-components';
 import type { SessionIconSize } from './Icons';
 import { IconSizeToPxStr } from './SessionIcon';
@@ -9,8 +10,10 @@ const MailWithUnreadContainer = styled.div`
 export function MailWithUnreadIcon({
   iconSize,
   style,
+  dataTestId,
 }: {
   iconSize: SessionIconSize;
+  dataTestId?: SessionDataTestId;
   style?: React.CSSProperties;
 }) {
   const sizePx = IconSizeToPxStr[iconSize];
@@ -22,6 +25,7 @@ export function MailWithUnreadIcon({
         height={sizePx}
         fill="none"
         viewBox="0 0 17 17"
+        data-testid={dataTestId}
       >
         <path
           fill="currentColor"

ts/components/leftpane/conversation-list-item/HeaderItem.tsx

@@ -38,6 +38,7 @@ const NotificationSettingIcon = () => {
           iconColor="currentColor"
           iconSize="small"
           style={{ flexShrink: 0 }}
+          dataTestId="conversation-item-muted"
         />
       );
     case 'mentions_only':
@@ -46,6 +47,7 @@ const NotificationSettingIcon = () => {
           iconType="bell"
           iconColor="currentColor"
           iconSize="small"
+          dataTestId="conversation-item-mentions-only"
           style={{ flexShrink: 0 }}
         />
       );
@@ -72,6 +74,7 @@ const PinIcon = () => {
       iconColor="currentColor"
       iconSize="small"
       style={{ flexShrink: 0 }}
+      dataTestId="conversation-item-pinned"
     />
   ) : null;
 };
@@ -152,6 +155,7 @@ const AtSymbol = ({ conversationId }: WithConvoId) => {
       title="Open to latest mention"
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       onMouseDown={async e => openConvoToLastMention(e, conversationId)}
+      data-testid="conversation-item-mentioned-us"
     >
       @
     </MentionAtSymbol>
@@ -185,14 +189,24 @@ const UnreadCount = ({ conversationId }: WithConvoId) => {
       : unreadMsgCount || ' ';
 
   if (forcedUnread) {
-    return <MailWithUnreadIcon iconSize="small" style={{ maxHeight: '100%' }} />;
+    return (
+      <MailWithUnreadIcon
+        iconSize="small"
+        style={{ maxHeight: '100%' }}
+        dataTestId="conversation-item-forced-unread"
+      />
+    );
   }
 
   if (unreadMsgCount <= 0) {
     return null;
   }
 
-  return <StyledUnreadCount>{unreadWithOverflow}</StyledUnreadCount>;
+  return (
+    <StyledUnreadCount data-testid="conversation-item-unread-count">
+      {unreadWithOverflow}
+    </StyledUnreadCount>
+  );
 };
 
 export const ConversationListItemHeaderItem = () => {

ts/react.d.ts

@@ -228,6 +228,14 @@ declare module 'react' {
     | 'name'
     | 'count';
 
+  type ConversationItemFlagsIds =
+    | 'conversation-item-muted'
+    | 'conversation-item-pinned'
+    | 'conversation-item-mentions-only'
+    | 'conversation-item-forced-unread'
+    | 'conversation-item-unread-count'
+    | 'conversation-item-mentioned-us';
+
   type SessionDataTestId =
     | 'group-member-status-text'
     | 'loading-spinner'
@@ -281,6 +289,9 @@ declare module 'react' {
     // Buttons
     | `${Buttons}-button`
 
+    // Conversation Item Flags
+    | ConversationItemFlagsIds
+
     // settings menu item types
     | `${MenuItems}-menu-item`
     | `${SettingsMenuItems}-settings-menu-item`