test(e2e): add tests for editing budget

src/background/services/wallet.ts

@@ -275,7 +275,7 @@ export class WalletService {
         existingGrants.oneTimeGrant.continue,
       );
       if (recurring) {
-        this.storage.set({
+        await this.storage.set({
           oneTimeGrant: null,
           oneTimeGrantSpentAmount: '0',
         });
@@ -286,7 +286,7 @@ export class WalletService {
         existingGrants.recurringGrant.continue,
       );
       if (!recurring) {
-        this.storage.set({
+        await this.storage.set({
           recurringGrant: null,
           recurringGrantSpentAmount: '0',
         });

src/pages/popup/components/Settings/Budget.tsx

@@ -170,7 +170,7 @@ const BudgetAmount = ({
         </div>
       </div>
       {renewDate && (
-        <p className="px-2 text-xs">
+        <p className="px-2 text-xs" data-testid="renew-date-msg">
           Your budget will renew on{' '}
           <time
             dateTime={renewDate.toISOString()}

src/pages/popup/pages/Home.tsx

@@ -55,34 +55,53 @@ const InfoBanner = () => {
   const rate = React.useMemo(() => {
     const r = Number(rateOfPay) / 10 ** walletAddress.assetScale;
     const roundedR = roundWithPrecision(r, walletAddress.assetScale);
+    return formatNumber(roundedR, walletAddress.assetScale, true);
+  }, [rateOfPay, walletAddress.assetScale]);
 
+  const rateFormatted = React.useMemo(() => {
     return formatCurrency(
-      formatNumber(roundedR, walletAddress.assetScale, true),
+      rate,
       walletAddress.assetCode,
       walletAddress.assetScale,
     );
-  }, [rateOfPay, walletAddress.assetCode, walletAddress.assetScale]);
+  }, [rate, walletAddress.assetCode, walletAddress.assetScale]);
 
   const remainingBalance = React.useMemo(() => {
     const val = Number(balance) / 10 ** walletAddress.assetScale;
     const rounded = roundWithPrecision(val, walletAddress.assetScale);
+    return formatNumber(rounded, walletAddress.assetScale, true);
+  }, [balance, walletAddress.assetScale]);
+
+  const remainingBalanceFormatted = React.useMemo(() => {
     return formatCurrency(
-      formatNumber(rounded, walletAddress.assetScale, true),
+      remainingBalance,
       walletAddress.assetCode,
       walletAddress.assetScale,
     );
-  }, [balance, walletAddress.assetCode, walletAddress.assetScale]);
+  }, [remainingBalance, walletAddress.assetCode, walletAddress.assetScale]);
 
   return (
     <div className="space-y-2 rounded-md bg-button-base p-4 text-white">
       <dl className="flex items-center justify-between px-10">
         <div className="flex flex-col-reverse items-center">
           <dt className="text-sm">Hourly rate</dt>
-          <dd className="font-medium tabular-nums">{rate}</dd>
+          <dd
+            className="font-medium tabular-nums"
+            data-testid="hourly-rate"
+            data-value={rate}
+          >
+            {rateFormatted}
+          </dd>
         </div>
         <div className="flex flex-col-reverse items-center">
           <dt className="text-sm">Balance</dt>
-          <dd className="font-medium tabular-nums">{remainingBalance}</dd>
+          <dd
+            className="font-medium tabular-nums"
+            data-testid="remaining-balance"
+            data-value={remainingBalance}
+          >
+            {remainingBalanceFormatted}
+          </dd>
         </div>
       </dl>
 

src/pages/shared/components/ui/Button.tsx

@@ -51,7 +51,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       variant,
       size,
       fullWidth,
-      loading,
+      loading = false,
       className,
       type = 'button',
       children,
@@ -67,6 +67,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           buttonVariants({ variant, size, fullWidth, loading }),
           className,
         )}
+        data-progress={loading.toString()}
         disabled={props.disabled ?? loading ?? false}
         aria-disabled={props.disabled ?? loading ?? false}
         {...props}

tests/e2e/connect.spec.ts

@@ -21,12 +21,7 @@ test('connects with correct details provided', async ({
 
   await expect(background).toHaveStorage({ connected: false });
 
-  const keyInfo = {
-    keyId: TEST_WALLET_KEY_ID,
-    privateKey: TEST_WALLET_PRIVATE_KEY,
-    publicKey: TEST_WALLET_PUBLIC_KEY,
-  };
-  await connectWallet(persistentContext, background, i18n, keyInfo, popup, {
+  await connectWallet(persistentContext, background, popup, i18n, {
     walletAddressUrl: TEST_WALLET_ADDRESS_URL,
     amount: '10',
     recurring: false,

tests/e2e/fixtures/connected.ts

@@ -6,12 +6,7 @@ import { connectWallet, disconnectWallet, type Popup } from '../pages/popup';
 export const test = base.extend<{ page: Page }, { popup: Popup }>({
   popup: [
     async ({ persistentContext: context, background, popup, i18n }, use) => {
-      const keyInfo = {
-        keyId: process.env.TEST_WALLET_KEY_ID,
-        privateKey: process.env.TEST_WALLET_PRIVATE_KEY,
-        publicKey: process.env.TEST_WALLET_PUBLIC_KEY,
-      };
-      await connectWallet(context, background, i18n, keyInfo, popup, {
+      await connectWallet(context, background, popup, i18n, {
         walletAddressUrl: process.env.TEST_WALLET_ADDRESS_URL,
         amount: '10',
         recurring: false,

tests/e2e/helpers/common.ts

@@ -1,4 +1,5 @@
 import type { BrowserContext, Page } from '@playwright/test';
+import type { WalletAddress } from '@interledger/open-payments';
 import type { ConnectDetails } from '../pages/popup';
 import { spy, type SpyFn } from 'tinyspy';
 import { getWalletInformation } from '@/shared/helpers';
@@ -32,7 +33,7 @@ export async function getContinueWaitTime(
     if (process.env.PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS !== '1') {
       return Promise.resolve(defaultWaitMs);
     }
-    const walletInfo = await getWalletInformation(params.walletAddressUrl);
+    const walletInfo = await getWalletInfoCached(params.walletAddressUrl);
     return await new Promise<number>((resolve) => {
       const authServer = new URL(walletInfo.authServer).href;
       context.on('requestfinished', async function intercept(req) {
@@ -60,6 +61,16 @@ export function playgroundUrl(...walletAddressUrls: string[]) {
   return url.href;
 }
 
+const walletInfoCache = new Map<string, Promise<WalletAddress>>();
+export function getWalletInfoCached(walletAddressUrl: string) {
+  if (walletInfoCache.has(walletAddressUrl)) {
+    return walletInfoCache.get(walletAddressUrl)!;
+  }
+  const walletInfoPromise = getWalletInformation(walletAddressUrl);
+  walletInfoCache.set(walletAddressUrl, walletInfoPromise);
+  return walletInfoPromise;
+}
+
 export async function setupPlayground(
   page: Page,
   ...walletAddressUrls: string[]

tests/e2e/helpers/testWallet.ts

@@ -15,13 +15,22 @@ export const LOGIN_PAGE_URL =
 export const API_URL_ORIGIN = 'https://api.wallet.interledger-test.dev';
 export const DEFAULT_CONTINUE_WAIT_MS = 1000;
 
+export const DEFAULT_KEY_INFO: KeyInfo = {
+  keyId: process.env.TEST_WALLET_KEY_ID,
+  privateKey: process.env.TEST_WALLET_PRIVATE_KEY,
+  publicKey: process.env.TEST_WALLET_PUBLIC_KEY,
+};
+
+/**
+ * @param keyInfo required if not using default {@linkcode params['walletAddressUrl']}
+ */
 export async function connectWallet(
   context: BrowserContext,
   background: Background,
-  i18n: BrowserIntl,
-  keyInfo: KeyInfo,
   popup: Popup,
+  i18n: BrowserIntl,
   params: ConnectDetails,
+  keyInfo: KeyInfo = DEFAULT_KEY_INFO,
 ) {
   await loadKeysToExtension(background, keyInfo);
 

tests/e2e/pages/popup.ts

@@ -93,7 +93,16 @@ export function getPopupFields(popup: Popup, i18n: BrowserIntl) {
   };
 }
 
-export async function sendOneTimePayment(popup: Popup, amount: string) {
+export async function sendOneTimePayment(
+  popup: Popup,
+  amount: string,
+  waitForComplete = false,
+) {
   await popup.getByRole('textbox').fill(amount);
   await popup.getByRole('button', { name: 'Send now' }).click();
+  if (waitForComplete) {
+    await popup.waitForSelector('button[data-progress="false"]', {
+      timeout: 10_000,
+    });
+  }
 }