TextInput: create shared test utils

Summary:
Changelog:
[General][Internal] Added some test IDs and names for the TextIput examples.

Reviewed By: lunaleaps

Differential Revision: D26263554

fbshipit-source-id: 958a030eafbbed9076f49ab05585f30ddef3ef23

packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js

@@ -46,7 +46,6 @@ const styles = StyleSheet.create({
   labelContainer: {
     flexDirection: 'row',
     marginVertical: 2,
-    flex: 1,
   },
   label: {
     width: 115,
@@ -54,6 +53,9 @@ const styles = StyleSheet.create({
     marginRight: 10,
     paddingTop: 2,
   },
+  inputContainer: {
+    flex: 1,
+  },
   rewriteContainer: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -79,7 +81,7 @@ class WithLabel extends React.Component<$FlowFixMeProps> {
         <View style={styles.label}>
           <Text>{this.props.label}</Text>
         </View>
-        {this.props.children}
+        <View style={styles.inputContainer}>{this.props.children}</View>
       </View>
     );
   }
@@ -335,7 +337,7 @@ class TokenizedTextExample extends React.Component<
     parts = parts.map(text => {
       if (/^#/.test(text)) {
         return (
-          <Text key={text} style={styles.hashtag}>
+          <Text testID="hashtag" key={text} style={styles.hashtag}>
             {text}
           </Text>
         );
@@ -345,8 +347,9 @@ class TokenizedTextExample extends React.Component<
     });
 
     return (
-      <View>
+      <View style={{flexDirection: 'row'}}>
         <TextInput
+          testID="text-input"
           multiline={true}
           style={styles.multiline}
           onChangeText={text => {
@@ -416,26 +419,33 @@ class SelectionExample extends React.Component<
     const length = this.state.value.length;
 
     return (
-      <View>
-        <TextInput
-          multiline={this.props.multiline}
-          onChangeText={value => this.setState({value})}
-          onSelectionChange={this.onSelectionChange.bind(this)}
-          ref={textInput => (this._textInput = textInput)}
-          selection={this.state.selection}
-          style={this.props.style}
-          value={this.state.value}
-        />
+      <View testID={this.props.testID}>
+        <View style={{flexDirection: 'row'}}>
+          <TextInput
+            testID="text-input"
+            multiline={this.props.multiline}
+            onChangeText={value => this.setState({value})}
+            onSelectionChange={this.onSelectionChange.bind(this)}
+            ref={textInput => (this._textInput = textInput)}
+            selection={this.state.selection}
+            style={this.props.style}
+            value={this.state.value}
+          />
+        </View>
         <View>
-          <Text>selection = {JSON.stringify(this.state.selection)}</Text>
-          <Text onPress={this.placeAt.bind(this, 0)}>
+          <Text testID="selection">
+            selection = {JSON.stringify(this.state.selection)}
+          </Text>
+          <Text testID="cursor-start" onPress={this.placeAt.bind(this, 0)}>
             Place at Start (0, 0)
           </Text>
-          <Text onPress={this.placeAt.bind(this, length)}>
+          <Text testID="cursor-end" onPress={this.placeAt.bind(this, length)}>
             Place at End ({length}, {length})
           </Text>
           <Text onPress={this.placeAtRandom.bind(this)}>Place at Random</Text>
-          <Text onPress={this.select.bind(this, 0, length)}>Select All</Text>
+          <Text testID="select-all" onPress={this.select.bind(this, 0, length)}>
+            Select All
+          </Text>
           <Text onPress={this.selectRandom.bind(this)}>Select Random</Text>
         </View>
       </View>
@@ -478,20 +488,37 @@ module.exports = ([
   },
   {
     title: 'Auto-capitalize',
+    name: 'autoCapitalize',
     render: function(): React.Node {
       return (
         <View>
           <WithLabel label="none">
-            <TextInput autoCapitalize="none" style={styles.default} />
+            <TextInput
+              testID="capitalize-none"
+              autoCapitalize="none"
+              style={styles.default}
+            />
           </WithLabel>
           <WithLabel label="sentences">
-            <TextInput autoCapitalize="sentences" style={styles.default} />
+            <TextInput
+              testID="capitalize-sentences"
+              autoCapitalize="sentences"
+              style={styles.default}
+            />
           </WithLabel>
           <WithLabel label="words">
-            <TextInput autoCapitalize="words" style={styles.default} />
+            <TextInput
+              testID="capitalize-words"
+              autoCapitalize="words"
+              style={styles.default}
+            />
           </WithLabel>
           <WithLabel label="characters">
-            <TextInput autoCapitalize="characters" style={styles.default} />
+            <TextInput
+              testID="capitalize-characters"
+              autoCapitalize="characters"
+              style={styles.default}
+            />
           </WithLabel>
         </View>
       );
@@ -514,6 +541,7 @@ module.exports = ([
   },
   {
     title: 'Keyboard types',
+    name: 'keyboardTypes',
     render: function(): React.Node {
       const keyboardTypes = [
         'default',
@@ -595,20 +623,24 @@ module.exports = ([
   },
   {
     title: 'Attributed text',
+    name: 'attributedText',
     render: function(): React.Node {
       return <TokenizedTextExample />;
     },
   },
   {
     title: 'Text selection & cursor placement',
+    name: 'cursorPlacement',
     render: function(): React.Node {
       return (
         <View>
           <SelectionExample
+            testID="singleline"
             style={styles.default}
             value="text selection can be changed"
           />
           <SelectionExample
+            testID="multiline"
             multiline
             style={styles.multiline}
             value={'multiline text selection\ncan also be changed'}