Add E2E tests for Image visual examples (#55964)

Summary:
Pull Request resolved: #55964

Add screenshot E2E tests for 7 Image examples that previously lacked E2E coverage:
static-image, tint-color, opacity, nesting-content, nesting-image-background,
blur-radius, and base64-image.

- Added `name` and `testID` to each example in ImageExample.js
- 6 tests are cross-platform (excludedPlatforms: ['mac'])
- 1 test is iOS-only (base64-image)
- animated-gif 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: D95371702

fbshipit-source-id: c839e26425914f9b18722f313d19c20b50d7fe84

Author: NickGerleman

packages/rn-tester/js/examples/Image/ImageExample.js

@@ -959,12 +959,13 @@ exports.examples = [
   },
   {
     title: 'Plain Static Image',
+    name: 'static-image',
     description:
       ('Static assets should be placed in the source code tree, and ' +
         'required in the same way as JavaScript modules.': string),
     render: function (): React.Node {
       return (
-        <View style={styles.horizontal}>
+        <View testID="image-static" style={styles.horizontal}>
           <Image
             source={require('../../assets/uie_thumb_normal.png')}
             style={styles.icon}
@@ -1173,9 +1174,10 @@ exports.examples = [
   },
   {
     title: 'Opacity',
+    name: 'opacity',
     render: function (): React.Node {
       return (
-        <View style={styles.horizontal}>
+        <View testID="image-opacity" style={styles.horizontal}>
           <Image style={[styles.base, styles.opacity1]} source={fullImage} />
           <Image style={[styles.base, styles.opacity2]} source={fullImage} />
           <Image style={[styles.base, styles.opacity3]} source={fullImage} />
@@ -1188,9 +1190,10 @@ exports.examples = [
   },
   {
     title: 'Nesting content inside <Image> component',
+    name: 'nesting-content',
     render: function (): React.Node {
       return (
-        <View style={styles.base}>
+        <View testID="image-nesting-content" style={styles.base}>
           <Image style={{...StyleSheet.absoluteFill}} source={fullImage} />
           <Text style={styles.nestedText}>React</Text>
         </View>
@@ -1199,9 +1202,11 @@ exports.examples = [
   },
   {
     title: 'Nesting content inside <ImageBackground> component',
+    name: 'nesting-image-background',
     render: function (): React.Node {
       return (
         <ImageBackground
+          testID="image-nesting-background"
           style={styles.transparentImageBackground}
           source={fullImage}>
           <Text style={styles.nestedText}>React</Text>
@@ -1211,11 +1216,12 @@ exports.examples = [
   },
   {
     title: 'Tint Color',
+    name: 'tint-color',
     description: ('The `tintColor` prop changes all the non-alpha ' +
       'pixels to the tint color.': string),
     render: function (): React.Node {
       return (
-        <View>
+        <View testID="image-tint-color">
           <View style={styles.horizontal}>
             <Image
               source={require('../../assets/uie_thumb_normal.png')}
@@ -1514,9 +1520,11 @@ exports.examples = [
   },
   {
     title: 'Animated GIF',
+    name: 'animated-gif',
     render: function (): React.Node {
       return (
         <Image
+          testID="image-animated-gif"
           style={styles.gif}
           source={require('../../assets/tumblr_mfqekpMktw1rn90umo1_500.gif')}
         />
@@ -1526,9 +1534,14 @@ exports.examples = [
   },
   {
     title: 'Base64 image',
+    name: 'base64-image',
     render: function (): React.Node {
       return (
-        <Image style={styles.base64} source={{uri: base64Icon, scale: 3}} />
+        <Image
+          testID="image-base64"
+          style={styles.base64}
+          source={{uri: base64Icon, scale: 3}}
+        />
       );
     },
     platform: 'ios',
@@ -1599,9 +1612,10 @@ exports.examples = [
   },
   {
     title: 'Blur Radius',
+    name: 'blur-radius',
     render: function (): React.Node {
       return (
-        <View style={styles.horizontal}>
+        <View testID="image-blur-radius" style={styles.horizontal}>
           <Image style={styles.base} source={fullImage} blurRadius={0} />
           <Image style={styles.base} source={fullImage} blurRadius={5} />
           <Image style={styles.base} source={fullImage} blurRadius={10} />