frontends/tests: add AOPP flow test.

Author: bznein

.github/workflows/playwright.yml

@@ -69,7 +69,6 @@ jobs:
           name: simulator-binary
           path: ./simulator-bin
 
-
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
@@ -85,6 +84,14 @@ jobs:
           cd frontends/web
           npx playwright install --with-deps chromium webkit
 
+      - name: Setup Python 3
+        uses: actions/setup-python@v4
+        with:
+          python-version: 3.11
+
+      - name: Install Python dependencies
+        run: |
+          pip install ecdsa
 
       - name: Restore executable permission
         run: chmod +x simulator-bin/simulator

frontends/web/src/components/aopp/aopp.tsx

@@ -226,11 +226,11 @@ export const Aopp = () => {
           </p>
           <Field>
             <Label>{t('aopp.labelAddress')}</Label>
-            <CopyableInput alignLeft flexibleHeight value={aopp.address} />
+            <CopyableInput alignLeft flexibleHeight value={aopp.address} dataTestId="aopp-address"/>
           </Field>
           <Field style={{ marginBottom: 0 }}>
             <Label>{t('aopp.labelMessage')}</Label>
-            <div className={styles.message}>
+            <div className={styles.message} data-testid="aopp-message">
               {aopp.message}
             </div>
           </Field>

frontends/web/src/routes/account/actionButtons.tsx

@@ -77,7 +77,7 @@ export const ActionButtons = ({ canSend, code, coinCode, exchangeSupported, acco
         primary
         to={`/account/${code}/receive`}
       >
-        <span>{t('generic.receiveWithoutCoinCode')}</span>
+        <span data-testid="receive-button">{t('generic.receiveWithoutCoinCode')}</span>
       </ButtonLink>
 
       {(exchangeSupported && !isMobile) && (

frontends/web/tests/aopp.test.ts

@@ -0,0 +1,220 @@
+/**
+*  Copyright 2025 Shift Crypto AG
+*
+*  Licensed under the Apache License, Version 2.0 (the "License");
+*  you may not use this file except in compliance with the License.
+*  You may obtain a copy of the License at
+*
+*       http://www.apache.org/licenses/LICENSE-2.0
+*
+*  Unless required by applicable law or agreed to in writing, software
+*  distributed under the License is distributed on an "AS IS" BASIS,
+*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*  See the License for the specific language governing permissions and
+*  limitations under the License.
+*/
+
+import { test } from './helpers/fixtures';
+import { expect } from '@playwright/test';
+import { ServeWallet } from './helpers/servewallet';
+import { launchRegtest, setupRegtestWallet, sendCoins, mineBlocks, cleanupRegtest } from './helpers/regtest';
+import { startSimulator, completeWalletSetupFlow, cleanFakeMemoryFiles } from './helpers/simulator';
+import { ChildProcess } from 'child_process';
+import { startAOPPServer, generateAOPPRequest } from './helpers/aopp';
+import { assertFieldsCount } from './helpers/dom';
+
+
+let servewallet: ServeWallet;
+let regtest: ChildProcess;
+let aoppServer: ChildProcess | undefined;
+let simulatorProc : ChildProcess | undefined;
+
+test('AOPP', async ({ page, host, frontendPort, servewalletPort }, testInfo) => {
+
+
+  await test.step('Start regtest and init wallet', async () => {
+    regtest = await launchRegtest();
+    // Give regtest some time to start
+    await new Promise((resolve) => setTimeout(resolve, 3000));
+    await setupRegtestWallet();
+  });
+
+
+  await test.step('Start servewallet', async () => {
+    servewallet = new ServeWallet(page, servewalletPort, frontendPort, host, testInfo.title, testInfo.project.name, { regtest: true, testnet: false, simulator: true });
+    await servewallet.start();
+  });
+
+  await test.step('Start simulator', async () => {
+    const simulatorPath = process.env.SIMULATOR_PATH;
+    if (!simulatorPath) {
+      throw new Error('SIMULATOR_PATH environment variable not set');
+    }
+
+    simulatorProc = startSimulator(simulatorPath, testInfo.title, testInfo.project.name, true);
+    console.log('Simulator started');
+  });
+
+
+  await test.step('Initialize wallet', async () => {
+    await completeWalletSetupFlow(page);
+  });
+
+  let recvAdd: string;
+  await test.step('Grab receive address', async () => {
+    await page.getByRole('link', { name: 'Bitcoin Regtest Bitcoin' }).click();
+    await page.getByRole('button', { name: 'Receive RBTC' }).click();
+    await page.getByRole('button', { name: 'Verify address on BitBox' }).click();
+    const addressLocator = page.locator('[data-testid="receive-address"]');
+    recvAdd = await addressLocator.inputValue();
+    console.log(`Receive address: ${recvAdd}`);
+  });
+
+  await test.step('Send RBTC to receive address', async () => {
+    await page.waitForTimeout(2000);
+    const sendAmount = '10';
+    await sendCoins(recvAdd, sendAmount);
+    await mineBlocks(12);
+    console.log(`Sent ${sendAmount} RBTC to ${recvAdd}`);
+  });
+
+
+  await test.step('Add second RBTC account', async () => {
+    await page.goto('/#/account-summary');
+    await page.getByRole('link', { name: 'Settings' }).click();
+    await page.getByRole('link', { name: 'Manage Accounts' }).click();
+    await page.getByRole('button', { name: 'Add account' }).click();
+    await page.getByRole('button', { name: 'Add account' }).click();
+    await expect(page.locator('body')).toContainText('Bitcoin Regtest 2 has now been added to your accounts.');
+    await page.getByRole('button', { name: 'Done' }).click();
+  });
+
+
+  await test.step('Grab receive address for second account', async () => {
+    await page.goto('/#/account-summary');
+    await page.getByRole('link', { name: 'Bitcoin Regtest 2' }).click();
+
+    await page.getByRole('button', { name: 'Receive RBTC' }).click();
+    await page.getByRole('button', { name: 'Verify address on BitBox' }).click();
+    const addressLocator = page.locator('[data-testid="receive-address"]');
+    recvAdd = await addressLocator.inputValue();
+    expect(recvAdd).toContain('bcrt1');
+    console.log(`Receive address: ${recvAdd}`);
+  });
+
+  await test.step('Send RBTC to receive address', async () => {
+    await page.waitForTimeout(2000);
+    const sendAmount = '10';
+    sendCoins(recvAdd, sendAmount);
+    mineBlocks(12);
+    console.log(`Sent ${sendAmount} RBTC to ${recvAdd}`);
+  });
+
+  let aoppRequest: string;
+  await test.step('Start AOPP server and generate AOPP request', async () => {
+    console.log('Starting AOPP server...');
+    aoppServer = await startAOPPServer();
+    console.log('AOPP server started.');
+    console.log('Generating AOPP request...');
+    aoppRequest = await generateAOPPRequest('rbtc');
+    console.log(`AOPP Request URI: ${aoppRequest}`);
+  });
+
+  await test.step('Kill the simulator', async () => {
+    // We kill the simulator so that we can verify that with no BB connected,
+    // the app shows "Address request in progress. Please connect your device to continue"
+    if (simulatorProc) {
+      simulatorProc.kill('SIGTERM');
+      simulatorProc = undefined;
+      console.log('Simulator killed.');
+    }
+  });
+
+  await test.step('Kill servewallet and restart with AOPP request', async () => {
+    await servewallet.stop();
+    console.log('Servewallet stopped.');
+    servewallet = new ServeWallet(page, servewalletPort, frontendPort, host, testInfo.title, testInfo.project.name, { regtest: true, testnet: false, simulator: true });
+    await servewallet.start({ extraFlags: { aoppUrl: aoppRequest } });
+    console.log('Servewallet restarted with AOPP request.');
+  });
+
+  await test.step('Address request in progress', async () => {
+    await page.goto('/');
+    const body = page.locator('body');
+    await expect(body).toContainText('localhost:8888 is requesting a receiving address');
+    await page.getByRole('button', { name: 'Continue' }).click();
+    await expect(body).toContainText('Address request in progress. Please connect your device to continue');
+  });
+
+  // Restart the simulator to continue the AOPP flow
+  await test.step('Restart simulator to continue AOPP flow', async () => {
+    const simulatorPath = process.env.SIMULATOR_PATH;
+    if (!simulatorPath) {
+      throw new Error('SIMULATOR_PATH environment variable not set');
+    }
+
+    simulatorProc = startSimulator(simulatorPath, testInfo.title, testInfo.project.name, true);
+    console.log('Simulator restarted.');
+  });
+
+  let aoppAddress : string | null;
+  await test.step('Verify AOPP flow is in progress', async () => {
+    await page.goto('/');
+    const body = page.locator('body');
+
+    // Verify that we can select one of two accounts
+    await assertFieldsCount(page, 'id', 'account', 1);
+    const options = page.locator('select[id="account"] option');
+    await expect(options).toHaveCount(2);
+
+    // Select the first account.
+    await page.selectOption('#account', { index: 0 });
+
+    await page.getByRole('button', { name: 'Next' }).click();
+
+    // The simulator automatically accepts and signs the message request,
+    // so we should see the success message immediately.
+    await expect(body).toContainText('Address successfully sent');
+    await expect(body).toContainText('Proceed on localhost:8888');
+
+    const address = page.locator('[data-testid="aopp-address"]');
+    aoppAddress = await address.textContent();
+
+    const message = page.locator('[data-testid="aopp-message"]');
+    const messageValue = await message.textContent();
+    expect(messageValue).toContain('I confirm that I solely control this address.'); //TODO extract ID
+    await page.getByRole('button', { name: 'Done' }).click();
+  });
+
+
+  await test.step('Compare receive address with aopp address', async () => {
+    await page.goto('/');
+    await page.getByRole('link', { name: 'Bitcoin Regtest Bitcoin' }).click();
+    const receiveButton = page.locator('[data-testid="receive-button"]');
+    await receiveButton.click();
+    await page.getByRole('button', { name: 'Verify address on BitBox' }).click();
+    const addressLocator = page.locator('[data-testid="receive-address"]');
+    recvAdd = await addressLocator.inputValue();
+    console.log(`Receive address: ${recvAdd}`);
+    expect(recvAdd).toBe(aoppAddress);
+  });
+});
+
+
+// Ensure a clean state before running all tests.
+test.beforeAll(async () => {
+  cleanFakeMemoryFiles();
+});
+
+test.afterAll(async () => {
+  await servewallet.stop();
+  if (aoppServer) {
+    aoppServer.kill('SIGTERM');
+    aoppServer = undefined;
+  }
+  await cleanupRegtest(regtest);
+  if (simulatorProc) {
+    simulatorProc.kill('SIGTERM');
+    simulatorProc = undefined;
+  }
+});

frontends/web/tests/helpers/aopp.ts

@@ -0,0 +1,88 @@
+/**
+*  Copyright 2025 Shift Crypto AG
+*
+*  Licensed under the Apache License, Version 2.0 (the "License");
+*  you may not use this file except in compliance with the License.
+*  You may obtain a copy of the License at
+*
+*       http://www.apache.org/licenses/LICENSE-2.0
+*
+*  Unless required by applicable law or agreed to in writing, software
+*  distributed under the License is distributed on an "AS IS" BASIS,
+*  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+*  See the License for the specific language governing permissions and
+*  limitations under the License.
+*/
+
+import { spawn, ChildProcessByStdio } from 'child_process';
+import path from 'path';
+import type { Readable } from 'stream';
+
+/**
+ * Starts the AOPP server and waits until it prints its "ready" line.
+ * Returns the spawned child process.
+ */
+export async function startAOPPServer(): Promise<
+  ChildProcessByStdio<null, Readable, Readable>
+> {
+  const PROJECT_ROOT = process.env.GITHUB_WORKSPACE ||
+    path.resolve(__dirname, '../../../..');
+
+  const scriptPath = path.resolve(PROJECT_ROOT, 'frontends/web/tests/util/aopp/server.py');
+
+  const child = spawn('python3', ['-u', scriptPath], {
+    cwd: PROJECT_ROOT,
+    stdio: ['ignore', 'pipe', 'pipe'],
+    env: { ...process.env },
+  });
+
+  const readyMsg = 'Listening on localhost:8888';
+
+  await new Promise<void>((resolve, reject) => {
+    const onData = (data: Buffer) => {
+      const text = data.toString();
+      if (text.includes(readyMsg)) {
+        child.stdout.off('data', onData);
+        resolve();
+      }
+    };
+
+    const onError = (err: Error) => {
+      child.stdout.off('data', onData);
+      reject(err);
+    };
+
+    child.stdout.on('data', onData);
+    child.on('error', onError);
+  });
+
+  return child;
+}
+
+/**
+ * Perform a POST request to the AOPP server and return the cleaned `uri` string.
+ */
+export async function generateAOPPRequest(
+  asset: 'rbtc' | 'btc' | 'eth' | 'tbtc' = 'rbtc'
+): Promise<string> {
+  const allowed = ['rbtc', 'btc', 'eth', 'tbtc'] as const;
+  if (!allowed.includes(asset)) {
+    throw new Error(`Invalid asset: ${asset}. Allowed: ${allowed.join(', ')}`);
+  }
+
+  const url = `http://localhost:8888/generate?asset=${asset}`;
+
+  const res = await fetch(url, { method: 'POST' });
+
+  if (!res.ok) {
+    throw new Error(`AOPP server responded with ${res.status}`);
+  }
+
+  const json = await res.json();
+
+  if (!json.uri || typeof json.uri !== 'string') {
+    throw new Error('AOPP server returned unexpected JSON');
+  }
+
+  return json.uri;
+}