diff --git a/test/e2e/accounts/account-custom-name.spec.ts b/test/e2e/accounts/account-custom-name.spec.ts deleted file mode 100644 index ca9e466e0b7f..000000000000 --- a/test/e2e/accounts/account-custom-name.spec.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { Suite } from 'mocha'; -import { - unlockWallet, - withFixtures, - locateAccountBalanceDOM, - findAnotherAccountFromAccountList, -} from '../helpers'; -import FixtureBuilder from '../fixture-builder'; -import { Driver } from '../webdriver/driver'; - -const newAccountLabel = 'Custom name'; -const anotherAccountLabel = '2nd custom name'; - -describe('Account Custom Name Persistence', function (this: Suite) { - it('persists custom account label through account change and wallet lock', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - title: this.test?.fullTitle(), - }, - async ({ driver }: { driver: Driver }) => { - await unlockWallet(driver); - // Change account label for existing account - await driver.clickElement( - '[data-testid="account-options-menu-button"]', - ); - await driver.clickElement('[data-testid="account-list-menu-details"]'); - await driver.clickElement('[data-testid="editable-label-button"]'); - await driver.fill('input[placeholder="Account name"]', newAccountLabel); - await driver.clickElement('[data-testid="save-account-label-input"]'); - await driver.clickElement('button[aria-label="Close"]'); - - // Verify account label - await driver.findElement({ - css: '[data-testid="account-menu-icon"]', - text: newAccountLabel, - }); - - // Add new account with custom label - await driver.clickElement('[data-testid="account-menu-icon"]'); - await driver.clickElement( - '[data-testid="multichain-account-menu-popover-action-button"]', - ); - await driver.clickElement( - '[data-testid="multichain-account-menu-popover-add-account"]', - ); - await driver.fill('[placeholder="Account 2"]', anotherAccountLabel); - await driver.clickElementAndWaitToDisappear({ - text: 'Add account', - tag: 'button', - }); - await locateAccountBalanceDOM(driver); - - // Verify initial custom account label after freshly added account was active - const accountOneSelector = await findAnotherAccountFromAccountList( - driver, - 1, - newAccountLabel, - ); - await driver.clickElement(accountOneSelector); - await driver.findElement({ - css: '[data-testid="account-menu-icon"]', - text: newAccountLabel, - }); - - // Lock and unlock wallet - await driver.waitForSelector( - '[data-testid="account-options-menu-button"]', - ); - await driver.clickElement( - '[data-testid="account-options-menu-button"]', - ); - await driver.clickElement({ - text: 'Lock MetaMask', - tag: 'div', - }); - await unlockWallet(driver); - - // Verify both account labels persist after unlock - await driver.findElement({ - css: '[data-testid="account-menu-icon"]', - text: newAccountLabel, - }); - await driver.clickElement('[data-testid="account-menu-icon"]'); - await driver.findElement({ - css: `.multichain-account-list-item__account-name__button`, - text: anotherAccountLabel, - }); - }, - ); - }); -}); diff --git a/test/e2e/page-objects/pages/account-list-page.ts b/test/e2e/page-objects/pages/account-list-page.ts index 5ebf7fbc861e..aeab905ba4c1 100644 --- a/test/e2e/page-objects/pages/account-list-page.ts +++ b/test/e2e/page-objects/pages/account-list-page.ts @@ -3,7 +3,7 @@ import { Driver } from '../../webdriver/driver'; class AccountListPage { private driver: Driver; - private accountListItem: object; + private accountListItem: string; private accountOptionsMenuButton: string; @@ -17,6 +17,24 @@ class AccountListPage { private pinUnpinAccountButton: string; + private createAccountButton: string; + + private addEthereumAccountButton: string; + + private accountNameInput: string; + + private addAccountConfirmButton: string; + + private accountMenuButton: string; + + private editableLabelButton: string; + + private editableLabelInput: string; + + private saveAccountLabelButton: string; + + private closeEditLabelButton: string; + constructor(driver: Driver) { this.driver = driver; this.accountOptionsMenuButton = @@ -25,12 +43,64 @@ class AccountListPage { this.pinUnpinAccountButton = '[data-testid="account-list-menu-pin"]'; this.hiddenAccountsList = '[data-testid="hidden-accounts-list"]'; this.pinnedIcon = '[data-testid="account-pinned-icon"]'; - this.accountListItem = { - text: 'Account', - css: '.multichain-account-menu-popover__list--menu-item', - }; this.hiddenAccountOptionsMenuButton = '.multichain-account-menu-popover__list--menu-item-hidden-account [data-testid="account-list-item-menu-button"]'; + this.createAccountButton = + '[data-testid="multichain-account-menu-popover-action-button"]'; + this.addEthereumAccountButton = + '[data-testid="multichain-account-menu-popover-add-account"]'; + this.accountNameInput = '#account-name'; + this.addAccountConfirmButton = + '[data-testid="submit-add-account-with-name"]'; + this.accountMenuButton = '[data-testid="account-list-menu-details"]'; + this.editableLabelButton = '[data-testid="editable-label-button"]'; + this.editableLabelInput = '[data-testid="editable-input"] input'; + this.saveAccountLabelButton = '[data-testid="save-account-label-input"]'; + this.closeEditLabelButton = 'button[aria-label="Close"]'; + // this selector needs to be used in combination with an account label text. + this.accountListItem = '.multichain-account-menu-popover__list--menu-item'; + } + + async check_pageIsLoaded(): Promise { + try { + await this.driver.waitForMultipleSelectors([ + this.createAccountButton, + this.accountOptionsMenuButton, + ]); + } catch (e) { + console.log('Timeout while waiting for account list to be loaded', e); + throw e; + } + console.log('Account list is loaded'); + } + + /** + * Adds a new account with a custom label. + * + * @param customLabel - The custom label for the new account. + */ + async addNewAccountWithCustomLabel(customLabel: string): Promise { + console.log(`Adding new account with custom label: ${customLabel}`); + await this.driver.clickElement(this.createAccountButton); + await this.driver.clickElement(this.addEthereumAccountButton); + await this.driver.fill(this.accountNameInput, customLabel); + await this.driver.clickElementAndWaitToDisappear( + this.addAccountConfirmButton, + ); + } + + /** + * Changes the label of the current account. + * + * @param newLabel - The new label to set for the account. + */ + async changeAccountLabel(newLabel: string): Promise { + console.log(`Changing account label to: ${newLabel}`); + await this.driver.clickElement(this.accountMenuButton); + await this.driver.clickElement(this.editableLabelButton); + await this.driver.fill(this.editableLabelInput, newLabel); + await this.driver.clickElement(this.saveAccountLabelButton); + await this.driver.clickElement(this.closeEditLabelButton); } async check_pageIsLoaded(): Promise { @@ -81,9 +151,31 @@ class AccountListPage { await this.driver.clickElement(this.pinUnpinAccountButton); } - async check_accountIsDisplayed(): Promise { - console.log(`Check that account is displayed in account list`); - await this.driver.waitForSelector(this.accountListItem); + async switchToAccount(expectedLabel: string): Promise { + console.log( + `Switch to account with label ${expectedLabel} in account list`, + ); + await this.driver.clickElement({ + css: this.accountListItem, + text: expectedLabel, + }); + } + + /** + * Check account is displayed in account list. + * + * @param expectedLabel - The expected account label to be displayed in accouunt list. + */ + async check_accountDisplayedInAccountList( + expectedLabel: string = 'Account', + ): Promise { + console.log( + `Check that account label ${expectedLabel} is displayed in account list`, + ); + await this.driver.waitForSelector({ + css: this.accountListItem, + text: expectedLabel, + }); } async check_accountIsPinned(): Promise { diff --git a/test/e2e/page-objects/pages/header-navbar.ts b/test/e2e/page-objects/pages/header-navbar.ts index a6d58b6b1946..fd446fbd664b 100644 --- a/test/e2e/page-objects/pages/header-navbar.ts +++ b/test/e2e/page-objects/pages/header-navbar.ts @@ -24,6 +24,21 @@ class HeaderNavbar { await this.driver.clickElement(this.accountOptionMenu); await this.driver.clickElement(this.lockMetaMaskButton); } + + /** + * Verifies that the displayed account label in header matches the expected label. + * + * @param expectedLabel - The expected label of the account. + */ + async check_accountLabel(expectedLabel: string): Promise { + console.log( + `Verify the displayed account label in header is: ${expectedLabel}`, + ); + await this.driver.waitForSelector({ + css: this.accountMenuButton, + text: expectedLabel, + }); + } } export default HeaderNavbar; diff --git a/test/e2e/page-objects/pages/homepage.ts b/test/e2e/page-objects/pages/homepage.ts index 92c5e34f2a0e..5e596021a449 100644 --- a/test/e2e/page-objects/pages/homepage.ts +++ b/test/e2e/page-objects/pages/homepage.ts @@ -20,8 +20,6 @@ class HomePage { private transactionAmountsInActivity: string; - private accountMenuButton: string; - public headerNavbar: HeaderNavbar; constructor(driver: Driver) { @@ -38,7 +36,6 @@ class HomePage { this.completedTransactions = '[data-testid="activity-list-item"]'; this.transactionAmountsInActivity = '[data-testid="transaction-list-item-primary-currency"]'; - this.accountMenuButton = '[data-testid="account-menu-icon"]'; } async check_pageIsLoaded(): Promise { @@ -84,11 +81,6 @@ class HomePage { await this.driver.clickElement(this.activityTab); } - async openAccountMenu(): Promise { - console.log(`Opening account menu`); - await this.driver.clickElement(this.accountMenuButton); - } - /** * This function checks if the specified number of confirmed transactions are displayed in the activity list on homepage. * It waits up to 10 seconds for the expected number of confirmed transactions to be visible. diff --git a/test/e2e/tests/account/account-custom-name.spec.ts b/test/e2e/tests/account/account-custom-name.spec.ts new file mode 100644 index 000000000000..336992a03a1d --- /dev/null +++ b/test/e2e/tests/account/account-custom-name.spec.ts @@ -0,0 +1,61 @@ +import { Suite } from 'mocha'; +import { Driver } from '../../webdriver/driver'; +import { defaultGanacheOptions, withFixtures } from '../../helpers'; +import FixtureBuilder from '../../fixture-builder'; +import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow'; +import AccountListPage from '../../page-objects/pages/account-list-page'; +import HeaderNavbar from '../../page-objects/pages/header-navbar'; + +const newAccountLabel = 'Custom name'; +const anotherAccountLabel = '2nd custom name'; + +describe('Account Custom Name Persistence', function (this: Suite) { + it('persists custom account label through account change and wallet lock', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: defaultGanacheOptions, + title: this.test?.fullTitle(), + }, + async ({ driver }: { driver: Driver }) => { + await loginWithBalanceValidation(driver); + + const headerNavbar = new HeaderNavbar(driver); + await headerNavbar.openAccountMenu(); + + // Change account label for existing account and verify edited account label + const accountListPage = new AccountListPage(driver); + await accountListPage.check_pageIsLoaded(); + await accountListPage.openAccountOptionsMenu(); + await accountListPage.changeAccountLabel(newAccountLabel); + await headerNavbar.check_accountLabel(newAccountLabel); + + // Add new account with custom label and verify new added account label + await headerNavbar.openAccountMenu(); + await accountListPage.check_pageIsLoaded(); + await accountListPage.addNewAccountWithCustomLabel(anotherAccountLabel); + await headerNavbar.check_accountLabel(anotherAccountLabel); + + // Switch back to the first account and verify first custom account persists + await headerNavbar.openAccountMenu(); + await accountListPage.check_pageIsLoaded(); + await accountListPage.check_accountDisplayedInAccountList( + newAccountLabel, + ); + await accountListPage.switchToAccount(newAccountLabel); + + // Lock and unlock wallet + await headerNavbar.lockMetaMask(); + await loginWithBalanceValidation(driver); + + // Verify both account labels persist after unlock + await headerNavbar.check_accountLabel(newAccountLabel); + await headerNavbar.openAccountMenu(); + await accountListPage.check_pageIsLoaded(); + await accountListPage.check_accountDisplayedInAccountList( + anotherAccountLabel, + ); + }, + ); + }); +}); diff --git a/test/e2e/tests/account/account-hide-unhide.spec.ts b/test/e2e/tests/account/account-hide-unhide.spec.ts index 136cf32fb5cd..309ad9339fc8 100644 --- a/test/e2e/tests/account/account-hide-unhide.spec.ts +++ b/test/e2e/tests/account/account-hide-unhide.spec.ts @@ -3,8 +3,8 @@ import { Driver } from '../../webdriver/driver'; import { withFixtures, defaultGanacheOptions } from '../../helpers'; import FixtureBuilder from '../../fixture-builder'; import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow'; -import HomePage from '../../page-objects/pages/homepage'; import AccountListPage from '../../page-objects/pages/account-list-page'; +import HeaderNavbar from '../../page-objects/pages/header-navbar'; describe('Account list - hide/unhide functionality', function (this: Suite) { it('hide and unhide account by clicking hide and unhide button', async function () { @@ -16,7 +16,7 @@ describe('Account list - hide/unhide functionality', function (this: Suite) { }, async ({ driver }: { driver: Driver }) => { await loginWithBalanceValidation(driver); - new HomePage(driver).openAccountMenu(); + new HeaderNavbar(driver).openAccountMenu(); // hide account const accountListPage = new AccountListPage(driver); @@ -29,7 +29,7 @@ describe('Account list - hide/unhide functionality', function (this: Suite) { await accountListPage.openHiddenAccountsList(); await accountListPage.openHiddenAccountOptions(); await accountListPage.unhideAccount(); - await accountListPage.check_accountIsDisplayed(); + await accountListPage.check_accountDisplayedInAccountList(); }, ); }); diff --git a/test/e2e/tests/account/account-pin-unpin.spec.ts b/test/e2e/tests/account/account-pin-unpin.spec.ts index 8c8bcea59796..114a2e32c008 100644 --- a/test/e2e/tests/account/account-pin-unpin.spec.ts +++ b/test/e2e/tests/account/account-pin-unpin.spec.ts @@ -3,8 +3,8 @@ import { Driver } from '../../webdriver/driver'; import { withFixtures, defaultGanacheOptions } from '../../helpers'; import FixtureBuilder from '../../fixture-builder'; import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow'; -import HomePage from '../../page-objects/pages/homepage'; import AccountListPage from '../../page-objects/pages/account-list-page'; +import HeaderNavbar from '../../page-objects/pages/header-navbar'; describe('Account list - pin/unpin functionality', function (this: Suite) { it('pin and unpin account by clicking the pin/unpin button', async function () { @@ -16,7 +16,7 @@ describe('Account list - pin/unpin functionality', function (this: Suite) { }, async ({ driver }: { driver: Driver }) => { await loginWithBalanceValidation(driver); - new HomePage(driver).openAccountMenu(); + new HeaderNavbar(driver).openAccountMenu(); // pin account const accountListPage = new AccountListPage(driver); @@ -42,7 +42,7 @@ describe('Account list - pin/unpin functionality', function (this: Suite) { }, async ({ driver }: { driver: Driver }) => { await loginWithBalanceValidation(driver); - new HomePage(driver).openAccountMenu(); + new HeaderNavbar(driver).openAccountMenu(); // pin account const accountListPage = new AccountListPage(driver); @@ -61,7 +61,7 @@ describe('Account list - pin/unpin functionality', function (this: Suite) { await accountListPage.openHiddenAccountsList(); await accountListPage.openHiddenAccountOptions(); await accountListPage.unhideAccount(); - await accountListPage.check_accountIsDisplayed(); + await accountListPage.check_accountDisplayedInAccountList(); await accountListPage.check_accountIsUnpinned(); }, );