Add Touchable E2E tests (#22570)

Summary:
Adds some initial tests for Touchable*. It only tests the first screen worth of examples; in a separate PR I'll work on an alternate way to "scroll" to individual examples in tests, before I add tests for the rest of the Touchable examples.

On the live stream where I began writing these tests, I reorganized the "Touchable feedback examples" to the top of the list so it would be on-screen for testing. I didn't include this reorganization or test in this PR; that can be added in once the "alternative to scrolling" is added in, to avoid having to reorganize.

Changelog:
----------
[General] [Added] - Add E2E tests for Touchable
Pull Request resolved: facebook/react-native#22570

Differential Revision: D13400348

Pulled By: TheSavior

fbshipit-source-id: 821af135296049090427a16472cc14dabeb10ab4

e2e/__tests__/Touchable-test.js

@@ -0,0 +1,72 @@
+/**
+ * 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 () => {
+    const buttonID = 'touchable_highlight_image_button';
+    const button2ID = 'touchable_highlight_text_button';
+    const consoleID = 'touchable_highlight_console';
+
+    await element(by.id(buttonID)).tap();
+    await expect(element(by.id(consoleID))).toHaveText(
+      'TouchableHighlight onPress',
+    );
+
+    await element(by.id(buttonID)).tap();
+    await expect(element(by.id(consoleID))).toHaveText(
+      '2x TouchableHighlight onPress',
+    );
+
+    await element(by.id(button2ID)).tap();
+    await expect(element(by.id(consoleID))).toHaveText(
+      '3x TouchableHighlight onPress',
+    );
+  });
+
+  it('Touchable Without Feedback should be tappable', async () => {
+    const buttonID = 'touchable_without_feedback_button';
+    const consoleID = 'touchable_without_feedback_console';
+
+    await element(by.id(buttonID)).tap();
+    await expect(element(by.id(consoleID))).toHaveText(
+      'TouchableWithoutFeedback onPress',
+    );
+
+    await element(by.id(buttonID)).tap();
+    await expect(element(by.id(consoleID))).toHaveText(
+      '2x TouchableWithoutFeedback onPress',
+    );
+  });
+
+  it('Text should be tappable', async () => {
+    const buttonID = 'tappable_text';
+    const consoleID = 'tappable_text_console';
+
+    await element(by.id(buttonID)).tap();
+    await expect(element(by.id(consoleID))).toHaveText('text onPress');
+
+    await element(by.id(buttonID)).tap();
+    await expect(element(by.id(consoleID))).toHaveText('2x text onPress');
+  });
+});

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,
@@ -178,13 +206,15 @@ class TouchableWithoutFeedbackBox extends React.Component<{}, $FlowFixMeState> {
 
     return (
       <View>
-        <TouchableWithoutFeedback onPress={this.textOnPress}>
+        <TouchableWithoutFeedback
+          onPress={this.textOnPress}
+          testID="touchable_without_feedback_button">
           <View style={styles.wrapperCustom}>
             <Text style={styles.text}>Tap Here For No Feedback!</Text>
           </View>
         </TouchableWithoutFeedback>
         <View style={styles.logBox}>
-          <Text>{textLog}</Text>
+          <Text testID="touchable_without_feedback_console">{textLog}</Text>
         </View>
       </View>
     );
@@ -212,11 +242,14 @@ class TextOnPressBox extends React.Component<{}, $FlowFixMeState> {
 
     return (
       <View>
-        <Text style={styles.textBlock} onPress={this.textOnPress}>
+        <Text
+          style={styles.textBlock}
+          testID="tappable_text"
+          onPress={this.textOnPress}>
           Text has built-in onPress handling
         </Text>
         <View style={styles.logBox}>
-          <Text>{textLog}</Text>
+          <Text testID="tappable_text_console">{textLog}</Text>
         </View>
       </View>
     );