From 82eb8ff905fa154f59e0c52cc08bf666ef20ffd2 Mon Sep 17 00:00:00 2001 From: Harika <153644847+hjetpoluru@users.noreply.github.com> Date: Thu, 24 Oct 2024 14:56:50 -0400 Subject: [PATCH] test: Added e2e for switch network (#27967) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** This is e2e PR for switch network [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27967?quickstart=1) ## **Related issues** Fixes: https://github.com/MetaMask/MetaMask-planning/issues/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> --- .../network-switch-modal-confirmation.ts | 19 ++++++ .../pages/dialog/select-network.ts | 61 +++++++++++++++++ test/e2e/page-objects/pages/header-navbar.ts | 19 ++++-- test/e2e/tests/network/switch-network.spec.ts | 66 +++++++++++++++++++ 4 files changed, 161 insertions(+), 4 deletions(-) create mode 100644 test/e2e/page-objects/pages/dialog/network-switch-modal-confirmation.ts create mode 100644 test/e2e/page-objects/pages/dialog/select-network.ts create mode 100644 test/e2e/tests/network/switch-network.spec.ts diff --git a/test/e2e/page-objects/pages/dialog/network-switch-modal-confirmation.ts b/test/e2e/page-objects/pages/dialog/network-switch-modal-confirmation.ts new file mode 100644 index 000000000000..a12aa0804771 --- /dev/null +++ b/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 { + console.log('Click Approve Button'); + await this.driver.clickElementAndWaitToDisappear(this.submitButton); + } +} + +export default networkSwitchModalConfirmation; diff --git a/test/e2e/page-objects/pages/dialog/select-network.ts b/test/e2e/page-objects/pages/dialog/select-network.ts new file mode 100644 index 000000000000..6e71e5d311d5 --- /dev/null +++ b/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 { + console.log(`Click ${networkName}`); + this.networkName = `[data-testid="${networkName}"]`; + await this.driver.clickElement(this.networkName); + } + + async addNewNetwork(): Promise { + console.log('Click Add network'); + await this.driver.clickElement(this.addNetworkButton); + } + + async clickCloseButton(): Promise { + console.log('Click Close Button'); + await this.driver.clickElementAndWaitToDisappear(this.closeButton); + } + + async clickToggleButton(): Promise { + console.log('Click Toggle Button'); + await this.driver.clickElement(this.toggleButton); + } + + async fillNetworkSearchInput(networkName: string): Promise { + console.log(`Fill network search input with ${networkName}`); + await this.driver.fill(this.searchInput, networkName); + } + + async clickAddButton(): Promise { + console.log('Click Add Button'); + await this.driver.clickElementAndWaitToDisappear( + '[data-testid="test-add-button"]', + ); + } +} + +export default SelectNetwork; diff --git a/test/e2e/page-objects/pages/header-navbar.ts b/test/e2e/page-objects/pages/header-navbar.ts index 360b7a2a5d72..10127350a796 100644 --- a/test/e2e/page-objects/pages/header-navbar.ts +++ b/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,6 +70,18 @@ class HeaderNavbar { await this.driver.clickElement(this.settingsButton); } + async clickSwitchNetworkDropDown(): Promise { + console.log(`Click switch network menu`); + await this.driver.clickElement(this.switchNetworkDropDown); + } + + async check_currentSelectedNetwork(networkName: string): Promise { + 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. * @@ -78,7 +89,7 @@ class HeaderNavbar { */ async switchToNetwork(networkName: string): Promise { 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}"]`, ); } diff --git a/test/e2e/tests/network/switch-network.spec.ts b/test/e2e/tests/network/switch-network.spec.ts new file mode 100644 index 000000000000..b684a4a8ef1e --- /dev/null +++ b/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'); + }, + ); + }); +});