Add test for width, style, testID and tintColor (#53088)

Summary:
Pull Request resolved: #53088

Changelog: [Internal]
As title

Reviewed By: rshest

Differential Revision: D79642765

fbshipit-source-id: 92862934fc72cfca2ce35c365fa7369d878d58d9

Author: andrewdacenko

packages/react-native/Libraries/Image/__tests__/Image-itest.js

@@ -208,6 +208,20 @@ describe('<Image>', () => {
       });
     });
 
+    describe('width', () => {
+      it('provides width for image', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<Image width={100} source={LOGO_SOURCE} />);
+        });
+
+        expect(root.getRenderedOutput({props: ['width']}).toJSX()).toEqual(
+          <rn-image width="100.000000" />,
+        );
+      });
+    });
+
     describe('loading progress', () => {
       (
         [
@@ -550,6 +564,65 @@ describe('<Image>', () => {
         );
       });
     });
+
+    describe('style', () => {
+      it('can be set', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(
+            <Image
+              style={{
+                width: 100,
+                height: 100,
+                resizeMode: 'contain',
+              }}
+              source={LOGO_SOURCE}
+            />,
+          );
+        });
+
+        expect(root.getRenderedOutput().toJSX()).toEqual(
+          <rn-image
+            height="100.000000"
+            overflow="hidden"
+            resizeMode="contain"
+            width="100.000000"
+            source-scale="1"
+            source-type="remote"
+            source-uri="https://reactnative.dev/img/tiny_logo.png"
+          />,
+        );
+      });
+    });
+
+    describe('testID', () => {
+      it('can be set', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<Image testID="test" source={LOGO_SOURCE} />);
+        });
+
+        expect(root.getRenderedOutput({props: ['testID']}).toJSX()).toEqual(
+          <rn-image testID="test" />,
+        );
+      });
+    });
+
+    describe('tintColor', () => {
+      it('can be set', () => {
+        const root = Fantom.createRoot();
+
+        Fantom.runTask(() => {
+          root.render(<Image tintColor="red" source={LOGO_SOURCE} />);
+        });
+
+        expect(root.getRenderedOutput({props: ['tintColor']}).toJSX()).toEqual(
+          <rn-image tintColor="rgba(255, 0, 0, 1)" />,
+        );
+      });
+    });
   });
 
   describe('ref', () => {

packages/react-native/ReactCommon/react/renderer/components/image/ImageProps.cpp

@@ -308,6 +308,8 @@ SharedDebugStringConvertibleList ImageProps::getDebugProps() const {
               "resizeMode",
               toString(resizeMode),
               toString(imageProps.resizeMode)),
+          debugStringConvertibleItem(
+              "tintColor", toString(tintColor), toString(imageProps.tintColor)),
       };
 }