[WIP]ci: use detox for ui test, opt code

README.MD

@@ -12,8 +12,8 @@
   [![stars](https://img.shields.io/github/stars/jimmydaddy/react-native-image-marker?logo=github&style=for-the-badge)](https://github.com/JimmyDaddy/react-native-image-marker) [![forks](https://img.shields.io/github/forks/jimmydaddy/react-native-image-marker?logo=github&style=for-the-badge)](https://github.com/JimmyDaddy/react-native-image-marker/fork)
   [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?logo=github&style=for-the-badge)](https://github.com/JimmyDaddy/react-native-image-marker/pulls) ![license](https://img.shields.io/npm/l/react-native-image-marker?style=for-the-badge)
   [![github](https://img.shields.io/badge/github-repo-blue?logo=github&style=for-the-badge)](https://github.com/JimmyDaddy/react-native-image-marker)
-  [![CI](https://github.com/JimmyDaddy/react-native-image-marker/actions/workflows/ci.yml/badge.svg)](https://github.com/JimmyDaddy/react-native-image-marker/actions/workflows/ci.yml)
-  ![platform-iOS](https://img.shields.io/badge/iOS-black?logo=Apple&style=for-the-badge) ![platform-Android](https://img.shields.io/badge/Android-black?logo=Android&style=for-the-badge)
+  [![CI](https://img.shields.io/github/actions/workflow/status/jimmydaddy/react-native-image-marker/ci.yml?style=for-the-badge)](https://github.com/JimmyDaddy/react-native-image-marker/actions/workflows/ci.yml)
+  ![platform-iOS](https://img.shields.io/badge/iOS-gray?logo=Apple&style=for-the-badge) ![platform-Android](https://img.shields.io/badge/Android-gray?logo=Android&style=for-the-badge)
   <br/>
 
 </div>

example/.detoxrc.js

@@ -0,0 +1,83 @@
+/** @type {Detox.DetoxConfig} */
+module.exports = {
+  testRunner: {
+    args: {
+      '$0': 'jest',
+      config: 'e2e/jest.config.js'
+    },
+    jest: {
+      setupTimeout: 120000
+    }
+  },
+  apps: {
+    'ios.debug': {
+      type: 'ios.app',
+      binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/ImageMarkerExample.app',
+      build: 'xcodebuild -workspace ios/ImageMarkerExample.xcworkspace -scheme ImageMarkerExample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build'
+    },
+    'ios.release': {
+      type: 'ios.app',
+      binaryPath: 'ios/build/Build/Products/Release-iphonesimulator/ImageMarkerExample.app',
+      build: 'xcodebuild -workspace ios/ImageMarkerExample.xcworkspace -scheme ImageMarkerExample -configuration Release -sdk iphonesimulator -derivedDataPath ios/build'
+    },
+    'android.debug': {
+      type: 'android.apk',
+      binaryPath: 'android/app/build/outputs/apk/debug/app-debug.apk',
+      build: 'cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug',
+      reversePorts: [
+        8081
+      ]
+    },
+    'android.release': {
+      type: 'android.apk',
+      binaryPath: 'android/app/build/outputs/apk/release/app-release.apk',
+      build: 'cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release'
+    }
+  },
+  devices: {
+    simulator: {
+      type: 'ios.simulator',
+      device: {
+        type: 'iPhone 15'
+      }
+    },
+    attached: {
+      type: 'android.attached',
+      device: {
+        adbName: '.*'
+      }
+    },
+    emulator: {
+      type: 'android.emulator',
+      device: {
+        avdName: 'Pixel_XL_API_34'
+      }
+    }
+  },
+  configurations: {
+    'ios.sim.debug': {
+      device: 'simulator',
+      app: 'ios.debug'
+    },
+    'ios.sim.release': {
+      device: 'simulator',
+      app: 'ios.release'
+    },
+    'android.att.debug': {
+      device: 'attached',
+      app: 'android.debug'
+    },
+    'android.att.release': {
+      device: 'attached',
+      app: 'android.release'
+    },
+    'android.emu.debug': {
+      device: 'emulator',
+      app: 'android.debug'
+    },
+    'android.emu.release': {
+      device: 'emulator',
+      app: 'android.release'
+    }
+  }
+};

example/android/app/build.gradle

@@ -2,7 +2,7 @@ apply plugin: "com.android.application"
 apply plugin: "com.facebook.react"
 apply plugin: 'kotlin-android'
 
-def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["kotlin_version"]
+def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["ImageMarkerExample_kotlinVersion"]
 
 import com.android.build.OutputFile
 
@@ -103,6 +103,8 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
+        testBuildType System.getProperty('testBuildType', 'debug')
+        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
     }
 
     splits {
@@ -137,6 +139,7 @@ android {
             signingConfig signingConfigs.release
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            proguardFile "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro"
         }
     }
 
@@ -171,6 +174,10 @@ dependencies {
     androidTestImplementation 'androidx.test.ext:junit:1.1.5'
     androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
     implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+    androidTestImplementation('com.wix:detox:+')
+    implementation 'androidx.appcompat:appcompat:1.1.0'
+    implementation project(':react-native-vector-icons')
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")

example/android/app/src/androidTest/java/com/imagemarkerexample/DetoxTest.java

@@ -0,0 +1,29 @@
+package com.imagemarkerexample;
+
+import com.wix.detox.Detox;
+import com.wix.detox.config.DetoxConfig;
+
+import org.junit.Rule;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+import androidx.test.ext.junit.runners.AndroidJUnit4;
+import androidx.test.filters.LargeTest;
+import androidx.test.rule.ActivityTestRule;
+
+@RunWith(AndroidJUnit4.class)
+@LargeTest
+public class DetoxTest {
+  @Rule // (2)
+  public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class, false, false);
+
+  @Test
+  public void runDetoxTests() {
+    DetoxConfig detoxConfig = new DetoxConfig();
+    detoxConfig.idlePolicyConfig.masterTimeoutSec = 90;
+    detoxConfig.idlePolicyConfig.idleResourceTimeoutSec = 60;
+    detoxConfig.rnContextLoadTimeoutSec = (BuildConfig.DEBUG ? 180 : 60);
+
+    Detox.runTests(mActivityRule, detoxConfig);
+  }
+}

example/android/app/src/main/AndroidManifest.xml

@@ -8,6 +8,8 @@
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
+      android:networkSecurityConfig="@xml/network_security_config"
+      android:usesCleartextTraffic="true"
       android:theme="@style/AppTheme">
       <activity
         android:name=".MainActivity"

example/android/app/src/main/res/xml/network_security_config.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<network-security-config>
+  <domain-config cleartextTrafficPermitted="true">
+    <domain includeSubdomains="true">10.0.2.2</domain>
+    <domain includeSubdomains="true">localhost</domain>
+  </domain-config>
+</network-security-config>

example/android/build.gradle

@@ -1,7 +1,7 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
-  def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["kotlin_version"]
+  def kotlin_version = rootProject.ext.has("kotlinVersion") ? rootProject.ext.get("kotlinVersion") : project.properties["ImageMarkerExample_kotlinVersion"]
 
   ext {
         buildToolsVersion = "34.0.0"
@@ -21,6 +21,9 @@ buildscript {
         maven { url "https://repository.jboss.org/maven2" }
         maven { url 'https://maven.google.com' }
         maven { url 'https://maven.fabric.io/public' }
+        maven {
+            url("$rootDir/../node_modules/detox/Detox-android")
+        }
     }
     dependencies {
         classpath("com.android.tools.build:gradle")
@@ -29,4 +32,19 @@ buildscript {
     }
 }
 
+allprojects {
+  repositories {
+    google()
+    mavenCentral()
+    jcenter()
+    maven { url 'https://dl.google.com/dl/android/maven2' }
+    maven { url "https://repository.jboss.org/maven2" }
+    maven { url 'https://maven.google.com' }
+    maven { url 'https://maven.fabric.io/public' }
+    maven {
+      url("$rootDir/../node_modules/detox/Detox-android")
+    }
+  }
+}
+
 apply plugin: "com.facebook.react.rootproject"

example/android/gradle.properties

@@ -40,4 +40,4 @@ newArchEnabled=false
 # If set to false, you will be using JSC instead.
 hermesEnabled=true
 
-kotlin_version=1.8.0
+ImageMarkerExample_kotlinVersion=1.8.0

example/android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'ImageMarkerExample'
 apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
 include ':app'
-includeBuild('../node_modules/@react-native/gradle-plugin')
+includeBuild('../node_modules/@react-native/gradle-plugin')
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

example/babel.config.js

@@ -14,4 +14,9 @@ module.exports = {
       },
     ],
   ],
+  env: {
+    production: {
+      plugins: ['react-native-paper/babel'],
+    },
+  },
 };

example/e2e/App.test.js

@@ -0,0 +1,90 @@
+import { device, element, by, waitFor } from 'detox';
+import assert from 'power-assert';
+
+describe('e2e/App.test.js', () => {
+  beforeAll(async () => {
+    await device.launchApp();
+  });
+
+  beforeEach(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('should display correctly', async () => {
+    await expect(element(by.id('backgroundImageFormatLabel'))).toBeVisible();
+    await expect(element(by.id('backgroundImageFormatLabel'))).toHaveText(
+      'background image format:'
+    );
+
+    await expect(element(by.id('backgroundImageFormatBtn'))).toBeVisible();
+    await expect(element(by.id('backgroundImageFormatBtn'))).toHaveLabel(
+      'image'
+    );
+
+    await expect(element(by.id('watermarkTypeLabel'))).toBeVisible();
+    await expect(element(by.id('watermarkTypeLabel'))).toHaveText(
+      'watermark type:'
+    );
+
+    await expect(element(by.id('watermarkTypeBtn'))).toBeVisible();
+    await expect(element(by.id('watermarkTypeBtn'))).toHaveLabel('text');
+
+    await expect(element(by.id('exportResultFormatLabel'))).toBeVisible();
+    await expect(element(by.id('exportResultFormatLabel'))).toHaveText(
+      'export result format:'
+    );
+
+    await expect(element(by.id('exportResultFormatBtn'))).toBeVisible();
+    await expect(element(by.id('exportResultFormatBtn'))).toHaveLabel('png');
+
+    await expect(element(by.id('selectBgBtn'))).toBeVisible();
+    await expect(element(by.id('selectBgBtn'))).toHaveLabel('select bg');
+
+    // await expect(element(by.id('selectWatermarkBtn'))).toBeVisible();
+    // await expect(element(by.id('selectWatermarkBtn'))).toHaveLabel(
+    //   'select watermark'
+    // );
+
+    await expect(element(by.id('resultFileSizeLabel'))).toBeVisible();
+    await expect(element(by.id('resultFilePathLabel'))).toBeVisible();
+    if (device.getPlatform() === 'ios') {
+      const resultFileSizeLabel = await element(
+        by.id('resultFileSizeLabel')
+      ).getAttributes('text');
+
+      assert.ok(
+        /^result file size:\d+(.\d+)?\s(KB|MB)$/.test(resultFileSizeLabel.text)
+      );
+      const resultFilePathLabel = await element(
+        by.id('resultFilePathLabel')
+      ).getAttributes('text');
+      assert.ok(/^file path:.*\.png$/.test(resultFilePathLabel.text));
+    } else {
+      await expect(element(by.id('resultFileSizeLabel'))).toHaveLabel(
+        /^result file size:\d+(\.\d+)?\s(KB|MB)$/
+      );
+      await expect(element(by.id('resultFilePathLabel'))).toBeVisible();
+      await expect(element(by.id('resultFilePathLabel'))).toHaveText(
+        /^file path:.*\.png$/
+      );
+    }
+
+    await expect(element(by.id('resultImage'))).toBeVisible();
+  });
+
+  describe('when click backgroundImageFormatBtn', () => {
+    it('should display correctly', async () => {
+      await expect(element(by.id('backgroundImageFormatBtn'))).toHaveLabel(
+        'image'
+      );
+      await element(by.id('backgroundImageFormatBtn')).tap();
+      await waitFor(element(by.type('RCTModalHostView')))
+        .toBeVisible()
+        .withTimeout(2000);
+      await element(by.label('base64')).tap();
+      await expect(element(by.id('backgroundImageFormatBtn'))).toHaveLabel(
+        'base64'
+      );
+    });
+  });
+});

example/e2e/jest.config.js

@@ -0,0 +1,12 @@
+/** @type {import('@jest/types').Config.InitialOptions} */
+module.exports = {
+  rootDir: '..',
+  testMatch: ['<rootDir>/e2e/**/*.test.js'],
+  testTimeout: 120000,
+  maxWorkers: 1,
+  globalSetup: 'detox/runners/jest/globalSetup',
+  globalTeardown: 'detox/runners/jest/globalTeardown',
+  reporters: ['detox/runners/jest/reporter'],
+  testEnvironment: 'detox/runners/jest/testEnvironment',
+  verbose: true,
+};