fix: add datatestid for radio button in PanelIconButton

session-foundation · Nov 26, 2024 · 7d81fd1 · 7d81fd1
1 parent d2dd98c
commit 7d81fd1
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 27 deletions.
diff --git a/ts/components/buttons/PanelRadioButton.tsx b/ts/components/buttons/PanelRadioButton.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { SessionDataTestId } from 'react';
 import { SessionRadio } from '../basic/SessionRadio';
 import { PanelButton, PanelButtonProps, PanelButtonText, StyledContent } from './PanelButton';
 
@@ -20,6 +21,7 @@ interface PanelRadioButtonProps extends Omit<PanelButtonProps, 'children' | 'onC
   isSelected: boolean;
   onSelect?: (...args: Array<any>) => void;
   onUnselect?: (...args: Array<any>) => void;
+  radioInputDataTestId: SessionDataTestId;
 }
 
 export const PanelRadioButton = (props: PanelRadioButtonProps) => {
@@ -32,6 +34,7 @@ export const PanelRadioButton = (props: PanelRadioButtonProps) => {
     onUnselect,
     disabled = false,
     dataTestId,
+    radioInputDataTestId,
   } = props;
 
   return (
@@ -51,6 +54,7 @@ export const PanelRadioButton = (props: PanelRadioButtonProps) => {
             inputName={value}
             label=""
             disabled={disabled}
+            inputDataTestId={radioInputDataTestId}
           />
         </StyledCheckContainer>
       </StyledContent>

diff --git a/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx b/ts/components/conversation/right-panel/overlay/disappearing-messages/DisappearingModes.tsx
@@ -1,20 +1,19 @@
-import { SessionDataTestId } from 'react';
 import { DisappearingMessageConversationModeType } from '../../../../../session/disappearing_messages/types';
 import { Localizer } from '../../../../basic/Localizer';
 import { PanelButtonGroup, PanelLabel } from '../../../../buttons/PanelButton';
 import { PanelRadioButton } from '../../../../buttons/PanelRadioButton';
 
-function toDataTestId(mode: DisappearingMessageConversationModeType): SessionDataTestId {
+function toDataTestId(mode: DisappearingMessageConversationModeType) {
   switch (mode) {
     case 'legacy':
-      return 'disappear-legacy-option';
+      return 'disappear-legacy-option' as const;
     case 'deleteAfterRead':
-      return 'disappear-after-read-option';
+      return 'disappear-after-read-option' as const;
     case 'deleteAfterSend':
-      return 'disappear-after-send-option';
+      return 'disappear-after-send-option' as const;
     case 'off':
     default:
-      return 'disappear-off-option';
+      return 'disappear-off-option' as const;
   }
 }
 
@@ -57,6 +56,7 @@ export const DisappearingModes = (props: DisappearingModesProps) => {
                 : mode === 'deleteAfterSend'
                   ? window.i18n('disappearingMessagesDisappearAfterSendDescription')
                   : undefined;
+          const parentDataTestId = toDataTestId(mode);
 
           return (
             <PanelRadioButton
@@ -69,7 +69,8 @@ export const DisappearingModes = (props: DisappearingModesProps) => {
                 setSelected(mode);
               }}
               disabled={options[mode]}
-              dataTestId={toDataTestId(mode)}
+              dataTestId={parentDataTestId}
+              radioInputDataTestId={`input-${parentDataTestId}`}
             />
           );
         })}

diff --git a/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx b/ts/components/conversation/right-panel/overlay/disappearing-messages/TimeOptions.tsx
@@ -1,5 +1,6 @@
 import { isEmpty } from 'lodash';
 
+import { DisappearTimeOptionDataTestId } from 'react';
 import { TimerOptionsArray } from '../../../../../session/disappearing_messages/timerOptions';
 import { PanelButtonGroup, PanelLabel } from '../../../../buttons/PanelButton';
 import { PanelRadioButton } from '../../../../buttons/PanelRadioButton';
@@ -29,6 +30,8 @@ export const TimeOptions = (props: TimerOptionsProps) => {
       )}
       <PanelButtonGroup>
         {options.map(option => {
+          // we want  "time-option-3600-seconds", etc as accessibility id
+          const parentDataTestId: DisappearTimeOptionDataTestId = `time-option-${option.value}-seconds`;
           return (
             <PanelRadioButton
               key={option.name}
@@ -39,7 +42,8 @@ export const TimeOptions = (props: TimerOptionsProps) => {
                 setSelected(option.value);
               }}
               disabled={disabled}
-              dataTestId={`time-option-${option.value}-seconds`} // we want  "time-option-3600-seconds", etc as accessibility id
+              dataTestId={parentDataTestId}
+              radioInputDataTestId={`input-${parentDataTestId}`}
             />
           );
         })}

diff --git a/ts/react.d.ts b/ts/react.d.ts
@@ -6,6 +6,26 @@ import 'react';
  */
 
 declare module 'react' {
+  // disappear options
+  type DisappearOptionDataTestId =
+    | 'disappear-after-send-option'
+    | 'disappear-after-read-option'
+    | 'disappear-legacy-option'
+    | 'disappear-off-option';
+  type DisappearTimeOptionDataTestId =
+    | 'time-option-0-seconds'
+    | 'time-option-5-seconds'
+    | 'time-option-10-seconds'
+    | 'time-option-30-seconds'
+    | 'time-option-60-seconds'
+    | 'time-option-300-seconds'
+    | 'time-option-1800-seconds'
+    | 'time-option-3600-seconds'
+    | 'time-option-21600-seconds'
+    | 'time-option-43200-seconds'
+    | 'time-option-86400-seconds'
+    | 'time-option-604800-seconds'
+    | 'time-option-1209600-seconds';
   type SessionDataTestId =
     | 'group-member-status-text'
     | 'loading-spinner'
@@ -82,19 +102,10 @@ declare module 'react' {
     | 'accept-menu-item'
 
     // timer options
-    | 'time-option-0-seconds'
-    | 'time-option-5-seconds'
-    | 'time-option-10-seconds'
-    | 'time-option-30-seconds'
-    | 'time-option-60-seconds'
-    | 'time-option-300-seconds'
-    | 'time-option-1800-seconds'
-    | 'time-option-3600-seconds'
-    | 'time-option-21600-seconds'
-    | 'time-option-43200-seconds'
-    | 'time-option-86400-seconds'
-    | 'time-option-604800-seconds'
-    | 'time-option-1209600-seconds'
+    | DisappearTimeOptionDataTestId
+    | DisappearOptionDataTestId
+    | `input-${DisappearTimeOptionDataTestId}`
+    | `input-${DisappearOptionDataTestId}`
 
     // generic readably message (not control message)
     | 'message-content'
@@ -117,12 +128,6 @@ declare module 'react' {
     | 'call-notification-started-call'
     | 'call-notification-answered-a-call'
 
-    // disappear options
-    | 'disappear-after-send-option'
-    | 'disappear-after-read-option'
-    | 'disappear-legacy-option'
-    | 'disappear-off-option'
-
     // settings toggle and buttons
     | 'remove-password-settings-button'
     | 'change-password-settings-button'