TextSharedExamples and empty text E2E test (#51464)

Summary:
Pull Request resolved: #51464

Add a module of shared examples, like `TextInputSharedExamples`, to avoid copy/paste between these.

Modifies the empty test example a bit and adds an E2E test.

Changelog: [Internal]

Reviewed By: rshest

Differential Revision: D74780847

fbshipit-source-id: 30c2830ef0b638680fe75b4bcf9f138f5c01e190

Author: NickGerleman

packages/rn-tester/js/components/RNTesterTheme.js

@@ -12,6 +12,7 @@ import type {ColorValue, ImageSource} from 'react-native';
 
 import * as React from 'react';
 import {createContext} from 'react';
+import {use} from 'react';
 import {Appearance} from 'react-native';
 
 export type RNTesterTheme = {
@@ -141,3 +142,6 @@ export const themes = {light: RNTesterLightTheme, dark: RNTesterDarkTheme};
 export const RNTesterThemeContext: React.Context<RNTesterTheme> = createContext(
   Appearance.getColorScheme() === 'dark' ? themes.dark : themes.light,
 );
+export function useTheme(): RNTesterTheme {
+  return use(RNTesterThemeContext);
+}

packages/rn-tester/js/examples/Text/TextExample.android.js

@@ -16,7 +16,7 @@ import hotdog from '../../assets/hotdog.jpg';
 import RNTesterText from '../../components/RNTesterText';
 import TextLegend from '../../components/TextLegend';
 import TextAdjustsDynamicLayoutExample from './TextAdjustsDynamicLayoutExample';
-import TextInlineViewsExample from './TextInlineViewsExample';
+import TextSharedExamples from './TextSharedExamples';
 
 const TextInlineView = require('../../components/TextInlineView');
 const React = require('react');
@@ -1461,13 +1461,6 @@ const examples = [
       return <LetterSpacingExample />;
     },
   },
-  {
-    title: 'Empty Text',
-    name: 'emptyText',
-    render(): React.Node {
-      return <Text />;
-    },
-  },
   {
     title: 'Toggling Attributes',
     name: 'togglingAttributes',
@@ -1713,7 +1706,7 @@ const examples = [
       );
     },
   },
-  TextInlineViewsExample,
+  ...TextSharedExamples,
 ];
 
 const styles = StyleSheet.create({

packages/rn-tester/js/examples/Text/TextExample.ios.js

@@ -15,7 +15,7 @@ import type {RNTesterModule} from '../../types/RNTesterTypes';
 import hotdog from '../../assets/hotdog.jpg';
 import RNTesterText from '../../components/RNTesterText';
 import TextLegend from '../../components/TextLegend';
-import TextInlineViewsExample from './TextInlineViewsExample';
+import TextSharedExamples from './TextSharedExamples';
 
 const TextInlineView = require('../../components/TextInlineView');
 const React = require('react');
@@ -1063,13 +1063,6 @@ const examples = [
       );
     },
   },
-  {
-    title: 'Empty Text',
-    description: "It's ok to have Text with zero or null children.",
-    render: function (): React.Node {
-      return <Text />;
-    },
-  },
   {
     title: 'Toggling Attributes',
     render: function (): React.MixedElement {
@@ -1590,7 +1583,7 @@ const examples = [
       );
     },
   },
-  TextInlineViewsExample,
+  ...TextSharedExamples,
 ];
 
 module.exports = ({

packages/rn-tester/js/examples/Text/TextInlineViewsExample.js

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import RNTesterText from '../../components/RNTesterText';
+import {useTheme} from '../../components/RNTesterTheme';
+import {View} from 'react-native';
+
+function InlineView(props: {
+  textAlign: 'auto' | 'left' | 'right' | 'center' | 'justify',
+  long?: boolean,
+}): React.Node {
+  return (
+    <View style={{margin: 4}}>
+      <RNTesterText
+        style={{textAlign: props.textAlign, backgroundColor: 'cyan'}}>
+        Parent
+        <RNTesterText style={{fontWeight: 'bold'}}>Child</RNTesterText>
+        <View style={{width: 30, height: 30, backgroundColor: 'red'}} />
+        <RNTesterText style={{fontWeight: 'bold'}}>Child</RNTesterText>
+        {props !== null && props.long === true && (
+          <RNTesterText style={{fontWeight: 'bold'}}>
+            aaaa a aaaa aaaaaa aaa a a a aaaaa sdsds dsdSAD asd ASDasd ASDas
+          </RNTesterText>
+        )}
+      </RNTesterText>
+    </View>
+  );
+}
+
+function TextInlineViewsExample(props: {}): React.Node {
+  return (
+    <View style={{flex: 1}} testID="view-test-inline-text-alignment">
+      <RNTesterText style={{textAlign: 'center', fontSize: 14}}>
+        BoringLayout
+      </RNTesterText>
+      <InlineView textAlign="left" />
+      <InlineView textAlign="center" />
+      <InlineView textAlign="right" />
+      <InlineView textAlign="justify" />
+
+      <RNTesterText style={{textAlign: 'center', fontSize: 14}}>
+        StaticLayout
+      </RNTesterText>
+      <InlineView textAlign="left" long />
+      <InlineView textAlign="center" long />
+      <InlineView textAlign="right" long />
+      <InlineView textAlign="justify" long />
+    </View>
+  );
+}
+
+function EmptyTextExample(): React.Node {
+  const {BorderColor} = useTheme();
+  return (
+    <RNTesterText
+      testID="empty-text"
+      style={{
+        borderWidth: 1,
+        borderColor: BorderColor,
+      }}
+    />
+  );
+}
+
+export default [
+  {
+    title: 'Empty Text',
+    name: 'emptyText',
+    render: EmptyTextExample,
+  },
+  {
+    title: 'TextInlineViewsExample',
+    name: 'inlineViews',
+    description:
+      'Shows how inline views are rendered when text is subject to alignment.',
+    expect: 'The red box should align correctly with the rest of the text.',
+    render: TextInlineViewsExample,
+  },
+] as $ReadOnlyArray<RNTesterModuleExample>;

packages/rn-tester/js/examples/Text/TextSharedExamples.js

@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-import * as React from 'react';
-
 export type RNTesterModuleExample = $ReadOnly<{
   name?: string,
   title: string,
@@ -18,7 +16,7 @@ export type RNTesterModuleExample = $ReadOnly<{
   expect?: string,
   hidden?: boolean,
   scrollable?: boolean,
-  render: ({testID?: ?string}) => React.Node,
+  render: component(),
 }>;
 
 export type RNTesterModule = $ReadOnly<{