Add E2E tests for Text visual examples (batch 2) (#55963)

Summary:
Pull Request resolved: #55963

Add screenshot E2E tests for 9 Text examples that previously lacked E2E coverage:
wrap, substringEmoji, transparentBackgroundColor, padding, spaces,
backgroundColorAttr, fontVariants, textTransform, and lineHeightIOS.

- Added `name` and `testID` to each example in TextExample.ios.js
- Added matching `name` and `testID` to Android examples (wrap, padding, spaces,
  backgroundColorAttr, fontVariants) in TextExample.android.js
- 4 tests are iOS-only (substringEmoji, transparentBackgroundColor, textTransform,
  lineHeightIOS) as these examples don't exist on Android
- 5 tests are cross-platform (excludedPlatforms: ['mac'])
- lineBreakStrategy test was removed due to persistent infra failure preventing
  screenshot capture; name and testID were still added to the source

Reviewed By: cortinico

Differential Revision: D95370389

fbshipit-source-id: 2506619ee2803c44e4f8409f2401819a0ff0c719

Author: NickGerleman

packages/rn-tester/js/examples/Text/TextExample.android.js

@@ -361,7 +361,7 @@ function IncludeFontPaddingExample(props: {}): React.Node {
 
 function FontVariantsExample(props: {}): React.Node {
   return (
-    <>
+    <View testID="text-font-variants">
       <RNTesterText style={{fontVariant: ['small-caps']}}>
         Small Caps{'\n'}
       </RNTesterText>
@@ -399,7 +399,7 @@ function FontVariantsExample(props: {}): React.Node {
         }}>
         Stylistic & and $
       </RNTesterText>
-    </>
+    </View>
   );
 }
 
@@ -619,7 +619,7 @@ function FontWeightExample(props: {}): React.Node {
 
 function BackgroundColorExample(props: {}): React.Node {
   return (
-    <>
+    <View testID="text-bg-color-attr">
       <RNTesterText style={{backgroundColor: '#ffaaaa'}}>
         Red background,
         <RNTesterText style={{backgroundColor: '#aaaaff'}}>
@@ -644,7 +644,7 @@ function BackgroundColorExample(props: {}): React.Node {
           </RNTesterText>
         </RNTesterText>
       </RNTesterText>
-    </>
+    </View>
   );
 }
 
@@ -1322,7 +1322,7 @@ const examples = [
     name: 'wrap',
     render(): React.Node {
       return (
-        <RNTesterText style={styles.wrappedText}>
+        <RNTesterText testID="text-wrap" style={styles.wrappedText}>
           The text should wrap if it goes on multiple lines. See, this is going
           to the next line.
         </RNTesterText>
@@ -1341,7 +1341,7 @@ const examples = [
     name: 'padding',
     render(): React.Node {
       return (
-        <RNTesterText style={{padding: 10}}>
+        <RNTesterText testID="text-padding" style={{padding: 10}}>
           This text is indented by 10px padding on all sides.
         </RNTesterText>
       );
@@ -1470,7 +1470,7 @@ const examples = [
     name: 'spaces',
     render(): React.Node {
       return (
-        <RNTesterText>
+        <RNTesterText testID="text-spaces">
           A {'generated'} {'string'} and some &nbsp;&nbsp;&nbsp; spaces
         </RNTesterText>
       );
@@ -1497,7 +1497,7 @@ const examples = [
   },
   {
     title: 'backgroundColor attribute',
-    name: 'backgroundColorAttribute',
+    name: 'backgroundColorAttr',
     render(): React.Node {
       return <BackgroundColorExample />;
     },

packages/rn-tester/js/examples/Text/TextExample.ios.js

@@ -601,9 +601,10 @@ const examples = [
   },
   {
     title: 'Wrap',
+    name: 'wrap',
     render: function (): React.Node {
       return (
-        <Text>
+        <Text testID="text-wrap">
           The text should wrap if it goes on multiple lines. See, this is going
           to the next line.
         </Text>
@@ -612,15 +613,21 @@ const examples = [
   },
   {
     title: "Substring Emoji (should only see 'test')",
+    name: 'substringEmoji',
     render: function (): React.Node {
-      return <Text>{'test🙃'.substring(0, 5)}</Text>;
+      return (
+        <Text testID="text-substring-emoji">{'test🙃'.substring(0, 5)}</Text>
+      );
     },
   },
   {
     title: 'Transparent Background Color',
+    name: 'transparentBackgroundColor',
     render: function (): React.Node {
       return (
-        <Text style={{backgroundColor: '#00000020', padding: 10}}>
+        <Text
+          testID="text-transparent-bg"
+          style={{backgroundColor: '#00000020', padding: 10}}>
           Text in a gray box!
           <Text style={{backgroundColor: 'red'}}>
             Another text in a (inline) red box (which is inside the gray box).
@@ -711,9 +718,10 @@ const examples = [
   },
   {
     title: 'Padding',
+    name: 'padding',
     render: function (): React.Node {
       return (
-        <Text style={{padding: 10}}>
+        <Text testID="text-padding" style={{padding: 10}}>
           This text is indented by 10px padding on all sides.
         </Text>
       );
@@ -1033,19 +1041,21 @@ const examples = [
   },
   {
     title: 'Spaces',
+    name: 'spaces',
     render: function (): React.Node {
       return (
-        <Text>
+        <Text testID="text-spaces">
           A {'generated'} {'string'} and some &nbsp;&nbsp;&nbsp; spaces
         </Text>
       );
     },
   },
   {
     title: 'Line Height',
+    name: 'lineHeightIOS',
     render: function (): React.Node {
       return (
-        <Text>
+        <Text testID="text-line-height-ios">
           <Text style={{lineHeight: 35}}>
             A lot of space between the lines of this long passage that should
             wrap once.
@@ -1061,10 +1071,11 @@ const examples = [
   },
   {
     title: 'backgroundColor attribute',
+    name: 'backgroundColorAttr',
     description: 'backgroundColor is inherited from all types of views.',
     render: function (): React.Node {
       return (
-        <Text style={{backgroundColor: 'yellow'}}>
+        <Text testID="text-bg-color-attr" style={{backgroundColor: 'yellow'}}>
           Yellow container background,
           <Text style={{backgroundColor: '#ffaaaa'}}>
             {' '}
@@ -1289,9 +1300,10 @@ const examples = [
   },
   {
     title: 'Font variants',
+    name: 'fontVariants',
     render: function (): React.Node {
       return (
-        <View>
+        <View testID="text-font-variants">
           <Text style={{fontVariant: ['small-caps']}}>Small Caps{'\n'}</Text>
           <Text
             style={{
@@ -1370,9 +1382,10 @@ const examples = [
   },
   {
     title: 'Transform',
+    name: 'textTransform',
     render: function (): React.Node {
       return (
-        <View>
+        <View testID="text-transform">
           <Text style={{textTransform: 'uppercase'}}>
             This text should be uppercased.
           </Text>
@@ -1429,6 +1442,7 @@ const examples = [
   },
   {
     title: 'Line Break Strategy',
+    name: 'lineBreakStrategy',
     render: function (): React.Node {
       const lineBreakStrategy = [
         'none',
@@ -1444,7 +1458,7 @@ const examples = [
       };
 
       return (
-        <View>
+        <View testID="text-line-break-strategy">
           {lineBreakStrategy.map(strategy => {
             return (
               <View key={strategy} style={{marginBottom: 12}}>