test: Switch network e2e test

privacy-snapshot.json

@@ -59,5 +59,6 @@
   "price.api.cx.metamask.io",
   "token.api.cx.metamask.io",
   "client-side-detection.api.cx.metamask.io",
+  "rpc.tenderly.co",
   "user-storage.api.cx.metamask.io"
 ]

test/e2e/page-objects/pages/add-network-page.ts

@@ -0,0 +1,68 @@
+import { Driver } from '../../webdriver/driver';
+
+class AddNetworkPage {
+  private driver: Driver;
+
+  private addNetworkManuallyLink: string;
+
+  private networkNameInput: string;
+
+  private rpcUrlInput: string;
+
+  private chainIdInput: string;
+
+  private currencySymbolInput: string;
+
+  private blockExplorerUrlInput: string;
+
+  private saveButton: object;
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+
+    this.addNetworkManuallyLink = '[data-testid="add-network-manually"]';
+
+    this.networkNameInput = '[data-testid="network-form-network-name"]';
+
+    this.rpcUrlInput = '[data-testid="network-form-rpc-url"]';
+
+    this.chainIdInput = '[data-testid="network-form-chain-id"]';
+
+    this.currencySymbolInput = '[data-testid="network-form-ticker-input"]';
+
+    this.blockExplorerUrlInput =
+      '[data-testid="network-form-block-explorer-url"]';
+
+    this.saveButton = {
+      tag: 'button',
+      text: 'Save',
+    };
+  }
+
+  async addNewNetworkManually(): Promise<void> {
+    console.log(`Click Add network manually link`);
+    await this.driver.clickElement(this.addNetworkManuallyLink);
+  }
+
+  async addNetwork(network: {
+    name: string;
+    rpcUrl: string;
+    chainId: string;
+    symbol: string;
+    explorerUrl: string;
+  }): Promise<void> {
+    console.log(`Adding network: ${network.name}`);
+
+    await this.driver.fill(this.networkNameInput, network.name);
+    await this.driver.fill(this.rpcUrlInput, network.rpcUrl);
+    await this.driver.fill(this.chainIdInput, network.chainId);
+
+    await this.driver.fill(this.currencySymbolInput, network.symbol);
+    await this.driver.fill(this.blockExplorerUrlInput, network.explorerUrl);
+
+    // Click save button to add the network
+    await this.driver.clickElement(this.saveButton);
+  }
+}
+
+export default AddNetworkPage;

test/e2e/page-objects/pages/dialog/select-network.ts

@@ -0,0 +1,37 @@
+import { Driver } from '../../../webdriver/driver';
+
+class SelectNetwork {
+  private driver: Driver;
+
+  private networkName: string | undefined;
+
+  private addNetworkButton: object;
+
+  private closeButton: string;
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+    this.addNetworkButton = {
+      tag: 'button',
+      text: 'Add a custom network',
+    };
+    this.closeButton = 'button[aria-label="Close"]';
+  }
+
+  async clickNetworkName(networkName: string): Promise<void> {
+    console.log('Click ${networkName}');
+    this.networkName = '[data-testid="${networkName}"]';
+    await this.driver.clickElement(this.networkName);
+  }
+  async addNewNetwork(): Promise<void> {
+    console.log('Click Add network');
+    await this.driver.clickElement(this.addNetworkButton);
+  }
+
+  async clickCloseButton(): Promise<void> {
+    console.log('Click Close Button');
+    await this.driver.clickElement(this.closeButton);
+  }
+}
+
+export default SelectNetwork;

test/e2e/page-objects/pages/header-navbar.ts

@@ -9,11 +9,14 @@ class HeaderNavbar {
 
   private lockMetaMaskButton: string;
 
+  public switchNetworkDropDown: string;
+
   constructor(driver: Driver) {
     this.driver = driver;
     this.accountMenuButton = '[data-testid="account-menu-icon"]';
     this.accountOptionMenu = '[data-testid="account-options-menu-button"]';
     this.lockMetaMaskButton = '[data-testid="global-menu-lock"]';
+    this.switchNetworkDropDown = '[data-testid="network-display"]';
   }
 
   async openAccountMenu(): Promise<void> {
@@ -25,6 +28,19 @@ class HeaderNavbar {
     await this.driver.clickElement(this.lockMetaMaskButton);
   }
 
+  async clickSwitchNetworkDropDown(): Promise<void> {
+    console.log(`Click switch network menu`);
+    await this.driver.clickElement(this.switchNetworkDropDown);
+  }
+
+  async check_networkNameSwitchDropDown(networkName: string): Promise<boolean> {
+    console.log(`Validate the Switch network to ${networkName}`);
+    const switchNetworkName = await this.driver.findElements({
+      tag: 'span',
+      text: networkName,
+    });
+    return switchNetworkName.length === 1;
+  }
   /**
    * Verifies that the displayed account label in header matches the expected label.
    *

test/e2e/page-objects/pages/popover-wrap/new-network-added.ts

@@ -0,0 +1,33 @@
+import { Driver } from '../../../webdriver/driver';
+
+class NewNetworkAdded {
+  private driver: Driver;
+
+  private SwitchButton: object | undefined;
+
+  private DismissButton: object;
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+    this.DismissButton = {
+      tag: 'h6',
+      text: 'Dismiss',
+    };
+  }
+
+  async clickDismissButton(): Promise<void> {
+    console.log(`Click Dismiss`);
+    await this.driver.clickElement(this.DismissButton);
+  }
+
+  async clickSwitchButton(networkName: string): Promise<void> {
+    console.log(`Click Switch Button`);
+    this.SwitchButton = {
+      tag: 'h6',
+      text: `Switch to ${networkName}`,
+    };
+    await this.driver.clickElement(this.SwitchButton);
+  }
+}
+
+export default NewNetworkAdded;

test/e2e/tests/network/switch-network.spec.ts

@@ -0,0 +1,152 @@
+import { Suite } from 'mocha';
+import { Driver } from '../../webdriver/driver';
+import {
+  withFixtures,
+  defaultGanacheOptions,
+  unlockWallet,
+  tinyDelayMs,
+} from '../../helpers';
+import FixtureBuilder from '../../fixture-builder';
+import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow';
+import HomePage from '../../page-objects/pages/homepage';
+import HeaderNavbar from '../../page-objects/pages/header-navbar';
+import SelectNetwork from '../../page-objects/pages/dialog/select-network';
+import AddNetworkPage from '../../page-objects/pages/add-network-page';
+import NewNetworkAddedPopover from '../../page-objects/pages/popover-wrap/new-network-added';
+import { sendTransaction } from '../../page-objects/flows/send-transaction.flow';
+
+
+describe.skip('Switch network - ', function (this: Suite) {
+  it('Ethereum Mainnet and Sepolia', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+      },
+      async ({ driver }: { driver: Driver }) => {
+        await loginWithBalanceValidation(driver);
+        const homePage = new HomePage(driver);
+        const headerNavbar = new HeaderNavbar(driver);
+        const selectNetwork = new SelectNetwork(driver);
+
+        //Validate the switch network functionality to default Ethereum Mainnet
+        await headerNavbar.clickSwitchNetworkDropDown();
+        await selectNetwork.clickNetworkName("Ethereum Mainnet");
+        await homePage.check_expectedBalanceIsDisplayed();
+        await headerNavbar.check_networkNameSwitchDropDown('Ethereum Mainnet');
+
+        //Validate a transaction in Ethereum network
+        await sendTransaction(
+          driver,
+          '0x985c30949c92df7a0bd42e0f3e3d539ece98db24',
+          '1',
+          '0.000042',
+          '1.000042',
+        );
+        await homePage.check_confirmedTxNumberDisplayedInActivity();
+        await homePage.check_txAmountInActivity();
+
+        //Validate the switch network functionality to test network Sepolia
+        await headerNavbar.clickSwitchNetworkDropDown();
+        await selectNetwork.clickNetworkName("Sepolia");
+        //Validate the transaction made in Ethereum network is not displayed in Sepolia network
+        await homePage.check_expectedBalanceIsDisplayed();
+        await headerNavbar.check_networkNameSwitchDropDown('Sepolia');
+
+        //Validate a transaction in Sepolia network
+        await sendTransaction(
+          driver,
+          '0x985c30949c92df7a0bd42e0f3e3d539ece98db24',
+          '1',
+          '0.000042',
+          '1.000042',
+        );
+        await homePage.check_confirmedTxNumberDisplayedInActivity();
+        await homePage.check_txAmountInActivity();
+      },
+    );
+  });
+
+  it('create Tenderly network then click dismiss in switch network dialog', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+      },
+      async ({ driver }: { driver: Driver }) => {
+        await unlockWallet(driver);
+        const headerNavbar = new HeaderNavbar(driver);
+        const selectNetwork = new SelectNetwork(driver);
+        const addNetworkPage = new AddNetworkPage(driver);
+        const newNetworkAddedPopover = new NewNetworkAddedPopover(driver);
+        await headerNavbar.clickSwitchNetworkDropDown();
+        await selectNetwork.addNewNetwork();
+        await addNetworkPage.addNewNetworkManually();
+        await addNetworkPage.addNetwork({
+          name: 'Tenderly',
+          rpcUrl:
+            'https://rpc.tenderly.co/fork/cdbcd795-097d-4624-aa16-680374d89a43',
+          chainId: '1',
+          symbol: 'ETH',
+          explorerUrl: 'https://dashboard.tenderly.co/explorer',
+        });
+
+        // await newNetworkAddedPopover.clickSwitchButton("Tenderly");
+        await newNetworkAddedPopover.clickDismissButton();
+        await headerNavbar.check_networkNameSwitchDropDown('Localhost 8545');
+
+        await driver.delay(tinyDelayMs);
+      },
+    );
+  });
+
+  it('Validate the networks and UI', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+      },
+      async ({ driver }: { driver: Driver }) => {
+        await loginWithBalanceValidation(driver);
+        const homePage = new HomePage(driver);
+        const headerNavbar = new HeaderNavbar(driver);
+        const selectNetwork = new SelectNetwork(driver);
+        await headerNavbar.clickSwitchNetworkDropDown();
+
+        // Validate the networks
+
+        // Validate the search functionality in switch network dialog
+
+        // Validate the delete functionality in switch network dialog
+
+        // Validate the add network functionality
+
+        // Validate the cancel functionality in switch network dialog
+
+      },
+    );
+  });
+
+  it('switch to an unsupported network and validate the error message', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+      },
+      async ({ driver }: { driver: Driver }) => {
+        await loginWithBalanceValidation(driver);
+        const homePage = new HomePage(driver);
+        const headerNavbar = new HeaderNavbar(driver);
+        const selectNetwork = new SelectNetwork(driver);
+        await headerNavbar.clickSwitchNetworkDropDown();
+
+        // switch to an unsupported network
+
+      },
+    );
+  });
+});