✨ feat: Add renameAccount method (#1145)

* rename account method * fix test by fetching nth * fix test by fetching nth * use more accurate classname selector * deal with test, remove unnecessary selector * test with load * return race * remove test * only rem --------- Co-authored-by: drptbl <[email protected]>
Synthetixio · Jun 24, 2024 · 23f5c7a · 23f5c7a
1 parent 894106e
commit 23f5c7a
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 1 deletion.
diff --git a/wallets/metamask/src/MetaMask.ts b/wallets/metamask/src/MetaMask.ts
@@ -98,6 +98,15 @@ export class MetaMask {
     await this.homePage.addNewAccount(accountName)
   }
 
+  /**
+   * Renames the currently selected account.
+   *
+   * @param newAccountName - The new name for the account.
+   */
+  async renameAccount(newAccountName: string) {
+    await this.homePage.renameAccount(newAccountName)
+  }
+
   /**
    * Imports a wallet using the given private key.
    *

diff --git a/wallets/metamask/src/pages/HomePage/actions/index.ts b/wallets/metamask/src/pages/HomePage/actions/index.ts
@@ -8,4 +8,5 @@ export * from './addNetwork'
 export * from './toggleShowTestNetworks'
 export * from './addNewAccount'
 export * from './transactionDetails'
+export * from './renameAccount'
 export { default as getAccountAddress } from './getAccountAddress'
diff --git a/wallets/metamask/src/pages/HomePage/actions/renameAccount.ts b/wallets/metamask/src/pages/HomePage/actions/renameAccount.ts
@@ -0,0 +1,11 @@
+import type { Page } from '@playwright/test'
+import Selectors from '../selectors'
+
+export async function renameAccount(page: Page, newAccountName: string) {
+  await page.locator(Selectors.accountMenu.accountButton).click()
+  await page.locator(Selectors.accountMenu.renameAccountMenu.listItemButton).nth(0).click()
+  await page.locator(Selectors.threeDotsMenu.accountDetailsButton).click()
+  await page.locator(Selectors.accountMenu.renameAccountMenu.renameButton).click()
+  await page.locator(Selectors.accountMenu.renameAccountMenu.renameInput).fill(newAccountName)
+  await page.locator(Selectors.accountMenu.renameAccountMenu.confirmRenameButton).click()
+}
diff --git a/wallets/metamask/src/pages/HomePage/page.ts b/wallets/metamask/src/pages/HomePage/page.ts
@@ -5,6 +5,7 @@ import {
   getAccountAddress,
   importWalletFromPrivateKey,
   lock,
+  renameAccount,
   settings,
   switchAccount,
   switchNetwork,
@@ -37,6 +38,10 @@ export class HomePage {
     await addNewAccount(this.page, accountName)
   }
 
+  async renameAccount(newAccountName: string) {
+    await renameAccount(this.page, newAccountName)
+  }
+
   async getAccountAddress() {
     return await getAccountAddress(this.page)
   }

diff --git a/wallets/metamask/src/pages/HomePage/selectors/index.ts b/wallets/metamask/src/pages/HomePage/selectors/index.ts
@@ -8,6 +8,13 @@ const addNewAccountMenu = {
   createButton: `${accountMenuContainer} button.mm-button-primary`
 }
 
+const renameAccountMenu = {
+  listItemButton: `${accountMenuContainer} ${createDataTestSelector('account-list-item-menu-button')}`,
+  renameButton: `${createDataTestSelector('editable-label-button')}`,
+  confirmRenameButton: 'div.editable-label button.mm-button-icon',
+  renameInput: '.mm-text-field .mm-box--padding-right-4'
+}
+
 const importAccountMenu = {
   privateKeyInput: `${accountMenuContainer} input#private-key-box`,
   importButton: `${accountMenuContainer} ${createDataTestSelector('import-account-confirm-button')}`,
@@ -29,7 +36,8 @@ const addAccountMenu = {
 const accountMenu = {
   accountButton: createDataTestSelector('account-menu-icon'),
   accountNames: `${accountMenuContainer} .multichain-account-menu-popover__list .multichain-account-list-item__account-name__button`,
-  addAccountMenu
+  addAccountMenu,
+  renameAccountMenu
 }
 
 const threeDotsMenu = {

diff --git a/wallets/metamask/test/e2e/renameAccount.spec.ts b/wallets/metamask/test/e2e/renameAccount.spec.ts
@@ -0,0 +1,17 @@
+import { testWithSynpress } from '@synthetixio/synpress-core'
+import { MetaMask, metaMaskFixtures } from '../../src'
+
+import basicSetup from '../wallet-setup/basic.setup'
+
+const test = testWithSynpress(metaMaskFixtures(basicSetup))
+
+const { expect } = test
+
+test('should rename current account with specified name', async ({ context, metamaskPage }) => {
+  const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword)
+
+  const accountName = 'Test Account'
+  await metamask.renameAccount(accountName)
+
+  await expect(metamaskPage.locator(metamask.homePage.selectors.accountMenu.accountButton)).toHaveText(accountName)
+})