TestID's for e2e automation (react-native-maps#2253)

* re-applying pull request 1170

It seems that the following pull react-native-maps#1170 request has been abandoned, but testID is still required if one wants to make e2e tests

react-native-maps#2252

* Update App.js

example/App.js

@@ -44,6 +44,7 @@ import ImageOverlayWithAssets from './examples/ImageOverlayWithAssets';
 import ImageOverlayWithURL from './examples/ImageOverlayWithURL';
 import AnimatedNavigation from './examples/AnimatedNavigation';
 import OnPoiClick from './examples/OnPoiClick';
+import TestIdMarkers from './examples/TestIdMarkers';
 import IndoorMap from './examples/IndoorMap';
 import CameraControl from './examples/CameraControl';
 import MassiveCustomMarkers from './examples/MassiveCustomMarkers';
@@ -164,6 +165,7 @@ export default class App extends React.Component<Props> {
       [LegalLabel, 'Reposition the legal label', true],
       [SetNativePropsOverlays, 'Update native props', true],
       [CustomOverlay, 'Custom Overlay Component', true],
+      [TestIdMarkers, 'Test ID for Automation', true],
       [MapKml, 'Load Map with KML', true],
       [BugMarkerWontUpdate, 'BUG: Marker Won\'t Update (Android)', true],
       [ImageOverlayWithAssets, 'Image Overlay Component with Assets', true],

example/examples/TestIdMarkers.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  Dimensions,
+} from 'react-native';
+
+import MapView from 'react-native-maps';
+
+const { width, height } = Dimensions.get('window');
+
+const ASPECT_RATIO = width / height;
+const LATITUDE = 37.78825;
+const LONGITUDE = -122.4324;
+const LATITUDE_DELTA = 0.0922;
+const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
+const SPACE = 0.01;
+
+function log(eventName, e) {
+  console.log(eventName, e.nativeEvent);
+}
+
+class MarkerTypes extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      a: {
+        latitude: LATITUDE + SPACE,
+        longitude: LONGITUDE + SPACE,
+      },
+    };
+  }
+
+  render() {
+    return (
+      <View style={styles.container} accessible>
+        <MapView
+          provider={this.props.provider}
+          style={styles.map}
+          initialRegion={{
+            latitude: LATITUDE,
+            longitude: LONGITUDE,
+            latitudeDelta: LATITUDE_DELTA,
+            longitudeDelta: LONGITUDE_DELTA,
+          }}
+        >
+          <MapView.Marker
+            testID="marker"
+            coordinate={this.state.a}
+            onSelect={(e) => log('onSelect', e)}
+            onDrag={(e) => log('onDrag', e)}
+            onDragStart={(e) => log('onDragStart', e)}
+            onDragEnd={(e) => log('onDragEnd', e)}
+            onPress={(e) => log('onPress', e)}
+            draggable
+          />
+        </MapView>
+      </View>
+    );
+  }
+}
+
+MarkerTypes.propTypes = {
+  provider: MapView.ProviderPropType,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  map: {
+    ...StyleSheet.absoluteFillObject,
+  },
+});
+
+module.exports = MarkerTypes;
+

lib/components/MapMarker.js

@@ -48,6 +48,11 @@ const propTypes = {
    */
   description: PropTypes.string,
 
+  /**
+   * Test ID for end to end test automation
+   */
+  testID: PropTypes.string,
+
   /**
    * A custom image to be used as the marker's icon. Only local image resources are allowed to be
    * used.

lib/ios/AirGoogleMaps/AIRGoogleMapManager.m

@@ -48,9 +48,11 @@ - (UIView *)view
   AIRGoogleMap *map = [AIRGoogleMap new];
   map.bridge = self.bridge;
   map.delegate = self;
+  map.isAccessibilityElement = "YES";
+  map.accessibilityElementsHidden = "NO";
+  map.settings.consumesGesturesInView = NO;
   map.indoorDisplay.delegate = self;
   self.map = map;
-  map.settings.consumesGesturesInView = NO;
 
   UIPanGestureRecognizer *drag = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleMapDrag:)];
   [drag setMinimumNumberOfTouches:1];

lib/ios/AirGoogleMaps/AIRGoogleMapMarkerManager.m

@@ -25,6 +25,8 @@ - (UIView *)view
 //  tapGestureRecognizer.cancelsTouchesInView = NO;
 //  [marker addGestureRecognizer:tapGestureRecognizer];
   marker.bridge = self.bridge;
+  marker.isAccessibilityElement = "YES";
+  marker.accessibilityElementsHidden = "NO";
   return marker;
 }
 
@@ -35,6 +37,7 @@ - (UIView *)view
 RCT_REMAP_VIEW_PROPERTY(image, imageSrc, NSString)
 RCT_REMAP_VIEW_PROPERTY(icon, iconSrc, NSString)
 RCT_EXPORT_VIEW_PROPERTY(title, NSString)
+RCT_REMAP_VIEW_PROPERTY(testID, accessibilityIdentifier, NSString)
 RCT_REMAP_VIEW_PROPERTY(description, subtitle, NSString)
 RCT_EXPORT_VIEW_PROPERTY(pinColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(anchor, CGPoint)