Add Pressable E2E tests

packages/rn-tester/js/examples/BoxShadow/BoxShadowExample.js

@@ -79,44 +79,65 @@ exports.description =
 exports.examples = [
   {
     title: 'Basic shadow',
+    name: 'basic-shadow',
     description: 'shadowOpacity: 0.5, shadowOffset: {2, 2}',
     render(): React.Node {
-      return <View style={[styles.box, styles.shadow1]} />;
+      return (
+        <View testID="box-shadow-basic" style={[styles.box, styles.shadow1]} />
+      );
     },
   },
   {
     title: 'Colored shadow',
+    name: 'colored-shadow',
     description: "shadowColor: 'red', shadowRadius: 0",
     render(): React.Node {
-      return <View style={[styles.box, styles.shadow2]} />;
+      return (
+        <View
+          testID="box-shadow-colored"
+          style={[styles.box, styles.shadow2]}
+        />
+      );
     },
   },
   {
     title: 'Shaped shadow',
+    name: 'shaped-shadow',
     description: 'borderRadius: 50',
     render(): React.Node {
-      return <View style={[styles.box, styles.shadow1, styles.shadowShaped]} />;
+      return (
+        <View
+          testID="box-shadow-shaped"
+          style={[styles.box, styles.shadow1, styles.shadowShaped]}
+        />
+      );
     },
   },
   {
     title: 'Image shadow',
+    name: 'image-shadow',
     description: 'Image shadows are derived exactly from the pixels.',
     render(): React.Node {
       return (
-        <Image
-          source={require('../../assets/hawk.png')}
-          style={[styles.box, styles.shadow1, styles.shadowImage]}
-        />
+        <View testID="box-shadow-image">
+          <Image
+            source={require('../../assets/hawk.png')}
+            style={[styles.box, styles.shadow1, styles.shadowImage]}
+          />
+        </View>
       );
     },
   },
   {
     title: 'Child shadow',
+    name: 'child-shadow',
     description:
       'For views without an opaque background color, shadow will be derived from the subviews.',
     render(): React.Node {
       return (
-        <View style={[styles.box, styles.shadow1, styles.shadowChild]}>
+        <View
+          testID="box-shadow-child"
+          style={[styles.box, styles.shadow1, styles.shadowChild]}>
           <View style={[styles.box, styles.shadowChildBox]} />
         </View>
       );

packages/rn-tester/js/examples/Button/ButtonExample.js

@@ -30,6 +30,7 @@ exports.description = 'Simple React Native button component.';
 exports.examples = [
   {
     title: 'Button with default styling',
+    name: 'default-styling',
     render: function (): React.Node {
       return (
         <Button
@@ -43,6 +44,7 @@ exports.examples = [
   },
   {
     title: 'Button with color="red"',
+    name: 'color-red',
     description:
       ('Note: On iOS, the color prop controls the color of the text. On ' +
         'Android, the color adjusts the background color of the button.': string),
@@ -66,6 +68,7 @@ exports.examples = [
   },
   {
     title: 'Two Buttons with Flexbox layout',
+    name: 'two-buttons-flexbox',
     description:
       ('Two buttons wrapped inside view with justifyContent: spaceBetween,' +
         'This layout strategy lets the title define the width of the button': string),
@@ -98,6 +101,7 @@ exports.examples = [
   },
   {
     title: 'Three Buttons with Flexbox layout',
+    name: 'three-buttons-flexbox',
     render: function (): React.Node {
       return (
         <RNTesterThemeContext.Consumer>
@@ -134,6 +138,7 @@ exports.examples = [
   },
   {
     title: 'Button with disabled={true}',
+    name: 'disabled',
     description:
       'By passing disabled={true} all interactions for the button are disabled.',
     render: function (): React.Node {

packages/rn-tester/js/examples/Pressable/PressableExample.js

@@ -348,6 +348,7 @@ const styles = StyleSheet.create({
 const examples = [
   {
     title: 'Change content based on Press',
+    name: 'content-press',
     render(): React.Node {
       return <ContentPress />;
     },
@@ -399,6 +400,7 @@ const examples = [
   },
   {
     title: 'Pressable feedback events',
+    name: 'feedback-events',
     description: ('<Pressable> components accept onPress, onPressIn, ' +
       'onPressOut, and onLongPress as props.': string),
     render: function (): React.Node {
@@ -512,6 +514,7 @@ const examples = [
   },
   {
     title: '<Text onPress={fn}> with highlight',
+    name: 'text-press',
     render: function (): React.Node {
       return <TextOnPressBox />;
     },
@@ -536,6 +539,7 @@ const examples = [
   },
   {
     title: 'Pressable Hit Slop',
+    name: 'hit-slop',
     description:
       ('<Pressable> components accept hitSlop prop which extends the touch area ' +
         'without changing the view bounds.': string),

packages/rn-tester/js/examples/Transform/TransformExample.js

@@ -349,79 +349,96 @@ exports.examples = [
   },
   {
     title: 'Translate, Rotate, Scale',
+    name: 'translate-rotate-scale',
     description:
       "translateX: 100, translateY: 50, rotate: '30deg', scaleX: 2, scaleY: 2",
     render(): React.Node {
       return (
-        <View style={styles.container}>
+        <View
+          testID="transform-translate-rotate-scale"
+          style={styles.container}>
           <View style={styles.box1} />
         </View>
       );
     },
   },
   {
     title: 'Scale, Translate, Rotate, ',
+    name: 'scale-translate-rotate',
     description:
       "scaleX: 2, scaleY: 2, translateX: 100, translateY: 50, rotate: '30deg'",
     render(): React.Node {
       return (
-        <View style={styles.container}>
+        <View
+          testID="transform-scale-translate-rotate"
+          style={styles.container}>
           <View style={styles.box2} />
         </View>
       );
     },
   },
   {
     title: 'Rotate',
+    name: 'rotate',
     description: "rotate: '30deg'",
     render(): React.Node {
       return (
-        <View style={styles.container}>
+        <View testID="transform-rotate" style={styles.container}>
           <View style={styles.box3step1} />
         </View>
       );
     },
   },
   {
     title: 'Rotate, Scale',
+    name: 'rotate-scale',
     description: "rotate: '30deg', scaleX: 2, scaleY: 2",
     render(): React.Node {
       return (
-        <View style={styles.container}>
+        <View testID="transform-rotate-scale" style={styles.container}>
           <View style={styles.box3step2} />
         </View>
       );
     },
   },
   {
     title: 'Rotate, Scale, Translate ',
+    name: 'rotate-scale-translate',
     description:
       "rotate: '30deg', scaleX: 2, scaleY: 2, translateX: 100, translateY: 50",
     render(): React.Node {
       return (
-        <View style={styles.container}>
+        <View
+          testID="transform-rotate-scale-translate"
+          style={styles.container}>
           <View style={styles.box3step3} />
         </View>
       );
     },
   },
   {
     title: 'Translate, Scale, Rotate',
+    name: 'translate-scale-rotate',
     description: "translate: [200, 350], scale: 2.5, rotate: '-0.2rad'",
     render(): React.Node {
       return (
-        <View style={styles.container}>
+        <View
+          testID="transform-translate-scale-rotate"
+          style={styles.container}>
           <View style={styles.box4} />
         </View>
       );
     },
   },
   {
     title: 'Translate, Rotate, Scale',
+    name: 'translate-rotate-scale-2',
     description: "translate: [-50, 35], rotate: '50deg', scale: 2",
     render(): React.Node {
       return (
-        <View style={styles.container}>
+        <View
+          testID="transform-translate-rotate-scale-2"
+          style={styles.container}>
           <View style={[styles.box5, styles.box5Transform]} />
         </View>
       );
@@ -436,10 +453,11 @@ exports.examples = [
   },
   {
     title: 'Transform using a string',
+    name: 'string-transform',
     description: "transform: 'translate(-50px, 35px) rotate(50deg) scale(2)'",
     render(): React.Node {
       return (
-        <View style={styles.container}>
+        <View testID="transform-string" style={styles.container}>
           <View style={[styles.box7, styles.box7Transform]} />
         </View>
       );
@@ -454,16 +472,26 @@ exports.examples = [
   },
   {
     title: 'Translate Percentage',
+    name: 'translate-percentage',
     description: "transform: 'translate(50%)'",
     render(): React.Node {
-      return <TranslatePercentage />;
+      return (
+        <View testID="transform-translate-percentage">
+          <TranslatePercentage />
+        </View>
+      );
     },
   },
   {
     title: 'Transform Matrix 2D',
+    name: 'matrix-2d',
     description: "transform: 'matrix(1, 0, 0, 0, 1, 0, 0, 0, 1)'",
     render(): React.Node {
-      return <TranslateMatrix2D />;
+      return (
+        <View testID="transform-matrix-2d">
+          <TranslateMatrix2D />
+        </View>
+      );
     },
   },
   {