feat: validate asset names during e2e contract tests (#1319)

- Added aria labels to Recipient Sender and Asset Name on transaction approval screen; - Create util for checking text content on multiple aria labels; - Validate all asset names during e2e contract tests on the transaction approval screen, executes validation on all e2e contract test files.
FuelLabs · Jun 28, 2024 · e3bf65a · e3bf65a
1 parent f25e3da
commit e3bf65a
Show file tree

Hide file tree

Showing 13 changed files with 119 additions and 3 deletions.
diff --git a/.changeset/new-cars-explain.md 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
@@ -101,7 +101,9 @@ const AssetsAmountItem = ({ assetAmount }: AssetsAmountItemProps) => {
         ) : (
           <Avatar.Generated hash={assetId} size="xsm" />
         )}
-        <Text as="span">{name || 'Unknown'}</Text>
+        <Text as="span" aria-label="Asset Name">
+          {name || 'Unknown'}
+        </Text>
       </Box.Flex>
       <Copyable value={assetId} css={styles.address}>
         <Text fontSize="xs" css={{ mt: '$1' }}>

diff --git 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 = ({
             </Box>
           )}
           <Box.Flex css={styles.info}>
-            <Heading as="h6" css={styles.name}>
+            <Heading
+              as="h6"
+              css={styles.name}
+              aria-label={`${isReceiver ? 'Recipient' : 'Sender'} ${
+                isNetwork ? 'Address' : 'Name'
+              }`}
+            >
               {isNetwork ? address : name}
             </Heading>
             {!isNetwork && (

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,3 +1,4 @@
 export * from './transaction';
 export * from './contract';
 export * from './address';
+export * from './elements';