test: Setup E2E (#979)

* initial appium setup

* appium setup + android test

* ios

* ios working

* run e2e

* wdio runner

* disable e2e on ci

* docs

* last touches

* last touches for real

Author: Krzysztof Borowy

.github/Brewfile.ios

@@ -17,7 +17,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3.6.0
         with:
-          node-version: 16
+          node-version: 18.16.1
           cache: yarn
       - name: Install JS dependencies
         run: yarn
@@ -32,17 +32,21 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3.6.0
         with:
-          node-version: 16
+          node-version: 18.16.1
           cache: yarn
       - name: Install JS dependencies
         run: |
           yarn
       - name: Test Next Storage
-        uses: gradle/gradle-build-action@v2.4.2
+        uses: gradle/gradle-build-action@v2
         with:
           gradle-version: wrapper
           arguments: react-native-async-storage_async-storage:test
           build-root-directory: example/android
+      - name: Build e2e binary
+        run: |
+          yarn build:e2e:android
+
   ios:
     name: iOS
     runs-on: macos-latest
@@ -58,32 +62,22 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3.6.0
         with:
-          node-version: 16
+          node-version: 18.16.1
           cache: yarn
-      - name: Set up environment
-        run: |
-          brew bundle --file=.github/Brewfile.ios --no-lock
-          touch .watchmanconfig
       - name: Install JS dependencies
         run: |
           yarn
       - name: Bundle JS
         run: |
-          yarn bundle:ios --dev false
+          yarn bundle:ios
       - name: Install Pods
         run: |
           RCT_NEW_ARCH_ENABLED=1 pod install
         working-directory: example/ios
-      - name: Boot simulator
-        run: |
-          ./scripts/ios_e2e.sh 'run_simulator'
-      - name: Build
+      - name: Build e2e binary
         run: |
           yarn build:e2e:ios
-      - name: Test
-        if: false
-        run: |
-          yarn test:e2e:ios
+
   macos:
     name: macOS
     runs-on: macos-latest
@@ -99,7 +93,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3.6.0
         with:
-          node-version: 16
+          node-version: 18.16.1
           cache: yarn
       - name: Install JS dependencies
         run: |
@@ -118,6 +112,7 @@ jobs:
         if: false
         run: |
           yarn test:e2e:macos
+
   windows:
     name: Windows
     runs-on: windows-2022
@@ -131,7 +126,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3.6.0
         with:
-          node-version: 16
+          node-version: 18.16.1
           cache: yarn
       - name: Install JS dependencies
         run: |
@@ -142,6 +137,7 @@ jobs:
       - name: Build
         run: |
           yarn react-native run-windows --release --arch x64 --logging --no-packager --no-launch --no-deploy --msbuildprops "BundleEntryFile=index.ts" --no-telemetry
+
   release:
     name: Release
     needs: [review, android, ios, macos, windows]
@@ -155,7 +151,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3.6.0
         with:
-          node-version: 16
+          node-version: 18.16.1
           cache: yarn
       - name: Install JS dependencies
         run: |

.github/workflows/ci.yml

@@ -17,6 +17,28 @@ An asynchronous, unencrypted, persistent, key-value storage system for React Nat
 Head over to [documentation](https://react-native-async-storage.github.io/async-storage/docs/install) to learn more.
 
 
+## Running E2E locally
+
+### Android
+
+1. Create and start Android Emulator with Play services, API level 29
+2. Build app and run tests
+    ```shell
+    yarn bundle:android
+    yarn build:e2e:android
+    yarn test:e2e:android
+    ```
+   
+### iOS
+
+1. Create and start iPhone 14 simulator with iOS version 16.4
+2. Build app and run tests
+    ```shell
+    yarn bundle:ios
+    yarn build:e2e:ios
+    yarn test:e2e:ios
+    ```
+
 ## Contribution
 Pull requests are welcome. Please open an issue first to discuss what you would like to change.
 

README.md

@@ -71,7 +71,7 @@ export default function App(): JSX.Element {
       <View style={styles.testPickerContainer}>{navigationBar}</View>
 
       <View
-        testID={`${currentTest.testId}-view`}
+        accessibilityLabel={`${currentTest.testId}-view`}
         key={currentTest.title + iteration}
         style={styles.exampleContainer}
       >

example/App.tsx

@@ -0,0 +1,18 @@
+import { config as commonConfig } from './common.conf';
+
+export const config: WebdriverIO.Config = {
+  ...commonConfig,
+  capabilities: [
+    {
+      platformName: 'Android',
+      maxInstances: 1,
+      'appium:deviceName': 'Android Emulator',
+      'appium:app':
+        'example/android/app/build/outputs/apk/release/app-release.apk',
+      'appium:automationName': 'UiAutomator2',
+      'appium:newCommandTimeout': 240,
+      'appium:appWaitActivity':
+        'com.microsoft.reacttestapp.component.ComponentActivity',
+    },
+  ],
+};

example/__tests__/App.js

@@ -0,0 +1,36 @@
+import { commands as cmd } from './commands';
+import testCases from '../examples/tests';
+
+describe('Async Storage functional tests', () => {
+  it('should be visible', async () => {
+    // wait until content loads, as android's waitForSelectorTimeout setting does not seem to work
+    await new Promise((r) => setTimeout(r, 3000));
+    const el = await cmd.elementByLabel('functional-view');
+    await expect(await el.isExisting()).toEqual(true);
+  });
+
+  const testNames = Object.keys(testCases);
+  describe('storing / reading values', () => {
+    for (const name of testNames) {
+      it(name, async () => {
+        const el = await cmd.elementByLabel(`test:${name}`);
+        await expect(await el.getText()).toEqual('Pass');
+      });
+    }
+  });
+
+  describe('storing / reading values with delegate', () => {
+    for (const currentName of testNames) {
+      const name = currentName + ' with delegate';
+      it(name, async () => {
+        const el = await cmd.elementByLabel(`test:${name}`);
+        const label = await el.getText();
+        if (label === 'Skip') {
+          return;
+        }
+
+        expect(label).toEqual('Pass');
+      });
+    }
+  });
+});

example/__tests__/android.conf.ts

@@ -0,0 +1,10 @@
+const testAppId = 'com.microsoft.ReactTestApp';
+import { browser } from '@wdio/globals';
+
+export const commands = {
+  restartApp: async () => {
+    await browser.terminateApp(testAppId);
+    await browser.activateApp(testAppId);
+  },
+  elementByLabel: async (id: string) => await $(`~${id}`),
+};