Add Touchable E2E tests

RNTester/e2e/__tests__/Touchable-test.js

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ *
+ * @emails oncall+react_native
+ * @format
+ */
+
+/* global element, by, expect */
+
+describe('Touchable', () => {
+  beforeAll(async () => {
+    await element(by.id('explorer_search')).replaceText('<Touchable*');
+    await element(
+      by.label('<Touchable*> and onPress Touchable and onPress examples.'),
+    ).tap();
+  });
+
+  afterAll(async () => {
+    //TODO - remove app state persistency, till then, we must go back to main screen,
+    await element(by.label('Back')).tap();
+  });
+
+  it('Touchable Highlight should be tappable', async () => {
+    await element(by.id('touchable_highlight_image_button')).tap();
+    await expect(element(by.id('touchable_highlight_console'))).toHaveText(
+      'TouchableHighlight onPress',
+    );
+  });
+
+  it('Touchable Without Feedback should be tappable', async () => {
+    await element(by.label('Tap Here For No Feedback!')).tap();
+    await expect(
+      element(by.text('TouchableWithoutFeedback onPress')),
+    ).toBeVisible();
+  });
+
+  it('Text should be tappable', async () => {
+    await element(by.text('Text has built-in onPress handling')).tap();
+    await expect(element(by.text('text onPress'))).toBeVisible();
+  });
+});

RNTester/js/TouchableExample.js

@@ -45,30 +45,7 @@ exports.examples = [
       'background color change as well with the activeOpacity and ' +
       'underlayColor props.',
     render: function() {
-      return (
-        <View>
-          <View style={styles.row}>
-            <TouchableHighlight
-              style={styles.wrapper}
-              onPress={() => console.log('stock THW image - highlight')}>
-              <Image source={heartImage} style={styles.image} />
-            </TouchableHighlight>
-            <TouchableHighlight
-              style={styles.wrapper}
-              activeOpacity={1}
-              tvParallaxProperties={{
-                pressMagnification: 1.3,
-                pressDuration: 0.6,
-              }}
-              underlayColor="rgb(210, 230, 255)"
-              onPress={() => console.log('custom THW text - highlight')}>
-              <View style={styles.wrapperCustom}>
-                <Text style={styles.text}>Tap Here For Custom Highlight!</Text>
-              </View>
-            </TouchableHighlight>
-          </View>
-        </View>
-      );
+      return <TouchableHighlightBox />;
     },
   },
   {
@@ -157,6 +134,57 @@ exports.examples = [
   },
 ];
 
+class TouchableHighlightBox extends React.Component<{}, $FlowFixMeState> {
+  state = {
+    timesPressed: 0,
+  };
+
+  touchableOnPress = () => {
+    this.setState({
+      timesPressed: this.state.timesPressed + 1,
+    });
+  };
+
+  render() {
+    let textLog = '';
+    if (this.state.timesPressed > 1) {
+      textLog = this.state.timesPressed + 'x TouchableHighlight onPress';
+    } else if (this.state.timesPressed > 0) {
+      textLog = 'TouchableHighlight onPress';
+    }
+
+    return (
+      <View>
+        <View style={styles.row}>
+          <TouchableHighlight
+            style={styles.wrapper}
+            testID="touchable_highlight_image_button"
+            onPress={this.touchableOnPress}>
+            <Image source={heartImage} style={styles.image} />
+          </TouchableHighlight>
+          <TouchableHighlight
+            style={styles.wrapper}
+            testID="touchable_highlight_text_button"
+            activeOpacity={1}
+            tvParallaxProperties={{
+              pressMagnification: 1.3,
+              pressDuration: 0.6,
+            }}
+            underlayColor="rgb(210, 230, 255)"
+            onPress={this.touchableOnPress}>
+            <View style={styles.wrapperCustom}>
+              <Text style={styles.text}>Tap Here For Custom Highlight!</Text>
+            </View>
+          </TouchableHighlight>
+        </View>
+        <View style={styles.logBox}>
+          <Text testID="touchable_highlight_console">{textLog}</Text>
+        </View>
+      </View>
+    );
+  }
+}
+
 class TouchableWithoutFeedbackBox extends React.Component<{}, $FlowFixMeState> {
   state = {
     timesPressed: 0,