test: [POM] Migrate token tests

test/e2e/page-objects/pages/home/asset-list.ts

@@ -24,6 +24,11 @@ class AssetListPage {
 
   private readonly currentNetworksTotal = `${this.currentNetworkOption} [data-testid="account-value-and-suffix"]`;
 
+  private readonly customTokenModalOption = {
+    text: 'Custom token',
+    tag: 'button',
+  };
+
   private readonly hideTokenButton = '[data-testid="asset-options__hide"]';
 
   private readonly hideTokenConfirmationButton =
@@ -43,16 +48,45 @@ class AssetListPage {
 
   private readonly networksToggle = '[data-testid="sort-by-networks"]';
 
+  private sortByAlphabetically = '[data-testid="sortByAlphabetically"]';
+
+  private sortByDecliningBalance = '[data-testid="sortByDecliningBalance"]';
+
+  private sortByPopoverToggle = '[data-testid="sort-by-popover-toggle"]';
+
+  private readonly tokenAddressInput =
+    '[data-testid="import-tokens-modal-custom-address"]';
+
   private readonly tokenAmountValue =
     '[data-testid="multichain-token-list-item-value"]';
 
+  private readonly tokenImportedSuccessMessage = {
+    text: 'Token imported',
+    tag: 'h6',
+  };
+
   private readonly tokenListItem =
     '[data-testid="multichain-token-list-button"]';
 
   private readonly tokenOptionsButton = '[data-testid="import-token-button"]';
 
+  private tokenPercentage(address: string): string {
+    return `[data-testid="token-increase-decrease-percentage-${address}"]`;
+  }
+
   private readonly tokenSearchInput = 'input[placeholder="Search tokens"]';
 
+  private readonly tokenSymbolInput =
+    '[data-testid="import-tokens-modal-custom-symbol"]';
+
+  private readonly modalWarningBanner = 'div.mm-banner-alert--severity-warning';
+
+  private readonly tokenIncreaseDecreaseValue =
+    '[data-testid="token-increase-decrease-value"]';
+
+  private readonly tokenIncreaseDecreasePercentageGeneral =
+    '[data-testid="token-increase-decrease-percentage"]';
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
@@ -103,6 +137,42 @@ class AssetListPage {
     return assets.length;
   }
 
+  async getTokenListNames(): Promise<string[]> {
+    console.log(`Retrieving the list of token names`);
+    const tokenElements = await this.driver.findElements(this.tokenListItem);
+    const tokenNames = await Promise.all(
+      tokenElements.map(async (element) => {
+        return await element.getText();
+      }),
+    );
+    return tokenNames;
+  }
+
+  async getAssetPercentageIncreaseDecrease(
+    assetAddress: string,
+  ): Promise<string> {
+    console.log(
+      `Retrieving the percentage increase or decrease for ${assetAddress}`,
+    );
+    const percentageElement = await this.driver.findElement(
+      this.tokenPercentage(assetAddress),
+    );
+    const percentage = await percentageElement.getText();
+    return percentage;
+  }
+
+  async sortTokenList(
+    sortBy: 'alphabetically' | 'decliningBalance',
+  ): Promise<void> {
+    console.log(`Sorting the token list by ${sortBy}`);
+    await this.driver.clickElement(this.sortByPopoverToggle);
+    if (sortBy === 'alphabetically') {
+      await this.driver.clickElement(this.sortByAlphabetically);
+    } else if (sortBy === 'decliningBalance') {
+      await this.driver.clickElement(this.sortByDecliningBalance);
+    }
+  }
+
   /**
    * Hides a token by clicking on the token name, and confirming the hide modal.
    *
@@ -119,6 +189,22 @@ class AssetListPage {
     );
   }
 
+  async importCustomToken(tokenAddress: string, symbol: string): Promise<void> {
+    console.log(`Creating custom token ${symbol} on homepage`);
+    await this.driver.clickElement(this.tokenOptionsButton);
+    await this.driver.clickElement(this.importTokensButton);
+    await this.driver.waitForSelector(this.importTokenModalTitle);
+    await this.driver.clickElement(this.customTokenModalOption);
+    await this.driver.waitForSelector(this.modalWarningBanner);
+    await this.driver.fill(this.tokenAddressInput, tokenAddress);
+    await this.driver.fill(this.tokenSymbolInput, symbol);
+    await this.driver.clickElement(this.importTokensNextButton);
+    await this.driver.clickElementAndWaitToDisappear(
+      this.confirmImportTokenButton,
+    );
+    await this.driver.waitForSelector(this.tokenImportedSuccessMessage);
+  }
+
   async importTokenBySearch(tokenName: string) {
     console.log(`Import token ${tokenName} on homepage by search`);
     await this.driver.clickElement(this.tokenOptionsButton);
@@ -133,6 +219,24 @@ class AssetListPage {
     );
   }
 
+  async importMultipleTokensBySearch(tokenNames: string[]) {
+    console.log(
+      `Importing tokens ${tokenNames.join(', ')} on homepage by search`,
+    );
+    await this.driver.clickElement(this.tokenOptionsButton);
+    await this.driver.clickElement(this.importTokensButton);
+    await this.driver.waitForSelector(this.importTokenModalTitle);
+
+    for (const name of tokenNames) {
+      await this.driver.fill(this.tokenSearchInput, name);
+      await this.driver.clickElement({ text: name, tag: 'p' });
+    }
+    await this.driver.clickElement(this.importTokensNextButton);
+    await this.driver.clickElementAndWaitToDisappear(
+      this.confirmImportTokenButton,
+    );
+  }
+
   async openNetworksFilter(): Promise<void> {
     console.log(`Opening the network filter`);
     await this.driver.clickElement(this.networksToggle);
@@ -235,6 +339,44 @@ class AssetListPage {
       `Expected number of token items ${expectedNumber} is displayed.`,
     );
   }
+
+  /**
+   * Checks if the token increase/decrease percentage is displayed correctly for a specific token
+   *
+   * @param address - The token address to check
+   * @param expectedPercentage - The expected percentage value (e.g. '+0.02%')
+   */
+  async check_tokenIncreasePercentage(
+    address: string,
+    expectedPercentage: string,
+  ): Promise<void> {
+    console.log(`Checking token increase percentage for address ${address}`);
+    const isPresent = await this.driver.isElementPresentAndVisible({
+      css: `[data-testid="token-increase-decrease-percentage-${address}"]`,
+      text: expectedPercentage,
+    });
+    if (!isPresent) {
+      throw new Error(
+        `Token increase percentage ${expectedPercentage} not found for address ${address}`,
+      );
+    }
+  }
+
+  /**
+   * Checks if the token increase/decrease value is displayed correctly
+   *
+   * @param expectedValue - The expected value (e.g. '+$50.00')
+   */
+  async check_tokenIncreaseValue(expectedValue: string): Promise<void> {
+    console.log(`Checking token increase value ${expectedValue}`);
+    const isPresent = await this.driver.isElementPresentAndVisible({
+      css: this.tokenIncreaseDecreaseValue,
+      text: expectedValue,
+    });
+    if (!isPresent) {
+      throw new Error(`Token increase value ${expectedValue} not found`);
+    }
+  }
 }
 
 export default AssetListPage;

test/e2e/page-objects/pages/send/send-token-page.ts

@@ -40,6 +40,9 @@ class SendTokenPage {
 
   private readonly toastText = '.toast-text';
 
+  private readonly warning =
+    '[data-testid="send-warning"] .mm-box--min-width-0 span';
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
@@ -196,6 +199,25 @@ class SendTokenPage {
       text: address,
     });
   }
+
+  /**
+   * Verifies that a specific warning message is displayed on the send token screen.
+   *
+   * @param warningText - The expected warning text to validate against.
+   * @returns A promise that resolves if the warning message matches the expected text.
+   * @throws Assertion error if the warning message does not match the expected text.
+   */
+  async check_warningMessage(warningText: string): Promise<void> {
+    console.log(`Checking if warning message "${warningText}" is displayed`);
+    const warning = await this.driver.findElement(this.warning);
+    const text = await warning.getText();
+    assert.equal(
+      text,
+      warningText,
+      `Expected warning message to be "${warningText}", got "${text}"`,
+    );
+    console.log('Warning message validation successful');
+  }
 }
 
 export default SendTokenPage;

test/e2e/page-objects/pages/token-overview-page.ts

@@ -0,0 +1,54 @@
+import { Driver } from '../../webdriver/driver';
+
+class TokenOverviewPage {
+  private driver: Driver;
+
+  private readonly sendButton = {
+    text: 'Send',
+    css: '.icon-button',
+  };
+
+  private readonly receiveButton = {
+    text: 'Receive',
+    css: '.icon-button',
+  };
+
+  private readonly swapButton = {
+    text: 'Swap',
+    css: '.icon-button',
+  };
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.sendButton,
+        this.swapButton,
+      ]);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for Token overview page to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Token overview page is loaded');
+  }
+
+  async clickSend(): Promise<void> {
+    await this.driver.clickElement(this.sendButton);
+  }
+
+  async clickReceive(): Promise<void> {
+    await this.driver.clickElement(this.receiveButton);
+  }
+
+  async clickSwap(): Promise<void> {
+    await this.driver.clickElement(this.swapButton);
+  }
+}
+
+export default TokenOverviewPage;

test/e2e/tests/tokens/import-tokens.spec.js → test/e2e/tests/tokens/import-tokens.spec.ts

@@ -1,13 +1,16 @@
-const { strict: assert } = require('assert');
-const {
+import AssetListPage from '../../page-objects/pages/home/asset-list';
+import HomePage from '../../page-objects/pages/home/homepage';
+
+import {
   defaultGanacheOptions,
   withFixtures,
   unlockWallet,
-} = require('../../helpers');
-const FixtureBuilder = require('../../fixture-builder');
+} from '../../helpers';
+import FixtureBuilder from '../../fixture-builder';
+import { Mockttp } from '../../mock-e2e';
 
 describe('Import flow', function () {
-  async function mockPriceFetch(mockServer) {
+  async function mockPriceFetch(mockServer: Mockttp) {
     return [
       await mockServer
         .forGet('https://price.api.cx.metamask.io/v2/chains/1/spot-prices')
@@ -60,47 +63,27 @@ describe('Import flow', function () {
           })
           .build(),
         ganacheOptions: defaultGanacheOptions,
-        title: this.test.fullTitle(),
+        title: this.test?.fullTitle(),
         testSpecificMock: mockPriceFetch,
       },
       async ({ driver }) => {
         await unlockWallet(driver);
 
-        await driver.assertElementNotPresent('.loading-overlay');
-
-        await driver.clickElement('[data-testid="import-token-button"]');
-        await driver.clickElement('[data-testid="importTokens"]');
-
-        await driver.fill('input[placeholder="Search tokens"]', 'cha');
-
-        await driver.clickElement('.token-list__token_component');
-        await driver.clickElement(
-          '.token-list__token_component:nth-of-type(2)',
-        );
-        await driver.clickElement(
-          '.token-list__token_component:nth-of-type(3)',
-        );
-
-        await driver.clickElement('[data-testid="import-tokens-button-next"]');
-        await driver.clickElement(
-          '[data-testid="import-tokens-modal-import-button"]',
-        );
-
-        // Wait for "loading tokens" to be gone
-        await driver.assertElementNotPresent(
-          '[data-testid="token-list-loading-message"]',
-        );
-
-        await driver.assertElementNotPresent(
-          '[data-testid="token-list-loading-message"]',
-        );
-
-        await driver.clickElement('[data-testid="sort-by-networks"]');
-        await driver.clickElement('[data-testid="network-filter-current"]');
+        const homePage = new HomePage(driver);
+        const assetListPage = new AssetListPage(driver);
+        await homePage.check_pageIsLoaded();
+        await assetListPage.importMultipleTokensBySearch([
+          'CHAIN',
+          'CHANGE',
+          'CHAI',
+        ]);
 
-        const expectedTokenListElementsAreFound =
-          await driver.elementCountBecomesN('.multichain-token-list-item', 4);
-        assert.equal(expectedTokenListElementsAreFound, true);
+        const tokenList = new AssetListPage(driver);
+        await tokenList.check_tokenItemNumber(5); // Linea & Mainnet Eth
+        await tokenList.check_tokenIsDisplayed('Ethereum');
+        await tokenList.check_tokenIsDisplayed('Chain Games');
+        await tokenList.check_tokenIsDisplayed('Changex');
+        await tokenList.check_tokenIsDisplayed('Chai');
       },
     );
   });