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

package/src/components/EndRoomModalContent.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
+import { useSelector } from 'react-redux';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 
 import { useHMSRoomStyleSheet, useLeaveMethods } from '../hooks-util';
 import { AlertTriangleIcon, CloseIcon } from '../Icons';
 import { HMSDangerButton } from './HMSDangerButton';
-import { useSelector } from 'react-redux';
 import type { RootState } from '../redux';
 import { OnLeaveReason } from '../utils/types';
+import { TestIds } from '../utils/constants';
 
 export interface EndRoomModalContentProps {
   dismissModal(): void;
@@ -48,7 +49,10 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
         <View style={styles.headerControls}>
           <AlertTriangleIcon />
 
-          <Text style={[styles.headerText, hmsRoomStyles.headerText]}>
+          <Text
+            testID={TestIds.end_confirmation_heading}
+            style={[styles.headerText, hmsRoomStyles.headerText]}
+          >
             {canStream && isStreaming
               ? 'End Stream'
               : canEndRoom
@@ -58,13 +62,18 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
         </View>
 
         <TouchableOpacity
+          testID={TestIds.end_confirmation_close_btn}
           onPress={dismissModal}
           hitSlop={styles.closeIconHitSlop}
         >
           <CloseIcon />
         </TouchableOpacity>
       </View>
-      <Text style={[styles.text, hmsRoomStyles.text]}>
+
+      <Text
+        testID={TestIds.end_confirmation_description}
+        style={[styles.text, hmsRoomStyles.text]}
+      >
         {canStream && isStreaming
           ? 'The stream will end for everyone after they’ve watched it.'
           : canEndRoom
@@ -72,6 +81,7 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
           : 'Others will continue after you leave. You can join the session again.'}
       </Text>
       <HMSDangerButton
+        testID={TestIds.end_confirmation_cta}
         loading={false}
         onPress={() => {
           if (canStream && isStreaming) {

package/src/components/HMSBaseButton.tsx

@@ -6,12 +6,13 @@ import {
   TouchableHighlight,
   View,
 } from 'react-native';
-import type { StyleProp, ViewStyle, TextStyle, ColorValue } from 'react-native';
+import type { StyleProp, ViewStyle, TextStyle, ColorValue, TouchableHighlightProps } from 'react-native';
 
 export interface HMSBaseButtonProps {
   title: string;
   loading: boolean;
   onPress(): void;
+  testID?: TouchableHighlightProps['testID'];
   underlayColor?: ColorValue | undefined;
   loaderColor?: ColorValue | undefined;
   style?: StyleProp<ViewStyle>;
@@ -21,6 +22,7 @@ export interface HMSBaseButtonProps {
 }
 
 export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
+  testID,
   underlayColor,
   loaderColor,
   title,
@@ -33,6 +35,7 @@ export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
 }) => {
   return (
     <TouchableHighlight
+      testID={testID}
       underlayColor={underlayColor}
       style={[styles.button, style]}
       onPress={onPress}

package/src/components/HMSChat.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { ChatIcon } from '../Icons';
 import { PressableIcon } from './PressableIcon';
 import { useShowChatAndParticipants } from '../hooks-util';
+import { TestIds } from '../utils/constants';
 
 export const HMSChat = () => {
   const { overlayChatVisible, show, hide } = useShowChatAndParticipants();
@@ -16,7 +17,11 @@ export const HMSChat = () => {
   };
 
   return (
-    <PressableIcon onPress={toggleChatWindow} active={overlayChatVisible}>
+    <PressableIcon
+      testID={overlayChatVisible ? TestIds.close_chat_btn : TestIds.open_chat_btn}
+      onPress={toggleChatWindow}
+      active={overlayChatVisible}
+    >
       <ChatIcon />
     </PressableIcon>
   );

package/src/components/HMSDangerButton.tsx

@@ -3,12 +3,14 @@ import type { StyleProp, ViewStyle } from 'react-native';
 
 import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
 import { HMSBaseButton } from './HMSBaseButton';
+import type { HMSBaseButtonProps } from './HMSBaseButton';
 import { COLORS } from '../utils/theme';
 
 export interface HMSDangerButtonProps {
   title: string;
   loading: boolean;
   onPress(): void;
+  testID?: HMSBaseButtonProps['testID'];
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
   leftComponent?: React.ReactElement | null;
@@ -18,6 +20,7 @@ export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
   title,
   loading,
   onPress,
+  testID,
   style,
   disabled,
   leftComponent,
@@ -45,6 +48,7 @@ export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
 
   return (
     <HMSBaseButton
+      testID={testID}
       loaderColor={alertErrorBrighterColor}
       loading={loading}
       onPress={onPress}

package/src/components/HMSLiveIndicator.tsx

@@ -16,6 +16,7 @@ import {
 import { EyeIcon } from '../Icons';
 import { COLORS, hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
+import { TestIds } from '../utils/constants';
 
 const _HMSLiveIndicator = () => {
   const isHLSViewer = useIsHLSViewer();
@@ -62,7 +63,7 @@ const _HMSLiveIndicator = () => {
     <View style={styles.container}>
       {/* Live */}
       <View style={[styles.live, hmsRoomStyles.live]}>
-        <Text style={[styles.liveText, hmsRoomStyles.liveText]}>LIVE</Text>
+        <Text testID={TestIds.live_text} style={[styles.liveText, hmsRoomStyles.liveText]}>LIVE</Text>
       </View>
 
       {/* Viewer Count */}
@@ -72,9 +73,9 @@ const _HMSLiveIndicator = () => {
           onPress={showParticipantsSheet}
           disabled={!canShowParticipants}
         >
-          <EyeIcon />
+          <EyeIcon testID={TestIds.peer_count_icon} />
 
-          <Text style={[styles.count, hmsRoomStyles.count]}>
+          <Text testID={TestIds.peer_count} style={[styles.count, hmsRoomStyles.count]}>
             {previewPeerCount}
           </Text>
         </TouchableOpacity>

package/src/components/HMSLocalScreenshareNotification.tsx

@@ -6,6 +6,7 @@ import { HMSDangerButton } from './HMSDangerButton';
 import { HMSNotification } from './HMSNotification';
 import { useHMSRoomStyle } from '../hooks-util';
 import { NotificationTypes } from '../types';
+import { TestIds } from '../utils/constants';
 
 export interface HMSLocalScreenshareNotificationProps {}
 
@@ -28,9 +29,11 @@ export const HMSLocalScreenshareNotification: React.FC<
       autoDismiss={false}
       style={notificationStyle}
       text={'You are sharing your screen'}
+      textTestID={TestIds.notification_sharing_screen}
       icon={<ScreenShareIcon />}
       cta={
         <HMSDangerButton
+          testID={TestIds.notification_stop_screen_share_btn}
           loading={false}
           onPress={stopScreenshare}
           title="Stop"

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.