fix: move testid to buttons (#3106)

100mslive · Jul 22, 2024 · a22f0a2 · a22f0a2
1 parent 5322549
commit a22f0a2
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.tsx b/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.tsx
@@ -310,10 +310,9 @@ export const AudioVideoToggle = ({ hideOptions = false }: { hideOptions?: boolea
           disabled={!toggleAudio}
           hideOptions={hideOptions || !hasAudioDevices}
           onDisabledClick={toggleAudio}
+          testid="audio_toggle_btn"
           tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}
-          icon={
-            !isLocalAudioEnabled ? <MicOffIcon data-testid="audio_off_btn" /> : <MicOnIcon data-testid="audio_on_btn" />
-          }
+          icon={!isLocalAudioEnabled ? <MicOffIcon /> : <MicOnIcon />}
           active={isLocalAudioEnabled}
           onClick={toggleAudio}
           key="toggleAudio"
@@ -353,13 +352,8 @@ export const AudioVideoToggle = ({ hideOptions = false }: { hideOptions?: boolea
           hideOptions={hideOptions || !hasVideoDevices}
           onDisabledClick={toggleVideo}
           tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}
-          icon={
-            !isLocalVideoEnabled ? (
-              <VideoOffIcon data-testid="video_off_btn" />
-            ) : (
-              <VideoOnIcon data-testid="video_on_btn" />
-            )
-          }
+          testid="video_toggle_btn"
+          icon={!isLocalVideoEnabled ? <VideoOffIcon /> : <VideoOnIcon />}
           key="toggleVideo"
           active={isLocalVideoEnabled}
           onClick={toggleVideo}

diff --git a/...ges/roomkit-react/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx b/...ges/roomkit-react/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx
@@ -90,6 +90,7 @@ export const IconButtonWithOptions = ({
   onDisabledClick = () => {
     return;
   },
+  testid = '',
   tooltipMessage = '',
   icon,
   children,
@@ -103,6 +104,7 @@ export const IconButtonWithOptions = ({
   onDisabledClick: () => void;
   icon: React.ReactNode;
   children: React.ReactNode;
+  testid?: string;
   hideOptions?: boolean;
   active: boolean;
   disabled?: boolean;
@@ -111,7 +113,13 @@ export const IconButtonWithOptions = ({
   const commonProps = { disabled, active };
   return (
     <Flex>
-      <IconSection {...commonProps} onClick={onClick} hideOptions={hideOptions} className="__cancel-drag-event">
+      <IconSection
+        data-testid={testid}
+        {...commonProps}
+        onClick={onClick}
+        hideOptions={hideOptions}
+        className="__cancel-drag-event"
+      >
         <Tooltip disabled={!tooltipMessage} title={tooltipMessage}>
           <Icon {...commonProps}>{icon}</Icon>
         </Tooltip>