@100mslive/react-native-room-kit 1.0.2-beta.0 → 1.0.2

package/src/components/HMSManageAudioOutput.tsx

@@ -30,6 +30,7 @@ import {
 } from '../hooks-util';
 import type { RootState } from '../redux';
 import { BottomSheet } from './BottomSheet';
+import { TestIds } from '../utils/constants';
 
 export const HMSManageAudioOutput: React.FC = () => {
   const hmsInstance = useHMSInstance();
@@ -141,6 +142,7 @@ export const HMSManageAudioOutput: React.FC = () => {
   return (
     <View>
       <PressableIcon
+        testID={TestIds.manage_audio_output}
         onPress={handleSpeakerChange}
         style={isHLSViewer ? styles.button : null}
       >
@@ -155,6 +157,8 @@ export const HMSManageAudioOutput: React.FC = () => {
         <BottomSheet.Header
           dismissModal={dismissModal}
           heading="Audio Output"
+          headingTestID={TestIds.audio_modal_heading}
+          closeIconTestID={TestIds.audio_modal_close_btn}
         />
 
         <BottomSheet.Divider />
@@ -162,7 +166,10 @@ export const HMSManageAudioOutput: React.FC = () => {
         <View style={styles.contentContainer}>
           {availableAudioOutputDevices.length === 0 ? (
             <View style={styles.emptyView}>
-              <Text style={[styles.itemText, hmsRoomStyles.text]}>
+              <Text
+                testID={TestIds.audio_modal_empty_text}
+                style={[styles.itemText, hmsRoomStyles.text]}
+              >
                 No other devices available!
               </Text>
             </View>
@@ -182,6 +189,7 @@ export const HMSManageAudioOutput: React.FC = () => {
                       )}
 
                       <TouchableOpacity
+                        testID={audioDeviceTestIds[device]}
                         style={styles.audioDeviceItem}
                         onPress={() => handleSelectAudioDevice(device)}
                       >
@@ -193,13 +201,13 @@ export const HMSManageAudioOutput: React.FC = () => {
                               : device
                           )}
 
-                          <Text style={[styles.itemText, hmsRoomStyles.text]}>
+                          <Text testID={audioDeviceTextTestIds[device]} style={[styles.itemText, hmsRoomStyles.text]}>
                             {getDescription(device, currentAudioOutputDevice)}
                           </Text>
                         </View>
 
                         {device === currentAudioOutputDevice ? (
-                          <CheckIcon />
+                          <CheckIcon testID={activeAudioDeviceTestIds[device]} />
                         ) : null}
                       </TouchableOpacity>
                     </React.Fragment>
@@ -290,3 +298,27 @@ const audioDeviceSortOrder = {
   [HMSAudioDevice.EARPIECE]: 3,
   [HMSAudioDevice.BLUETOOTH]: 4,
 } as const;
+
+const audioDeviceTestIds = {
+  [HMSAudioDevice.AUTOMATIC]: TestIds.automatic_audio_device_btn,
+  [HMSAudioDevice.SPEAKER_PHONE]: TestIds.phone_speaker_audio_device_btn,
+  [HMSAudioDevice.WIRED_HEADSET]: TestIds.wired_headset_audio_device_btn,
+  [HMSAudioDevice.EARPIECE]: TestIds.earpiece_audio_device_btn,
+  [HMSAudioDevice.BLUETOOTH]: TestIds.bluetooth_audio_device_btn,
+} as const;
+
+const audioDeviceTextTestIds = {
+  [HMSAudioDevice.AUTOMATIC]: TestIds.automatic_audio_device_text,
+  [HMSAudioDevice.SPEAKER_PHONE]: TestIds.phone_speaker_audio_device_text,
+  [HMSAudioDevice.WIRED_HEADSET]: TestIds.wired_headset_audio_device_text,
+  [HMSAudioDevice.EARPIECE]: TestIds.earpiece_audio_device_text,
+  [HMSAudioDevice.BLUETOOTH]: TestIds.bluetooth_audio_device_text,
+} as const;
+
+const activeAudioDeviceTestIds = {
+  [HMSAudioDevice.AUTOMATIC]: TestIds.automatic_audio_device_active,
+  [HMSAudioDevice.SPEAKER_PHONE]: TestIds.phone_speaker_audio_device_active,
+  [HMSAudioDevice.WIRED_HEADSET]: TestIds.wired_headset_audio_device_active,
+  [HMSAudioDevice.EARPIECE]: TestIds.earpiece_audio_device_active,
+  [HMSAudioDevice.BLUETOOTH]: TestIds.bluetooth_audio_device_active,
+} as const;

package/src/components/HMSManageCameraRotation.tsx

@@ -6,6 +6,7 @@ import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
 import type { RootState } from '../redux';
 import { PressableIcon } from './PressableIcon';
 import { useHMSRoomStyle } from '../hooks-util';
+import { TestIds } from '../utils/constants';
 
 export const HMSManageCameraRotation = () => {
   const canPublishVideo = useCanPublishVideo();
@@ -42,6 +43,7 @@ const RotateCameraButton = () => {
 
   return (
     <PressableIcon
+      testID={isLocalVideoMuted ? TestIds.switch_camera_disabled : TestIds.switch_camera}
       onPress={handleVideoMuteTogglePress}
       disabled={isLocalVideoMuted}
     >

package/src/components/HMSManageLeave.tsx

@@ -6,6 +6,7 @@ import { useHMSRoomStyleSheet, useModalType } from '../hooks-util';
 import { ModalTypes } from '../utils/types';
 import { PressableIcon } from './PressableIcon';
 import { COLORS } from '../utils/theme';
+import { TestIds } from '../utils/constants';
 
 export const HMSManageLeave: React.FC<LeaveButtonProps> = (props) => {
   // TODO: read current meeting joined state
@@ -65,6 +66,7 @@ const LeaveButton: React.FC<LeaveButtonProps> = (props) => {
       {React.cloneElement(leaveButtonDelegate, {
         onPress: handleLeaveButtonPress,
         style: hmsRoomStyles.button,
+        testID: TestIds.footer_leave_btn
       })}
     </View>
   );

package/src/components/HMSManageLocalAudio.tsx

@@ -5,6 +5,7 @@ import { MicIcon } from '../Icons';
 import { useCanPublishAudio, useHMSActions } from '../hooks-sdk';
 import type { RootState } from '../redux';
 import { PressableIcon } from './PressableIcon';
+import { TestIds } from '../utils/constants';
 
 export const HMSManageLocalAudio = () => {
   const canPublishAudio = useCanPublishAudio();
@@ -31,6 +32,7 @@ const ToggleAudioMuteButton = () => {
 
   return (
     <PressableIcon
+      testID={!!isLocalAudioMuted ? TestIds.mic_muted_btn : TestIds.mic_unmuted_btn}
       onPress={handleAudioMuteTogglePress}
       active={isLocalAudioMuted}
     >

package/src/components/HMSManageLocalVideo.tsx

@@ -5,6 +5,7 @@ import type { RootState } from '../redux';
 import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
 import { PressableIcon } from './PressableIcon';
 import { CameraIcon } from '../Icons';
+import { TestIds } from '../utils/constants';
 
 export const HMSManageLocalVideo = () => {
   const canPublishVideo = useCanPublishVideo();
@@ -31,6 +32,7 @@ const ToggleVideoMuteButton = () => {
 
   return (
     <PressableIcon
+      testID={!!isLocalVideoMuted ? TestIds.camera_muted_btn : TestIds.camera_unmuted_btn}
       onPress={handleVideoMuteTogglePress}
       active={isLocalVideoMuted}
     >

package/src/components/HMSManageRaiseHand.tsx

@@ -6,6 +6,7 @@ import { useHMSActions } from '../hooks-sdk';
 import { PressableIcon } from './PressableIcon';
 import { HandIcon } from '../Icons';
 import { parseMetadata } from '../utils/functions';
+import { TestIds } from '../utils/constants';
 
 export const HMSManageRaiseHand = () => {
   const hmsActions = useHMSActions();
@@ -34,7 +35,7 @@ export const HMSManageRaiseHand = () => {
   };
 
   return (
-    <PressableIcon onPress={toggleRaiseHand} active={isHandRaised}>
+    <PressableIcon testID={isHandRaised ? TestIds.hand_raised_btn : TestIds.hand_raise_btn} onPress={toggleRaiseHand} active={isHandRaised}>
       <HandIcon />
     </PressableIcon>
   );

package/src/components/HMSNotification.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { StyleProp, ViewStyle, TextStyle, TextProps } from 'react-native';
 
 import { useHMSRoomStyleSheet } from '../hooks-util';
 import { CloseIcon } from '../Icons';
@@ -11,6 +11,7 @@ import { removeNotification } from '../redux/actions';
 export interface HMSNotificationProps {
   id: string;
   text: string | React.ReactElement;
+  textTestID?: TextProps['testID'];
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   icon?: React.ReactElement;
@@ -28,6 +29,7 @@ export const HMSNotification: React.FC<HMSNotificationProps> = ({
   style,
   textStyle,
   cta,
+  textTestID,
   onDismiss,
   dismissDelay = 5000,
   autoDismiss = true,
@@ -59,7 +61,7 @@ export const HMSNotification: React.FC<HMSNotificationProps> = ({
         {icon ? <View style={styles.icon}>{icon}</View> : null}
 
         {typeof text === 'string' ? (
-          <Text style={[styles.text, hmsRoomStyles.text, textStyle]}>
+          <Text testID={textTestID} style={[styles.text, hmsRoomStyles.text, textStyle]}>
             {text}
           </Text>
         ) : (

package/src/components/HMSPreviewEditName.tsx

@@ -5,6 +5,7 @@ import type { RootState } from '../redux';
 import { changeUsername } from '../redux/actions';
 import { useHMSConfig } from '../hooks-util';
 import { HMSTextInput } from './HMSTextInput';
+import { TestIds } from '../utils/constants';
 
 export interface HMSPreviewEditNameProps {}
 
@@ -18,5 +19,5 @@ export const HMSPreviewEditName: React.FC<HMSPreviewEditNameProps> = () => {
     updateConfig({ username: name });
   };
 
-  return <HMSTextInput value={userName} onChangeText={handleNameChange} />;
+  return <HMSTextInput testID={TestIds.enter_name} value={userName} onChangeText={handleNameChange} />;
 };

package/src/components/HMSPreviewJoinButton.tsx

@@ -10,6 +10,7 @@ import {
   useShouldGoLive,
 } from '../hooks-util';
 import { HMSPrimaryButton } from './HMSPrimaryButton';
+import { TestIds } from '../utils/constants';
 
 export interface HMSPreviewJoinButtonProps {
   onJoin(): void;
@@ -49,6 +50,11 @@ export const HMSPreviewJoinButton: React.FC<HMSPreviewJoinButtonProps> = ({
 
   return (
     <HMSPrimaryButton
+      testId={
+        shouldGoLive
+          ? TestIds.go_live_btn
+          : TestIds.join_now_btn
+      }
       loading={loading}
       onPress={onJoin}
       title={

package/src/components/HMSPreviewSubtitle.tsx

@@ -4,6 +4,7 @@ import type { StyleProp, TextStyle } from 'react-native';
 
 import { useCanPublishAudio, useCanPublishVideo } from '../hooks-sdk';
 import { useHMSLayoutConfig, useHMSRoomStyle } from '../hooks-util';
+import { TestIds } from '../utils/constants';
 
 export interface HMSPreviewSubtitleProps {
   subtitle?: string;
@@ -27,29 +28,31 @@ export const HMSPreviewSubtitle: React.FC<HMSPreviewSubtitleProps> = ({
 
   const textStyles: StyleProp<TextStyle> = [styles.title, titleStyles];
 
+  const testID = TestIds.subtitle;
+
   if (subtitle) {
-    return <Text style={textStyles}>{subtitle}</Text>;
+    return <Text testID={testID} style={textStyles}>{subtitle}</Text>;
   }
 
   if (hmsRoomPreviewSubtitle) {
-    return <Text style={textStyles}>{hmsRoomPreviewSubtitle}</Text>;
+    return <Text testID={testID} style={textStyles}>{hmsRoomPreviewSubtitle}</Text>;
   }
 
   if (canPublishAudio && canPublishVideo) {
     return (
-      <Text style={textStyles}>Setup your audio and video before joining</Text>
+      <Text testID={testID} style={textStyles}>Setup your audio and video before joining</Text>
     );
   }
 
   if (canPublishAudio) {
-    return <Text style={textStyles}>Setup your audio before joining</Text>;
+    return <Text testID={testID} style={textStyles}>Setup your audio before joining</Text>;
   }
 
   if (canPublishVideo) {
-    return <Text style={textStyles}>Setup your video before joining</Text>;
+    return <Text testID={testID} style={textStyles}>Setup your video before joining</Text>;
   }
 
-  return <Text style={textStyles}>Enter your name before joining</Text>;
+  return <Text testID={testID} style={textStyles}>Enter your name before joining</Text>;
 };
 
 const styles = StyleSheet.create({

package/src/components/HMSPreviewTitle.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { StyleSheet, Text } from 'react-native';
 
 import { useHMSLayoutConfig, useHMSRoomStyle } from '../hooks-util';
+import { TestIds } from '../utils/constants';
 
 export interface HMSPreviewTitleProps {
   title?: string;
@@ -22,7 +23,7 @@ export const HMSPreviewTitle: React.FC<HMSPreviewTitleProps> = ({
     fontFamily: `${typography.font_family}-SemiBold`,
   }));
 
-  return <Text style={[styles.title, titleStyles]}>{hmsRoomPreviewTitle}</Text>;
+  return <Text testID={TestIds.title} style={[styles.title, titleStyles]}>{hmsRoomPreviewTitle}</Text>;
 };
 
 const styles = StyleSheet.create({

package/src/components/HMSPrimaryButton.tsx

@@ -3,11 +3,13 @@ import type { StyleProp, ViewStyle } from 'react-native';
 
 import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
 import { HMSBaseButton } from './HMSBaseButton';
+import type { HMSBaseButtonProps } from './HMSBaseButton';
 
 export interface HMSPrimaryButtonProps {
   title: string;
   loading: boolean;
   onPress(): void;
+  testId?: HMSBaseButtonProps['testID'];
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
   leftComponent?: React.ReactElement | null;
@@ -17,6 +19,7 @@ export const HMSPrimaryButton: React.FC<HMSPrimaryButtonProps> = ({
   title,
   loading,
   onPress,
+  testId,
   style,
   disabled,
   leftComponent,
@@ -42,6 +45,7 @@ export const HMSPrimaryButton: React.FC<HMSPrimaryButtonProps> = ({
 
   return (
     <HMSBaseButton
+      testID={testId}
       loaderColor={onPrimaryHighColor}
       loading={loading}
       onPress={onPress}

package/src/components/HMSRoomOptions.tsx

@@ -21,6 +21,7 @@ import { useModalType } from '../hooks-util';
 import { BottomSheet } from './BottomSheet';
 import { ChangeNameModalContent } from './ChangeNameModalContent';
 import { StopRecordingModalContent } from './StopRecordingModalContent';
+import { TestIds } from '../utils/constants';
 
 interface HMSRoomOptionsProps {}
 
@@ -46,7 +47,7 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
 
   return (
     <View>
-      <PressableIcon onPress={onSettingsPress}>
+      <PressableIcon testID={TestIds.room_options_btn} onPress={onSettingsPress}>
         <HamburgerIcon />
       </PressableIcon>
 

package/src/components/HMSSendMessageInput.tsx

@@ -4,6 +4,7 @@ import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import { HMSTextInput } from './HMSTextInput';
 import { useHMSRoomStyleSheet, useSendMessage } from '../hooks-util';
+import { TestIds } from '../utils/constants';
 
 interface HMSSendMessageInputProps {
   style?: StyleProp<TextStyle>;
@@ -25,6 +26,7 @@ export const HMSSendMessageInput: React.FC<HMSSendMessageInputProps> = ({
 
   return (
     <HMSTextInput
+      testID={TestIds.enter_message_input}
       style={[styles.input, style]}
       value={message}
       onChangeText={setMessage}
@@ -37,6 +39,7 @@ export const HMSSendMessageInput: React.FC<HMSSendMessageInputProps> = ({
         containerStyle,
       ]}
       sendIcon={true}
+      sendIconTestID={TestIds.send_message_cta}
       onSendIconPress={sendMessage}
       onSubmitEditing={sendMessage}
       returnKeyType="send"

package/src/components/HMSTextInput.tsx

@@ -10,6 +10,7 @@ import type {
   StyleProp,
   TextInputProps,
   TextStyle,
+  TouchableOpacityProps,
   ViewStyle,
 } from 'react-native';
 
@@ -31,6 +32,7 @@ export type HMSTextInputProps = TextInputProps & {
     | {
         rightIcon?: undefined;
         sendIcon: boolean;
+        sendIconTestID?: TouchableOpacityProps['testID'];
         onSendIconPress(): void;
         containerStyle?: StyleProp<ViewStyle>;
         focusedContainerStyle?: StyleProp<ViewStyle>;
@@ -160,6 +162,7 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
       {resetProps.rightIcon ||
         (resetProps.sendIcon ? (
           <TouchableOpacity
+            testID={resetProps.sendIconTestID}
             style={styles.sendIconButton}
             onPress={resetProps.onSendIconPress}
           >

package/src/components/LeaveRoomBottomSheet.tsx

@@ -8,6 +8,7 @@ import type { RootState } from '../redux';
 import { BottomSheet } from './BottomSheet';
 import { StopIcon } from '../Icons';
 import { ModalTypes, OnLeaveReason } from '../utils/types';
+import { TestIds } from '../utils/constants';
 
 // const HEADER_CONTENT_HEIGHT = 24 + 8 + 8 + 2; // ICON_SIZE + TOP_PADDING + BOTTOM_PADDING + TOP&BOTTOM_BORDER_WIDTH
 // const HEADER_HEIGHT = 8 + HEADER_CONTENT_HEIGHT + 8; // TOP_HEADER_PADDING + HEADER_CONTENT_HEIGHT + BOTTOM_HEADER_PADDING
@@ -111,6 +112,7 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
     >
       <View>
         <TouchableOpacity
+          testID={TestIds.leave_cta}
           style={styles.button}
           onPress={onLeavePress}
         >
@@ -120,7 +122,7 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
             <Text style={[styles.text, hmsRoomStyles.text]}>
               Leave
             </Text>
-            <Text style={[styles.subtext, hmsRoomStyles.subtext]}>
+            <Text testID={TestIds.leave_description} style={[styles.subtext, hmsRoomStyles.subtext]}>
               Others will continue after you leave. You can join the session
               again.
             </Text>
@@ -129,6 +131,7 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
 
         {canStream && isStreaming ? (
           <TouchableOpacity
+            testID={TestIds.end_stream_cta}
             style={[styles.button, hmsRoomStyles.endButton]}
             onPress={onEndStreamPress}
           >
@@ -139,6 +142,7 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
                 End Stream
               </Text>
               <Text
+                testID={TestIds.end_stream_description}
                 style={[styles.subtext, hmsRoomStyles.endSubtext]}
               >
                 The stream will end for everyone after they’ve watched it.
@@ -147,6 +151,7 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
           </TouchableOpacity>
         ) : canEndRoom ? (
           <TouchableOpacity
+            testID={TestIds.end_session_cta}
             style={[styles.button, hmsRoomStyles.endButton]}
             onPress={onEndSessionPress}
           >
@@ -157,6 +162,7 @@ export const LeaveRoomBottomSheet: React.FC<LeaveRoomBottomSheetProps> = () => {
                 End Session
               </Text>
               <Text
+                testID={TestIds.end_session_description}
                 style={[styles.subtext, hmsRoomStyles.endSubtext]}
               >
                 The session will end for everyone in the room immediately.

package/src/components/Participants/ParticipantsGroupHeader.tsx

@@ -8,6 +8,7 @@ import type { ParticipantAccordianData } from '../../hooks-util';
 import { ChevronIcon, ThreeDotsIcon } from '../../Icons';
 import { Menu } from '../MenuModal';
 import { ParticipantsGroupOptions } from './ParticipantsGroupOptions';
+import { TestIds } from '../../utils/constants';
 // import type { RootState } from '../../redux';
 // import { isParticipantHostOrBroadcaster } from '../../utils/functions';
 
@@ -74,12 +75,16 @@ const _ParticipantsGroupHeader: React.FC<ParticipantsGroupHeaderProps> = ({
     >
       <View style={{ flexDirection: 'row', alignItems: 'center' }}>
         {onBackPress ? (
-          <TouchableOpacity style={{ marginRight: 8 }} onPress={onBackPress}>
+          <TouchableOpacity
+            testID={TestIds.participants_group_back_btn}
+            style={{ marginRight: 8 }}
+            onPress={onBackPress}
+          >
             <ChevronIcon direction="left" />
           </TouchableOpacity>
         ) : null}
 
-        <Text style={[styles.label, hmsRoomStyles.label]}>{label}</Text>
+        <Text testID={TestIds.participants_group_name} style={[styles.label, hmsRoomStyles.label]}>{label}</Text>
       </View>
 
       <View style={styles.controls}>
@@ -100,6 +105,11 @@ const _ParticipantsGroupHeader: React.FC<ParticipantsGroupHeaderProps> = ({
 
         {toggleGroupExpand ? (
           <TouchableOpacity
+            testID={
+              expanded
+                ? TestIds.participants_group_collapse_btn
+                : TestIds.participants_group_expand_btn
+            }
             style={[styles.control, expanded ? styles.expandedArrowIcon : null]}
             onPress={toggleGroupExpand}
           >

package/src/components/Participants/ParticipantsItem.tsx

@@ -9,6 +9,7 @@ import { HandIcon, NetworkQualityIcon, ThreeDotsIcon } from '../../Icons';
 import { Menu } from '../MenuModal';
 import { ParticipantsItemOptions } from './ParticipantsItemOptions';
 import type { RootState } from '../../redux';
+import { TestIds } from '../../utils/constants';
 
 interface ParticipantsItemProps {
   groupId: string;
@@ -51,7 +52,7 @@ const _ParticipantsItem: React.FC<ParticipantsItemProps> = ({
 
   return (
     <View style={styles.container}>
-      <Text style={[styles.label, hmsRoomStyles.label]}>
+      <Text testID={TestIds.participant_name} style={[styles.label, hmsRoomStyles.label]}>
         {peer.name}
         {peer.isLocal ? ' (You)' : null}
       </Text>

package/src/components/Participants/ParticipantsSeachInput.tsx

@@ -4,6 +4,7 @@ import { StyleSheet, Platform } from 'react-native';
 import { useHMSRoomColorPalette, useHMSRoomStyle } from '../../hooks-util';
 import { SearchIcon } from '../../Icons';
 import { HMSTextInput } from '../HMSTextInput';
+import { TestIds } from '../../utils/constants';
 
 type ParticipantsSearchInputProps = {
   searchText: string;
@@ -22,6 +23,7 @@ export const ParticipantsSearchInput: React.FC<
 
   return (
     <HMSTextInput
+      testID={TestIds.search_participant_input}
       value={searchText}
       onChangeText={setSearchText}
       placeholder="Search for participants"

package/src/components/PeerSettingsModalContent.tsx

@@ -7,7 +7,7 @@ import {
   LayoutAnimation,
   InteractionManager,
 } from 'react-native';
-import type { StyleProp, TextStyle } from 'react-native';
+import type { StyleProp, TextStyle, TouchableOpacityProps } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { HMSTrack } from '@100mslive/react-native-hms';
 
@@ -24,6 +24,7 @@ import {
   PersonIcon,
 } from '../Icons';
 import { BottomSheet } from './BottomSheet';
+import { TestIds } from '../utils/constants';
 
 interface PeerSettingsModalContentProps {
   peerTrackNode: PeerTrackNode;
@@ -112,7 +113,10 @@ export const PeerSettingsModalContent: React.FC<
       <BottomSheet.Header
         dismissModal={cancelModal}
         heading={peer.name + (peer.isLocal ? ' (You)' : '')}
+        headingTestID={TestIds.tile_modal_heading}
         subheading={peer.role?.name}
+        subheadingTestID={TestIds.tile_modal_subheading}
+        closeIconTestID={TestIds.tile_modal_close_btn}
       />
 
       <BottomSheet.Divider />
@@ -121,6 +125,7 @@ export const PeerSettingsModalContent: React.FC<
       <View style={styles.contentContainer}>
         {peer.isLocal ? (
           <SettingItem
+            testID={TestIds.tile_modal_change_name_btn}
             text={'Change Name'}
             icon={<PencilIcon style={styles.customIcon} />}
             onPress={changeName}
@@ -199,11 +204,13 @@ type SettingItemProps = {
   onPress(): void;
   text: string;
   icon: React.ReactElement;
+  testID?: TouchableOpacityProps['testID'];
   disabled?: boolean;
   textStyle?: StyleProp<TextStyle>;
 };
 
 const SettingItem: React.FC<SettingItemProps> = ({
+  testID,
   onPress,
   text,
   icon,
@@ -217,6 +224,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
 
   return (
     <TouchableOpacity
+      testID={testID}
       disabled={disabled}
       style={[styles.button, disabled ? { opacity: 0.6 } : null]}
       onPress={onPress}

package/src/components/PeerVideoTile/PeerNameAndNetwork.tsx

@@ -5,6 +5,7 @@ import { HMSTrackSource } from '@100mslive/react-native-hms';
 import { hexToRgbA } from '../../utils/theme';
 import { NetworkQualityIcon, ScreenShareIcon } from '../../Icons';
 import { useHMSRoomStyleSheet } from '../../hooks-util';
+import { TestIds } from '../../utils/constants';
 
 export interface PeerNameAndNetworkProps {
   name: string;
@@ -43,6 +44,7 @@ export const PeerNameAndNetwork: React.FC<PeerNameAndNetworkProps> = ({
         ) : null}
 
         <Text
+          testID={TestIds.tile_user_name}
           style={[styles.name, hmsRoomStyles.name]}
           numberOfLines={1}
           ellipsizeMode={showTrackSource ? 'middle' : 'tail'}
@@ -53,6 +55,7 @@ export const PeerNameAndNetwork: React.FC<PeerNameAndNetworkProps> = ({
         </Text>
 
         <NetworkQualityIcon
+          testID={TestIds.tile_network_icon}
           quality={networkQuality}
           style={styles.networkIcon}
         />

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -27,6 +27,7 @@ import {
 } from '../../hooks-sdk-selectors';
 import { useHMSRoomStyleSheet } from '../../hooks-util';
 import { HMSFullScreenButton } from './HMSFullScreenButton';
+import { TestIds } from '../../utils/constants';
 
 export interface PeerVideoTileViewProps {
   peerTrackNode: PeerTrackNode;
@@ -207,6 +208,7 @@ export const _PeerVideoTileView = React.forwardRef<
             onUnmount={hide}
           >
             <PressableIcon
+              testID={TestIds.tile_options}
               activeOpacity={0.7}
               style={[styles.iconWrapper, hmsRoomStyles.iconWrapperStyles]}
               border={false}
@@ -217,6 +219,7 @@ export const _PeerVideoTileView = React.forwardRef<
           </UnmountAfterDelay>
         ) : (
           <PressableIcon
+            testID={TestIds.tile_options}
             activeOpacity={0.7}
             style={[styles.iconWrapper, hmsRoomStyles.iconWrapperStyles]}
             border={false}