From e3bf65aa5a070a0c2b5490d422b70e462090b25b Mon Sep 17 00:00:00 2001
From: Arthur Geron <3487334+arthurgeron@users.noreply.github.com>
Date: Fri, 28 Jun 2024 15:49:56 -0300
Subject: [PATCH] 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.
---
 .changeset/new-cars-explain.md                 |  6 ++++++
 .../components/AssetsAmount/AssetsAmount.tsx   |  4 +++-
 .../TxRecipientCard/TxRecipientCard.tsx        |  8 +++++++-
 .../playwright/e2e/DepositHalfEth.test.ts      | 10 ++++++++++
 .../e2e/ForwardAndMintMulticall.test.ts        | 10 ++++++++++
 .../playwright/e2e/ForwardCustomAsset.test.ts  | 10 ++++++++++
 .../playwright/e2e/ForwardEth.test.ts          | 10 ++++++++++
 .../e2e/ForwardHalfAndExternalMint.test.ts     | 10 ++++++++++
 .../playwright/e2e/ForwardHalfAndMint.test.ts  | 10 ++++++++++
 .../e2e/ForwardHalfCustomAsset.test.ts         | 15 ++++++++++++++-
 .../playwright/e2e/MintAsset.test.ts           | 10 ++++++++++
 .../playwright/e2e/utils/elements.ts           | 18 ++++++++++++++++++
 .../playwright/e2e/utils/index.ts              |  1 +
 13 files changed, 119 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/new-cars-explain.md
 create mode 100644 packages/e2e-contract-tests/playwright/e2e/utils/elements.ts

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) => {
         ) : (
           <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
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 = ({
             </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
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';