WALLET-412: Run UI-based tests in CI

.detoxrc.js

@@ -47,7 +47,7 @@ module.exports = {
       type: 'android.emulator',
       device: {
         avdName: process.env.TEST_ANDROID_EMU
-      }
+      },
     }
   },
   configurations: {
@@ -69,6 +69,23 @@ module.exports = {
     }
   },
   custom: {
-    defaultTestTimeout: 5000
+    defaultTestTimeout: 15000
+  },
+  artifacts: {
+    rootDir: "./screenshots/",
+    plugins: {
+      log: {"enabled": true},
+      uiHierarchy: {"enabled": true},
+      screenshot: {
+        keepOnlyFailedTestsArtifacts: false,
+        takeWhen: {
+          "testStart": true,
+          "testDone": true
+        }
+      },
+      video: {
+        enabled: true
+      }
+    }
   }
 };

.env.sample

@@ -8,3 +8,5 @@ TEST_IOS_SIM=<Name of the iOS simulator on your device>
 # e.g. 'Android_34' or 'Pixel_3a_API_34'
 TEST_ANDROID_EMU=<Name of the Android emulator on your device>
 SIGNING_CONFIG_PATH=/absolute/path/to/android-config/signing-config.gradle
+KEYSTORE_PATH=/absolute/path/to/wallet.keystore
+KEYSTORE_PASSWORD=<keystore password>

.github/workflows/ci.yml

@@ -41,4 +41,4 @@ jobs:
         uses: kitabisa/[email protected]
         with:
           host: ${{ secrets.SONARQUBE_HOST }}
-          login: ${{ secrets.SONARQUBE_DEV_INRUPT_COM_GITHUB_TOKEN }}
+          login: ${{ secrets.SONARQUBE_DEV_INRUPT_COM_GITHUB_TOKEN }}

.gitignore

@@ -28,3 +28,6 @@ expo-env.d.ts
 .env
 
 *.keystore
+
+# Folder where the UI tests get stored.
+screenshots/

README.md

@@ -64,14 +64,23 @@ keytool -genkeypair -v -storetype PKCS12 \
  -noprompt -dname "CN=wallet.example.com"
 ```
 
-Add the following to: `~/.gradle/gradle.properties` and update the placeholders.
+Add the following to: `.env` and update the placeholders.
 ```text
-WALLET_UPLOAD_STORE_FILE=<path>/inrupt-wallet-frontend/android/app/wallet.keystore
-WALLET_UPLOAD_STORE_PASSWORD=<keystore password>
-WALLET_UPLOAD_KEY_ALIAS=wallet
-WALLET_UPLOAD_KEY_PASSWORD=<keystore password>
+KEYSTORE_PATH=<path>/inrupt-wallet-frontend/android/app/wallet.keystore
+KEYSTORE_PASSWORD=<keystore password>
 ```
 
+#### Make the keystore available to CI
+
+In order to make the keystore available to CI, it has to be present in the repository secret.
+To 
+- Encrypting the keystore with a GPG key to get a Base64 representation: `gpg -c --armor wallet.keystore`
+- Create Github repository secrets:
+  - ENCRYPTED_KEYSTORE with the Base64-encoded encrypted keystore
+  - KEYSTORE_DECRYPTION_KEY with the GPG key
+  - KEYSTORE_PASSWORD with the keystore password
+- In CI, decrypt the keystore back: `gpg -d --passphrase "..." --batch wallet.keystore.asc > wallet.keystore`
+
 ## Running the application
 
 If you are going to run the application in an emulator or simulator, you need to build the development version using
@@ -104,7 +113,7 @@ The tests require access credentials for a Pod which will be used by this instan
 Make a copy of the provided `.env.sample` named `.env`, and replace placeholders with actual values
 specific to your setup.
 
-#### Running the tests on iOS
+### Running the tests on iOS
 
 To build the iOS wallet app in an iOS simulator, just run the following command:
 
@@ -134,7 +143,7 @@ Execute the command below to start Detox test on iOS.
 npx detox test --configuration=ios.sim.release
 ```
 
-#### Running the tests on Android
+### Running the tests on Android
 
 Ensure that a virtual device has been added to the Android emulator.
 

android-config/signing-config.gradle

@@ -1,11 +1,11 @@
 android {
   signingConfigs {
     release {
-      if (project.hasProperty('WALLET_UPLOAD_STORE_FILE')) {
-        storeFile file(WALLET_UPLOAD_STORE_FILE)
-        storePassword WALLET_UPLOAD_STORE_PASSWORD
-        keyAlias WALLET_UPLOAD_KEY_ALIAS
-        keyPassword WALLET_UPLOAD_KEY_PASSWORD
+      if (project.hasProperty('inrupt.wallet.frontend.keystore.file')) {
+        storeFile file(project.property('inrupt.wallet.frontend.keystore.file'))
+        storePassword project.property('inrupt.wallet.frontend.keystore.password')
+        keyAlias project.property('inrupt.wallet.frontend.key.alias')
+        keyPassword project.property('inrupt.wallet.frontend.key.password')
       }
     }
   }

e2e/pages/LoginPage.ts

@@ -19,6 +19,7 @@
 // SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 //
 import { by, element, expect, web } from "detox";
+
 import detoxConfig from "../../.detoxrc";
 import HomePage from "./HomePage";
 import PermissionPage from "./PermissionPage";
@@ -58,20 +59,18 @@ class LoginPage {
 
     // Perform login
     await expect(this.signInFormUsernameInput).toExist();
-    await this.signInFormUsernameInput.runScript(`(element) => {
-        element.value = "${username}";
-      }`);
+    await this.signInFormUsernameInput.replaceText(username);
 
     await expect(this.signInFormPasswordInput).toExist();
-    await this.signInFormPasswordInput.runScript(`(element) => {
-        element.value = "${password}";
-      }`);
+    await this.signInFormPasswordInput.replaceText(password);
 
-    await expect(this.signInSubmitButton).toExist();
-    await this.signInSubmitButton.runScript((buttonElement) => {
-      buttonElement.click();
+    await new Promise((resolve) => {
+      setTimeout(resolve, timeout * 5);
     });
 
+    await expect(this.signInSubmitButton).toExist();
+    await this.signInSubmitButton.tap();
+
     // Handle permission screen
     await new Promise((resolve) => {
       setTimeout(resolve, timeout);

e2e/pages/PermissionPage.ts

@@ -18,20 +18,21 @@
 // OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 // SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 //
+
+import { expect, web, by } from "detox";
+
 class PermissionPage {
   private continueButton: Detox.WebElement;
 
   constructor() {
     this.continueButton = web.element(
-      by.web.xpath('//button[text()="Continue"]')
+      by.web.cssSelector('button[data-testid="prompt-continue"]')
     );
   }
 
   async clickContinueButton() {
-    // await waitFor(this.continueButton).toExist().withTimeout(5000);
-    await this.continueButton.runScript((element: HTMLButtonElement) => {
-      element.click();
-    });
+    await expect(this.continueButton).toExist();
+    await this.continueButton.tap();
   }
 }
 

plugins/withSigningConfig.js

@@ -28,18 +28,48 @@ module.exports = function withSigningConfig(config) {
   // Add path to gradle signing snippet to gradle.properties.
   // This is then used by the android/app/build.gradle mod.
   withGradleProperties(config, async (gradleProps) => {
+    if (process.env.SIGNING_CONFIG_PATH === undefined) {
+      throw new Error("Missing environment variable SIGNING_CONFIG_PATH");
+    }
     gradleProps.modResults.push({
       type: "comment",
       value: "Path to the signing configuration gradle snippet",
     });
-    if (process.env.SIGNING_CONFIG_PATH === undefined) {
-      throw new Error("Missing environment variable SIGNING_CONFIG_PATH");
-    }
     gradleProps.modResults.push({
       type: "property",
       key: "inrupt.wallet.frontend.signing",
       value: process.env.SIGNING_CONFIG_PATH,
     });
+    if (process.env.KEYSTORE_PATH === undefined) {
+      throw new Error("Missing environment variable KEYSTORE_PATH");
+    }
+    if (process.env.KEYSTORE_PASSWORD === undefined) {
+      throw new Error("Missing environment variable KEYSTORE_PASSWORD");
+    }
+    gradleProps.modResults.push({
+      type: "comment",
+      value: "Keystore configuration for app signing.",
+    });
+    gradleProps.modResults.push({
+      type: "property",
+      key: "inrupt.wallet.frontend.keystore.file",
+      value: process.env.KEYSTORE_PATH,
+    });
+    gradleProps.modResults.push({
+      type: "property",
+      key: "inrupt.wallet.frontend.keystore.password",
+      value: process.env.KEYSTORE_PASSWORD,
+    });
+    gradleProps.modResults.push({
+      type: "property",
+      key: "inrupt.wallet.frontend.key.alias",
+      value: "wallet",
+    });
+    gradleProps.modResults.push({
+      type: "property",
+      key: "inrupt.wallet.frontend.key.password",
+      value: process.env.KEYSTORE_PASSWORD,
+    });
     return gradleProps;
   });
   // Append a block to android/app/build.gradle to reuse signing config