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

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}

package/src/components/RoomSettingsModalContent.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import type { TouchableOpacityProps } from 'react-native';
 import type { HMSAudioMixingMode } from '@100mslive/react-native-hms';
 import { useSelector } from 'react-redux';
 
@@ -26,6 +27,7 @@ import { useCanPublishScreen, useHMSActions } from '../hooks-sdk';
 import { RoomSettingsModalDebugModeContent } from './RoomSettingsModalDebugModeContent';
 import { ParticipantsCount } from './ParticipantsCount';
 import { selectAllowedTracksToPublish } from '../hooks-sdk-selectors';
+import { TestIds } from '../utils/constants';
 
 interface RoomSettingsModalContentProps {
   newAudioMixingMode: HMSAudioMixingMode;
@@ -178,6 +180,8 @@ export const RoomSettingsModalContent: React.FC<
       <BottomSheet.Header
         dismissModal={closeRoomSettingsModal}
         heading="Options"
+        headingTestID={TestIds.room_modal_heading}
+        closeIconTestID={TestIds.room_modal_close_btn}
       />
 
       <BottomSheet.Divider />
@@ -187,6 +191,7 @@ export const RoomSettingsModalContent: React.FC<
           [
             {
               id: 'participants',
+              testID: TestIds.room_modal_participants_btn,
               icon: <ParticipantsIcon style={{ width: 20, height: 20 }} />,
               label: 'Participants',
               pressHandler: onParticipantsPress,
@@ -198,6 +203,7 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'share-screen',
+              testID: !!isLocalScreenShared ? TestIds.room_modal_stop_screen_share_btn : TestIds.room_modal_share_screen_btn,
               icon: <ScreenShareIcon style={{ width: 20, height: 20 }} />,
               label: isLocalScreenShared ? 'Sharing Screen' : 'Share Screen',
               pressHandler: handleScreenShareTogglePress,
@@ -206,6 +212,7 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'brb',
+              testID: isBRBOn ? TestIds.room_modal_stop_brb_btn : TestIds.room_modal_brb_btn,
               icon: <BRBIcon style={{ width: 20, height: 20 }} />,
               label: isBRBOn ? "I'm Back" : 'Be Right Back',
               pressHandler: toggleBRB,
@@ -214,6 +221,7 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'raise-hand',
+              testID: isHandRaised ? TestIds.room_modal_hand_raised_btn : TestIds.room_modal_hand_raise_btn,
               icon: <HandIcon style={{ width: 20, height: 20 }} />,
               label: isHandRaised ? 'Hand Raised' : 'Raise Hand',
               pressHandler: toggleRaiseHand,
@@ -222,6 +230,7 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'start-recording',
+              testID: isRecordingOn ? TestIds.room_modal_stop_recording_btn : TestIds.room_modal_start_recording_btn,
               icon: <RecordingIcon style={{ width: 20, height: 20 }} />,
               label: isRecordingOn ? 'Stop Recording' : 'Start Recording',
               pressHandler: handleRecordingTogglePress,
@@ -230,6 +239,7 @@ export const RoomSettingsModalContent: React.FC<
             },
             {
               id: 'change-name',
+              testID: TestIds.room_modal_change_name_btn,
               icon: <PencilIcon style={{ width: 20, height: 20 }} />,
               label: 'Change Name',
               pressHandler: changeName,
@@ -257,6 +267,7 @@ export const RoomSettingsModalContent: React.FC<
                         {item ? (
                           <>
                             <SettingItem
+                              testID={item.testID}
                               icon={item.icon}
                               onPress={item.pressHandler}
                               text={item.label}
@@ -285,10 +296,12 @@ type SettingItemProps = {
   text: string;
   icon: React.ReactElement;
   onPress(): void;
+  testID?: TouchableOpacityProps['testID'];
   isActive?: boolean;
 };
 
 const SettingItem: React.FC<SettingItemProps> = ({
+  testID,
   text,
   icon,
   onPress,
@@ -306,6 +319,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
 
   return (
     <TouchableOpacity
+      testID={testID}
       style={[styles.button, isActive ? hmsRoomStyles.button : null]}
       onPress={onPress}
     >

package/src/utils/constants.ts

@@ -0,0 +1,146 @@
+export const TestIds = {
+  // Common
+  back_button: 'back-button',
+  company_logo: 'company-logo',
+  manage_audio_output: 'change-audio-output-button',
+
+  switch_camera: 'switch-camera-button',
+  switch_camera_disabled: 'switch-camera-disabled-button',
+
+  mic_muted_btn: 'mic-muted-button',
+  mic_unmuted_btn: 'mic-unmuted-button',
+
+  mic_muted_icon: 'mic-muted-icon',
+  mic_unmuted_icon: 'mic-unmuted-icon',
+
+  camera_muted_btn: 'camera-muted-button',
+  camera_unmuted_btn: 'camera-unmuted-button',
+
+  // Preview
+  enter_name: 'enter-name-input',
+  go_live_btn: 'go-live-button',
+  join_now_btn: 'join-now-button',
+  title: 'preview-title-text',
+  subtitle: 'preview-subtitle-text',
+
+  // Meeting - Header
+  live_text: 'live-text',
+  peer_count_icon: 'peer-count-icon',
+  peer_count: 'peer-count-text',
+
+  notification_sharing_screen: 'notification-sharing-screen-text',
+  notification_stop_screen_share_btn: 'notification-stop-screen-share-button',
+
+  // Meeting - Tile
+  brb_icon: 'brb-icon',
+
+  hand_icon: 'hand-icon',
+  hand_off_icon: 'hand-off-icon',
+
+  tile_options: 'tile-three-dots-button',
+  tile_user_name: 'tile-user-name',
+  tile_network_icon: 'tile-network-icon',
+
+  tile_modal_heading: 'tile-modal-heading',
+  tile_modal_subheading: 'tile-modal-subheading',
+  tile_modal_close_btn: 'tile-modal-close-button',
+  tile_modal_change_name_btn: 'tile-modal-change-name-button',
+
+  change_name_modal_heading: 'change-name-modal-heading',
+  change_name_input: 'change-name-input',
+  change_name_modal_close_btn: 'change-name-modal-close-button',
+  change_name_modal_cta: 'change-name-modal-cta',
+
+  // Meeting - Footer
+  footer_leave_btn: 'footer-leave-button',
+
+  leave_icon: 'leave-icon',
+  leave_description: 'leave-description',
+  leave_cta: 'leave-cta',
+
+  stop_icon: 'stop-icon',
+
+  end_session_description: 'end-session-description',
+  end_session_cta: 'end-session-cta',
+
+  end_stream_description: 'end-stream-description',
+  end_stream_cta: 'end-stream-cta',
+
+  end_confirmation_close_btn: 'end-confirmation-close-btn',
+  end_confirmation_cta: 'end-confirmation-cta',
+  end_confirmation_heading: 'end-confirmation-heading',
+  end_confirmation_description: 'end-confirmation-description',
+
+  hand_raise_btn: 'hand-raise-button',
+  hand_raised_btn: 'hand-raised-button',
+
+  open_chat_btn: 'open-chat-button',
+  close_chat_btn: 'close-chat-button',
+  enter_message_input: 'enter-message-input',
+  send_message_cta: 'send-message-cta',
+
+  room_options_btn: 'room-options-button',
+  room_modal_heading: 'room-modal-heading',
+  room_modal_close_btn: 'room-modal-close-button',
+
+  room_modal_participants_btn: 'room-modal-participants-button',
+
+  room_modal_share_screen_btn: 'room-modal-share-screen-button',
+  room_modal_stop_screen_share_btn: 'room-modal-stop-screen-share-button',
+
+  room_modal_brb_btn: 'room-modal-brb-button',
+  room_modal_stop_brb_btn: 'room-modal-stop-brb-button',
+
+  room_modal_hand_raise_btn: 'room-modal-hand-raise-button',
+  room_modal_hand_raised_btn: 'room-modal-hand-raised-button',
+
+  room_modal_start_recording_btn: 'room-modal-start-recording-button',
+  room_modal_stop_recording_btn: 'room-modal-stop-recording-button',
+
+  room_modal_change_name_btn: 'room-modal-change-name-button',
+
+  // Participants And Chat Modal
+  participants_heading: 'participants-heading',
+  participants_heading_active: 'participants-heading--active',
+  participants_heading_btn: 'participants-heading-button',
+
+  chat_heading: 'chat-heading',
+  chat_heading_active: 'chat-heading--active',
+  chat_heading_btn: 'chat-heading-button',
+
+  participants_close_btn: 'participants-close-button',
+
+  search_participant_input: 'search-participant-input',
+
+  participants_group_name: 'participants-group-name',
+  participants_group_back_btn: 'participants-group-back-button',
+  participants_group_expand_btn: 'participants-group-expand-button',
+  participants_group_collapse_btn: 'participants-group-collapse-button',
+
+  participant_name: 'participant-name',
+
+  // Audio Output Modal
+  audio_modal_heading: 'audio-modal-heading',
+  audio_modal_close_btn: 'audio-modal-close-button',
+  audio_modal_empty_text: 'audio-modal-empty-text',
+
+  automatic_audio_device_btn: 'automatic-audio-device-button',
+  automatic_audio_device_text: 'automatic-audio-device-text',
+  automatic_audio_device_active: 'automatic-audio-device--active',
+
+  phone_speaker_audio_device_btn: 'phone-speaker-audio-device-button',
+  phone_speaker_audio_device_text: 'phone-speaker-audio-device-text',
+  phone_speaker_audio_device_active: 'phone-speaker-audio-device--active',
+
+  wired_headset_audio_device_btn: 'wired-headset-audio-device-button',
+  wired_headset_audio_device_text: 'wired-headset-audio-device-text',
+  wired_headset_audio_device_active: 'wired-headset-audio-device--active',
+
+  earpiece_audio_device_btn: 'earpiece-audio-device-button',
+  earpiece_audio_device_text: 'earpiece-audio-device-text',
+  earpiece_audio_device_active: 'earpiece-audio-device--active',
+
+  bluetooth_audio_device_btn: 'bluetooth-audio-device-button',
+  bluetooth_audio_device_text: 'bluetooth-audio-device-text',
+  bluetooth_audio_device_active: 'bluetooth-audio-device--active',
+} as const;