test: Added e2e for switch network (#27967)

<!--
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**

This is e2e PR for switch network

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27967?quickstart=1)

## **Related issues**

Fixes:
MetaMask/MetaMask-planning#2906

## **Manual testing steps**

Run the test locally or in codespaces using the below command:
yarn
yarn build:test:webpack
ENABLE_MV3=false yarn test:e2e:single
test/e2e/tests/network/switch-network.spec.ts --browser=chrome

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.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-extension/blob/develop/.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.

---------

Co-authored-by: seaona <54408225+seaona@users.noreply.github.com>

test/e2e/page-objects/pages/dialog/network-switch-modal-confirmation.ts

@@ -0,0 +1,19 @@
+import { Driver } from '../../../webdriver/driver';
+
+class networkSwitchModalConfirmation {
+  private driver: Driver;
+
+  private submitButton: string;
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+    this.submitButton = '[data-testid="confirmation-submit-button"]';
+  }
+
+  async clickApproveButton(): Promise<void> {
+    console.log('Click Approve Button');
+    await this.driver.clickElementAndWaitToDisappear(this.submitButton);
+  }
+}
+
+export default networkSwitchModalConfirmation;

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

@@ -0,0 +1,61 @@
+import { Driver } from '../../../webdriver/driver';
+
+class SelectNetwork {
+  private driver: Driver;
+
+  private networkName: string | undefined;
+
+  private addNetworkButton: object;
+
+  private closeButton: string;
+
+  private toggleButton: string;
+
+  private searchInput: string;
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+    this.addNetworkButton = {
+      tag: 'button',
+      text: 'Add a custom network',
+    };
+    this.closeButton = 'button[aria-label="Close"]';
+    this.toggleButton = '.toggle-button > div';
+    this.searchInput = '[data-testid="network-redesign-modal-search-input"]';
+  }
+
+  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.clickElementAndWaitToDisappear(this.closeButton);
+  }
+
+  async clickToggleButton(): Promise<void> {
+    console.log('Click Toggle Button');
+    await this.driver.clickElement(this.toggleButton);
+  }
+
+  async fillNetworkSearchInput(networkName: string): Promise<void> {
+    console.log(`Fill network search input with ${networkName}`);
+    await this.driver.fill(this.searchInput, networkName);
+  }
+
+  async clickAddButton(): Promise<void> {
+    console.log('Click Add Button');
+    await this.driver.clickElementAndWaitToDisappear(
+      '[data-testid="test-add-button"]',
+    );
+  }
+}
+
+export default SelectNetwork;

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

@@ -22,8 +22,7 @@ class HeaderNavbar {
 
   private readonly settingsButton = '[data-testid="global-menu-settings"]';
 
-  private readonly switchNetworkDropDownButton =
-    '[data-testid="network-display"]';
+  private readonly switchNetworkDropDown = '[data-testid="network-display"]';
 
   constructor(driver: Driver) {
     this.driver = driver;
@@ -71,14 +70,26 @@ class HeaderNavbar {
     await this.driver.clickElement(this.settingsButton);
   }
 
+  async clickSwitchNetworkDropDown(): Promise<void> {
+    console.log(`Click switch network menu`);
+    await this.driver.clickElement(this.switchNetworkDropDown);
+  }
+
+  async check_currentSelectedNetwork(networkName: string): Promise<void> {
+    console.log(`Validate the Switch network to ${networkName}`);
+    await this.driver.waitForSelector(
+      `button[data-testid="network-display"][aria-label="Network Menu ${networkName}"]`,
+    );
+  }
+
   /**
    * Switches to the specified network.
    *
    * @param networkName - The name of the network to switch to.
    */
   async switchToNetwork(networkName: string): Promise<void> {
     console.log(`Switch to network ${networkName} in header bar`);
-    await this.driver.clickElement(this.switchNetworkDropDownButton);
+    await this.driver.clickElement(this.switchNetworkDropDown);
     await this.driver.waitForSelector(this.selectNetworkMessage);
     await this.driver.clickElementAndWaitToDisappear(
       `[data-testid="${networkName}"]`,
@@ -89,7 +100,7 @@ class HeaderNavbar {
       text: `“${networkName}” was successfully added!`,
     });
     await this.driver.waitForSelector(
-      `${this.switchNetworkDropDownButton}[aria-label="Network Menu ${networkName}"]`,
+      `${this.switchNetworkDropDown}[aria-label="Network Menu ${networkName}"]`,
     );
   }
 

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

@@ -0,0 +1,66 @@
+import { Suite } from 'mocha';
+import { Driver } from '../../webdriver/driver';
+import { withFixtures, defaultGanacheOptions } from '../../helpers';
+import FixtureBuilder from '../../fixture-builder';
+import { Ganache } from '../../seeder/ganache';
+import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow';
+import HomePage from '../../page-objects/pages/homepage';
+import ModalConfirmation from '../../page-objects/pages/dialog/network-switch-modal-confirmation';
+import HeaderNavbar from '../../page-objects/pages/header-navbar';
+import SelectNetwork from '../../page-objects/pages/dialog/select-network';
+
+describe('Switch network - ', function (this: Suite) {
+  it('Switch networks to existing and new networks', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+      },
+      async ({
+        driver,
+        ganacheServer,
+      }: {
+        driver: Driver;
+        ganacheServer?: Ganache;
+      }) => {
+        await loginWithBalanceValidation(driver, ganacheServer);
+        const homePage = new HomePage(driver);
+        const headerNavbar = new HeaderNavbar(driver);
+        const selectNetwork = new SelectNetwork(driver);
+        const networkSwitchConfirmation = new ModalConfirmation(driver);
+
+        // Validate the default network is Localhost 8545
+        await headerNavbar.check_currentSelectedNetwork('Localhost 8545');
+
+        // Validate the switch network functionality to Ethereum Mainnet
+        await headerNavbar.clickSwitchNetworkDropDown();
+        await selectNetwork.clickNetworkName('Ethereum Mainnet');
+        await homePage.check_expectedBalanceIsDisplayed('25');
+        await headerNavbar.check_currentSelectedNetwork('Ethereum Mainnet');
+        // Validate the switch network functionality to test network
+        await headerNavbar.clickSwitchNetworkDropDown();
+        await selectNetwork.clickToggleButton();
+        await selectNetwork.clickNetworkName('Localhost 8545');
+        await homePage.check_expectedBalanceIsDisplayed('25');
+        await headerNavbar.check_currentSelectedNetwork('Localhost 8545');
+
+        // Add Arbitrum network and perform the switch network functionality
+        await headerNavbar.clickSwitchNetworkDropDown();
+        await selectNetwork.fillNetworkSearchInput('Arbitrum One');
+        await selectNetwork.clickAddButton();
+        await networkSwitchConfirmation.clickApproveButton();
+        await headerNavbar.clickSwitchNetworkDropDown();
+        await selectNetwork.clickNetworkName('Arbitrum One');
+        await homePage.check_expectedBalanceIsDisplayed('25');
+        await headerNavbar.check_currentSelectedNetwork('Arbitrum One');
+
+        // Validate the switch network functionality back to Ethereum Mainnet
+        await headerNavbar.clickSwitchNetworkDropDown();
+        await selectNetwork.clickNetworkName('Ethereum Mainnet');
+        await homePage.check_expectedBalanceIsDisplayed('25');
+        await headerNavbar.check_currentSelectedNetwork('Ethereum Mainnet');
+      },
+    );
+  });
+});