starting point

small tweaks

testProps example

test to see if we still need the workaround

checkpoint

post-rebase

cleanup

Author: kelset

.gitignore

@@ -144,3 +144,6 @@ package-lock.json
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
+
+# E2E files
+/packages/rn-tester-e2e/apps

package.json

@@ -44,7 +44,7 @@
     "align-package-versions": "node -e \"require('./scripts/monorepo/align-package-versions')()\""
   },
   "workspaces": [
-    "packages/*"
+    "packages/!(rn-tester-e2e)/**"
   ],
   "peerDependencies": {
     "react": "18.2.0"

packages/rn-tester-e2e/README-addTestAndExecute.md

@@ -0,0 +1,40 @@
+# How to add a test
+
+1. Create a test file `(rn-tester-e2e/test/spec)` - simple jest spec files
+2. **OPTIONAL -** Create a screen object or extend the existing one (depends on the test scope) - `rn-tester-e2e/test/screenObjects` - map screen elements for iOS and Android and add needed functions
+
+# How to execute a test
+1. Open new Terminal -> navigate to the react-native path -> open Metro by typing
+
+
+```bash
+yarn start
+```
+
+or
+
+```bash
+npm start
+```
+
+
+2. Open second terminal -> navigate to the react-native/packages/rn-tester-e2e -> MAKE SURE YOUR APPIUM HAS UIAUTOMATOR2 AND XCUITEST INSTALLED! type
+```bash
+npm install [email protected] -g
+appium driver install uiautomator2
+appium driver install xcuitest
+appium --base-path /wd/hub # this is the run command
+```
+>  More details about drivers in appium [here](https://appium.github.io/appium/docs/en/2.0/guides/managing-exts/) and [here](https://appium.github.io/appium/docs/en/2.0/quickstart/uiauto2-driver/)
+
+
+3. Open third terminal -> navigate to the react-native/packages/rn-tester-e2e -> run all tests by typing
+
+```bash
+npm run ios
+```
+or
+
+```bash
+npm run android
+```

packages/rn-tester-e2e/README-describedAllFoldersAndFiles.md

@@ -0,0 +1,25 @@
+# Description of all folders and files in rn-tester-e2e
+
+# folders
+
+## helpers
+utils file with generic, simple steps
+
+## screenObjects
+Screen object files based on Page Object Pattern. One file defines all neccessary elements to interact with. These elements are defined as screen class variables, they are used by the steps file
+
+## specs
+Spec files. One file per screen/functionality
+
+# root files
+## e2e-config.js
+android and iOS physical device configuration, process.env.E2E_device global variable is defined there - it can be used across the whole rn-tester-e2e directory
+
+## jest.config.js
+global jest config setup - such as timeout, test runner path
+
+## jest.setup.js
+jest and wdio setup file
+
+## package.json
+all external dependecies and project parameters

packages/rn-tester-e2e/README.md

@@ -0,0 +1,108 @@
+# RNTester E2E folder
+
+In this folder we have a local setup for doing E2E testing over RNTester via the usage of Appium and WebDriverIO and Jest.
+
+## Setting up
+
+### (one-off) Setting up Appium
+
+The first step you need to do is to ensure to install the tooling:
+
+```bash
+npm install [email protected] -g
+appium driver install uiautomator2
+appium driver install xcuitest
+```
+
+> More details about drivers in Appium [here](https://appium.github.io/appium/docs/en/2.0/guides/managing-exts/) and [here](https://appium.github.io/appium/docs/en/2.0/quickstart/uiauto2-driver/)
+
+You should not need to run install commands for drivers separately more than once, even if you bump the dep in package.json.
+
+### Building RNTester app
+
+Building manually *.app* and *.apk* is required to run automation tests on local environment.
+
+0. *(optional)* If you previously built RNTester, you may need to clean up build files and Pods:
+
+    ```bash
+    npm run test-e2e-local-clean
+    ```
+
+1. Step 1: install node modules for the repository, then navigate in the rn-tester folder
+
+    ```bash
+    cd react-native
+    npm run install
+    cd packages/rn-tester
+    ```
+
+Now, depending on the platform, there are some specific steps
+
+#### Building for iOS
+
+0. Make sure you have Bundler `gem install bundler` - we use it ensure installing the right version of CocoaPods locally.
+1. Install Bundler and CocoaPods dependencies: `bundle install` then `bundle exec pod install` or `npm run setup-ios-hermes` for RNTester with Hermes. In order to use JSC instead of Hermes engine, run: `USE_HERMES=0 bundle exec pod install` or `setup-ios-jsc` instead.
+2. Open the generated `RNTesterPods.xcworkspace`.
+3. Build the app via XCode.
+4. Find the **RNTester.app** in `~/Library/Developer/Xcode/DerivedData/RNTesterPods-{id}/Build/Products/Debug-iphonesimulator`
+5. Copy the app to the following directory `/react-native/packages/rn-tester-e2e/apps`.
+6. change its name name to: `rn-tester.app`
+
+#### Building for Android
+
+0. You'll need to have all the [prerequisites](https://reactnative.dev/contributing/how-to-build-from-source#prerequisites) (SDK, NDK) for Building React Native installed.
+1. Start an Android emulator.
+2. Build the app via
+
+    ```bash
+    # In order to not use Hermes engine, run `npm run install-android-jsc` instead.
+    npm run install-android-hermes
+    npm run start
+    ```
+
+    *Note: Building for the first time can take a while.*
+
+3. Find the **RNTester.app** in `~/react-native/packages/rn-tester/android/app/build/outputs/apk/hermes/debug`
+4. copy the app `app-*-x86_64-debug.apk` to the following directory `/react-native/packages/rn-tester-e2e/apps`
+5. change its name name to: `rn-tester.apk`
+
+### Setting up the RNTester E2E folder
+
+In `react-native/packages/rn-tester-e2e` install the needed dependencies via:
+
+```bash
+npm install
+```
+
+We need to do this step because the folder is not part of the npm run workspace by design.
+
+Then open the following file
+
+```bash
+/react-native/packages/rn-tester-e2e/e2e-config.js
+```
+
+And modify lines L14->L29 to reflect your local setup configuration (ex. `platformVersion`, `deviceName`).
+
+## Testing the RNTester app E2E
+
+After you have done all the above correctly, and you have the Android/iOS apps in the `rn-tester-e2e/apps` folder, in a dedicated terminal window, run:
+
+```bash
+appium --base-path /wd/hub
+```
+
+This will start the Appium server - you will need this to keep running.
+
+Then open a second terminal window and start the Metro terminal from the `packages/rn-tester` folder, via `npm run start --reset-cache`. This terminal window also needs to keep running.
+
+Now, make sure that the iOS simulator/the Android emulator is up and running.
+
+Finally, you can open a third terminal window and run:
+
+```bash
+npm run test-android-e2e # for android
+npm run test-ios-e2e # for ios
+```
+
+Now you should see the RNTester app being open, and the defined test being run.

packages/rn-tester-e2e/babel.config.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+module.exports = {
+  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
+};

packages/rn-tester-e2e/e2e-config.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+const path = require('path');
+let capabilities;
+
+const android = {
+  platformName: 'Android',
+  'appium:platformVersion': '13.0',
+  'appium:deviceName': 'Android Emulator',
+  'appium:app': path.join(process.cwd(), '/apps/rn-tester.apk'),
+  'appium:automationName': 'UiAutomator2',
+  'appium:newCommandTimeout': 240,
+};
+
+const ios = {
+  platformName: 'iOS',
+  'appium:platformVersion': '16.2',
+  'appium:deviceName': 'iPhone 14',
+  'appium:automationName': 'XCUITest',
+  'appium:app': path.join(process.cwd(), '/apps/rn-tester.app'),
+};
+
+if (!process.env.E2E_DEVICE) {
+  throw new Error('E2E_DEVICE environment variable is not defined');
+}
+
+if (
+  !(
+    process.env.E2E_DEVICE.includes('android') ||
+    process.env.E2E_DEVICE.includes('ios')
+  )
+) {
+  throw new Error('No e2e device configuration found');
+}
+
+if (process.env.E2E_DEVICE === 'android') {
+  capabilities = android;
+}
+
+if (process.env.E2E_DEVICE === 'ios') {
+  capabilities = ios;
+}
+
+export default capabilities;

packages/rn-tester-e2e/jest.config.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+module.exports = {
+  testTimeout: 60000,
+  bail: 0,
+  setupFilesAfterEnv: ['./jest.setup.js'],
+  testMatch: ['**/specs/*.js'],
+};

packages/rn-tester-e2e/jest.setup.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+const wdio = require('webdriverio');
+import capabilities from './e2e-config.js';
+import {beforeEach, afterEach, jest} from '@jest/globals';
+jest.retryTimes(3);
+
+let driver;
+const config = {
+  path: '/wd/hub',
+  host: 'localhost',
+  port: 4723,
+  waitforTimeout: 60000,
+  logLevel: 'error',
+  capabilities: {
+    ...capabilities,
+  },
+};
+
+beforeEach(async () => {
+  driver = await wdio.remote(config);
+});
+
+afterEach(async () => {
+  console.info('[afterAll] Done with testing!');
+  await driver.deleteSession();
+});
+
+export {driver};

packages/rn-tester-e2e/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@react-native/tester-e2e",
+  "private": true,
+  "version": "0.0.1",
+  "license": "MIT",
+  "description": "React Native E2E tester app.",
+  "homepage": "https://github.com/facebook/react-native/tree/HEAD/packages/rn-tester-e2e",
+  "repository": {
+  "type": "git",
+  "url": "[email protected]:facebook/react-native.git",
+  "directory": "packages/rn-tester-e2e"
+  },
+  "devDependencies": {
+    "appium": "^2.0.0-beta.57",
+    "appium-uiautomator2-driver": "^2.12.6",
+    "appium-xcuitest-driver": "^4.19.1",
+    "eslint": "^8.19.0",
+    "jest": "^29.2.1",
+    "webdriverio": "^7.25.4"
+  },
+  "scripts": {
+    "test": "jest --runInBand",
+    "test-android-e2e": "E2E_DEVICE=\"android\" npm run test",
+    "test-ios-e2e": "E2E_DEVICE=\"ios\" npm run test"
+  },
+  "dependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@types/jest": "^29.2.1"
+  }
+}

packages/rn-tester-e2e/test/helpers/utils.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import {driver} from '../../jest.setup';
+
+class Utils {
+  async checkElementExistence(locator) {
+    await driver.$(locator).waitForDisplayed();
+    return driver.$(locator).isDisplayed();
+  }
+
+  async clickElement(locator) {
+    await driver.$(locator).waitForDisplayed();
+    await driver.$(locator).click();
+  }
+
+  async getElementText(locator) {
+    await driver.$(locator).waitForDisplayed();
+    return driver.$(locator).getText();
+  }
+
+  platformSelect(platforms) {
+    return platforms[process.env.E2E_DEVICE];
+  }
+}
+module.exports = new Utils();

packages/rn-tester-e2e/test/screenObjects/apis.screen.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+class ApisScreen {}
+module.exports = new ApisScreen();