Show test/expect information about an example or description

Summary: Changelog: [Internal] - Allow for examples to define test steps and expectation

Reviewed By: charlesbdudley

Differential Revision: D29674189

fbshipit-source-id: ac62a634d0139d179408104479f88009237503e3

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

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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 * as React from 'react';
+import {View, Text, StyleSheet, Button} from 'react-native';
+import {type RNTesterTheme} from './RNTesterTheme';
+
+function RNTTestDetails({
+  test,
+  description,
+  expect,
+  title,
+  theme,
+}: {
+  test?: string,
+  description?: string,
+  expect?: string,
+  title: string,
+  theme: RNTesterTheme,
+}): React.Node {
+  const [collapsed, setCollapsed] = React.useState(false);
+
+  const content =
+    test != null ? (
+      <>
+        <View style={styles.section}>
+          <Text style={styles.heading}>How to Test</Text>
+          <Text style={styles.paragraph}>{test}</Text>
+        </View>
+        {expect != null && (
+          <View style={styles.section}>
+            <Text style={styles.heading}>Expectation</Text>
+            <Text style={styles.paragraph}>{expect}</Text>
+          </View>
+        )}
+      </>
+    ) : description != null ? (
+      <View style={styles.section}>
+        <Text style={styles.heading}>Description</Text>
+        <Text style={styles.paragraph}>{description}</Text>
+      </View>
+    ) : null;
+
+  return (
+    <View
+      style={StyleSheet.compose(styles.container, {
+        borderColor: theme.SeparatorColor,
+      })}>
+      <View style={styles.titleRow}>
+        <Text
+          numberOfLines={1}
+          style={StyleSheet.compose(styles.title, {color: theme.LabelColor})}>
+          {title}
+        </Text>
+        {content != null && (
+          <Button
+            title={collapsed ? 'Expand' : 'Collapse'}
+            onPress={() => setCollapsed(!collapsed)}
+            color={theme.LinkColor}
+          />
+        )}
+      </View>
+      {!collapsed ? content : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 10,
+    paddingTop: 6,
+    paddingBottom: 10,
+    borderBottomWidth: 1,
+  },
+  heading: {
+    fontSize: 16,
+    color: 'grey',
+    fontWeight: '500',
+  },
+  paragraph: {
+    fontSize: 14,
+  },
+  section: {
+    marginVertical: 4,
+  },
+  title: {
+    fontSize: 18,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+});
+
+export default RNTTestDetails;

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

@@ -7,12 +7,13 @@
  * @format
  */
 
-const React = require('react');
+import * as React from 'react';
 const RNTesterBlock = require('./RNTesterBlock');
 const RNTesterExampleFilter = require('./RNTesterExampleFilter');
 import RNTPressableRow from './RNTPressableRow';
-import {RNTesterThemeContext} from './RNTesterTheme';
+import {RNTesterThemeContext, type RNTesterTheme} from './RNTesterTheme';
 import {View, Text, StyleSheet, Platform} from 'react-native';
+import RNTTestDetails from './RNTTestDetails';
 
 import type {
   RNTesterModule,
@@ -80,30 +81,36 @@ export default function RNTesterModuleContainer(props: Props): React.Node {
     },
   ];
 
-  return (
-    <View style={styles.examplesContainer}>
-      {module.showIndividualExamples === true && example != null ? (
-        example.render()
-      ) : (
-        <>
-          <Header
-            description={module.description}
-            noBottomPadding
-            theme={theme}
-          />
-          <RNTesterExampleFilter
-            testID="example_search"
-            page="examples_page"
-            hideFilterPills={true}
-            sections={sections}
-            filter={filter}
-            render={({filteredSections}) =>
-              filteredSections[0].data.map(renderExample)
-            }
-          />
-        </>
-      )}
-    </View>
+  const showIndividualExamples =
+    module.showIndividualExamples === true && example != null;
+
+  return showIndividualExamples ? (
+    <>
+      <RNTTestDetails
+        title={example.title}
+        description={example.description}
+        test={example.test}
+        expect={example.expect}
+        theme={theme}
+      />
+      <View style={styles.examplesContainer}>{example.render()}</View>
+    </>
+  ) : (
+    <>
+      <Header description={module.description} noBottomPadding theme={theme} />
+      <View style={styles.examplesContainer}>
+        <RNTesterExampleFilter
+          testID="example_search"
+          page="examples_page"
+          hideFilterPills={true}
+          sections={sections}
+          filter={filter}
+          render={({filteredSections}) =>
+            filteredSections[0].data.map(renderExample)
+          }
+        />
+      </View>
+    </>
   );
 }
 

packages/rn-tester/js/examples/Animated/FadeInViewExample.js

@@ -78,5 +78,8 @@ export default ({
   description: ('Uses a simple timing animation to ' +
     'bring opacity from 0 to 1 when the component ' +
     'mounts.': string),
+  test: 'Toggle `Press to Hide/Show` button, with nativeDriver on/off',
+  expect:
+    'FadeInView box should animate from opacity 0 to 1. \nExpect no animation when hiding.\nHiding the view mid-animation should not affect next animation.',
   render: (): React.Node => <FadeInExample />,
 }: RNTesterModuleExample);

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

@@ -15,6 +15,8 @@ export type RNTesterModuleExample = $ReadOnly<{|
   title: string,
   platform?: 'ios' | 'android',
   description?: string,
+  test?: string,
+  expect?: string,
   render: () => React.Node,
 |}>;