Add e2e tests

.github/workflows/on-push.yml

@@ -23,7 +23,7 @@ jobs:
 
   run-tests:
     needs: lint
-    runs-on: macos-12
+    runs-on: macos-13
     strategy:
       fail-fast: true
       matrix:
@@ -45,6 +45,10 @@ jobs:
           cache-dependency-path: |
             yarn.lock
             ${{ matrix.scheme }}/yarn.lock
+      - name: Setup xcode
+        uses: maxim-lobanov/setup-xcode@v1
+        with:
+          xcode-version: "15.0.1"
       - name: Install package node dependencies
         run: yarn install --immutable
       - name: Publish package locally
@@ -59,10 +63,33 @@ jobs:
         working-directory: ${{ matrix.scheme }}/ios
         run: ${{ matrix.pod_install_command }}
       - name: Build app
-        uses: sersoft-gmbh/xcodebuild-action@v3
+        working-directory: ${{ matrix.scheme }}
+        run: yarn build:tvos > build.log
+      - name: Extract outputh path
+        working-directory: ${{ matrix.scheme }}
+        run: |
+          path=$(grep -o '^Touch .*\.app' build.log | sed 's/Touch //')
+          echo "Extracted Path: $path"
+          echo "APP_PATH=$path" >> $GITHUB_ENV
+      - name: Install Appium
+        run: npm install -g appium
+      - name: Install Appium driver
+        run: appium driver install xcuitest
+      - name: Start Appium server
+        run: nohup appium server 2>&1 > "${{ matrix.scheme }}/appium.log" &
+      - name: Display appium logs
+        uses: webiny/[email protected]
         with:
-          workspace: ${{ matrix.scheme }}/ios/${{ matrix.scheme }}.xcworkspace
-          scheme: ${{ matrix.scheme }}-tvOS
-          destination: platform=TvOS Simulator,name=Apple TV
-          action: clean build
-          build-settings: CODE_SIGN_IDENTITY="" CODE_SIGNING_REQUIRED=NO
+          run: cat "${{ matrix.scheme }}/appium.log"
+      - name: Run End-to-End tests
+        working-directory: ${{ matrix.scheme }}
+        run: yarn test
+      # - name: Display path
+      #   run: 'echo "Extracted Path from Environment Variable: $APP_PATH"'
+      # uses: sersoft-gmbh/xcodebuild-action@v3
+      # with:
+      #   workspace: ${{ matrix.scheme }}/ios/${{ matrix.scheme }}.xcworkspace
+      #   scheme: ${{ matrix.scheme }}-tvOS
+      #   destination: platform=TvOS Simulator,name=Apple TV
+      #   action: clean build
+      #   build-settings: CODE_SIGN_IDENTITY="" CODE_SIGNING_REQUIRED=NO

FabricTvOSExample/e2e/TabBar.test.ts

@@ -0,0 +1,61 @@
+import {remote} from 'webdriverio';
+import {wdOpts} from './config';
+import {Driver} from './types';
+import {moveTo} from './utils';
+
+describe('TabBar', () => {
+  let driver: Driver;
+
+  beforeAll(async () => {
+    driver = await remote(wdOpts);
+  });
+
+  afterAll(async () => {
+    await driver.deleteSession();
+  });
+
+  it('Should contain the TabBar', async () => {
+    // Item 1 should be selected by default
+    const selectedItemText = await driver.$(
+      '//XCUIElementTypeStaticText[contains(@name, "Selected item")]',
+    );
+    expect(await selectedItemText.getAttribute('name')).toMatchInlineSnapshot(
+      `"Selected item: Item 1"`,
+    );
+
+    // There should only be one item
+    const tabBarItems = await driver.$$(
+      "//XCUIElementTypeButton[contains(@name, 'Item')]",
+    );
+    expect(tabBarItems).toHaveLength(1);
+    expect(await tabBarItems[0].getAttribute('name')).toBe('Item 1');
+
+    // Select and press Add button
+    const button = await driver.$(
+      '//XCUIElementTypeButton[@name="Add an item"]',
+    );
+    expect(selectedItemText.error).toBeUndefined();
+    await moveTo(button.elementId, 'Down', driver);
+    await button.click();
+
+    const updatedTabBarItems = await driver.$$(
+      "//XCUIElementTypeButton[contains(@name, 'Item')]",
+    );
+    expect(updatedTabBarItems).toHaveLength(2);
+    const [firstItem, secondItem] = updatedTabBarItems;
+
+    // Move focus to the Tab Bar
+    await moveTo(firstItem.elementId, 'Up', driver);
+
+    // Select second item
+    await moveTo(secondItem.elementId, 'Right', driver);
+
+    // Item 2 should be selected
+    const updatedSelectedItemText = await driver.$(
+      '//XCUIElementTypeStaticText[contains(@name, "Selected item")]',
+    );
+    expect(
+      await updatedSelectedItemText.getAttribute('name'),
+    ).toMatchInlineSnapshot(`"Selected item: Item 2"`);
+  });
+});

FabricTvOSExample/e2e/config.ts

@@ -0,0 +1,20 @@
+import {RemoteOptions} from 'webdriverio';
+
+const capabilities = {
+  platformName: 'tvOS',
+  'appium:automationName': 'XCUITest',
+  'appium:platformVersion': '17.0',
+  'appium:deviceName': 'Apple TV',
+  'appium:app': process.env.APP_PATH,
+  'appium:useNewWDA': false,
+  // wdaStartupRetries: '4',
+  // iosInstallPause: '8000',
+  // wdaStartupRetryInterval: '20000',
+};
+
+export const wdOpts: RemoteOptions = {
+  hostname: 'localhost',
+  port: 4723,
+  logLevel: 'info',
+  capabilities,
+};

FabricTvOSExample/e2e/types.ts

@@ -0,0 +1,3 @@
+import {remote} from 'webdriverio';
+
+export type Driver = Awaited<ReturnType<typeof remote>>;

FabricTvOSExample/e2e/utils.ts

@@ -0,0 +1,22 @@
+import {Driver} from './types';
+
+export async function moveTo(
+  targetId: string,
+  direction: 'Up' | 'Down' | 'Left' | 'Right',
+  driver: Driver,
+  maxSteps = 10,
+) {
+  let i = 0;
+  while (
+    i < maxSteps &&
+    ((await driver.getActiveElement()) as any).ELEMENT !== targetId
+  ) {
+    await driver.execute('mobile: pressButton', {name: direction});
+    i++;
+  }
+  if (i === maxSteps) {
+    throw new Error(
+      `Element with id ${targetId} could not be reached in ${maxSteps} steps using direction ${direction}`,
+    );
+  }
+}

FabricTvOSExample/jest.config.ts

@@ -0,0 +1,9 @@
+import type {JestConfigWithTsJest} from 'ts-jest';
+import {defaults as tsjPreset} from 'ts-jest/presets';
+
+const jestConfig: JestConfigWithTsJest = {
+  ...tsjPreset,
+  moduleFileExtensions: ['ts', 'js'],
+};
+
+export default jestConfig;

FabricTvOSExample/package.json

@@ -3,10 +3,10 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "build:tvos": "xcodebuild clean build -workspace ios/FabricTvOSExample.xcworkspace -scheme FabricTvOSExample-tvOS -destination 'platform=tvOS Simulator' CODE_SIGN_IDENTITY=\"\" CODE_SIGNING_REQUIRED=NO",
-    "start": "react-native start",
+    "build:tvos": "xcodebuild -workspace ios/FabricTvOSExample.xcworkspace -scheme FabricTvOSExample-tvOS -destination \"platform=TvOS Simulator,name=Apple TV\" CODE_SIGN_IDENTITY=\"\" CODE_SIGNING_REQUIRED=NO clean build",
+    "start": "react-native-tvos start",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "test": "jest"
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
   },
   "dependencies": {
     "expo": "^49.0.18",
@@ -27,21 +27,13 @@
     "@typescript-eslint/parser": "^5.37.0",
     "babel-jest": "^29.2.1",
     "eslint": "^8.19.0",
-    "jest": "^29.2.1",
+    "jest": "^29.7.0",
     "metro-react-native-babel-preset": "0.73.9",
     "prettier": "^2.4.1",
     "react-test-renderer": "18.2.0",
-    "typescript": "4.8.4"
-  },
-  "jest": {
-    "preset": "react-native",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ]
+    "ts-jest": "^29.1.1",
+    "ts-node": "^10.9.1",
+    "typescript": "4.8.4",
+    "webdriverio": "^8.23.4"
   }
 }