Add tests for refs in Text (#52980)

Summary:
Pull Request resolved: #52980

Changelog: [internal]

Adds Fantom tests for the behavior of `refs` in `Text` components.

Reviewed By: rshest

Differential Revision: D79436148

fbshipit-source-id: 6d357740303f4868d176af7b4559891af77b79f8

Author: rubennorte

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

@@ -10,9 +10,15 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
+import type {HostInstance} from 'react-native';
+
+import ensureInstance from '../../../src/private/__tests__/utilities/ensureInstance';
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
+import {createRef} from 'react';
 import {Text} from 'react-native';
+import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
+import ReadOnlyText from 'react-native/src/private/webapis/dom/nodes/ReadOnlyText';
 
 describe('<Text>', () => {
   describe('props', () => {
@@ -60,4 +66,68 @@ describe('<Text>', () => {
       });
     });
   });
+
+  describe('ref', () => {
+    it('is a element node', () => {
+      const elementRef = createRef<HostInstance>();
+
+      const root = Fantom.createRoot();
+
+      Fantom.runTask(() => {
+        root.render(<Text ref={elementRef}>Some text</Text>);
+      });
+
+      const element = ensureInstance(elementRef.current, ReactNativeElement);
+      expect(element.tagName).toBe('RN:Paragraph');
+    });
+
+    it('has a single text child node when not nested', () => {
+      const elementRef = createRef<HostInstance>();
+
+      const root = Fantom.createRoot();
+
+      Fantom.runTask(() => {
+        root.render(<Text ref={elementRef}>Some text</Text>);
+      });
+
+      const element = ensureInstance(elementRef.current, ReactNativeElement);
+      expect(element.childNodes.length).toBe(1);
+
+      const textChild = ensureInstance(element.childNodes[0], ReadOnlyText);
+      expect(textChild.textContent).toBe('Some text');
+    });
+
+    it('has text and element child nodes when nested', () => {
+      const elementRef = createRef<HostInstance>();
+
+      const root = Fantom.createRoot();
+
+      Fantom.runTask(() => {
+        root.render(
+          <Text ref={elementRef}>
+            Some text <Text style={{fontWeight: 'bold'}}>also in bold</Text>
+          </Text>,
+        );
+      });
+
+      const element = ensureInstance(elementRef.current, ReactNativeElement);
+      expect(element.childNodes.length).toBe(2);
+
+      const firstChild = ensureInstance(element.childNodes[0], ReadOnlyText);
+      expect(firstChild.textContent).toBe('Some text ');
+
+      const secondChild = ensureInstance(
+        element.childNodes[1],
+        ReactNativeElement,
+      );
+      expect(secondChild.tagName).toBe('RN:Text');
+      expect(secondChild.childNodes.length).toBe(1);
+
+      const secondChildText = ensureInstance(
+        secondChild.childNodes[0],
+        ReadOnlyText,
+      );
+      expect(secondChildText.textContent).toBe('also in bold');
+    });
+  });
 });