chore(e2e): detox test handle location permission, click map to show … (

#2138) * chore(e2e): detox test handle location permission, click map to show location * chore(e2e): try debug version for faster build on ios detox * chore(actions): Take screenshots, ios add privacy/locaiton strings * chore(example): upgrade react-navigation and rn-example * chore(actions): Disable ios v10 tests on github actions as no Metal available there
rnmapbox · Aug 20, 2022 · 43d3b26 · 43d3b26
1 parent d8cda03
commit 43d3b26
Show file tree

Hide file tree

Showing 14 changed files with 261 additions and 118 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -59,7 +59,7 @@ module.exports = {
     'no-console': [0],
     'import/prefer-default-export': 'off',
     'jsx-a11y/href-no-hash': 'off',
-    'react/prop-types': [2],
+    'react/prop-types': [0],
     quotes: [2, 'single'],
     'eol-last': [0],
     'no-continue': [1],

diff --git a/.github/workflows/ios-actions.yml b/.github/workflows/ios-actions.yml
@@ -64,7 +64,18 @@ jobs:
           brew install xcbeautify
 
       - name: Build for detox
-        run: yarn detox build | xcbeautify -qq
+        run: yarn detox build --configuration ios.debug | xcbeautify -qq
 
       - name: Test with detox
-        run: yarn detox test --debug-synchronization 200
+        run: |
+          npx detox --version
+          yarn detox test --configuration ios.debug --debug-synchronization 500 --loglevel trace --record-logs all --take-screenshots all
+        env:
+          SKIP_TESTS_NO_METAL: ${{ inputs.MAP_IMPL == 'mapbox' }}
+
+      - name: Store Detox artifacts on test failure
+        uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: detox-artifacts
+          path: example/artifacts
diff --git a/example/e2e/firstTest.e2e.js b/example/e2e/firstTest.e2e.js
@@ -1,6 +1,6 @@
 describe('Maps Example App', () => {
   beforeAll(async () => {
-    await device.launchApp();
+    await device.launchApp({ permissions: { location: 'always' } });
   });
 
   afterEach(async () => {
@@ -14,9 +14,36 @@ describe('Maps Example App', () => {
   });
 
   it('should render MapView', async () => {
+    if (['true', 1, '1'].includes(process.env.SKIP_TESTS_NO_METAL)) {
+      console.debug(
+        '### Skipping tests as Metal is not available in this environment',
+      );
+      return;
+    }
+
     await expect(element(by.text('Map'))).toBeVisible();
     await element(by.text('Map')).tap();
     await expect(element(by.text('Show Map'))).toBeVisible();
     await element(by.text('Show Map')).tap();
+    await expect(element(by.id('show-map'))).toBeVisible();
+  });
+
+  it('should show click location', async () => {
+    if (['true', 1, '1'].includes(process.env.SKIP_TESTS_NO_METAL)) {
+      console.debug(
+        '### Skipping tests as Metal is not available in this environment',
+      );
+      return;
+    }
+
+    await expect(element(by.text('Map'))).toBeVisible();
+    await element(by.text('Map')).tap();
+    await expect(element(by.text('Show Click'))).toBeVisible();
+    await element(by.text('Show Click')).tap();
+    await expect(element(by.id('show-click-map-view'))).toBeVisible();
+    await element(by.id('show-click-map-view')).tap();
+    await waitFor(element(by.id('location-bubble-latitude')))
+      .toBeVisible()
+      .withTimeout(1000);
   });
 });
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -293,8 +293,12 @@ PODS:
   - React-jsinspector (0.69.4)
   - React-logger (0.69.4):
     - glog
-  - react-native-safe-area-context (3.2.0):
+  - react-native-safe-area-context (4.3.3):
+    - RCT-Folly
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
+    - ReactCommon/turbomodule/core
   - React-perflogger (0.69.4)
   - React-RCTActionSheet (0.69.4):
     - React-Core/RCTActionSheetHeaders (= 0.69.4)
@@ -374,7 +378,7 @@ PODS:
     - React
     - React-Core
     - Turf
-  - RNScreens (3.8.0):
+  - RNScreens (3.16.0):
     - React-Core
     - React-RCTImage
   - RNSVG (12.1.0):
@@ -589,7 +593,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: a27badbbdbc0ff781813370736a2d1c7261181d4
   React-jsinspector: 8a3d3f5dcd23a91e8c80b1bf0e96902cd1dca999
   React-logger: 1088859f145b8f6dd0d3ed051a647ef0e3e80fad
-  react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
+  react-native-safe-area-context: b456e1c40ec86f5593d58b275bd0e9603169daca
   React-perflogger: cb386fd44c97ec7f8199c04c12b22066b0f2e1e0
   React-RCTActionSheet: f803a85e46cf5b4066c2ac5e122447f918e9c6e5
   React-RCTAnimation: 19c80fa950ccce7f4db76a2a7f2cf79baae07fc7
@@ -604,14 +608,14 @@ SPEC CHECKSUMS:
   ReactCommon: 8f67bd7e0a6afade0f20718f859dc8c2275f2e83
   RNGestureHandler: bad495418bcbd3ab47017a38d93d290ebd406f50
   rnmapbox-maps: 1a68a37f3d28e084423495d23b2a4e4aab6c36e1
-  RNScreens: 6e1ea5787989f92b0671049b808aef64fa1ef98c
+  RNScreens: ee31ecdf23fe81e93c74feaa086cf173d758ab58
   RNSVG: ce9d996113475209013317e48b05c21ee988d42e
   RNVectorIcons: 4143ba35feebab8fdbe6bc43d1e776b393d47ac8
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   Turf: 60b93cfdc62758526bc7bf1ef191a829aeb9694d
   Yoga: ff994563b2fd98c982ca58e8cd9db2cdaf4dda74
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 78d3456aa99ae9769f2dd837f9d7959cc74bf5b6
+PODFILE CHECKSUM: 504114e3a9291acf8720cba70a4a27db8d3269b4
 
 COCOAPODS: 1.11.2
diff --git a/example/ios/RNMapboxGLExample/AppDelegate.mm b/example/ios/RNMapboxGLExample/AppDelegate.mm
@@ -86,7 +86,11 @@ - (NSDictionary *)prepareInitialProps
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 {
 #if DEBUG
-  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
+  #if DEBUG_RCT_BUNDLE
+    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+  #else
+    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
+  #endif
 #else
   return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
 #endif

diff --git a/example/ios/RNMapboxGLExample/Info.plist b/example/ios/RNMapboxGLExample/Info.plist
@@ -24,6 +24,10 @@
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>MetalCaptureEnabled</key>
+	<true/>
+	<key>MetalSimulatorEnabled</key>
+	<true/>
 	<key>NSAppTransportSecurity</key>
 	<dict>
 		<key>NSExceptionDomains</key>
@@ -35,8 +39,12 @@
 			</dict>
 		</dict>
 	</dict>
+	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
+	<string>Show current location on map</string>
+	<key>NSLocationAlwaysUsageDescription</key>
+	<string>Show current location on map</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string>Show current location on map</string>
 	<key>UIAppFonts</key>
 	<array>
 		<string>AntDesign.ttf</string>

diff --git a/example/metro.config.js b/example/metro.config.js
@@ -13,8 +13,10 @@ const inlineRequireBlockList = new Proxy(
   {
     has: (target, name) => {
       if (
-        name.endsWith('.js') &&
-        name.includes('/react-navigation-stack/lib/module/vendor/views/')
+        (name.endsWith('.js') &&
+          name.includes('/react-navigation-stack/lib/module/vendor/views/')) ||
+        (name.includes('@react-navigation/elements/src/') &&
+          name.endsWith('.tsx'))
       ) {
         return true;
       }

diff --git a/example/package.json b/example/package.json
@@ -19,6 +19,9 @@
   "dependencies": {
     "@mapbox/geo-viewport": "^0.5.0",
     "@mapbox/mapbox-sdk": "^0.13.0",
+    "@react-navigation/compat": "^5.3.20",
+    "@react-navigation/native": "^6.0.11",
+    "@react-navigation/native-stack": "^6.7.0",
     "@turf/along": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/bbox-polygon": "^6.5.0",
@@ -28,20 +31,18 @@
     "@turf/nearest-point-on-line": "6.5.0",
     "@types/mapbox__geo-viewport": "^0.4.1",
     "debounce": "^1.2.0",
+    "deprecated-react-native-prop-types": "^2.3.0",
     "fbjs": "^3.0.0",
     "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react": "18.0.0",
     "react-native": "0.69.4",
-    "react-native-elements": "^3.4.2",
+    "react-native-elements": "^4.0.0-rc.2",
     "react-native-gesture-handler": "^2.5.0",
-    "react-native-safe-area-context": "^3.1.9",
+    "react-native-safe-area-context": "^4.3.3",
     "react-native-screens": "^3.0.0",
     "react-native-svg": "^12.1.0",
-    "react-native-vector-icons": "9.0.0",
-    "react-navigation": "^4.4.4",
-    "react-navigation-stack": "^2.10.4",
-    "deprecated-react-native-prop-types": "^2.3.0"
+    "react-native-vector-icons": "9.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
@@ -64,6 +65,11 @@
         "type": "ios.app",
         "build": "xcodebuild -quiet -workspace ios/RNMapboxGLExample.xcworkspace -configuration Release -scheme RNMapboxGLExample -sdk iphonesimulator -derivedDataPath ios/build -destination 'platform=iOS Simulator,name=iPhone SE (3rd generation)'",
         "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/RNMapboxGLExample.app"
+      },
+      "ios.debug": {
+        "type": "ios.app",
+        "build": "FORCE_BUNDLING=1 xcodebuild -quiet -workspace ios/RNMapboxGLExample.xcworkspace -configuration Debug -scheme RNMapboxGLExample GCC_PREPROCESSOR_DEFINITIONS='$GCC_PREPROCESSOR_DEFINITIONS DEBUG_RCT_BUNDLE=1' -sdk iphonesimulator -derivedDataPath ios/build -destination 'platform=iOS Simulator,name=iPhone SE (3rd generation)'",
+        "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/RNMapboxGLExample.app"
       }
     },
     "devices": {
@@ -78,6 +84,10 @@
       "ios": {
         "device": "simulator",
         "app": "ios"
+      },
+      "ios.debug": {
+        "device": "simulator",
+        "app": "ios.debug"
       }
     }
   }

diff --git a/example/src/App.js b/example/src/App.js
@@ -1,19 +1,16 @@
 import React from 'react';
 import MapboxGL from '@rnmapbox/maps';
 import { StyleSheet, Text, View, LogBox, SafeAreaView } from 'react-native';
-import {
-  createStackNavigator,
-  TransitionPresets,
-} from 'react-navigation-stack';
-import { createAppContainer } from 'react-navigation';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createCompatNavigatorFactory } from '@react-navigation/compat';
+import { NavigationContainer } from '@react-navigation/native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 
 import sheet from './styles/sheet';
 import colors from './styles/colors';
 import { IS_ANDROID } from './utils';
 import config from './utils/config';
-import Home from './scenes/Home';
-import Demo from './scenes/Demo';
+import { Group, Item } from './scenes/GroupAndItem';
 
 LogBox.ignoreLogs([
   'Warning: isMounted(...) is deprecated',
@@ -31,25 +28,47 @@ MapboxGL.setAccessToken(config.get('accessToken'));
 
 Icon.loadFont();
 
-const AppStackNavigator = createStackNavigator(
+//console.log("=> [5*] 2", TransitionPresets);
+
+const Stack = createNativeStackNavigator();
+
+function AppStackNavigator() {
+  return (
+    <Stack.Navigator
+      initialRouteName="Group"
+      screenOptions={{ gestureEnabled: false, headerShown: false }}
+    >
+      <Stack.Screen name="Group" component={Group} />
+      <Stack.Screen name="Item" component={Item} />
+    </Stack.Navigator>
+  );
+}
+
+const AppStackNavigatorOld = createCompatNavigatorFactory(
+  createNativeStackNavigator,
+)(
   {
-    Home: { screen: Home },
-    Demo: { screen: Demo },
-    Group: { screen: Home },
+    Home: { screen: Group },
+    Demo: { screen: Item },
+    Group: { screen: Group },
   },
   {
     initialRouteName: 'Home',
 
-    navigationOptions: {
+    /*navigationOptions: {
       ...TransitionPresets.SlideFromRightIOS,
-    },
+    },*/
     defaultNavigationOptions: {
       headerShown: false,
     },
   },
 );
-const AppContainer = createAppContainer(AppStackNavigator);
 
+const AppContainer = () => (
+  <NavigationContainer>
+    <AppStackNavigator />
+  </NavigationContainer>
+);
 class App extends React.Component {
   constructor(props) {
     super(props);

diff --git a/example/src/examples/Map/ShowClick.js b/example/src/examples/Map/ShowClick.js
@@ -54,9 +54,13 @@ class ShowClick extends React.Component {
     }
 
     return (
-      <Bubble>
-        <Text>Latitude: {this.state.latitude}</Text>
-        <Text>Longitude: {this.state.longitude}</Text>
+      <Bubble testID="location-bubble">
+        <Text testID="location-bubble-latitude">
+          Latitude: {this.state.latitude}
+        </Text>
+        <Text testID="location-bubble-longitude">
+          Longitude: {this.state.longitude}
+        </Text>
         <Text>Screen Point X: {this.state.screenPointX}</Text>
         <Text>Screen Point Y: {this.state.screenPointY}</Text>
       </Bubble>
@@ -66,7 +70,11 @@ class ShowClick extends React.Component {
   render() {
     return (
       <Page {...this.props}>
-        <MapboxGL.MapView style={sheet.matchParent} onPress={this.onPress}>
+        <MapboxGL.MapView
+          style={sheet.matchParent}
+          onPress={this.onPress}
+          testID={'show-click-map-view'}
+        >
           <MapboxGL.Camera centerCoordinate={DEFAULT_CENTER_COORDINATE} />
         </MapboxGL.MapView>
         {this.renderLastClicked()}

diff --git a/example/src/examples/Map/ShowMap.tsx b/example/src/examples/Map/ShowMap.tsx
@@ -41,7 +41,11 @@ const ShowMap: FC<any> = (props) => {
       options={_mapOptions}
       onOptionPress={onMapChange}
     >
-      <MapboxGL.MapView styleURL={styleURL.styleURL} style={sheet.matchParent}>
+      <MapboxGL.MapView
+        styleURL={styleURL.styleURL}
+        style={sheet.matchParent}
+        testID={'show-map'}
+      >
         <MapboxGL.Camera followZoomLevel={12} followUserLocation />
 
         <MapboxGL.UserLocation onPress={onUserMarkerPress} />

diff --git a/example/src/examples/common/Bubble.js b/example/src/examples/common/Bubble.js
@@ -22,14 +22,16 @@ class Bubble extends React.PureComponent {
     onPress: PropTypes.func,
     children: PropTypes.any,
     style: PropTypes.any,
+    testID: PropTypes.string,
   };
 
   render() {
     let innerChildView = this.props.children;
+    let { testID } = this.props;
 
     if (this.props.onPress) {
       innerChildView = (
-        <TouchableOpacity onPress={this.props.onPress}>
+        <TouchableOpacity onPress={this.props.onPress} testID={testID}>
           {this.props.children}
         </TouchableOpacity>
       );