Render test titles and standardize on output

Summary:
Changelog:
[General][Added] - Show a test title if set and standardize the output

Note this will break existing screenshot tests so will need to re-run these

Reviewed By: nadiia

Differential Revision: D26318844

fbshipit-source-id: cef48d72a524ccc6f32b9d930c68fe4171270365

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

@@ -55,7 +55,7 @@ class RNTesterExampleContainer extends React.Component {
     if (module.examples.length === 1) {
       return (
         <ExamplePage
-          title={module.title}
+          title={module.testTitle || module.title}
           description={module.description}
           android={!module.platform || module.platform === 'android'}
           ios={!module.platform || module.platform === 'ios'}

packages/rn-tester/js/examples/SectionList/SectionListExamples.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import {Pressable, SectionList, StyleSheet, Text, View} from 'react-native';
+import {Button, SectionList, StyleSheet, Text, View} from 'react-native';
 import * as React from 'react';
 
 type Props = {
@@ -62,7 +62,7 @@ function getExample(example, output, ref) {
             ),
           viewabilityConfig: VIEWABILITY_CONFIG,
         },
-        startTest: () => {},
+        onTest: null,
       };
 
     case 'onEndReached':
@@ -71,7 +71,7 @@ function getExample(example, output, ref) {
           onEndReached: info => output('onEndReached'),
           onEndReachedThreshold: 0,
         },
-        startTest: () => {
+        onTest: () => {
           const scrollResponder = ref?.current?.getScrollResponder();
           if (scrollResponder != null) {
             scrollResponder.scrollToEnd();
@@ -86,18 +86,14 @@ function getExample(example, output, ref) {
 function SectionListExamples(props: Props): React.Node {
   const [output, setOutput] = React.useState('');
   const ref = React.useRef<?React.ElementRef<typeof SectionList>>();
-  const {startTest, props: testProps} = getExample(
-    props.example,
-    setOutput,
-    ref,
-  );
+  const {onTest, props: testProps} = getExample(props.example, setOutput, ref);
   return (
     <View>
-      <View testID="test_container" style={styles.row}>
+      <View testID="test_container" style={styles.testContainer}>
         <Text testID="output">{output}</Text>
-        <Pressable testID="start_test" onPress={startTest}>
-          <Text>Test</Text>
-        </Pressable>
+        {onTest != null ? (
+          <Button testID="start_test" onPress={onTest} title="Test" />
+        ) : null}
       </View>
       <SectionList
         ref={ref}
@@ -129,9 +125,15 @@ const styles = StyleSheet.create({
     fontSize: 24,
   },
   sectionList: {height: '90%'},
-  row: {
+  testContainer: {
     flexDirection: 'row',
-    height: '10%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: '#f2f2f7ff',
+    padding: 10,
+  },
+  output: {
+    fontSize: 12,
   },
 });
 

packages/rn-tester/js/examples/SectionList/SectionList_onEndReached.js

@@ -13,12 +13,14 @@ import SectionListExamples from './SectionListExamples';
 const React = require('react');
 
 exports.title = 'SectionList onEndReached';
+exports.testTitle = 'Test onEndReached callback';
 exports.category = 'ListView';
 exports.documentationURL = 'https://reactnative.dev/docs/sectionlist';
-exports.description = 'Showcase viewability config callback.';
+exports.description =
+  'Scroll to end of list or tap Test button to see `onEndReached` triggered.';
 exports.examples = [
   {
-    title: 'Simple scrollable list',
+    title: '',
     render: function(): React.Element<typeof SectionListExamples> {
       return <SectionListExamples example="onEndReached" />;
     },

packages/rn-tester/js/examples/SectionList/SectionList_onViewableItemsChanged.js

@@ -13,9 +13,11 @@ import SectionListExamples from './SectionListExamples';
 const React = require('react');
 
 exports.title = 'SectionList onViewableItemsChanged';
+exports.testTitle = 'Test onViewableItemsChanged callback';
 exports.category = 'ListView';
 exports.documentationURL = 'https://reactnative.dev/docs/sectionlist';
-exports.description = 'Showcase viewability config callback.';
+exports.description =
+  'Scroll list to see what items are returned in `onViewableItemsChanged` callback.';
 exports.examples = [
   {
     title: 'Simple scrollable list',

packages/rn-tester/js/types/RNTesterTypes.js

@@ -20,6 +20,7 @@ export type RNTesterExampleModuleItem = $ReadOnly<{|
 
 export type RNTesterExampleModule = $ReadOnly<{|
   title: string,
+  testTitle?: ?string,
   description: string,
   displayName?: ?string,
   documentationURL?: ?string,