Setup maestro, move events and bottom tabs to maestro

.github/workflows/android-e2e-test.yml

@@ -7,7 +7,6 @@ on:
       - 'android/**'
       - 'common/**'
       - 'Example/**'
-      - 'TestsExample/**'
   push:
     branches:
       - main
@@ -40,10 +39,11 @@ jobs:
       - name: Install node dependencies
         working-directory: ${{ env.WORKING_DIRECTORY }}
         run: yarn install
-      - name: Build app
+      - name: Install Maestro CLI
         working-directory: ${{ env.WORKING_DIRECTORY }}
-        run: yarn build-e2e-android
+        run: yarn install-e2e
       - name: Run emulator and tests
+        run: yarn test-e2e-android
         uses: reactivecircus/[email protected]
         with:
           working-directory: ${{ env.WORKING_DIRECTORY }}

.github/workflows/ios-e2e-test.yml

@@ -8,7 +8,6 @@ on:
       - 'ios/**'
       - 'common/**'
       - 'Example/**'
-      - 'TestsExample/**'
   push:
     branches:
       - main
@@ -39,13 +38,16 @@ jobs:
       - name: Install node dependencies
         working-directory: ${{ env.WORKING_DIRECTORY }}
         run: yarn
+      - name: Install Facebook IDB tool
+        working-directory: ${{ env.WORKING_DIRECTORY }}
+        run: yarn prepare-e2e-ios
       - name: Install pods
         working-directory: ${{ env.WORKING_DIRECTORY }}/ios
         run: pod install
-      - name: Build app
+      - name: Install Maestro CLI
         working-directory: ${{ env.WORKING_DIRECTORY }}
-        run: yarn build-e2e-ios
-      - name: Test app
+        run: yarn install-e2e
+      - name: Run emulator and tests
         working-directory: ${{ env.WORKING_DIRECTORY }}
         run: yarn test-e2e-ios
       - uses: actions/upload-artifact@v3

Example/e2e/bottomTabs/first-screen-and-double-tap-on-tab.yml

@@ -0,0 +1,11 @@
+appId: ${APP_ID}
+---
+- launchApp
+- tapOn:
+    id: "root-screen-example-BottomTabsAndStack"
+- tapOn: "More details 0"
+- assertVisible: "More details 1"
+
+- doubleTapOn:
+    id: "bottom-tabs-A-tab"
+- assertVisible: "More details 0"

Example/e2e/bottomTabs/go-to-details-screen-and-back.yml

@@ -0,0 +1,21 @@
+appId: ${APP_ID}
+---
+- launchApp
+- tapOn:
+    id: "root-screen-example-BottomTabsAndStack"
+- tapOn: "More details 0"
+- assertVisible: "More details 1"
+
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - tapOn: "Details screen #0"
+
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - back
+
+- assertVisible: "More details 0"

Example/e2e/bottomTabs/go-to-details-screen.yml

@@ -0,0 +1,8 @@
+appId: ${APP_ID}
+---
+- launchApp
+- tapOn:
+    id: "root-screen-example-BottomTabsAndStack"
+- tapOn: "More details 0"
+- assertVisible:
+    text: "More details 1"

Example/e2e/bottomTabs/keep-stack-state-on-tab-change.yml

@@ -0,0 +1,17 @@
+appId: ${APP_ID}
+---
+- launchApp
+- tapOn:
+    id: "root-screen-example-BottomTabsAndStack"
+- tapOn: "More details 0"
+- tapOn: "More details 1"
+- assertVisible: "More details 2"
+
+- tapOn:
+    id: "bottom-tabs-B-tab"
+- assertVisible:
+    text: "More details 0"
+
+- tapOn:
+    id: "bottom-tabs-A-tab"
+- assertVisible: "More details 2"

Example/e2e/bottomTabs/main-screen-and-back.yml

@@ -0,0 +1,9 @@
+appId: ${APP_ID}
+---
+- launchApp
+- assertVisible:
+    id: "root-screen-example-BottomTabsAndStack"
+- tapOn:
+    id: "root-screen-example-BottomTabsAndStack"
+- assertVisible:
+    id: "bottom-tabs-more-details-button"

Example/e2e/bottomTabs/main.yml

@@ -0,0 +1,8 @@
+appId: com.swmansion.rnscreens.example
+---
+- runFlow: main-screen-and-back.yml
+- runFlow: go-to-details-screen.yml
+- runFlow: go-to-details-screen-and-back.yml
+- runFlow: switch-between-tabs.yml
+- runFlow: first-screen-and-double-tap-on-tab.yml
+- runFlow: keep-stack-state-on-tab-change.yml

Example/e2e/bottomTabs/switch-between-tabs.yml

@@ -0,0 +1,16 @@
+appId: ${APP_ID}
+---
+- launchApp
+- tapOn:
+    id: "root-screen-example-BottomTabsAndStack"
+- tapOn:
+    id: "bottom-tabs-B-tab"
+- assertVisible:
+    id: "bottom-tabs-header-right-id"
+    text: "B"
+
+- tapOn:
+    id: "bottom-tabs-A-tab"
+- assertVisible:
+    id: "bottom-tabs-header-right-id"
+    text: "A"

Example/e2e/flow.yml

@@ -0,0 +1,6 @@
+appId: ${APP_ID}
+onFlowStart:
+  - launchApp
+---
+- runFlow: onboarding/main.yml
+- runFlow: bottomTabs/main.yml

Example/e2e/onboarding/main.yml

@@ -0,0 +1,6 @@
+appId: ${APP_ID}
+---
+- launchApp
+- assertVisible:
+    id: "root-screen-examples-header"
+- runFlow: "visible-example-buttons.yml"

Example/e2e/onboarding/visible-example-buttons.yml

@@ -0,0 +1,22 @@
+appId: ${APP_ID}
+---
+# Example buttons
+- assertVisible:
+    id: "root-screen-example-SimpleNativeStack"
+- assertVisible:
+    id: "root-screen-example-StackPresentation"
+- assertVisible:
+    id: "root-screen-example-BottomTabsAndStack"
+- assertVisible:
+    id: "root-screen-example-Modals"
+# Playground buttons
+- assertVisible:
+    id: "root-screen-playground-HeaderOptions"
+- assertVisible:
+    id: "root-screen-playground-StatusBar"
+- assertVisible:
+    id: "root-screen-playground-Animations"
+- assertVisible:
+    id: "root-screen-playground-Orientation"
+- assertVisible:
+    id: "root-screen-playground-SearchBar"

Example/ios/Podfile.lock

@@ -377,7 +377,7 @@ PODS:
     - glog
   - react-native-restart (0.0.27):
     - React-Core
-  - react-native-safe-area-context (4.7.1):
+  - react-native-safe-area-context (4.7.2):
     - React-Core
   - React-NativeModulesApple (0.72.4):
     - hermes-engine
@@ -680,7 +680,7 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  boost: a7c83b31436843459a1961bfd74b96033dc77234
+  boost: 57d2868c099736d80fcd648bf211b4431e51a558
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: 5d4a3b7f411219a45a6d952f77d2c0a6c9989da5
@@ -694,7 +694,7 @@ SPEC CHECKSUMS:
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
   FlipperKit: 2efad7007d6745a3f95e4034d547be637f89d3f6
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 3d02b25ca00c2d456734d0bcff864cbc62f6ae1a
+  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: 81191603c4eaa01f5e4ae5737a9efcf64756c7b2
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
@@ -714,7 +714,7 @@ SPEC CHECKSUMS:
   React-jsinspector: aaed4cf551c4a1c98092436518c2d267b13a673f
   React-logger: da1ebe05ae06eb6db4b162202faeafac4b435e77
   react-native-restart: 7595693413fe3ca15893702f2c8306c62a708162
-  react-native-safe-area-context: 9697629f7b2cda43cf52169bb7e0767d330648c2
+  react-native-safe-area-context: 7aa8e6d9d0f3100a820efb1a98af68aa747f9284
   React-NativeModulesApple: edb5ace14f73f4969df6e7b1f3e41bef0012740f
   React-perflogger: 496a1a3dc6737f964107cb3ddae7f9e265ddda58
   React-RCTActionSheet: 02904b932b50e680f4e26e7a686b33ebf7ef3c00

Example/package.json

@@ -9,10 +9,10 @@
     "format": "prettier --write --list-different './src/**/*.{js,ts,tsx}'",
     "lint": "eslint --ext '.js,.ts,.tsx' --fix src && yarn check-types && yarn format",
     "check-types": "tsc --noEmit",
-    "build-e2e-ios": "detox build --configuration ios.release",
-    "build-e2e-android": "detox build --configuration android.release",
-    "test-e2e-ios": "detox test --configuration ios.release --take-screenshots failing",
-    "test-e2e-android": "detox test --configuration android.release --take-screenshots failing"
+    "install-e2e": "export MAESTRO_VERSION=1.32.0; curl -Ls \"https://get.maestro.mobile.dev\" | bash",
+    "prepare-e2e-ios": "brew tap facebook/fb && brew install facebook/fb/idb-companion",
+    "test-e2e-ios": "yarn ios && maestro test -e APP_ID=org.reactjs.native.example.ScreensExample e2e/flow.yml",
+    "test-e2e-android": "yarn android && maestro test --format junit --output results.xml -e APP_ID=com.swmansion.rnscreens.example e2e/flow.yml"
   },
   "dependencies": {
     "@react-navigation/bottom-tabs": "^5.11.7",