test: add smoke swap trending tokens e2e coverage (#26910)

## **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**
> Test-only additions; primary risk is potential flakiness due to new
Detox selectors, scrolling, and network mocking for trending
tokens/feature flags.
> 
> **Overview**
> Adds SmokeTrade E2E coverage for **Swap Trending Tokens (Bridge
zero-state)**, including a new `SwapTrendingTokensView` page object for
interacting with the trending section, filters, bottom sheets, and token
rows.
> 
> Introduces a new smoke spec that enables the `swapsTrendingTokens`
remote flag, mocks the `/v3/tokens/trending` proxy responses (all
networks vs Base-only), verifies filter behavior and default sort text,
confirms tapping a row opens token details, and asserts the trending
section hides once a swap amount is entered.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
7e90d12. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: bfullam

tests/page-objects/swaps/SwapTrendingTokensView.ts

@@ -0,0 +1,167 @@
+import { Assertions, Gestures, Matchers } from '../../framework';
+
+const SwapTrendingTokensSelectorIDs = {
+  SECTION: 'bridge-trending-tokens-section',
+  PRICE_FILTER: 'bridge-trending-price-filter',
+  NETWORK_FILTER: 'bridge-trending-network-filter',
+  TIME_FILTER: 'bridge-trending-time-filter',
+  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',
+  BRIDGE_VIEW_SCROLL: 'bridge-view-scroll',
+} as const;
+
+class SwapTrendingTokensView {
+  private el(id: string): DetoxElement {
+    return Matchers.getElementByID(id);
+  }
+
+  async expectSectionVisible(timeout = 10000): Promise<void> {
+    await Assertions.expectElementToBeVisible(
+      this.el(SwapTrendingTokensSelectorIDs.SECTION),
+      {
+        timeout,
+        description: 'Trending section should be visible',
+      },
+    );
+  }
+
+  async expectSectionNotVisible(timeout = 10000): Promise<void> {
+    await Assertions.expectElementToNotBeVisible(
+      this.el(SwapTrendingTokensSelectorIDs.SECTION),
+      {
+        timeout,
+        description: 'Trending section should not be visible',
+      },
+    );
+  }
+
+  async expectNoInnerList(): Promise<void> {
+    await Assertions.expectElementToNotBeVisible(
+      this.el(SwapTrendingTokensSelectorIDs.INNER_LIST),
+      {
+        description:
+          'Bridge trending should not render an inner list scroll container',
+      },
+    );
+  }
+
+  async expectPriceBottomSheetVisible(): Promise<void> {
+    await Assertions.expectElementToBeVisible(
+      this.el(SwapTrendingTokensSelectorIDs.PRICE_BOTTOM_SHEET),
+      {
+        description: 'Price sort bottom sheet should be visible',
+      },
+    );
+  }
+
+  async expectTimeBottomSheetVisible(): Promise<void> {
+    await Assertions.expectElementToBeVisible(
+      this.el(SwapTrendingTokensSelectorIDs.TIME_BOTTOM_SHEET),
+      {
+        description: 'Time bottom sheet should be visible',
+      },
+    );
+  }
+
+  async expectNetworkBottomSheetVisible(): Promise<void> {
+    await Assertions.expectElementToBeVisible(
+      this.el(SwapTrendingTokensSelectorIDs.NETWORK_BOTTOM_SHEET),
+      {
+        description: 'Network bottom sheet should be visible',
+      },
+    );
+  }
+
+  tokenRow(assetId: string): DetoxElement {
+    return Matchers.getElementByID(`trending-token-row-item-${assetId}`);
+  }
+
+  async scrollToFilters(): Promise<void> {
+    await Gestures.scrollToElement(
+      this.el(SwapTrendingTokensSelectorIDs.PRICE_FILTER),
+      Matchers.getIdentifier(SwapTrendingTokensSelectorIDs.BRIDGE_VIEW_SCROLL),
+      {
+        direction: 'down',
+        scrollAmount: 250,
+        elemDescription: 'Scroll bridge view to trending filters',
+      },
+    );
+  }
+
+  async openPriceFilter(): Promise<void> {
+    await Gestures.waitAndTap(
+      this.el(SwapTrendingTokensSelectorIDs.PRICE_FILTER),
+      {
+        elemDescription: 'Tap trending price filter',
+      },
+    );
+  }
+
+  async openTimeFilter(): Promise<void> {
+    await Gestures.waitAndTap(
+      this.el(SwapTrendingTokensSelectorIDs.TIME_FILTER),
+      {
+        elemDescription: 'Tap trending time filter',
+      },
+    );
+  }
+
+  async openNetworkFilter(): Promise<void> {
+    await Gestures.waitAndTap(
+      this.el(SwapTrendingTokensSelectorIDs.NETWORK_FILTER),
+      {
+        elemDescription: 'Tap trending network filter',
+      },
+    );
+  }
+
+  async closeBottomSheet(): Promise<void> {
+    await Gestures.waitAndTap(
+      this.el(SwapTrendingTokensSelectorIDs.CLOSE_BUTTON),
+      {
+        elemDescription: 'Close trending bottom sheet',
+      },
+    );
+  }
+
+  async selectTimeSixHours(): Promise<void> {
+    await Gestures.waitAndTap(
+      this.el(SwapTrendingTokensSelectorIDs.TIME_SELECT_6H),
+      {
+        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();

tests/smoke/swap/swap-trending-tokens.spec.ts

@@ -0,0 +1,218 @@
+import { Mockttp } from 'mockttp';
+import { withFixtures } from '../../framework/fixtures/FixtureHelper';
+import { LocalNode, LocalNodeType } from '../../framework/types';
+import { loginToApp } from '../../flows/wallet.flow';
+import WalletView from '../../page-objects/wallet/WalletView';
+import QuoteView from '../../page-objects/swaps/QuoteView';
+import SwapTrendingTokensView from '../../page-objects/swaps/SwapTrendingTokensView';
+import { Assertions } from '../../framework';
+import CommonView from '../../page-objects/CommonView';
+import TokenOverview from '../../page-objects/wallet/TokenOverview';
+import FixtureBuilder from '../../framework/fixtures/FixtureBuilder';
+import { prepareSwapsTestEnvironment } from '../../helpers/swap/prepareSwapsTestEnvironment';
+import { testSpecificMock } from '../../helpers/swap/bridge-mocks';
+import { GET_QUOTE_ETH_USDC_RESPONSE } from '../../helpers/swap/constants';
+import { getDecodedProxiedURL } from '../notifications/utils/helpers';
+import { SmokeTrade } from '../../tags';
+import { AnvilPort } from '../../framework/fixtures/FixtureUtils';
+import { AnvilManager } from '../../seeder/anvil-manager';
+import enContent from '../../../locales/languages/en.json';
+import { createRemoteFeatureFlagsMock } from '../../api-mocking/helpers/remoteFeatureFlagsHelper';
+import { setupMockRequest } from '../../api-mocking/helpers/mockHelpers';
+
+const BASE_CHAIN_ID_DECIMAL = '8453';
+
+const ETHEREUM_TRENDING_ASSET_ID =
+  'eip155:1/erc20:0x1111111111111111111111111111111111111111';
+const BASE_TRENDING_ASSET_ID =
+  'eip155:8453/erc20:0x2222222222222222222222222222222222222222';
+
+const TRENDING_ALL_NETWORKS_RESPONSE = [
+  {
+    assetId: ETHEREUM_TRENDING_ASSET_ID,
+    symbol: 'ETHX',
+    name: 'Ethereum Trending',
+    decimals: 18,
+    price: '10',
+    aggregatedUsdVolume: 2000000,
+    marketCap: 100000000,
+    priceChangePct: {
+      h24: '0.2',
+      h6: '0.1',
+      h1: '0.01',
+      m5: '0.001',
+    },
+  },
+  {
+    assetId: BASE_TRENDING_ASSET_ID,
+    symbol: 'BASEX',
+    name: 'Base Trending',
+    decimals: 18,
+    price: '8',
+    aggregatedUsdVolume: 3000000,
+    marketCap: 200000000,
+    priceChangePct: {
+      h24: '0.3',
+      h6: '0.15',
+      h1: '0.02',
+      m5: '0.002',
+    },
+  },
+];
+
+const TRENDING_BASE_ONLY_RESPONSE = [TRENDING_ALL_NETWORKS_RESPONSE[1]];
+
+const setupSwapsTrendingTokensMock = async (mockServer: Mockttp) => {
+  const { response } = createRemoteFeatureFlagsMock({
+    swapsTrendingTokens: true,
+  });
+
+  await setupMockRequest(
+    mockServer,
+    {
+      requestMethod: 'GET',
+      url: /client-config\.api\.cx\.metamask\.io\/v1\/flags/i,
+      response,
+      responseCode: 200,
+    },
+    1001,
+  );
+};
+
+const setupTrendingTokensMock = async (mockServer: Mockttp) => {
+  await mockServer
+    .forGet('/proxy')
+    .matching((request) => {
+      const decodedUrl = getDecodedProxiedURL(request.url);
+      return /\/v3\/tokens\/trending/.test(decodedUrl);
+    })
+    .asPriority(1001)
+    .thenCallback((request) => {
+      const decodedUrl = getDecodedProxiedURL(request.url);
+      const isBaseOnlyRequest = decodedUrl.includes(
+        `chainIds=eip155:${BASE_CHAIN_ID_DECIMAL}`,
+      );
+
+      return {
+        statusCode: 200,
+        json: isBaseOnlyRequest
+          ? TRENDING_BASE_ONLY_RESPONSE
+          : TRENDING_ALL_NETWORKS_RESPONSE,
+      };
+    });
+};
+
+const setupQuoteFallbackMock = async (mockServer: Mockttp) => {
+  await setupMockRequest(
+    mockServer,
+    {
+      requestMethod: 'GET',
+      url: /getQuote/i,
+      response: GET_QUOTE_ETH_USDC_RESPONSE,
+      responseCode: 200,
+    },
+    1000,
+  );
+};
+
+const openSwapFromWalletActions = async () => {
+  await loginToApp();
+  await prepareSwapsTestEnvironment();
+  await WalletView.tapWalletSwapButton();
+};
+
+const withBridgeFixtures = async (run: () => Promise<void>) => {
+  await withFixtures(
+    {
+      fixture: ({ localNodes }: { localNodes?: LocalNode[] }) => {
+        const node = localNodes?.[0] as unknown as AnvilManager;
+        const rpcPort =
+          node instanceof AnvilManager
+            ? (node.getPort() ?? AnvilPort())
+            : undefined;
+
+        return new FixtureBuilder()
+          .withNetworkController({
+            providerConfig: {
+              chainId: '0x1',
+              rpcUrl: `http://localhost:${rpcPort ?? AnvilPort()}`,
+              type: 'custom',
+              nickname: 'Localhost',
+              ticker: 'ETH',
+            },
+          })
+          .withDisabledSmartTransactions()
+          .build();
+      },
+      localNodeOptions: [
+        {
+          type: LocalNodeType.anvil,
+          options: {
+            chainId: 1,
+          },
+        },
+      ],
+      restartDevice: true,
+      testSpecificMock: async (mockServer: Mockttp) => {
+        await testSpecificMock(mockServer);
+        await setupSwapsTrendingTokensMock(mockServer);
+        await setupTrendingTokensMock(mockServer);
+        await setupQuoteFallbackMock(mockServer);
+      },
+    },
+    run,
+  );
+};
+
+describe(SmokeTrade('Swap Trending Tokens (Bridge zero-state)'), () => {
+  beforeEach(() => {
+    jest.setTimeout(180000);
+  });
+
+  it('zero-state trending supports filters then row navigation', async () => {
+    await withBridgeFixtures(async () => {
+      await openSwapFromWalletActions();
+
+      await SwapTrendingTokensView.expectSectionVisible();
+      await SwapTrendingTokensView.expectNoInnerList();
+
+      await SwapTrendingTokensView.scrollToFilters();
+
+      await SwapTrendingTokensView.openPriceFilter();
+      await SwapTrendingTokensView.expectPriceBottomSheetVisible();
+      await Assertions.expectTextDisplayed(enContent.trending.high_to_low, {
+        description: 'Default price change sort should be high to low',
+      });
+      await SwapTrendingTokensView.closeBottomSheet();
+
+      await SwapTrendingTokensView.openTimeFilter();
+      await SwapTrendingTokensView.expectTimeBottomSheetVisible();
+      await SwapTrendingTokensView.selectTimeSixHours();
+
+      await SwapTrendingTokensView.openNetworkFilter();
+      await SwapTrendingTokensView.expectNetworkBottomSheetVisible();
+      await SwapTrendingTokensView.selectNetworkByName('Base');
+
+      await SwapTrendingTokensView.expectTokenRowVisible(
+        BASE_TRENDING_ASSET_ID,
+      );
+      await SwapTrendingTokensView.expectTokenRowNotVisible(
+        ETHEREUM_TRENDING_ASSET_ID,
+      );
+
+      await SwapTrendingTokensView.tapTokenRow(BASE_TRENDING_ASSET_ID);
+      await Assertions.expectElementToBeVisible(TokenOverview.tokenPrice, {
+        timeout: 10000,
+        description: 'Token details should open from trending token row tap',
+      });
+
+      await CommonView.tapBackButton();
+      await SwapTrendingTokensView.expectSectionVisible();
+
+      await QuoteView.tapSourceAmountInput();
+      await QuoteView.enterAmount('1');
+
+      await SwapTrendingTokensView.expectSectionNotVisible();
+    });
+  });
+});