Move render output tests to ReactNativeTester (#48140)

Summary:
Pull Request resolved: #48140

Changelog: [internal]

These tests test an API that's part of `ReactNativeTester` (will be renamed as `Fantom`) so it makes sense that they're in the same test file as the tests for the rest of the API.

Reviewed By: javache

Differential Revision: D66874226

fbshipit-source-id: f17e14c83cb5ca95ac619c5398c49ad84a27cfa5

Author: rubennorte

packages/react-native-fantom/src/__tests__/ReactNativeTester-itest.js

@@ -10,22 +10,24 @@
  */
 
 import 'react-native/Libraries/Core/InitializeCore';
-import * as ReactNativeTester from '..';
+import {createRoot, runTask} from '..';
+import * as React from 'react';
+import {Text, View} from 'react-native';
 
 describe('ReactNativeTester', () => {
   describe('runTask', () => {
     it('should run a task synchronously', () => {
       const task = jest.fn();
 
-      ReactNativeTester.runTask(task);
+      runTask(task);
 
       expect(task).toHaveBeenCalledTimes(1);
     });
 
     // TODO: fix error handling and make this pass
     it.skip('should re-throw errors from the task synchronously', () => {
       expect(() => {
-        ReactNativeTester.runTask(() => {
+        runTask(() => {
           throw new Error('test error');
         });
       }).toThrow('test error');
@@ -34,7 +36,7 @@ describe('ReactNativeTester', () => {
     it('should exhaust the microtask queue synchronously', () => {
       const lastMicrotask = jest.fn();
 
-      ReactNativeTester.runTask(() => {
+      runTask(() => {
         queueMicrotask(() => {
           queueMicrotask(() => {
             queueMicrotask(() => {
@@ -50,7 +52,7 @@ describe('ReactNativeTester', () => {
     // TODO: fix error handling and make this pass
     it.skip('should re-throw errors from microtasks synchronously', () => {
       expect(() => {
-        ReactNativeTester.runTask(() => {
+        runTask(() => {
           queueMicrotask(() => {
             throw new Error('test error');
           });
@@ -61,12 +63,209 @@ describe('ReactNativeTester', () => {
     it('should run async tasks synchronously', () => {
       let completed = false;
 
-      ReactNativeTester.runTask(async () => {
+      runTask(async () => {
         await Promise.resolve(6);
         completed = true;
       });
 
       expect(completed).toBe(true);
     });
   });
+
+  describe('getRenderedOutput', () => {
+    describe('toJSX', () => {
+      it('default config', () => {
+        const root = createRoot();
+
+        runTask(() => {
+          root.render(
+            <View style={{width: 100, height: 100}} collapsable={false} />,
+          );
+        });
+
+        expect(root.getRenderedOutput().toJSX()).toEqual(
+          <rn-view height="100.000000" width="100.000000" />,
+        );
+
+        root.destroy();
+      });
+
+      it('default config, list of children', () => {
+        const root = createRoot();
+
+        runTask(() => {
+          root.render(
+            <>
+              <View style={{width: 100, height: 100}} collapsable={false} />
+              <View style={{width: 100, height: 100}} collapsable={false} />
+            </>,
+          );
+        });
+
+        expect(root.getRenderedOutput().toJSX()).toEqual(
+          <>
+            <rn-view width="100.000000" height="100.000000" />
+            <rn-view width="100.000000" height="100.000000" />
+          </>,
+        );
+
+        root.destroy();
+      });
+
+      it('include root', () => {
+        const root = createRoot();
+
+        runTask(() => {
+          root.render(
+            <View style={{width: 100, height: 100}} collapsable={false} />,
+          );
+        });
+
+        expect(root.getRenderedOutput({includeRoot: true}).toJSX()).toEqual(
+          <rn-rootView>
+            <rn-view width="100.000000" height="100.000000" />
+          </rn-rootView>,
+        );
+
+        root.destroy();
+      });
+
+      it('include layout metrics', () => {
+        const root = createRoot();
+
+        runTask(() => {
+          root.render(
+            <View style={{width: 100, height: 100}} collapsable={false} />,
+          );
+        });
+
+        expect(
+          root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
+        ).toEqual(
+          <rn-view
+            height="100.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-frame="{x:0,y:0,width:100,height:100}"
+            layoutMetrics-layoutDirection="LeftToRight"
+            layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
+            layoutMetrics-pointScaleFactor="1"
+            width="100.000000"
+          />,
+        );
+
+        root.destroy();
+      });
+
+      it('take props', () => {
+        const root = createRoot();
+
+        runTask(() => {
+          root.render(
+            <View style={{width: 100, height: 100}} collapsable={false} />,
+          );
+        });
+
+        expect(
+          root
+            .getRenderedOutput({
+              props: ['width'],
+            })
+            .toJSX(),
+        ).toEqual(<rn-view width="100.000000" />);
+
+        root.destroy();
+      });
+
+      it('skip props', () => {
+        const root = createRoot();
+
+        runTask(() => {
+          root.render(
+            <View style={{width: 100, height: 100}} collapsable={false} />,
+          );
+        });
+
+        expect(
+          root
+            .getRenderedOutput({
+              props: ['!width'],
+            })
+            .toJSX(),
+        ).toEqual(<rn-view height="100.000000" />);
+
+        root.destroy();
+      });
+
+      it('filter out all props', () => {
+        const root = createRoot();
+
+        runTask(() => {
+          root.render(
+            <>
+              <View style={{width: 100, height: 100}} collapsable={false} />
+              <Text>hello world!</Text>
+              <View style={{width: 200, height: 300}} collapsable={false} />
+            </>,
+          );
+        });
+
+        expect(root.getRenderedOutput({props: []}).toJSX()).toEqual(
+          <>
+            <rn-view />
+            <rn-paragraph>hello world!</rn-paragraph>
+            <rn-view />
+          </>,
+        );
+
+        root.destroy();
+      });
+    });
+
+    describe('toJSON', () => {
+      it('nested text', () => {
+        const root = createRoot();
+
+        runTask(() => {
+          root.render(
+            <Text>
+              Testing native{' '}
+              <Text style={{color: 'red'}}>
+                JSX is <Text style={{color: 'blue'}}>easy!</Text>
+              </Text>
+            </Text>,
+          );
+        });
+
+        expect(
+          root.getRenderedOutput({props: ['foreground*']}).toJSON(),
+        ).toEqual({
+          children: [
+            'Testing native ',
+            {
+              children: 'JSX is ',
+              props: {
+                foregroundColor: 'rgba(255, 0, 0, 255)',
+              },
+              type: 'Text',
+            },
+            {
+              children: 'easy!',
+              props: {
+                foregroundColor: 'rgba(0, 0, 255, 255)',
+              },
+              type: 'Text',
+            },
+          ],
+          props: {
+            foregroundColor: 'rgba(255, 255, 255, 127)',
+          },
+          type: 'Paragraph',
+        });
+
+        root.destroy();
+      });
+    });
+  });
 });