From a22f0a2a3c9a91da371f8bcb6ff564d40ee5bd87 Mon Sep 17 00:00:00 2001
From: Kaustubh Kumar <kaustubhkumar05@gmail.com>
Date: Mon, 22 Jul 2024 16:49:30 +0530
Subject: [PATCH] fix: move testid to buttons (#3106)

---
 .../src/Prebuilt/components/AudioVideoToggle.tsx   | 14 ++++----------
 .../IconButtonWithOptions.tsx                      | 10 +++++++++-
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.tsx b/packages/roomkit-react/src/Prebuilt/components/AudioVideoToggle.tsx
index acbbb3a20b..7beece4dc9 100644
--- 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/packages/roomkit-react/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx b/packages/roomkit-react/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx
index e475aaf19b..288167edea 100644
--- a/packages/roomkit-react/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx
+++ b/packages/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>