Merge pull request #138 from millicast/bug_fix/fix_automation_test_id

Bug fix/fix automation test
millicast · Feb 26, 2024 · 0af7079 · 0af7079
2 parents 2782470 + 9587caa
commit 0af7079
Show file tree

Hide file tree

Showing 13 changed files with 112 additions and 34 deletions.
diff --git a/src/components/BottomBar/BottomBar.tsx b/src/components/BottomBar/BottomBar.tsx
@@ -9,6 +9,7 @@ export const BottomBar = ({ displayStatsInformation, focus }) => {
   return (
     <View style={styles.wrapper}>
       <TouchableOpacity
+        testID="infoIconButton"
         hasTVPreferredFocus={focus}
         onPress={() => {
           displayStatsInformation();

diff --git a/src/components/StreamDetail/StreamDetail.tsx b/src/components/StreamDetail/StreamDetail.tsx
@@ -19,21 +19,21 @@ export const StreamDetail = ({ stream, onPlay }: { stream: StreamInfo; onPlay: (
       onPress={() => onPlay(stream)}
       setParentFocus={setIsFocused}
       underlayColor="none"
-      testID="StreamDetail"
+      testID={`streamDetail.${stream.streamName}`}
     >
       <View style={[styles.wrapper, isFocused ? styles.wrapperInFocus : {}]}>
         <View style={styles.textWrapper}>
-          <Text type="bodyDefault" style={styles.streamNameText}>
+          <Text testID={stream.streamName} type="bodyDefault" style={styles.streamNameText}>
             {stream.streamName}
           </Text>
           <View style={styles.accountIdTextWrapper}>
-            <Text id="accountIDLabel" type="bodyDefault" style={styles.accountIdText} />
-            <Text type="bodyDefault" color="secondary.200">
+            <Text testID="accountIDLabel" id="accountIDLabel" type="bodyDefault" style={styles.accountIdText} />
+            <Text testID={stream.accountId} type="bodyDefault" color="secondary.200">
               {stream.accountId}
             </Text>
           </View>
         </View>
-        <Icon backgroundColor="transparent" name="playOutline" size={iconSize} color={iconColor} />
+        <Icon testID="playOutline" backgroundColor="transparent" name="playOutline" size={iconSize} color={iconColor} />
       </View>
     </FocusedComponent>
   );

diff --git a/src/components/StreamList/StreamList.tsx b/src/components/StreamList/StreamList.tsx
@@ -15,6 +15,7 @@ export const StreamList = ({
 }) => {
   return (
     <FlatList
+      testID="streamList"
       style={styles.wrapper}
       data={streams}
       renderItem={({ item }) => <StreamDetail stream={item} onPlay={onPlayStream} />}

diff --git a/src/components/StreamStats/StreamStats.tsx b/src/components/StreamStats/StreamStats.tsx
@@ -65,21 +65,27 @@ export const StreamStats = ({ onPress }) => {
   return (
     <View style={Platform.isTV ? styles.outerContainerTV : styles.outerContainer}>
       <View style={styles.closeIcon}>
-        <TouchableOpacity hasTVPreferredFocus onPress={onPress}>
+        <TouchableOpacity testID="closeIconButton" hasTVPreferredFocus onPress={onPress}>
           <Icon testID="closeIcon" name="close" size="s" />
         </TouchableOpacity>
       </View>
 
       <View style={styles.innerContainer}>
         <Text
+          testID="streamInfoTitle"
           id="streamInfoTitle"
           type="h2"
           align={Platform.isTV ? 'left' : 'center'}
           style={{ paddingTop: 16, paddingLeft: 16 }}
         />
         <View style={styles.streamInfoContainer}>
           <StreamStatsRecord param="Name" paramType="h3" value="Value" valueType="h3" />
-          <FlatList data={statsRecordsList} keyExtractor={(item) => item.param} renderItem={renderItem} />
+          <FlatList
+            testID="streamStatsInfoView"
+            data={statsRecordsList}
+            keyExtractor={(item) => item.param}
+            renderItem={renderItem}
+          />
         </View>
       </View>
     </View>

diff --git a/src/components/StreamStatsRecord/StreamStatsRecord.tsx b/src/components/StreamStatsRecord/StreamStatsRecord.tsx
@@ -9,10 +9,14 @@ export const StreamStatsRecord = ({ param, value, paramType, valueType }) => {
   return (
     <View style={styles.wrapper}>
       <View style={styles.contentStyle}>
-        <Text type={paramType}>{param}</Text>
+        <Text testID={param} type={paramType}>
+          {param}
+        </Text>
       </View>
       <View style={styles.contentStyle}>
-        <Text type={valueType}>{value}</Text>
+        <Text testID={`${param} Value`} type={valueType}>
+          {value}
+        </Text>
       </View>
     </View>
   );

diff --git a/src/components/StreamStatusIndicator/StreamStatusIndicator.tsx b/src/components/StreamStatusIndicator/StreamStatusIndicator.tsx
@@ -7,8 +7,8 @@ import styles from './StreamStatusIndicator.style';
 
 export const StreamStatusIndicator = ({ title, position }) => {
   return (
-    <View style={[styles.container, position]}>
-      <Text>{title}</Text>
+    <View testID="streamStatusIndicator" style={[styles.container, position]}>
+      <Text testID={title}>{title}</Text>
     </View>
   );
 };
diff --git a/src/screens/Navigator.tsx b/src/screens/Navigator.tsx
@@ -18,7 +18,7 @@ import UserInput from './userInput';
 const Stack = createNativeStackNavigator();
 
 const LogoTitle = () => {
-  return <Icon name="dolbyLogo" color="white" />;
+  return <Icon testID="dolbyLogo" name="dolbyLogo" color="white" />;
 };
 
 export const Navigator = () => {

diff --git a/src/screens/multiview/MultiView.tsx b/src/screens/multiview/MultiView.tsx
@@ -408,6 +408,7 @@ export const MultiView = ({ navigation }) => {
         }}
       >
         <FlatList
+          testID="multiViewStreamList"
           key={columnsNumber}
           data={remoteTrackSourcesRef.current}
           style={{
@@ -418,6 +419,7 @@ export const MultiView = ({ navigation }) => {
           renderItem={({ item, index }) => (
             <View style={margin}>
               <Pressable
+                testID={`${!item.sourceId ? 'Main' : String(item.sourceId)}SourceButton`}
                 style={{ marginBottom: 15 }}
                 onPress={() => {
                   dispatch({
@@ -428,6 +430,7 @@ export const MultiView = ({ navigation }) => {
                 }}
               >
                 <RTCView
+                  testID={!item.sourceId ? 'Main' : String(item.sourceId)}
                   key={item?.mediaStream.toURL() || `${item?.videoMediaId}` || ''}
                   streamURL={item?.mediaStream.toURL()}
                   style={{
@@ -437,6 +440,7 @@ export const MultiView = ({ navigation }) => {
                   }}
                 />
                 <Text
+                  testID={!item.sourceId ? 'Main' : String(item.sourceId)}
                   style={{
                     padding: 1,
                     position: 'absolute',

diff --git a/src/screens/recentStreams/RecentStreams.tsx b/src/screens/recentStreams/RecentStreams.tsx
@@ -77,29 +77,51 @@ export const RecentStreams = ({ navigation }) => {
     <Layout testID="RecentStreamsScreen">
       <SafeAreaView style={styles.wrapper}>
         <ScrollView>
-          <Text id="appTitle" type="h1" align="center" />
+          <Text testID="appTitle" id="appTitle" type="h1" align="center" />
           <Text
+            testID="recentStreamsInfoText"
             id="recentStreamsInfoText"
             color="secondary.200"
             type="bodyDefault"
             align="center"
             style={styles.recentStreamsInfoText}
           />
           <View style={styles.streamListHeaderWrapper}>
-            <Text id="recentlyViewedText" type="bodyDefault" style={styles.recentlyViewedText} />
+            <Text
+              testID="recentlyViewedText"
+              id="recentlyViewedText"
+              type="bodyDefault"
+              style={styles.recentlyViewedText}
+            />
             <FocusedComponent
               name="viewAll"
               onPress={handleViewAllClick}
               underlayColor="none"
               testID="viewAllButton"
               setParentFocus={setIsFocused}
             >
-              <Text id="viewAllButtonText" type={viewAllButtonTextType} color={viewAllButtonColor} />
+              <Text
+                testID="viewAllButtonText"
+                id="viewAllButtonText"
+                type={viewAllButtonTextType}
+                color={viewAllButtonColor}
+              />
             </FocusedComponent>
           </View>
           <StreamList streams={streamsList.slice(0, 3)} onPlayStream={handlePlayStreamClick} />
-          <Text id="alternateOptionText" type="paragraph" align="center" style={styles.alternateOptionText} />
-          <Button title={playNewStreamTitle} type="primary" onPress={handlePlayNewStreamClick} />
+          <Text
+            testID="alternateOptionText"
+            id="alternateOptionText"
+            type="paragraph"
+            align="center"
+            style={styles.alternateOptionText}
+          />
+          <Button
+            testID="playNewStreamTitle"
+            title={playNewStreamTitle}
+            type="primary"
+            onPress={handlePlayNewStreamClick}
+          />
         </ScrollView>
       </SafeAreaView>
       <WelcomeFooter />

diff --git a/src/screens/savedStreams/SavedStreams.tsx b/src/screens/savedStreams/SavedStreams.tsx
@@ -77,7 +77,7 @@ export const SavedStreams = ({ navigation }) => {
       headerTitle: savedStreamsHeaderText,
       headerRight: () =>
         streamsList.length > 0 && (
-          <FocusedComponent onPress={clearSavedStreamsAlert} setParentFocus={setIsFocused}>
+          <FocusedComponent testID="trashIconButton" onPress={clearSavedStreamsAlert} setParentFocus={setIsFocused}>
             <Icon testID="trashIcon" name="trash" size={defaultIconSize} color={iconColor} />
           </FocusedComponent>
         ),
@@ -90,10 +90,10 @@ export const SavedStreams = ({ navigation }) => {
         {Platform.isTV && (
           <View style={styles.headerViewWrapperTV}>
             <View style={{ flex: 1, alignItems: 'center' }}>
-              <Text id="savedStreamsHeaderText" type="H2" />
+              <Text testID="savedStreamsHeaderText" id="savedStreamsHeaderText" type="H2" />
             </View>
             {streamsList.length > 0 && (
-              <FocusedComponent onPress={clearSavedStreamsAlert} setParentFocus={setIsFocused}>
+              <FocusedComponent testID="trashIconButton" onPress={clearSavedStreamsAlert} setParentFocus={setIsFocused}>
                 <Icon testID="trashIcon" name="trash" size={defaultIconSize} color={iconColor} />
               </FocusedComponent>
             )}
@@ -102,18 +102,39 @@ export const SavedStreams = ({ navigation }) => {
         {streamsList.length > 0 ? (
           <ScrollView>
             <View style={styles.streamListSectionHeaderWrapper}>
-              <Text id="lastPlayedStreamText" type="bodyDefault" style={styles.streamListSectionHeaderText} />
+              <Text
+                testID="lastPlayedStreamText"
+                id="lastPlayedStreamText"
+                type="bodyDefault"
+                style={styles.streamListSectionHeaderText}
+              />
             </View>
             <StreamList streams={streamsList.slice(0, 1)} onPlayStream={handlePlayStream} />
             <View style={styles.streamListSectionHeaderWrapper}>
-              <Text id="allStreamsText" type="bodyDefault" style={styles.streamListSectionHeaderText} />
+              <Text
+                testID="allStreamsText"
+                id="allStreamsText"
+                type="bodyDefault"
+                style={styles.streamListSectionHeaderText}
+              />
             </View>
             <StreamList streams={streamsList} onPlayStream={handlePlayStream} />
           </ScrollView>
         ) : (
           <View style={styles.noStreamsMessageWrapper}>
-            <Text id="noSavedStreamsTitleText" type="h2" align="center" numberOfLines={2} />
-            <Text id="noSavedStreamssubtitleText" type="bodyDefault" color="secondary.200" />
+            <Text
+              testID="noSavedStreamsTitleText"
+              id="noSavedStreamsTitleText"
+              type="h2"
+              align="center"
+              numberOfLines={2}
+            />
+            <Text
+              testID="noSavedStreamssubtitleText"
+              id="noSavedStreamssubtitleText"
+              type="bodyDefault"
+              color="secondary.200"
+            />
           </View>
         )}
       </SafeAreaView>

diff --git a/src/screens/singleStreamView/SingleStreamView.tsx b/src/screens/singleStreamView/SingleStreamView.tsx
@@ -113,6 +113,7 @@ export const SingleStreamView = ({ navigation }) => {
   const renderVideoItem = ({item}) => (
     <View style={[styles.videoContainer, { width: width, height: height }]}>
       <RTCView
+        testID={!item.sourceId ? 'Main' : String(item.sourceId)}
         key={item.video}
         streamURL={item.mediaStream.toURL()}
         style={styles.video}

diff --git a/src/screens/userInput/UserInput.tsx b/src/screens/userInput/UserInput.tsx
@@ -79,7 +79,7 @@ export const UserInput = ({ navigation }) => {
   const validateInput = (value: string) => {
     const valid = value.length >= MINIMUM_INPUT_LENGTH;
     setValidation(
-      value.length && value.length >= MINIMUM_INPUT_LENGTH
+      value.length && value.length < MINIMUM_INPUT_LENGTH
         ? {
             valid,
             message: valid ? undefined : intl.formatMessage({ id: 'enterValidInputMessage' }),
@@ -116,9 +116,10 @@ export const UserInput = ({ navigation }) => {
     <Layout testID="UserInputScreen">
       <SafeAreaView style={styles.wrapper}>
         <ScrollView>
-          <Text id="appTitle" type="h2" align="center" style={{ paddingTop: 16 }} />
-          <Text id="startStream" type="h3" align="center" style={{ paddingTop: 24 }} />
+          <Text testID="appTitle" id="appTitle" type="h2" align="center" style={{ paddingTop: 16 }} />
+          <Text testID="startStream" id="startStream" type="h3" align="center" style={{ paddingTop: 24 }} />
           <Text
+            testID="startStreamLabel"
             id="startStreamLabel"
             type="paragraph"
             align="center"
@@ -159,8 +160,15 @@ export const UserInput = ({ navigation }) => {
             disabled={playDisabled(validation, streamName, accountId)}
             testID="PlayButton"
           />
-          <Text id="demoTitle" type="h2" align="center" style={{ paddingTop: 48 }} />
-          <Text id="demoLabel" type="paragraph" align="center" style={{ paddingTop: 8 }} color="grey.500" />
+          <Text testID="demoTitle" id="demoTitle" type="h2" align="center" style={{ paddingTop: 48 }} />
+          <Text
+            testID="demoLabel"
+            id="demoLabel"
+            type="paragraph"
+            align="center"
+            style={{ paddingTop: 8 }}
+            color="grey.500"
+          />
           <View style={{ paddingTop: 16 }} />
           <FocusedComponent
             onPress={handleDemoPlayClick}
@@ -170,8 +178,12 @@ export const UserInput = ({ navigation }) => {
             testID="DemoButtonFocusElement"
           >
             <>
-              <Text id="playDemoStream" type="paragraph" />
-              <Icon name="playOutline" color={isDemoButtonFocused ? 'white' : defaultDemoButtonIconColor} />
+              <Text testID="playDemoStream" id="playDemoStream" type="paragraph" />
+              <Icon
+                testID="playOutline"
+                name="playOutline"
+                color={isDemoButtonFocused ? 'white' : defaultDemoButtonIconColor}
+              />
             </>
           </FocusedComponent>
         </ScrollView>

diff --git a/src/uikit/components/Input/Input.tsx b/src/uikit/components/Input/Input.tsx
@@ -67,8 +67,8 @@ const Input = ({
 
   return (
     <View testID={testID} style={styles.container}>
-      <View style={[styles.labelContainer, { backgroundColor: labelBackground }]}>
-        <Text type="captionRegular" color={getColor(labelColor, 'grey.500')}>
+      <View testID={label} style={[styles.labelContainer, { backgroundColor: labelBackground }]}>
+        <Text testID={label} type="captionRegular" color={getColor(labelColor, 'grey.500')}>
           {label}
         </Text>
       </View>
@@ -81,6 +81,7 @@ const Input = ({
         ]}
       >
         <TextInput
+          testID={testID}
           ref={textInput}
           value={value}
           onChangeText={onChangeText}
@@ -99,6 +100,7 @@ const Input = ({
       {value.length > 0 && !Platform.isTV && (
         <View style={styles.buttonContainer}>
           <IconButton
+            testID="closeIconButton"
             variant="circle"
             icon="close"
             backgroundColor="transparent"
@@ -114,7 +116,11 @@ const Input = ({
 
       {validation?.message && (
         <View style={styles.errorContainer}>
-          <Text type="captionRegular" color={validation?.valid === false ? 'infoError' : 'grey.600'}>
+          <Text
+            testID="invalidInputText"
+            type="captionRegular"
+            color={validation?.valid === false ? 'infoError' : 'grey.600'}
+          >
             {validation.message}
           </Text>
         </View>