From 68e5a24ef715ca0d8108e5ce9689dd96a8fe21a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rub=C3=A9n=20Norte?= <rubennorte@meta.com>
Date: Fri, 1 Aug 2025 10:33:01 -0700
Subject: [PATCH] Restructure Fantom test for View to follow convention
 (#52983)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/52983

Changelog: [internal]

Just moving some tests that were defined under `<View>` that were related to styles, to under `<View> > props > style`.

Reviewed By: rshest

Differential Revision: D79447450

fbshipit-source-id: e97cc4e058ffc8170b7fa74176cc8dc27e26cfde
---
 .../Components/View/__tests__/View-itest.js   | 395 +++++++++---------
 1 file changed, 202 insertions(+), 193 deletions(-)

diff --git a/packages/react-native/Libraries/Components/View/__tests__/View-itest.js b/packages/react-native/Libraries/Components/View/__tests__/View-itest.js
index 77ff853ecb3..c9b92c92ba3 100644
--- a/packages/react-native/Libraries/Components/View/__tests__/View-itest.js
+++ b/packages/react-native/Libraries/Components/View/__tests__/View-itest.js
@@ -20,209 +20,217 @@ import {View} from 'react-native';
 import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
 
 describe('<View>', () => {
-  describe('width and height style', () => {
-    it('handles correct percentage-based dimensions', () => {
-      const root = Fantom.createRoot();
+  describe('props', () => {
+    describe('style', () => {
+      describe('width and height style', () => {
+        it('handles correct percentage-based dimensions', () => {
+          const root = Fantom.createRoot();
 
-      Fantom.runTask(() => {
-        root.render(
-          <View style={{width: 100, height: 100}}>
-            <View style={{width: '20%', height: '50%'}} collapsable={false} />
-          </View>,
-        );
-      });
+          Fantom.runTask(() => {
+            root.render(
+              <View style={{width: 100, height: 100}}>
+                <View
+                  style={{width: '20%', height: '50%'}}
+                  collapsable={false}
+                />
+              </View>,
+            );
+          });
 
-      expect(
-        root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
-      ).toEqual(
-        <rn-view
-          layoutMetrics-frame="{x:0,y:0,width:20,height:50}"
-          height="50.000000%"
-          layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
-          layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
-          layoutMetrics-displayType="Flex"
-          layoutMetrics-layoutDirection="LeftToRight"
-          layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
-          layoutMetrics-pointScaleFactor="3"
-          width="20.000000%"
-        />,
-      );
-    });
-
-    it('handles numeric values passed in as strings', () => {
-      const root = Fantom.createRoot();
-
-      Fantom.runTask(() => {
-        root.render(
-          <View style={{width: '5', height: '10'}} collapsable={false} />,
-        );
-      });
-
-      expect(
-        root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
-      ).toEqual(
-        <rn-view
-          layoutMetrics-frame="{x:0,y:0,width:5,height:10}"
-          height="10.000000"
-          layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
-          layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
-          layoutMetrics-displayType="Flex"
-          layoutMetrics-layoutDirection="LeftToRight"
-          layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
-          layoutMetrics-pointScaleFactor="3"
-          width="5.000000"
-        />,
-      );
-    });
-
-    it('handles invalid values, falling back to default', () => {
-      const root = Fantom.createRoot();
-
-      Fantom.runTask(() => {
-        root.render(
-          <View style={{width: 100, height: 100}}>
-            <View
-              // 5pt is a valid CSS value but RN can't parse it.
-              style={{width: '5pt', height: 'error 50%'}}
-              collapsable={false}
-            />
-          </View>,
-        );
-      });
-
-      expect(
-        root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
-      ).toEqual(
-        <rn-view
-          layoutMetrics-frame="{x:0,y:0,width:100,height:0}"
-          height="undefined"
-          layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
-          layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
-          layoutMetrics-displayType="Flex"
-          layoutMetrics-layoutDirection="LeftToRight"
-          layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
-          layoutMetrics-pointScaleFactor="3"
-          width="undefined"
-        />,
-      );
-    });
-  });
-
-  describe('margin style', () => {
-    it('handles correct percentage-based values', () => {
-      const root = Fantom.createRoot();
-
-      Fantom.runTask(() => {
-        root.render(
-          <View style={{width: 100, height: 200}}>
-            <View
-              style={{width: 5, height: 10, margin: '50%'}}
-              collapsable={false}
-            />
-          </View>,
-        );
-      });
-
-      expect(
-        root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
-      ).toEqual(
-        <rn-view
-          layoutMetrics-frame="{x:50,y:50,width:5,height:10}"
-          height="10.000000"
-          layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
-          layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
-          layoutMetrics-displayType="Flex"
-          layoutMetrics-layoutDirection="LeftToRight"
-          layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
-          layoutMetrics-pointScaleFactor="3"
-          margin="50.000000%"
-          width="5.000000"
-        />,
-      );
-    });
-
-    it('handles numeric values passed in as strings', () => {
-      const root = Fantom.createRoot();
-
-      Fantom.runTask(() => {
-        root.render(
-          <View style={{width: 100, height: 200}}>
-            <View
-              style={{width: 5, height: 10, margin: '5'}}
-              collapsable={false}
-            />
-          </View>,
-        );
-      });
-
-      expect(
-        root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
-      ).toEqual(
-        <rn-view
-          layoutMetrics-frame="{x:5,y:5,width:5,height:10}"
-          height="10.000000"
-          layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
-          layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
-          layoutMetrics-displayType="Flex"
-          layoutMetrics-layoutDirection="LeftToRight"
-          layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
-          layoutMetrics-pointScaleFactor="3"
-          margin="5.000000"
-          width="5.000000"
-        />,
-      );
-    });
-  });
-
-  describe('transform style', () => {
-    it('causes view to be unflattened', () => {
-      const root = Fantom.createRoot();
-
-      Fantom.runTask(() => {
-        root.render(<View style={{transform: [{translateX: 10}]}} />);
-      });
-
-      expect(root.getRenderedOutput({props: ['transform']}).toJSX()).toEqual(
-        <rn-view transform='[{"translateX": 10.000000}]' />,
-      );
-    });
-
-    [
-      [undefined, {x: -5, y: 0, width: 20, height: 10}],
-      ['50% 50%', {x: -5, y: 0, width: 20, height: 10}],
-      ['top left', {x: 0, y: 0, width: 20, height: 10}],
-      ['right bottom', {x: -10, y: 0, width: 20, height: 10}],
-    ].forEach(([transformOrigin, expectedBounds]) => {
-      it(`applies transformOrigin correctly for ${String(transformOrigin)}`, () => {
-        const root = Fantom.createRoot();
-
-        const viewRef = createRef<HostInstance>();
-        Fantom.runTask(() => {
-          root.render(
-            <View
-              ref={viewRef}
-              style={{
-                width: 10,
-                height: 10,
-                transform: [{scaleX: 2}],
-                transformOrigin,
-              }}
+          expect(
+            root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
+          ).toEqual(
+            <rn-view
+              layoutMetrics-frame="{x:0,y:0,width:20,height:50}"
+              height="50.000000%"
+              layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
+              layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
+              layoutMetrics-displayType="Flex"
+              layoutMetrics-layoutDirection="LeftToRight"
+              layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
+              layoutMetrics-pointScaleFactor="3"
+              width="20.000000%"
             />,
           );
         });
 
-        const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+        it('handles numeric values passed in as strings', () => {
+          const root = Fantom.createRoot();
 
-        const viewBounds = viewElement.getBoundingClientRect();
-        expect(viewBounds.x).toBe(expectedBounds.x);
-        expect(viewBounds.y).toBe(expectedBounds.y);
-        expect(viewBounds.width).toBe(expectedBounds.width);
-        expect(viewBounds.height).toBe(expectedBounds.height);
+          Fantom.runTask(() => {
+            root.render(
+              <View style={{width: '5', height: '10'}} collapsable={false} />,
+            );
+          });
+
+          expect(
+            root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
+          ).toEqual(
+            <rn-view
+              layoutMetrics-frame="{x:0,y:0,width:5,height:10}"
+              height="10.000000"
+              layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
+              layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
+              layoutMetrics-displayType="Flex"
+              layoutMetrics-layoutDirection="LeftToRight"
+              layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
+              layoutMetrics-pointScaleFactor="3"
+              width="5.000000"
+            />,
+          );
+        });
+
+        it('handles invalid values, falling back to default', () => {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(
+              <View style={{width: 100, height: 100}}>
+                <View
+                  // 5pt is a valid CSS value but RN can't parse it.
+                  style={{width: '5pt', height: 'error 50%'}}
+                  collapsable={false}
+                />
+              </View>,
+            );
+          });
+
+          expect(
+            root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
+          ).toEqual(
+            <rn-view
+              layoutMetrics-frame="{x:0,y:0,width:100,height:0}"
+              height="undefined"
+              layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
+              layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
+              layoutMetrics-displayType="Flex"
+              layoutMetrics-layoutDirection="LeftToRight"
+              layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
+              layoutMetrics-pointScaleFactor="3"
+              width="undefined"
+            />,
+          );
+        });
+      });
+
+      describe('margin style', () => {
+        it('handles correct percentage-based values', () => {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(
+              <View style={{width: 100, height: 200}}>
+                <View
+                  style={{width: 5, height: 10, margin: '50%'}}
+                  collapsable={false}
+                />
+              </View>,
+            );
+          });
+
+          expect(
+            root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
+          ).toEqual(
+            <rn-view
+              layoutMetrics-frame="{x:50,y:50,width:5,height:10}"
+              height="10.000000"
+              layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
+              layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
+              layoutMetrics-displayType="Flex"
+              layoutMetrics-layoutDirection="LeftToRight"
+              layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
+              layoutMetrics-pointScaleFactor="3"
+              margin="50.000000%"
+              width="5.000000"
+            />,
+          );
+        });
+
+        it('handles numeric values passed in as strings', () => {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(
+              <View style={{width: 100, height: 200}}>
+                <View
+                  style={{width: 5, height: 10, margin: '5'}}
+                  collapsable={false}
+                />
+              </View>,
+            );
+          });
+
+          expect(
+            root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
+          ).toEqual(
+            <rn-view
+              layoutMetrics-frame="{x:5,y:5,width:5,height:10}"
+              height="10.000000"
+              layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
+              layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
+              layoutMetrics-displayType="Flex"
+              layoutMetrics-layoutDirection="LeftToRight"
+              layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
+              layoutMetrics-pointScaleFactor="3"
+              margin="5.000000"
+              width="5.000000"
+            />,
+          );
+        });
+      });
+
+      describe('transform style', () => {
+        it('causes view to be unflattened', () => {
+          const root = Fantom.createRoot();
+
+          Fantom.runTask(() => {
+            root.render(<View style={{transform: [{translateX: 10}]}} />);
+          });
+
+          expect(
+            root.getRenderedOutput({props: ['transform']}).toJSX(),
+          ).toEqual(<rn-view transform='[{"translateX": 10.000000}]' />);
+        });
+
+        [
+          [undefined, {x: -5, y: 0, width: 20, height: 10}],
+          ['50% 50%', {x: -5, y: 0, width: 20, height: 10}],
+          ['top left', {x: 0, y: 0, width: 20, height: 10}],
+          ['right bottom', {x: -10, y: 0, width: 20, height: 10}],
+        ].forEach(([transformOrigin, expectedBounds]) => {
+          it(`applies transformOrigin correctly for ${String(transformOrigin)}`, () => {
+            const root = Fantom.createRoot();
+
+            const viewRef = createRef<HostInstance>();
+            Fantom.runTask(() => {
+              root.render(
+                <View
+                  ref={viewRef}
+                  style={{
+                    width: 10,
+                    height: 10,
+                    transform: [{scaleX: 2}],
+                    transformOrigin,
+                  }}
+                />,
+              );
+            });
+
+            const viewElement = ensureInstance(
+              viewRef.current,
+              ReactNativeElement,
+            );
+
+            const viewBounds = viewElement.getBoundingClientRect();
+            expect(viewBounds.x).toBe(expectedBounds.x);
+            expect(viewBounds.y).toBe(expectedBounds.y);
+            expect(viewBounds.width).toBe(expectedBounds.width);
+            expect(viewBounds.height).toBe(expectedBounds.height);
+          });
+        });
       });
     });
-  });
 
-  describe('props', () => {
     describe('pointerEvents', () => {
       it('auto does not propagate to the mounting layer, it is the default', () => {
         const root = Fantom.createRoot();
@@ -285,6 +293,7 @@ describe('<View>', () => {
         ).toEqual(<rn-view pointerEvents="none" />);
       });
     });
+
     describe('accessibility', () => {
       describe('accessibilityActions', () => {
         it('is propagated to the mounting layer', () => {