tests: add backup reminder banner test.

frontends/web/playwright.config.ts

@@ -17,7 +17,7 @@ export default defineConfig({
       timeout: 120_000,
     },
   ],
-  timeout: 120_000,
+  timeout: 180_000,
   workers: 1, // Tests are not parallel-safe yet.
   use: {
     baseURL: `http://${HOST}:${FRONTEND_PORT}`,

frontends/web/src/components/amount/amount-with-unit.tsx

@@ -104,7 +104,7 @@ export const AmountUnit = ({ rotateUnit, unit }: TAmountUnitProps) => {
   const classRototable = rotateUnit ? (style.rotatable || '') : '';
   const textStyle = `${style.unit || ''} ${classRototable}`;
   return (
-    <span className={textStyle} onClick={rotateUnit}>
+    <span data-testid={`amount-unit-${unit}`} className={textStyle} onClick={rotateUnit}>
       {unit}
     </span>
   );

frontends/web/src/components/copy/Copy.tsx

@@ -27,10 +27,11 @@ type TProps = {
   className?: string;
   disabled?: boolean;
   flexibleHeight?: boolean;
+  name?: string;
   value: string;
 };
 
-export const CopyableInput = ({ alignLeft, alignRight, borderLess, value, className, disabled, flexibleHeight }: TProps) => {
+export const CopyableInput = ({ alignLeft, alignRight, borderLess, value, className, disabled, flexibleHeight, name }: TProps) => {
   const [success, setSuccess] = useState(false);
   const { t } = useTranslation();
 
@@ -68,6 +69,7 @@ export const CopyableInput = ({ alignLeft, alignRight, borderLess, value, classN
     }
   };
 
+
   return (
     <div className={[
       'flex flex-row flex-start flex-items-start',
@@ -81,6 +83,7 @@ export const CopyableInput = ({ alignLeft, alignRight, borderLess, value, classN
         value={value}
         ref={textAreaRef}
         rows={1}
+        {...(name ? { name } : {})}
         className={[
           style.inputField,
           flexibleHeight && style.flexibleHeight,

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

@@ -324,7 +324,11 @@ export const Receive = ({
                           <p>{t('receive.verifyInstruction')}</p>
                         </div>
                         <div className="m-bottom-half">
-                          <CopyableInput value={address} flexibleHeight />
+                          <CopyableInput
+                            value={address}
+                            name="receive-address"
+                            flexibleHeight
+                          />
                         </div>
                       </>
                     )}

frontends/web/tests/banner.test.ts

@@ -0,0 +1,126 @@
+/**
+*  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 { expect, Page } from '@playwright/test';
+import { test } from './helpers/fixtures';
+import { ServeWallet } from './helpers/servewallet';
+import { launchRegtest, setupRegtestWallet, sendCoins, mineBlocks, cleanupRegtest } from './helpers/regtest';
+import { ChildProcess } from 'child_process';
+
+let servewallet: ServeWallet;
+let regtest: ChildProcess;
+
+test('Backup reminder banner is shown when currency is > 1000', async ({ page, host, frontendPort, servewalletPort }) => {
+
+
+  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, { regtest: true, testnet: false });
+    await servewallet.start();
+  });
+
+  let recvAdd: string;
+  await test.step('Grab receive address', async () => {
+    await page.getByRole('button', { name: 'Test wallet' }).click();
+    await page.getByRole('button', { name: 'Unlock' }).click();
+    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('[name="receive-address"]');
+    recvAdd = await addressLocator.inputValue();
+    console.log(`Receive address: ${recvAdd}`);
+  });
+
+  await test.step('Verify that the backup banner is NOT shown initially', async () => {
+    await page.goto('/');
+    await verifyBackupBanner(page, undefined, false);
+  });
+
+  await test.step('Send RBTC to receive address', async () => {
+    await page.waitForTimeout(2000);
+    const sendAmount = '10';
+    sendCoins(recvAdd, sendAmount);
+    mineBlocks(12);
+  });
+
+  await test.step('Verify that the backup banner is shown with the correct currency', async () => {
+    await page.goto('/');
+    await page.waitForTimeout(5000);
+    const units = ['USD', 'EUR', 'CHF'];
+    let currentIndex = 0;
+    // First, verify that the banner shows USD by default.
+    await verifyBackupBanner(page, units[currentIndex]!);
+
+    // Then, cycle through the currency units and verify the banner updates accordingly.
+    for (let i = 0; i < units.length; i++) {
+      await page.locator(`header [data-testid="amount-unit-${units[currentIndex]!}"]`).click();
+      const nextIndex = (currentIndex + 1) % units.length;
+      await page.waitForTimeout(1000); // wait for the UI to update
+      await verifyBackupBanner(page, units[nextIndex]!);
+      currentIndex = nextIndex;
+    }
+  });
+});
+
+// Helper function to verify the banner presence or absence
+async function verifyBackupBanner(
+  page: Page,
+  expectedCurrency?: string,
+  shouldExist = true
+) {
+  await test.step(
+    shouldExist
+      ? `Verify that the backup banner is shown for ${expectedCurrency!}`
+      : 'Verify that the backup banner is NOT shown',
+    async () => {
+      const textContent = await page.textContent('body');
+
+      if (shouldExist) {
+        if (!expectedCurrency) {
+          throw new Error('Currency must be provided when expecting banner.');
+        }
+
+        const regex = new RegExp(
+          `Your wallet\\s+Software keystore [a-f0-9]+\\s+passed ${expectedCurrency} 1[’,']000\\.00!`
+        );
+        expect(textContent).toMatch(regex);
+
+        expect(textContent).toContain(
+          'We recommend creating a paper backup for extra protection. It\'s quick and simple.'
+        );
+      } else {
+        // Check that the banner text is NOT present
+        const bannerRegex = /Your wallet Software keystore [a-f0-9]+ passed [A-Z]{3} 1,000\.00!/;
+        expect(textContent).not.toMatch(bannerRegex);
+        expect(textContent).not.toContain(
+          'We recommend creating a paper backup for extra protection. It\'s quick and simple.'
+        );
+      }
+    }
+  );
+}
+
+test.afterAll(async () => {
+  await servewallet.stop();
+  await cleanupRegtest(regtest);
+});

frontends/web/tests/base.test.ts

@@ -17,6 +17,7 @@
 import { test } from './helpers/fixtures';
 import { ServeWallet } from './helpers/servewallet';
 import { expect } from '@playwright/test';
+import { deleteAccountsFile, deleteConfigFile } from './helpers/fs';
 
 let servewallet: ServeWallet;
 
@@ -31,10 +32,16 @@ test('App main page loads', async ({ page, host, frontendPort, servewalletPort }
   await test.step('Navigate to the app', async () => {
     await page.goto(`http://${host}:${frontendPort}`);
     const body = page.locator('body');
-    await expect(body).toContainText('Please connect your BitBox and tap the side to continue.');
+    await expect(body).toContainText('Please connect your BitBox and tap the side to continue.'),
+    { timeout: 15000 };
   });
 });
 
-test.afterAll(() => {
-  servewallet.stop();
+test.beforeAll(async () => {
+  deleteAccountsFile();
+  deleteConfigFile();
+});
+
+test.afterAll(async () => {
+  await servewallet.stop();
 });

frontends/web/tests/helpers/dom.ts

@@ -16,18 +16,6 @@
 
 import { Page, Locator, expect } from '@playwright/test';
 
-/**
- * Returns a locator for elements matching a given attribute key/value pair.
- *
- * @param page - Playwright page
- * @param attrKey - The attribute key to select (e.g., "data-label")
- * @param attrValue - The value of the attribute to match
- * @returns Locator for matching elements
- */
-export function getFieldsByAttribute(page: Page, attrKey: string, attrValue: string): Locator {
-  return page.locator(`[${attrKey}="${attrValue}"]`);
-}
-
 /**
  * Finds elements by attribute key/value and asserts the expected count.
  *
@@ -42,7 +30,7 @@ export async function assertFieldsCount(
   attrValue: string,
   expectedCount: number
 ) {
-  const locator = getFieldsByAttribute(page, attrKey, attrValue);
+  const locator = page.locator(`[${attrKey}="${attrValue}"]`);
   await expect(locator).toHaveCount(expectedCount);
 }