diff --git a/.changeset/new-cars-explain.md b/.changeset/new-cars-explain.md new file mode 100644 index 000000000..076001558 --- /dev/null +++ b/.changeset/new-cars-explain.md @@ -0,0 +1,6 @@ +--- +"fuels-wallet": patch +--- + +- Added aria labels to Recipient Sender and Asset Name on transaction approval screen; +- Validate all asset names during e2e contract tests on the transaction approval screen diff --git a/packages/app/src/systems/Asset/components/AssetsAmount/AssetsAmount.tsx b/packages/app/src/systems/Asset/components/AssetsAmount/AssetsAmount.tsx index 68d1cc327..021c9df62 100644 --- a/packages/app/src/systems/Asset/components/AssetsAmount/AssetsAmount.tsx +++ b/packages/app/src/systems/Asset/components/AssetsAmount/AssetsAmount.tsx @@ -101,7 +101,9 @@ const AssetsAmountItem = ({ assetAmount }: AssetsAmountItemProps) => { ) : ( )} - {name || 'Unknown'} + + {name || 'Unknown'} + diff --git a/packages/app/src/systems/Transaction/components/TxRecipientCard/TxRecipientCard.tsx b/packages/app/src/systems/Transaction/components/TxRecipientCard/TxRecipientCard.tsx index 2303a4099..fd28dac91 100644 --- a/packages/app/src/systems/Transaction/components/TxRecipientCard/TxRecipientCard.tsx +++ b/packages/app/src/systems/Transaction/components/TxRecipientCard/TxRecipientCard.tsx @@ -76,7 +76,13 @@ export const TxRecipientCard: TxRecipientCardComponent = ({ )} - + {isNetwork ? address : name} {!isNetwork && ( diff --git a/packages/e2e-contract-tests/playwright/e2e/DepositHalfEth.test.ts b/packages/e2e-contract-tests/playwright/e2e/DepositHalfEth.test.ts index da147bdfc..f16904b14 100644 --- a/packages/e2e-contract-tests/playwright/e2e/DepositHalfEth.test.ts +++ b/packages/e2e-contract-tests/playwright/e2e/DepositHalfEth.test.ts @@ -12,6 +12,7 @@ import { MAIN_CONTRACT_ID } from './config'; import { test, useLocalCRX } from './test'; import { checkAddresses, + checkAriaLabelsContainsText, checkFee, connect, waitSuccessTransaction, @@ -59,6 +60,15 @@ test.describe('Deposit Half ETH', () => { const walletNotificationPage = await fuelWalletTestHelper.getWalletPopupPage(); + // Test if asset name is defined (not unknown) + checkAriaLabelsContainsText( + walletNotificationPage, + 'Asset Name', + 'Ethereum' + ); + // Test if sender name is defined (not unknown) + checkAriaLabelsContainsText(walletNotificationPage, 'Sender Name', ''); + // test forward asset name is shown await hasText(walletNotificationPage, 'Ethereum'); // test forward asset id is shown diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardAndMintMulticall.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardAndMintMulticall.test.ts index f0a1e4861..3ce0f4939 100644 --- a/packages/e2e-contract-tests/playwright/e2e/ForwardAndMintMulticall.test.ts +++ b/packages/e2e-contract-tests/playwright/e2e/ForwardAndMintMulticall.test.ts @@ -16,6 +16,7 @@ import { MAIN_CONTRACT_ID } from './config'; import { test, useLocalCRX } from './test'; import { checkAddresses, + checkAriaLabelsContainsText, checkFee, connect, waitSuccessTransaction, @@ -66,6 +67,15 @@ test.describe('Forward and Mint Multicall', () => { const walletNotificationPage = await fuelWalletTestHelper.getWalletPopupPage(); + // Test if asset name is defined (not unknown) + checkAriaLabelsContainsText( + walletNotificationPage, + 'Asset Name', + 'Ethereum' + ); + // Test if sender name is defined (not unknown) + checkAriaLabelsContainsText(walletNotificationPage, 'Sender Name', ''); + // test forward asset name is shown await hasText(walletNotificationPage, 'Ethereum'); // test forward asset id is shown diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardCustomAsset.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardCustomAsset.test.ts index e86512ead..70f311511 100644 --- a/packages/e2e-contract-tests/playwright/e2e/ForwardCustomAsset.test.ts +++ b/packages/e2e-contract-tests/playwright/e2e/ForwardCustomAsset.test.ts @@ -18,6 +18,7 @@ import { MAIN_CONTRACT_ID } from './config'; import { test, useLocalCRX } from './test'; import { checkAddresses, + checkAriaLabelsContainsText, checkFee, connect, waitSuccessTransaction, @@ -80,6 +81,15 @@ test.describe('Forward Custom Asset', () => { const walletNotificationPage = await fuelWalletTestHelper.getWalletPopupPage(); + // Test if asset name is defined (not unknown) + checkAriaLabelsContainsText( + walletNotificationPage, + 'Asset Name', + 'Ethereum' + ); + // Test if sender name is defined (not unknown) + checkAriaLabelsContainsText(walletNotificationPage, 'Sender Name', ''); + // test the asset name is shown await hasText(walletNotificationPage, 'Unknown', 0, 5000, true); diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardEth.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardEth.test.ts index 53d332e41..9615f9d39 100644 --- a/packages/e2e-contract-tests/playwright/e2e/ForwardEth.test.ts +++ b/packages/e2e-contract-tests/playwright/e2e/ForwardEth.test.ts @@ -12,6 +12,7 @@ import { MAIN_CONTRACT_ID } from './config'; import { test, useLocalCRX } from './test'; import { checkAddresses, + checkAriaLabelsContainsText, checkFee, connect, waitSuccessTransaction, @@ -57,6 +58,15 @@ test.describe('Forward Eth', () => { const walletNotificationPage = await fuelWalletTestHelper.getWalletPopupPage(); + // Test if asset name is defined (not unknown) + checkAriaLabelsContainsText( + walletNotificationPage, + 'Asset Name', + 'Ethereum' + ); + // Test if sender name is defined (not unknown) + checkAriaLabelsContainsText(walletNotificationPage, 'Sender Name', ''); + // test the asset name is shown await hasText(walletNotificationPage, 'Ethereum'); diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndExternalMint.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndExternalMint.test.ts index 58e4965fe..c954410bc 100644 --- a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndExternalMint.test.ts +++ b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndExternalMint.test.ts @@ -16,6 +16,7 @@ import { EXTERNAL_CONTRACT_ID, MAIN_CONTRACT_ID } from './config'; import { test, useLocalCRX } from './test'; import { checkAddresses, + checkAriaLabelsContainsText, checkFee, connect, waitSuccessTransaction, @@ -69,6 +70,15 @@ test.describe('Forward Half ETH and Mint External Custom Asset', () => { const walletNotificationPage = await fuelWalletTestHelper.getWalletPopupPage(); + // Test if asset name is defined (not unknown) + checkAriaLabelsContainsText( + walletNotificationPage, + 'Asset Name', + 'Ethereum' + ); + // Test if sender name is defined (not unknown) + checkAriaLabelsContainsText(walletNotificationPage, 'Sender Name', ''); + // test forward asset name is shown await hasText(walletNotificationPage, 'Ethereum'); // test forward asset id is shown diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndMint.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndMint.test.ts index cbfd2a7ce..b3f92270c 100644 --- a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndMint.test.ts +++ b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfAndMint.test.ts @@ -16,6 +16,7 @@ import { MAIN_CONTRACT_ID } from './config'; import { test, useLocalCRX } from './test'; import { checkAddresses, + checkAriaLabelsContainsText, checkFee, connect, waitSuccessTransaction, @@ -67,6 +68,15 @@ test.describe('Forward Half ETH and Mint Custom Asset', () => { const walletNotificationPage = await fuelWalletTestHelper.getWalletPopupPage(); + // Test if asset name is defined (not unknown) + checkAriaLabelsContainsText( + walletNotificationPage, + 'Asset Name', + 'Ethereum' + ); + // Test if sender name is defined (not unknown) + checkAriaLabelsContainsText(walletNotificationPage, 'Sender Name', ''); + // test forward asset name is shown await hasText(walletNotificationPage, 'Ethereum'); // test forward asset id is shown diff --git a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfCustomAsset.test.ts b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfCustomAsset.test.ts index 658b9b072..92871b8a3 100644 --- a/packages/e2e-contract-tests/playwright/e2e/ForwardHalfCustomAsset.test.ts +++ b/packages/e2e-contract-tests/playwright/e2e/ForwardHalfCustomAsset.test.ts @@ -16,7 +16,12 @@ import { testSetup, transferMaxBalance } from '../utils'; import { MAIN_CONTRACT_ID } from './config'; import { test, useLocalCRX } from './test'; -import { checkAddresses, connect, waitSuccessTransaction } from './utils'; +import { + checkAddresses, + checkAriaLabelsContainsText, + connect, + waitSuccessTransaction +} from './utils'; useLocalCRX(); test.describe('Forward Half Custom Asset', () => { @@ -77,6 +82,14 @@ test.describe('Forward Half Custom Asset', () => { const walletNotificationPage = await fuelWalletTestHelper.getWalletPopupPage(); + // Test if asset name is defined (not unknown) + checkAriaLabelsContainsText( + walletNotificationPage, + 'Asset Name', + 'Ethereum' + ); + // Test if sender name is defined (not unknown) + checkAriaLabelsContainsText(walletNotificationPage, 'Sender Name', ''); // test the forward asset name is shown await hasText(walletNotificationPage, 'Unknown', 0, 5000, true); // test forward asset id is correct diff --git a/packages/e2e-contract-tests/playwright/e2e/MintAsset.test.ts b/packages/e2e-contract-tests/playwright/e2e/MintAsset.test.ts index 265867094..00d93796b 100644 --- a/packages/e2e-contract-tests/playwright/e2e/MintAsset.test.ts +++ b/packages/e2e-contract-tests/playwright/e2e/MintAsset.test.ts @@ -16,6 +16,7 @@ import { MAIN_CONTRACT_ID } from './config'; import { test, useLocalCRX } from './test'; import { checkAddresses, + checkAriaLabelsContainsText, checkFee, connect, waitSuccessTransaction, @@ -131,6 +132,15 @@ test.describe('Mint Assets', () => { const walletNotificationPage = await fuelWalletTestHelper.getWalletPopupPage(); + // Test if asset name is defined (not unknown) + checkAriaLabelsContainsText( + walletNotificationPage, + 'Asset Name', + 'Ethereum' + ); + // Test if sender name is defined (not unknown) + checkAriaLabelsContainsText(walletNotificationPage, 'Sender Name', ''); + await hasText(walletNotificationPage, name); await hasText(walletNotificationPage, shortAddress(assetId), 0, 10000); // test mint amount is correct diff --git a/packages/e2e-contract-tests/playwright/e2e/utils/elements.ts b/packages/e2e-contract-tests/playwright/e2e/utils/elements.ts new file mode 100644 index 000000000..c5dbeae4e --- /dev/null +++ b/packages/e2e-contract-tests/playwright/e2e/utils/elements.ts @@ -0,0 +1,18 @@ +import type { Page } from '@playwright/test'; + +export async function checkAriaLabelsContainsText( + walletNotificationPage: Page, + ariaLabel: string, + text: string +) { + const locator = walletNotificationPage.locator(`[aria-label="${ariaLabel}"]`); + const count = await locator.count(); + + for (let i = 0; i < count; i++) { + if (text === '') { + expect(locator.nth(i).innerHTML()).not.toBe(''); + } else { + expect((await locator.nth(i).innerHTML()).includes(text)).toBeTruthy(); + } + } +} diff --git a/packages/e2e-contract-tests/playwright/e2e/utils/index.ts b/packages/e2e-contract-tests/playwright/e2e/utils/index.ts index 2e1ebb21a..5139f2ee1 100644 --- a/packages/e2e-contract-tests/playwright/e2e/utils/index.ts +++ b/packages/e2e-contract-tests/playwright/e2e/utils/index.ts @@ -1,3 +1,4 @@ export * from './transaction'; export * from './contract'; export * from './address'; +export * from './elements';