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'); + }, + ); + }); +});