test(e2e): use labels with i18n, don't hardcode (#647)

tests/e2e/basic.spec.ts

@@ -32,8 +32,8 @@ test('shows connect form if not connected', async ({ page, popup }) => {
 
 test.describe('should fail to connect if:', () => {
   test('invalid URL provided', async ({ background, popup, i18n }) => {
-    const inputFields = getPopupFields(popup);
-    const connectButton = await fillPopup(popup, {
+    const inputFields = getPopupFields(popup, i18n);
+    const connectButton = await fillPopup(popup, i18n, {
       walletAddressUrl: 'abc',
     });
 
@@ -51,9 +51,13 @@ test.describe('should fail to connect if:', () => {
     ).toEqual({ connected: false });
   });
 
-  test('invalid wallet address provided', async ({ background, popup }) => {
-    const inputFields = getPopupFields(popup);
-    const connectButton = await fillPopup(popup, {
+  test('invalid wallet address provided', async ({
+    background,
+    popup,
+    i18n,
+  }) => {
+    const inputFields = getPopupFields(popup, i18n);
+    const connectButton = await fillPopup(popup, i18n, {
       walletAddressUrl: 'https://example.com',
     });
 

tests/e2e/connect.spec.ts

@@ -35,7 +35,7 @@ test('connects with correct details provided', async ({
     privateKey: CONNECT_PRIVATE_KEY!,
     publicKey: CONNECT_PUBLIC_KEY!,
   };
-  await connectWallet(persistentContext, background, keyInfo, popup, {
+  await connectWallet(persistentContext, background, i18n, keyInfo, popup, {
     walletAddressUrl: CONNECT_WALLET_ADDRESS_URL!,
     amount: '10',
     recurring: false,

tests/e2e/connectAutoKeyTestWallet.spec.ts

@@ -16,6 +16,7 @@ test('Connect to test wallet with automatic key addition when not logged-in to w
   popup,
   persistentContext: context,
   background,
+  i18n,
 }) => {
   const username = process.env.WALLET_USERNAME!;
   const password = process.env.WALLET_PASSWORD!;
@@ -26,7 +27,7 @@ test('Connect to test wallet with automatic key addition when not logged-in to w
   const loginPageUrl = `https://rafiki.money/auth/login?callbackUrl=%2Fsettings%2Fdeveloper-keys`;
 
   const connectButton = await test.step('fill popup', async () => {
-    const connectButton = await fillPopup(popup, {
+    const connectButton = await fillPopup(popup, i18n, {
       walletAddressUrl,
       amount: '10',
       recurring: false,
@@ -49,7 +50,11 @@ test('Connect to test wallet with automatic key addition when not logged-in to w
     );
 
     expect(popup.getByTestId('connect-wallet-auto-key-consent')).toBeVisible();
-    await popup.getByRole('button', { name: 'Accept' }).click();
+    await popup
+      .getByRole('button', {
+        name: i18n.getMessage('connectWalletKeyService_label_consentAccept'),
+      })
+      .click();
   });
 
   page = await test.step('shows login page', async () => {

tests/e2e/fixtures/connected.ts

@@ -5,13 +5,13 @@ import { connectWallet, disconnectWallet, type Popup } from '../pages/popup';
 // With extension connected to the wallet.
 export const test = base.extend<{ page: Page }, { popup: Popup }>({
   popup: [
-    async ({ persistentContext: context, background, popup }, use) => {
+    async ({ persistentContext: context, background, popup, i18n }, use) => {
       const keyInfo = {
         keyId: process.env.CONNECT_KEY_ID!,
         privateKey: process.env.CONNECT_PRIVATE_KEY!,
         publicKey: process.env.CONNECT_PUBLIC_KEY!,
       };
-      await connectWallet(context, background, keyInfo, popup, {
+      await connectWallet(context, background, i18n, keyInfo, popup, {
         walletAddressUrl: process.env.CONNECT_WALLET_ADDRESS_URL!,
         amount: '10',
         recurring: false,

tests/e2e/helpers/testWallet.ts

@@ -1,6 +1,7 @@
 import type { BrowserContext, Page } from '@playwright/test';
 import {
   loadKeysToExtension,
+  type BrowserIntl,
   type Background,
   type KeyInfo,
 } from '../fixtures/helpers';
@@ -13,13 +14,14 @@ const CONFIG_OPEN_PAYMENTS_REDIRECT_URL = `https://webmonetization.org/welcome`;
 export async function connectWallet(
   context: BrowserContext,
   background: Background,
+  i18n: BrowserIntl,
   keyInfo: KeyInfo,
   popup: Popup,
   params: ConnectDetails,
 ) {
   await loadKeysToExtension(background, keyInfo);
 
-  const connectButton = await fillPopup(popup, params);
+  const connectButton = await fillPopup(popup, i18n, params);
   await connectButton.click();
 
   const continueWaitMs = await getContinueWaitTime(context, params);

tests/e2e/pages/popup.ts

@@ -1,5 +1,5 @@
 import type { BrowserContext } from '@playwright/test';
-import type { BrowserInfo } from '../fixtures/helpers';
+import type { BrowserIntl, BrowserInfo } from '../fixtures/helpers';
 
 export type Popup = Awaited<ReturnType<typeof openPopup>>;
 
@@ -59,8 +59,12 @@ export type ConnectDetails = {
   recurring: boolean;
 };
 
-export async function fillPopup(popup: Popup, params: Partial<ConnectDetails>) {
-  const fields = getPopupFields(popup);
+export async function fillPopup(
+  popup: Popup,
+  i18n: BrowserIntl,
+  params: Partial<ConnectDetails>,
+) {
+  const fields = getPopupFields(popup, i18n);
   if (typeof params.walletAddressUrl !== 'undefined') {
     await fields.walletAddressUrl.fill(params.walletAddressUrl);
     await fields.walletAddressUrl.blur();
@@ -77,11 +81,19 @@ export async function fillPopup(popup: Popup, params: Partial<ConnectDetails>) {
   return fields.connectButton;
 }
 
-export function getPopupFields(popup: Popup) {
+export function getPopupFields(popup: Popup, i18n: BrowserIntl) {
   return {
-    walletAddressUrl: popup.getByLabel('Enter wallet address/payment pointer'),
-    amount: popup.getByLabel('Amount', { exact: true }),
-    recurring: popup.getByLabel('Renew monthly'),
-    connectButton: popup.locator('button').getByText('Connect'),
+    walletAddressUrl: popup.getByLabel(
+      i18n.getMessage('connectWallet_label_walletAddress'),
+    ),
+    amount: popup.getByLabel(i18n.getMessage('connectWallet_label_amount'), {
+      exact: true,
+    }),
+    recurring: popup.getByLabel(
+      i18n.getMessage('connectWallet_label_recurring'),
+    ),
+    connectButton: popup
+      .locator('button')
+      .getByText(i18n.getMessage('connectWallet_action_connect')),
   };
 }