test: Add Component View Tests for Send Flow (#26094)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
Sev1 issues addressed in this PR:

Test | Issue | What it covers
-- | -- | --
TRON send: selecting destination account updates selection and flow
moves forward | #22789 #23251| TRON send: choose recipient from list,
flow advances (no stuck on recipient list).
ERC-721 send: Amount screen shows enabled Continue and user can proceed
to Recipient | #12317 | ERC-721 send: Continue enabled on Amount, can go
to Recipient.
ERC-721 selected from Asset screen navigates to Recipient not Amount |
#19002 | Starting Send from Asset with ERC-721 opens Recipient (not
Amount).
Solana send Recipient screen does not show EVM contacts | #22205 |
Non-EVM (Solana) send: Recipient screen has no EVM contacts.
Recipient list renders each contact with avatar | #22806 | Each
Recipient list row (contacts) has the expected avatar.



## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.





<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk: changes are primarily new/updated tests and test
scaffolding, plus additive `testID` props used for automation with no
functional logic changes.
> 
> **Overview**
> Adds new component-view regression tests for the redesigned `Send`
flow, covering TRON recipient selection advancing the flow, ERC-721
navigation/Continue enablement, non-EVM recipient filtering (no EVM
contacts), and per-recipient avatar rendering.
> 
> To support these tests, introduces centralized Send `testID`
constants/helpers, adds `testID`s to NFT rows (now includes `tokenId`
for uniqueness) and recipient avatars, and expands component-view test
mocks/presets (Engine controller stubs, Snap `onAmountInput` validation
response, and reusable Send/TRON state overrides).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
ecc307b. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: davibroc

app/components/Views/confirmations/components/UI/nft/nft.tsx

@@ -29,8 +29,11 @@ export function Nft({ asset, onPress }: NftProps) {
     onPress(asset);
   }, [asset, onPress]);
 
+  const testID = `nft-${asset.name || asset.collectionName || 'NFT'}-${asset.tokenId}`;
+
   return (
     <Pressable
+      testID={testID}
       style={({ pressed }) =>
         tw.style(
           'w-full flex-row items-center justify-between py-2',

app/components/Views/confirmations/components/UI/recipient/recipient.tsx

@@ -89,7 +89,10 @@ export function Recipient({
       accessibilityRole="button"
     >
       <Box twClassName="flex-row items-center">
-        <Box twClassName="h-12 justify-center">
+        <Box
+          twClassName="h-12 justify-center"
+          testID={`recipient-avatar-${recipient.address}`}
+        >
           <Avatar
             variant={AvatarVariant.Account}
             type={accountAvatarType}

app/components/Views/confirmations/components/nft-list/nft-list.test.tsx

@@ -32,7 +32,7 @@ jest.mock('../UI/nft', () => {
       onPress: (asset: Nft) => void;
     }) => (
       <Pressable
-        testID={`nft-${asset.name || asset.tokenId}`}
+        testID={`nft-${asset.name || asset.collectionName || 'NFT'}-${asset.tokenId}`}
         onPress={() => onPress(asset)}
       >
         <Text>{asset.name || asset.tokenId}</Text>
@@ -95,30 +95,30 @@ describe('NftList', () => {
     it('renders nfts when provided', () => {
       const { getByTestId } = render(<NftList nfts={mockNfts} />);
 
-      expect(getByTestId('nft-Cool NFT #1')).toBeOnTheScreen();
-      expect(getByTestId('nft-Awesome NFT #2')).toBeOnTheScreen();
+      expect(getByTestId('nft-Cool NFT #1-1')).toBeOnTheScreen();
+      expect(getByTestId('nft-Awesome NFT #2-2')).toBeOnTheScreen();
     });
 
     it('renders empty list when no nfts provided', () => {
       const { queryByTestId } = render(<NftList nfts={[]} />);
 
-      expect(queryByTestId('nft-Cool NFT #1')).toBeNull();
-      expect(queryByTestId('nft-Awesome NFT #2')).toBeNull();
+      expect(queryByTestId('nft-Cool NFT #1-1')).toBeNull();
+      expect(queryByTestId('nft-Awesome NFT #2-2')).toBeNull();
     });
 
     it('renders single nft correctly', () => {
       const singleNft = [mockNfts[0]];
       const { getByTestId } = render(<NftList nfts={singleNft} />);
 
-      expect(getByTestId('nft-Cool NFT #1')).toBeOnTheScreen();
+      expect(getByTestId('nft-Cool NFT #1-1')).toBeOnTheScreen();
     });
   });
 
   describe('nft selection', () => {
     it('calls updateAsset and navigates to recipient screen when ERC721 nft is pressed', () => {
       const { getByTestId } = render(<NftList nfts={mockNfts} />);
 
-      fireEvent.press(getByTestId('nft-Cool NFT #1'));
+      fireEvent.press(getByTestId('nft-Cool NFT #1-1'));
 
       expect(mockUpdateAsset).toHaveBeenCalledWith(mockNfts[0]);
       expect(mockGotToSendScreen).toHaveBeenCalledWith(Routes.SEND.RECIPIENT);
@@ -134,14 +134,14 @@ describe('NftList', () => {
 
       const { getByTestId } = render(<NftList nfts={mockNfts} />);
 
-      fireEvent.press(getByTestId('nft-Cool NFT #1'));
+      fireEvent.press(getByTestId('nft-Cool NFT #1-1'));
       expect(mockUpdateTo).toHaveBeenCalledWith('');
     });
 
     it('calls updateAsset and navigates to amount screen when ERC1155 nft is pressed', () => {
       const { getByTestId } = render(<NftList nfts={mockNfts} />);
 
-      fireEvent.press(getByTestId('nft-Awesome NFT #2'));
+      fireEvent.press(getByTestId('nft-Awesome NFT #2-2'));
 
       expect(mockUpdateAsset).toHaveBeenCalledWith(mockNfts[1]);
       expect(mockGotToSendScreen).toHaveBeenCalledWith(Routes.SEND.AMOUNT);
@@ -158,7 +158,7 @@ describe('NftList', () => {
 
       const { getByTestId } = render(<NftList nfts={mockNfts} />);
 
-      fireEvent.press(getByTestId('nft-Cool NFT #1'));
+      fireEvent.press(getByTestId('nft-Cool NFT #1-1'));
 
       expect(mockCaptureAssetSelected).toHaveBeenCalledWith(mockNfts[0], '0');
     });
@@ -174,7 +174,7 @@ describe('NftList', () => {
 
       const { getByTestId } = render(<NftList nfts={mockNfts} />);
 
-      fireEvent.press(getByTestId('nft-Awesome NFT #2'));
+      fireEvent.press(getByTestId('nft-Awesome NFT #2-2'));
 
       expect(mockCaptureAssetSelected).toHaveBeenCalledWith(mockNfts[1], '1');
     });
@@ -184,10 +184,10 @@ describe('NftList', () => {
     it('shows only first 5 nfts initially', () => {
       const { queryByTestId } = render(<NftList nfts={manyNfts} />);
 
-      expect(queryByTestId('nft-NFT 0')).toBeOnTheScreen();
-      expect(queryByTestId('nft-NFT 4')).toBeOnTheScreen();
-      expect(queryByTestId('nft-NFT 5')).toBeNull();
-      expect(queryByTestId('nft-NFT 11')).toBeNull();
+      expect(queryByTestId('nft-NFT 0-0')).toBeOnTheScreen();
+      expect(queryByTestId('nft-NFT 4-4')).toBeOnTheScreen();
+      expect(queryByTestId('nft-NFT 5-5')).toBeNull();
+      expect(queryByTestId('nft-NFT 11-11')).toBeNull();
     });
 
     it('shows "Show more NFTs" button when there are more than 5 nfts', () => {
@@ -205,12 +205,12 @@ describe('NftList', () => {
     it('shows more nfts when "Show more NFTs" is pressed', () => {
       const { getByText, queryByTestId } = render(<NftList nfts={manyNfts} />);
 
-      expect(queryByTestId('nft-NFT 5')).toBeNull();
+      expect(queryByTestId('nft-NFT 5-5')).toBeNull();
 
       fireEvent.press(getByText('Show more NFTs'));
 
-      expect(queryByTestId('nft-NFT 5')).toBeOnTheScreen();
-      expect(queryByTestId('nft-NFT 9')).toBeOnTheScreen();
+      expect(queryByTestId('nft-NFT 5-5')).toBeOnTheScreen();
+      expect(queryByTestId('nft-NFT 9-9')).toBeOnTheScreen();
     });
 
     it('hides "Show more NFTs" button when all nfts are visible', () => {
@@ -236,13 +236,13 @@ describe('NftList', () => {
 
       fireEvent.press(getByText('Show more NFTs'));
 
-      expect(queryByTestId('nft-NFT 9')).toBeOnTheScreen();
-      expect(queryByTestId('nft-NFT 10')).toBeNull();
+      expect(queryByTestId('nft-NFT 9-9')).toBeOnTheScreen();
+      expect(queryByTestId('nft-NFT 10-10')).toBeNull();
 
       fireEvent.press(getByText('Show more NFTs'));
 
-      expect(queryByTestId('nft-NFT 14')).toBeOnTheScreen();
-      expect(queryByTestId('nft-NFT 15')).toBeNull();
+      expect(queryByTestId('nft-NFT 14-14')).toBeOnTheScreen();
+      expect(queryByTestId('nft-NFT 15-15')).toBeNull();
     });
   });
 });

app/components/Views/confirmations/components/send/RedesignedSendView.testIds.ts

@@ -1,4 +1,23 @@
 export const RedesignedSendViewSelectorsIDs = {
+  SEND_AMOUNT: 'send_amount',
+  EDIT_AMOUNT_KEYBOARD: 'edit-amount-keyboard',
+  PERCENTAGE_BUTTON_100: 'percentage-button-100',
   RECIPIENT_ADDRESS_INPUT: 'recipient-address-input',
   REVIEW_BUTTON: 'review-button',
-};
+} as const;
+
+/** TestID for recipient row (unselected). */
+export const getRecipientRowTestId = (address: string) =>
+  `recipient-${address}`;
+
+/** TestID for selected recipient row. */
+export const getSelectedRecipientTestId = (address: string) =>
+  `selected-${address}`;
+
+/** TestID for recipient row avatar. */
+export const getRecipientAvatarTestId = (address: string) =>
+  `recipient-avatar-${address}`;
+
+/** TestID for NFT row in asset list. Includes tokenId for uniqueness. */
+export const getNftRowTestId = (name: string, tokenId: string) =>
+  `nft-${name}-${tokenId}`;