test: add swaps trending e2e tests (#27118)

## **Description**

Adds minimal SmokeTrade E2E coverage for Bridge Swap Trending Tokens
zero-state behavior as a follow-up to the feature PR to keep
implementation and test review separated.

Scope is intentionally narrow:
- Verifies zero-state trending section visibility and filter interaction
flow.
- Verifies row navigation behavior from trending list.
- Uses existing smoke framework/page-object patterns.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: Follow-up coverage for
#26620 (SWAPS-4038)

## **Manual testing steps**

```gherkin
Feature: Swap trending tokens smoke coverage

  Scenario: user validates bridge zero-state trending interactions
    Given the app is running with swap trending tokens enabled
    And the user is on the Swap screen in Bridge zero state

    When the user opens and applies trending filters
    Then the trending list reflects the selected filters

    When the user taps a trending token row
    Then the user is navigated to that token's asset details
```

## **Screenshots/Recordings**

### **Before**

N/A (test-only follow-up PR)

### **After**

N/A (test-only follow-up PR)

## **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
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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**
> Primarily adds/adjusts test code and refactors `testID` constants;
production behavior is unchanged aside from `testID` wiring, so risk is
low and limited to potential selector breakage in tests.
> 
> **Overview**
> Adds a new SmokeTrade Detox spec validating Bridge *zero-state*
trending tokens behavior end-to-end: feature-flagged enablement, filter
bottom sheets (price/time/network), token-row navigation to asset
details, and trending section hiding once a quote amount is entered.
> 
> Refactors trending token `testID`s out of `BridgeViewSelectorsIDs`
into a dedicated `BridgeTrendingTokensSectionTestIds` module, updates
`BridgeTrendingTokensSection` and related unit tests/mocks accordingly,
and introduces a `SwapTrendingTokensView` page object to drive the new
E2E flow.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
ffebb00. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: bfullam

app/components/UI/Bridge/Views/BridgeView/BridgeView.test.tsx

@@ -29,6 +29,7 @@ import { BridgeViewSelectorsIDs } from './BridgeView.testIds';
 import { MOCK_ENTROPY_SOURCE as mockEntropySource } from '../../../../../util/test/keyringControllerTestUtils';
 import { RootState } from '../../../../../reducers';
 import { mockQuoteWithMetadata } from '../../_mocks_/bridgeQuoteWithMetadata';
+import { BridgeTrendingTokensSectionTestIds } from '../../components/BridgeTrendingTokensSection/BridgeTrendingTokensSection.testIds';
 
 // Mock the account-tree-controller file that imports the problematic module
 jest.mock(
@@ -291,15 +292,15 @@ jest.mock(
   () => {
     const React = jest.requireActual('react');
     const { View } = jest.requireActual('react-native');
-    const { BridgeViewSelectorsIDs: BridgeViewTestIds } = jest.requireActual(
-      './BridgeView.testIds',
-    );
+    const TrendingTokensSectionTestIds = jest.requireActual(
+      '../../components/BridgeTrendingTokensSection/BridgeTrendingTokensSection.testIds',
+    ).BridgeTrendingTokensSectionTestIds;
 
     return {
       __esModule: true,
       default: () =>
         React.createElement(View, {
-          testID: BridgeViewTestIds.TRENDING_TOKENS_SECTION,
+          testID: TrendingTokensSectionTestIds.SECTION,
         }),
     };
   },
@@ -853,7 +854,7 @@ describe('BridgeView', () => {
       expect(queryByTestId('banneralert')).toBeNull();
       expect(queryByTestId('edit-slippage-button')).toBeNull();
       expect(
-        queryByTestId(BridgeViewSelectorsIDs.TRENDING_TOKENS_SECTION),
+        queryByTestId(BridgeTrendingTokensSectionTestIds.SECTION),
       ).toBeNull();
       expect(queryByText('Fetching quote')).toBeNull();
     });
@@ -929,7 +930,7 @@ describe('BridgeView', () => {
       });
       expect(queryByTestId('edit-slippage-button')).toBeNull();
       expect(
-        queryByTestId(BridgeViewSelectorsIDs.TRENDING_TOKENS_SECTION),
+        queryByTestId(BridgeTrendingTokensSectionTestIds.SECTION),
       ).toBeNull();
     });
 
@@ -967,7 +968,7 @@ describe('BridgeView', () => {
       });
       expect(getByTestId(BridgeViewSelectorsIDs.CONFIRM_BUTTON)).toBeTruthy();
       expect(
-        queryByTestId(BridgeViewSelectorsIDs.TRENDING_TOKENS_SECTION),
+        queryByTestId(BridgeTrendingTokensSectionTestIds.SECTION),
       ).toBeNull();
     });
 
@@ -1020,7 +1021,7 @@ describe('BridgeView', () => {
       );
 
       expect(
-        getByTestId(BridgeViewSelectorsIDs.TRENDING_TOKENS_SECTION),
+        getByTestId(BridgeTrendingTokensSectionTestIds.SECTION),
       ).toBeTruthy();
       expect(queryByTestId('edit-slippage-button')).toBeNull();
     });

app/components/UI/Bridge/Views/BridgeView/BridgeView.testIds.ts

@@ -6,11 +6,6 @@ export const BridgeViewSelectorsIDs = {
   CONFIRM_BUTTON: 'bridge-confirm-button',
   CONFIRM_BUTTON_KEYPAD: 'bridge-confirm-button-keypad',
   BRIDGE_VIEW_SCROLL: 'bridge-view-scroll',
-  TRENDING_TOKENS_SECTION: 'bridge-trending-tokens-section',
-  TRENDING_PRICE_FILTER: 'bridge-trending-price-filter',
-  TRENDING_NETWORK_FILTER: 'bridge-trending-network-filter',
-  TRENDING_TIME_FILTER: 'bridge-trending-time-filter',
-  TRENDING_SHOW_MORE: 'bridge-trending-show-more',
   QUOTE_DETAILS_SKELETON: 'bridge-quote-details-skeleton',
 } as const;
 

app/components/UI/Bridge/components/BridgeTrendingTokensSection/BridgeTrendingTokensSection.test.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import BridgeTrendingTokensSection from './BridgeTrendingTokensSection';
 import { useTokenListFilters } from '../../../Trending/hooks/useTokenListFilters/useTokenListFilters';
 import { useTrendingRequest } from '../../../Trending/hooks/useTrendingRequest/useTrendingRequest';
+import { BridgeTrendingTokensSectionTestIds } from './BridgeTrendingTokensSection.testIds';
 
 jest.mock('react-redux', () => ({
   useSelector: jest.fn(() => ({})),
@@ -30,24 +31,24 @@ jest.mock('../../../Trending/utils/sortTrendingTokens', () => ({
 jest.mock(
   '../../../Trending/components/TrendingTokenRowItem/TrendingTokenRowItem',
   () => {
-    const React = jest.requireActual('react');
+    const ReactLib = jest.requireActual('react');
     const { View } = jest.requireActual('react-native');
     return {
       __esModule: true,
       default: ({ token }: { token: { assetId: string } }) =>
-        React.createElement(View, { testID: `row-${token.assetId}` }),
+        ReactLib.createElement(View, { testID: `row-${token.assetId}` }),
     };
   },
 );
 
 jest.mock(
   '../../../Trending/components/TrendingTokenSkeleton/TrendingTokensSkeleton',
   () => {
-    const React = jest.requireActual('react');
+    const ReactLib = jest.requireActual('react');
     const { View } = jest.requireActual('react-native');
     return {
       __esModule: true,
-      default: () => React.createElement(View, { testID: 'skeleton-row' }),
+      default: () => ReactLib.createElement(View, { testID: 'skeleton-row' }),
     };
   },
 );
@@ -118,7 +119,9 @@ describe('BridgeTrendingTokensSection', () => {
 
     const rows = getAllByTestId(/^row-/);
     expect(rows).toHaveLength(12);
-    expect(getByTestId('bridge-trending-show-more')).toBeTruthy();
+    expect(
+      getByTestId(BridgeTrendingTokensSectionTestIds.SHOW_MORE),
+    ).toBeTruthy();
   });
 
   it('appends one chunk when isNearBottom becomes true', () => {
@@ -143,15 +146,19 @@ describe('BridgeTrendingTokensSection', () => {
     rerender(<BridgeTrendingTokensSection />);
 
     expect(getAllByTestId(/^row-/)).toHaveLength(8);
-    expect(queryByTestId('bridge-trending-show-more')).toBeNull();
+    expect(
+      queryByTestId(BridgeTrendingTokensSectionTestIds.SHOW_MORE),
+    ).toBeNull();
   });
 
   it('does not append chunk while a bottom sheet is open', () => {
     const { getAllByTestId, getByTestId, rerender } = render(
       <BridgeTrendingTokensSection />,
     );
 
-    fireEvent.press(getByTestId('bridge-trending-price-filter'));
+    fireEvent.press(
+      getByTestId(BridgeTrendingTokensSectionTestIds.PRICE_FILTER),
+    );
 
     rerender(<BridgeTrendingTokensSection isNearBottom />);
 

app/components/UI/Bridge/components/BridgeTrendingTokensSection/BridgeTrendingTokensSection.testIds.ts

@@ -0,0 +1,10 @@
+export const BridgeTrendingTokensSectionTestIds = {
+  SECTION: 'bridge-trending-tokens-section',
+  PRICE_FILTER: 'bridge-trending-price-filter',
+  NETWORK_FILTER: 'bridge-trending-network-filter',
+  TIME_FILTER: 'bridge-trending-time-filter',
+  SHOW_MORE: 'bridge-trending-show-more',
+} as const;
+
+export type BridgeTrendingTokensSectionTestIdsType =
+  typeof BridgeTrendingTokensSectionTestIds;

app/components/UI/Bridge/components/BridgeTrendingTokensSection/BridgeTrendingTokensSection.tsx

@@ -27,12 +27,12 @@ import { useTokenListFilters } from '../../../Trending/hooks/useTokenListFilters
 import { useTrendingRequest } from '../../../Trending/hooks/useTrendingRequest/useTrendingRequest';
 import { sortTrendingTokens } from '../../../Trending/utils/sortTrendingTokens';
 import { strings } from '../../../../../../locales/i18n';
-import { BridgeViewSelectorsIDs } from '../../Views/BridgeView/BridgeView.testIds';
 import { getNetworkImageSource } from '../../../../../util/networks';
 import { NETWORK_TO_SHORT_NETWORK_NAME_MAP } from '../../../../../constants/bridge';
 import type { ProcessedNetwork } from '../../../../hooks/useNetworksByNamespace/useNetworksByNamespace';
 import type { CaipChainId } from '@metamask/utils';
 import { FilterButton } from '../../../Trending/components/FilterBar/FilterBar';
+import { BridgeTrendingTokensSectionTestIds } from './BridgeTrendingTokensSection.testIds';
 
 const TOKEN_CHUNK_SIZE = 12;
 
@@ -142,7 +142,7 @@ const BridgeTrendingTokensSection = ({
     <>
       <Box
         twClassName="mt-4 px-4 pb-4"
-        testID={BridgeViewSelectorsIDs.TRENDING_TOKENS_SECTION}
+        testID={BridgeTrendingTokensSectionTestIds.SECTION}
       >
         <Text
           variant={TextVariant.HeadingLg}
@@ -156,19 +156,19 @@ const BridgeTrendingTokensSection = ({
           twClassName="gap-2 mb-3 w-full"
         >
           <FilterButton
-            testID={BridgeViewSelectorsIDs.TRENDING_PRICE_FILTER}
+            testID={BridgeTrendingTokensSectionTestIds.PRICE_FILTER}
             onPress={() => setActiveBottomSheet('price_change')}
             label={priceChangeButtonText}
             twClassName="flex-1"
           />
           <FilterButton
-            testID={BridgeViewSelectorsIDs.TRENDING_NETWORK_FILTER}
+            testID={BridgeTrendingTokensSectionTestIds.NETWORK_FILTER}
             onPress={() => setActiveBottomSheet('network')}
             label={selectedNetworkName}
             twClassName="flex-1"
           />
           <FilterButton
-            testID={BridgeViewSelectorsIDs.TRENDING_TIME_FILTER}
+            testID={BridgeTrendingTokensSectionTestIds.TIME_FILTER}
             onPress={() => setActiveBottomSheet('time')}
             label={selectedTimeOption}
             twClassName="w-[72px] shrink-0"
@@ -192,7 +192,7 @@ const BridgeTrendingTokensSection = ({
               ))}
         {!isLoading && hasMore ? (
           <Pressable
-            testID={BridgeViewSelectorsIDs.TRENDING_SHOW_MORE}
+            testID={BridgeTrendingTokensSectionTestIds.SHOW_MORE}
             onPress={loadNextChunk}
             style={({ pressed }) =>
               tw.style('mt-3 py-2 self-center', pressed && 'opacity-70')

tests/page-objects/swaps/SwapTrendingTokensView.ts

@@ -0,0 +1,184 @@
+import { Assertions, Gestures, Matchers } from '../../framework';
+import { BridgeViewSelectorsIDs } from '../../../app/components/UI/Bridge/Views/BridgeView/BridgeView.testIds';
+import { BridgeTrendingTokensSectionTestIds } from '../../../app/components/UI/Bridge/components/BridgeTrendingTokensSection/BridgeTrendingTokensSection.testIds';
+
+const SwapTrendingTokensViewTestIds = {
+  PRICE_BOTTOM_SHEET: 'trending-token-price-change-bottom-sheet',
+  NETWORK_BOTTOM_SHEET: 'trending-token-network-bottom-sheet',
+  TIME_BOTTOM_SHEET: 'trending-token-time-bottom-sheet',
+  INNER_LIST: 'trending-tokens-list',
+  CLOSE_BUTTON: 'close-button',
+  TIME_SELECT_6H: 'time-select-6h',
+  TOKEN_ROW_PREFIX: 'trending-token-row-item-',
+} as const;
+
+class SwapTrendingTokensView {
+  public get section(): DetoxElement {
+    return Matchers.getElementByID(BridgeTrendingTokensSectionTestIds.SECTION);
+  }
+
+  public get priceFilter(): DetoxElement {
+    return Matchers.getElementByID(
+      BridgeTrendingTokensSectionTestIds.PRICE_FILTER,
+    );
+  }
+
+  public get networkFilter(): DetoxElement {
+    return Matchers.getElementByID(
+      BridgeTrendingTokensSectionTestIds.NETWORK_FILTER,
+    );
+  }
+
+  public get timeFilter(): DetoxElement {
+    return Matchers.getElementByID(
+      BridgeTrendingTokensSectionTestIds.TIME_FILTER,
+    );
+  }
+
+  public get priceBottomSheet(): DetoxElement {
+    return Matchers.getElementByID(
+      SwapTrendingTokensViewTestIds.PRICE_BOTTOM_SHEET,
+    );
+  }
+
+  public get networkBottomSheet(): DetoxElement {
+    return Matchers.getElementByID(
+      SwapTrendingTokensViewTestIds.NETWORK_BOTTOM_SHEET,
+    );
+  }
+
+  public get timeBottomSheet(): DetoxElement {
+    return Matchers.getElementByID(
+      SwapTrendingTokensViewTestIds.TIME_BOTTOM_SHEET,
+    );
+  }
+
+  public get innerList(): DetoxElement {
+    return Matchers.getElementByID(SwapTrendingTokensViewTestIds.INNER_LIST);
+  }
+
+  public get closeButton(): DetoxElement {
+    return Matchers.getElementByID(SwapTrendingTokensViewTestIds.CLOSE_BUTTON);
+  }
+
+  public get timeSelectSixHours(): DetoxElement {
+    return Matchers.getElementByID(
+      SwapTrendingTokensViewTestIds.TIME_SELECT_6H,
+    );
+  }
+
+  async expectSectionVisible(timeout = 10000): Promise<void> {
+    await Assertions.expectElementToBeVisible(this.section, {
+      timeout,
+      description: 'Trending section should be visible',
+    });
+  }
+
+  async expectSectionNotVisible(timeout = 10000): Promise<void> {
+    await Assertions.expectElementToNotBeVisible(this.section, {
+      timeout,
+      description: 'Trending section should not be visible',
+    });
+  }
+
+  async expectNoInnerList(): Promise<void> {
+    await Assertions.expectElementToNotBeVisible(this.innerList, {
+      description:
+        'Bridge trending should not render an inner list scroll container',
+    });
+  }
+
+  async expectPriceBottomSheetVisible(): Promise<void> {
+    await Assertions.expectElementToBeVisible(this.priceBottomSheet, {
+      description: 'Price sort bottom sheet should be visible',
+    });
+  }
+
+  async expectTimeBottomSheetVisible(): Promise<void> {
+    await Assertions.expectElementToBeVisible(this.timeBottomSheet, {
+      description: 'Time bottom sheet should be visible',
+    });
+  }
+
+  async expectNetworkBottomSheetVisible(): Promise<void> {
+    await Assertions.expectElementToBeVisible(this.networkBottomSheet, {
+      description: 'Network bottom sheet should be visible',
+    });
+  }
+
+  tokenRow(assetId: string): DetoxElement {
+    return Matchers.getElementByID(
+      `${SwapTrendingTokensViewTestIds.TOKEN_ROW_PREFIX}${assetId}`,
+    );
+  }
+
+  async scrollToFilters(): Promise<void> {
+    await Gestures.scrollToElement(
+      this.priceFilter,
+      Matchers.getIdentifier(BridgeViewSelectorsIDs.BRIDGE_VIEW_SCROLL),
+      {
+        direction: 'down',
+        scrollAmount: 250,
+        elemDescription: 'Scroll bridge view to trending filters',
+      },
+    );
+  }
+
+  async openPriceFilter(): Promise<void> {
+    await Gestures.waitAndTap(this.priceFilter, {
+      elemDescription: 'Tap trending price filter',
+    });
+  }
+
+  async openTimeFilter(): Promise<void> {
+    await Gestures.waitAndTap(this.timeFilter, {
+      elemDescription: 'Tap trending time filter',
+    });
+  }
+
+  async openNetworkFilter(): Promise<void> {
+    await Gestures.waitAndTap(this.networkFilter, {
+      elemDescription: 'Tap trending network filter',
+    });
+  }
+
+  async closeBottomSheet(): Promise<void> {
+    await Gestures.waitAndTap(this.closeButton, {
+      elemDescription: 'Close trending bottom sheet',
+    });
+  }
+
+  async selectTimeSixHours(): Promise<void> {
+    await Gestures.waitAndTap(this.timeSelectSixHours, {
+      elemDescription: 'Select 6h time filter',
+    });
+  }
+
+  async selectNetworkByName(networkName: string): Promise<void> {
+    await Gestures.waitAndTap(Matchers.getElementByText(networkName), {
+      elemDescription: `Select trending network ${networkName}`,
+    });
+  }
+
+  async tapTokenRow(assetId: string): Promise<void> {
+    await Gestures.waitAndTap(this.tokenRow(assetId), {
+      elemDescription: `Tap trending token row ${assetId}`,
+    });
+  }
+
+  async expectTokenRowVisible(assetId: string): Promise<void> {
+    await Assertions.expectElementToBeVisible(this.tokenRow(assetId), {
+      timeout: 10000,
+      description: `Trending token row ${assetId} should be visible`,
+    });
+  }
+
+  async expectTokenRowNotVisible(assetId: string): Promise<void> {
+    await Assertions.expectElementToNotBeVisible(this.tokenRow(assetId), {
+      timeout: 10000,
+      description: `Trending token row ${assetId} should not be visible`,
+    });
+  }
+}
+
+export default new SwapTrendingTokensView();