Update to RN 0.73 (#3543)

* Update to RN 0.73

* Change files

* RN 73 requires node 18

* Add 72 profile

* Update wdio/appium etc to get it running on node 18

* fix

* fix

* Update podfile locks

* fix

* fix

* fix

* see if building fixes resolution of focus-zone by e2e tests

* Try specifying reports dir with full path

* Try debug level reporting to identify error creating logs

* try enabling more logs

* alternate way to specify logfile.

* downgrade @wdio/appium-service to move before webdriverio/webdriverio#12095

* Test no-packager

* yarn init-test-app  (With cleanup)

* Try install Java18

* fix

* fix

* Android E2E fixes

* fix?

* fix

* fix

* Add more logging for E2E android test failure

* more logs

* more log

* Use actual scroll region, to avoid OS swipe gestures

* Increase android time out to navigate to page

* fix

* remove extra try/catch and logging

* Fix windows build

* test windows PR without node install

---------

Co-authored-by: Saad Najmi <[email protected]>

Author: acoates-ms

.ado/azure-pipelines.yml

@@ -162,7 +162,7 @@ jobs:
 
       - bash: |
           echo "yarn $(platform)"
-          yarn $(platform) --simulator "$(ios_simulator)"
+          yarn $(platform) --simulator "$(ios_simulator)" --no-packager
         workingDirectory: apps/fluent-tester
         displayName: 'yarn $(platform)'
 
@@ -175,7 +175,7 @@ jobs:
     pool:
       name: rnw-pool-4
       demands:
-        - ImageOverride -equals rnw-img-vs2022
+        - ImageOverride -equals rnw-img-vs2022-node18
     timeoutInMinutes: 60 # how long to run the job before automatically cancelling
     cancelTimeoutInMinutes: 5 # how much time to give 'run always even if cancelled tasks' before killing them
 

.ado/templates/e2e-testing-android.yml

@@ -7,7 +7,7 @@ steps:
       tasks: 'assembleDebug'
       gradleOptions: '-Xmx2g'
       javaHomeOption: 'JDKVersion'
-      jdkVersionOption: '1.11'
+      jdkVersionOption: '1.17'
       workingDirectory: apps/fluent-tester/android
 
   - script: |

.ado/templates/setup-repo-min-build.yml

@@ -4,3 +4,7 @@ steps:
   - script: |
       yarn build-tools
     displayName: "yarn build-tools"
+
+  - script: |
+      yarn build
+    displayName: "yarn build"

.ado/templates/setup-repo.yml

@@ -1,9 +1,9 @@
 # This template install dependencies, builds, and bundles this repo
 steps:
-  - task: NodeTool@0
-    inputs:
-      versionSource: 'fromFile'
-      versionFilePath: '.node-version'
+  # - task: NodeTool@0
+  #   inputs:
+  #     versionSource: 'fromFile'
+  #     versionFilePath: '.node-version'
 
   - task: NuGetToolInstaller@0
     inputs:

.node-version

@@ -1 +1 @@
-16
+18

apps/E2E/global.d.ts

@@ -0,0 +1,7 @@
+import type {BrowserCommands} from 'webdriverio'
+
+declare global {
+  const browser: BrowserCommands;
+  const driver: BrowserCommands.Driver;
+  const $: BrowserCommands.$;
+}

apps/E2E/package.json

@@ -23,36 +23,37 @@
   ],
   "dependencies": {
     "react": "18.2.0",
-    "react-native": "^0.72.0",
-    "react-native-macos": "^0.72.0",
-    "react-native-windows": "^0.72.0"
+    "react-native": "^0.73.0",
+    "react-native-macos": "^0.73.0",
+    "react-native-windows": "^0.73.0"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
     "@babel/runtime": "^7.8.0",
     "@fluentui-react-native/eslint-config-rules": "workspace:*",
     "@fluentui-react-native/focus-zone": "workspace:*",
     "@fluentui-react-native/scripts": "workspace:*",
-    "@react-native/metro-config": "^0.72.0",
+    "@react-native/babel-preset": "^0.73.0",
+    "@react-native/metro-babel-transformer": "^0.73.0",
+    "@react-native/metro-config": "^0.73.0",
     "@rnx-kit/metro-config": "^1.3.1",
-    "@types/jasmine": "3.10.3",
+    "@types/jasmine": "5.1.4",
     "@types/react": "^18.2.0",
-    "@wdio/appium-service": "7.30.0",
-    "@wdio/cli": "7.30.1",
-    "@wdio/jasmine-framework": "7.26.0",
-    "@wdio/local-runner": "7.30.1",
-    "@wdio/spec-reporter": "7.29.1",
-    "appium": "^2.0.0",
-    "appium-mac2-driver": "^1.8.2",
-    "appium-uiautomator2-driver": "^2.29.0",
-    "appium-windows-driver": "^2.12.0",
-    "appium-xcuitest-driver": "^5.6.0",
-    "metro-config": "^0.76.5",
-    "metro-react-native-babel-preset": "^0.76.5",
+    "@wdio/appium-service": "8.29.1",
+    "@wdio/cli": "8.35.1",
+    "@wdio/jasmine-framework": "8.35.1",
+    "@wdio/local-runner": "8.35.1",
+    "@wdio/spec-reporter": "8.32.4",
+    "appium": "^2.5.1",
+    "appium-mac2-driver": "^1.12.0",
+    "appium-uiautomator2-driver": "^3.0.5",
+    "appium-windows-driver": "^2.12.18",
+    "appium-xcuitest-driver": "^7.9.1",
+    "metro-config": "^0.80.0",
     "rimraf": "^5.0.1",
-    "ts-node": "^8.10.1",
+    "ts-node": "^10.7.0",
     "typescript": "4.9.4",
-    "webdriverio": "7.30.1"
+    "webdriverio": "8.35.1"
   },
   "installConfig": {
     "hoistingLimits": "dependencies"
@@ -64,10 +65,12 @@
         "microsoft/react-native"
       ],
       "requirements": [
-        "react-native@0.72"
+        "react-native@0.73"
       ],
       "capabilities": [
         "core",
+        "core-macos",
+        "core-windows",
         "react",
         "metro-config",
         "babel-preset-react-native"

apps/E2E/src/common/BasePage.ts

@@ -93,14 +93,13 @@ export abstract class BasePage {
    * Some components' E2E tests check only if the test page loads correctly or not. Others
    * (majority), perform UI manipulation tests on UI components on the test page. In these scenarios, these UI components have their
    * own section on the test page (by default, it's hidden so partners don't see it). This method opens up that testing section.
-  */
+   */
   async enableE2ETesterMode(): Promise<boolean | void> {
     const e2eSwitch = await this._e2eSwitch;
-    await browser.waitUntil(async () => await e2eSwitch.isDisplayed() && await e2eSwitch.isEnabled(),
-    {
+    await browser.waitUntil(async () => (await e2eSwitch.isDisplayed()) && (await e2eSwitch.isEnabled()), {
       timeout: 15000,
-      timeoutMsg: 'The E2E Switch should be enabled and visible before we interact with it'
-    })
+      timeoutMsg: 'The E2E Switch should be enabled and visible before we interact with it',
+    });
 
     switch (this.platform) {
       // Usually, we use .isSelected() to see if a control (our switch) is checked true or false, but the process is
@@ -139,7 +138,7 @@ export abstract class BasePage {
     const el = await element;
 
     try {
-      await browser.waitUntil(async () => expectedValue === await el.getAttribute(attribute));
+      await browser.waitUntil(async () => expectedValue === (await el.getAttribute(attribute)));
     } catch {
       const actualValue = await el.getAttribute(attribute);
       switch (this.platform) {
@@ -181,7 +180,7 @@ export abstract class BasePage {
    * - Escape out of a menu: MenuPageObject.sendKeys(MenuPageObject.item1, [KEY_ESCAPE])
    */
   async sendKeys(element: Promise<WebdriverIO.Element>, keys: Keys[]): Promise<void> {
-    await (await element).addValue(keys);
+    await (await element).addValue(keys.join());
   }
 
   /** Short-hand method for PageObjects to get an element attribute during testing, with attribute being type-enforced. */
@@ -192,7 +191,7 @@ export abstract class BasePage {
   /* Scrolls until the desired test page's button is displayed. We use the scroll viewer UI element as the point to start scrolling.
    * We use a negative number as the Y-coordinate because that enables us to scroll downwards */
   async mobileScrollToComponentButton(): Promise<void> {
-    if (await (await this._pageButton).isDisplayed()) {
+    if (this.platform !== 'android' && (await (await this._pageButton).isDisplayed())) {
       return;
     }
 
@@ -213,8 +212,52 @@ export abstract class BasePage {
         );
         break;
       }
+      // UiScrollable seems to continuously scroll the wrong direction on android in the current appium / appium-uiautomator2-driver version
+      // So Instead we use this rather overly complex method of scrolling the items into view.  On future appium updates we should see if
+      // we can return to using the simpler and probably more reliable UiScrollable method below.
+      case 'android': {
+        await browser.waitUntil(
+          async () => {
+            let needsScroll = true;
+            let scrollLoc = { x: 8, y: 170 };
+            let scrollSize = { width: 1264, height: 574 };
+            const scroller = await By(TESTPAGE_BUTTONS_SCROLLVIEWER);
+            scrollLoc = await scroller.getLocation();
+            scrollSize = await scroller.getSize();
+
+            const pageButton = await this._pageButton;
+            const isPageButtonDisplayed = await pageButton.isDisplayed();
+            if (isPageButtonDisplayed) {
+              // Verify that the button is fully on screen
+              const buttonLoc = await pageButton.getLocation();
+              const buttonSize = await pageButton.getSize();
+              needsScroll = scrollLoc.y + scrollSize.height <= buttonLoc.y + buttonSize.height;
+            }
+
+            if (needsScroll) {
+              await driver.execute('mobile: scrollGesture', {
+                direction: 'down',
+                left: scrollLoc.x + scrollSize.width * 0.2,
+                width: scrollSize.width - scrollSize.width * 0.4,
+                top: scrollLoc.y + scrollSize.height * 0.2,
+                height: scrollSize.height - scrollSize.height * 0.4,
+                percent: 0.6,
+                speed: 1000,
+              });
+
+              return false;
+            }
+
+            return true;
+          },
+          {
+            timeout: this.waitForUiEvent,
+            timeoutMsg: errorMsg,
+          },
+        );
+        break;
+      }
       default:
-      case 'android':
         /* 'mobile: scroll' which is used for iOS, does not support direction option on Android.
          * Instead, we use the UiScrollable class to scroll down to the desired view based on its 'description' (accessibilityLabel).
          * The first selector tells which container to scroll in, and the other selector tells which component to scroll to. */
@@ -235,7 +278,11 @@ export abstract class BasePage {
 
   /** Waits for the tester app to load by checking if the startup page loads. If the app doesn't load before the timeout, it causes the test to fail. */
   async waitForInitialPageToDisplay(): Promise<boolean | void> {
-    return await this.waitForCondition(async () => await (await this._initialPage).isDisplayed(), this.ERRORMESSAGE_APPLOAD, BOOT_APP_TIMEOUT);
+    return await this.waitForCondition(
+      async () => await (await this._initialPage).isDisplayed(),
+      this.ERRORMESSAGE_APPLOAD,
+      BOOT_APP_TIMEOUT,
+    );
   }
 
   /* Scrolls to the specified or primary UI test element until it is displayed. */
@@ -311,7 +358,12 @@ export abstract class BasePage {
 
   /* A method that allows the caller to pass in a condition. A wrapper for waitUntil(). Once testing becomes more extensive,
    * this will allow cleaner code within all the Page Objects. */
-  async waitForCondition(condition: () => Promise<boolean>, errorMsg?: string, timeout?: number, interval?: number): Promise<boolean | void> {
+  async waitForCondition(
+    condition: () => Promise<boolean>,
+    errorMsg?: string,
+    timeout?: number,
+    interval?: number,
+  ): Promise<boolean | void> {
     return await browser.waitUntil(async () => await condition(), {
       timeout: timeout ?? this.waitForUiEvent,
       timeoutMsg: errorMsg ?? 'Error. Please see /errorShots and logs for more information.',

apps/E2E/tsconfig.json

@@ -8,7 +8,7 @@
       "*": ["*", "*.win32", "./*"],
       "src/*": ["./src/*", "src"]
     },
-    "types": ["webdriverio/async", "@wdio/jasmine-framework", "node", "@types/jasmine"]
+    "types": ["./global", "webdriverio", "@wdio/jasmine-framework", "node", "@types/jasmine"]
   },
   "include": ["src"]
 }

apps/E2E/wdio.conf.android.js

@@ -17,6 +17,10 @@ exports.config = {
       'appium:appPackage': 'com.microsoft.reacttestapp',
       'appium:appActivity': 'MainActivity',
       'appium:automationName': 'uiautomator2',
+      // These two capabilities disable the normal onscreen keyboard.
+      // The onscreen keyboard has a very complex representation that makes the appium code respond very slow.
+      'appium:resetKeyboard': true,
+      'appium:unicodeKeyboard': true,
     },
   ],
 

apps/fluent-tester/android/build.gradle

@@ -1,7 +1,14 @@
 buildscript {
-    def androidTestAppDir = "../../../node_modules/react-native-test-app/android"
-    apply(from: "${androidTestAppDir}/dependencies.gradle")
-    apply(from: "${androidTestAppDir}/test-app-util.gradle")
+    apply(from: {
+        def searchDir = rootDir.toPath()
+        do {
+            def p = searchDir.resolve("node_modules/react-native-test-app/android/dependencies.gradle")
+            if (p.toFile().exists()) {
+                return p.toRealPath().toString()
+            }
+        } while (searchDir = searchDir.getParent())
+        throw new GradleException("Could not find `react-native-test-app`");
+    }())
 
     repositories {
         mavenCentral()
@@ -10,7 +17,7 @@ buildscript {
 
     dependencies {
         getReactNativeDependencies().each { dependency ->
-          classpath(dependency)
+            classpath(dependency)
         }
     }
 }
@@ -19,7 +26,16 @@ allprojects {
     repositories {
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url("${rootDir}/../../../node_modules/react-native/android")
+            url({
+                def searchDir = rootDir.toPath()
+                do {
+                    def p = searchDir.resolve("node_modules/react-native/android")
+                    if (p.toFile().exists()) {
+                        return p.toRealPath().toString()
+                    }
+                } while (searchDir = searchDir.getParent())
+                throw new GradleException("Could not find `react-native`");
+            }())
         }
         mavenCentral()
         google()

apps/fluent-tester/android/gradle.properties

@@ -26,13 +26,28 @@ org.gradle.jvmargs=-Xmx2g -XX:MaxMetaspaceSize=512m -XX:+HeapDumpOnOutOfMemoryEr
 android.useAndroidX=true
 # Automatically convert third-party libraries to use AndroidX
 android.enableJetifier=true
-
-# Version of Flipper to use with React Native. Default value is whatever React
-# Native defaults to. To disable Flipper, set it to `false`.
-#FLIPPER_VERSION=0.125.0
-
-# Enable Fabric at runtime.
-#USE_FABRIC=1
-
-# Uncomment the line below if building react-native from source
-#ANDROID_NDK_VERSION=21.4.7075529
+# Jetifier randomly fails on these libraries
+android.jetifier.ignorelist=hermes-android
+
+# Use this property to specify which architecture you want to build.
+# You can also override it from the CLI using
+# ./gradlew <task> -PreactNativeArchitectures=x86_64
+reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
+
+# Use this property to enable support to the new architecture.
+# This will allow you to use TurboModules and the Fabric render in
+# your application. You should enable this flag either if you want
+# to write custom TurboModules/Fabric components OR use libraries that
+# are providing them.
+# Note that this is incompatible with web debugging.
+#newArchEnabled=true
+#bridgelessEnabled=true
+
+# Uncomment the line below to build React Native from source.
+#react.buildFromSource=true
+
+# Version of Android NDK to build against.
+#ANDROID_NDK_VERSION=26.1.10909125
+
+# Version of Kotlin to build against.
+#KOTLIN_VERSION=1.8.22

apps/fluent-tester/android/gradle/wrapper/gradle-wrapper.jar

@@ -1,5 +1,7 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists