From 4360605f98d1bfb7d9fb07e6b19346fb7d3b2fb6 Mon Sep 17 00:00:00 2001 From: Daniel Izdebski Date: Sat, 18 Nov 2023 04:57:17 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(metamask):=20Add=20support=20f?= =?UTF-8?q?or=20showing=20test=20networks=20(#1003)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- wallets/metamask/src/metamask.ts | 17 +++++++++ .../src/pages/HomePage/actions/index.ts | 1 + .../src/pages/HomePage/actions/settings.ts | 28 ++++++++++++++ wallets/metamask/src/pages/HomePage/page.ts | 19 +++++++++- .../src/pages/HomePage/selectors/index.ts | 9 +++++ .../src/pages/HomePage/selectors/settings.ts | 24 ++++++++++++ .../e2e/metamask/goBackToHomePage.spec.ts | 20 ++++++++++ .../test/e2e/metamask/openSettings.spec.ts | 19 ++++++++++ .../test/e2e/metamask/openSidebarMenu.spec.ts | 25 ++++++++++++ .../metamask/toggleShowTestNetworks.spec.ts | 38 +++++++++++++++++++ .../test/e2e/wallet-setup/basic.setup.ts | 8 ++++ .../test/e2e/wallet-setup/connected.setup.ts | 8 ++++ 12 files changed, 215 insertions(+), 1 deletion(-) create mode 100644 wallets/metamask/src/pages/HomePage/actions/settings.ts create mode 100644 wallets/metamask/src/pages/HomePage/selectors/settings.ts create mode 100644 wallets/metamask/test/e2e/metamask/goBackToHomePage.spec.ts create mode 100644 wallets/metamask/test/e2e/metamask/openSettings.spec.ts create mode 100644 wallets/metamask/test/e2e/metamask/openSidebarMenu.spec.ts create mode 100644 wallets/metamask/test/e2e/metamask/toggleShowTestNetworks.spec.ts diff --git a/wallets/metamask/src/metamask.ts b/wallets/metamask/src/metamask.ts index d7dc12692..34760df15 100644 --- a/wallets/metamask/src/metamask.ts +++ b/wallets/metamask/src/metamask.ts @@ -1,5 +1,6 @@ import type { BrowserContext, Page } from '@playwright/test' import { CrashPage, HomePage, LockPage, NotificationPage, OnboardingPage } from './pages' +import { SettingsSidebarMenus } from './pages/HomePage/selectors/settings' const NO_EXTENSION_ID_ERROR = new Error('MetaMask extensionId is not set') @@ -131,4 +132,20 @@ export class MetaMask { await this.notificationPage.rejectPermission(this.extensionId) } + + async goBackToHomePage() { + await this.homePage.goBackToHomePage() + } + + async openSettings() { + await this.homePage.openSettings() + } + + async openSidebarMenu(menu: SettingsSidebarMenus) { + await this.homePage.openSidebarMenu(menu) + } + + async toggleShowTestNetworks() { + await this.homePage.toggleShowTestNetworks() + } } diff --git a/wallets/metamask/src/pages/HomePage/actions/index.ts b/wallets/metamask/src/pages/HomePage/actions/index.ts index 3013b3e81..54066c25d 100644 --- a/wallets/metamask/src/pages/HomePage/actions/index.ts +++ b/wallets/metamask/src/pages/HomePage/actions/index.ts @@ -1,3 +1,4 @@ export * from './lock' export * from './importWalletFromPrivateKey' export * from './switchAccount' +export * from './settings' diff --git a/wallets/metamask/src/pages/HomePage/actions/settings.ts b/wallets/metamask/src/pages/HomePage/actions/settings.ts new file mode 100644 index 000000000..ef08d11b9 --- /dev/null +++ b/wallets/metamask/src/pages/HomePage/actions/settings.ts @@ -0,0 +1,28 @@ +import type { Page } from '@playwright/test' +import Selectors from '../selectors' +import type { SettingsSidebarMenus } from '../selectors/settings' + +async function openSettings(page: Page) { + await page.locator(Selectors.accountMenu.accountMenuButton).click() + await page.locator(Selectors.accountMenu.settingsButton).click() +} + +async function openSidebarMenu(page: Page, menu: SettingsSidebarMenus) { + await page.locator(Selectors.settings.sidebarMenu(menu)).click() +} + +async function toggleShowTestNetworks(page: Page) { + // .nth(0) -> Show conversion on test networks + // .nth(1) -> Show test networks + await page.locator(Selectors.settings.advanced.showTestNetworksToggle).nth(1).click() +} + +const advanced = { + toggleShowTestNetworks +} + +export const settings = { + openSettings, + openSidebarMenu, + advanced +} diff --git a/wallets/metamask/src/pages/HomePage/page.ts b/wallets/metamask/src/pages/HomePage/page.ts index 9f989fe61..f12b62665 100644 --- a/wallets/metamask/src/pages/HomePage/page.ts +++ b/wallets/metamask/src/pages/HomePage/page.ts @@ -1,6 +1,7 @@ import type { Page } from '@playwright/test' -import { importWalletFromPrivateKey, lock, switchAccount } from './actions' +import { importWalletFromPrivateKey, lock, settings, switchAccount } from './actions' import Selectors from './selectors' +import type { SettingsSidebarMenus } from './selectors/settings' export class HomePage { static readonly selectors = Selectors @@ -12,6 +13,10 @@ export class HomePage { this.page = page } + async goBackToHomePage() { + await this.page.locator(Selectors.logo).click() + } + async lock() { await lock(this.page) } @@ -23,4 +28,16 @@ export class HomePage { async switchAccount(accountName: string) { await switchAccount(this.page, accountName) } + + async openSettings() { + await settings.openSettings(this.page) + } + + async openSidebarMenu(menu: SettingsSidebarMenus) { + await settings.openSidebarMenu(this.page, menu) + } + + async toggleShowTestNetworks() { + await settings.advanced.toggleShowTestNetworks(this.page) + } } diff --git a/wallets/metamask/src/pages/HomePage/selectors/index.ts b/wallets/metamask/src/pages/HomePage/selectors/index.ts index db58b0da8..2520c862f 100644 --- a/wallets/metamask/src/pages/HomePage/selectors/index.ts +++ b/wallets/metamask/src/pages/HomePage/selectors/index.ts @@ -1,10 +1,12 @@ import { createDataTestSelector } from '../../../utils/selectors/createDataTestSelector' +import settings from './settings' const container = '.account-menu' const accountMenu = { accountMenuButton: createDataTestSelector('account-menu-icon'), lockButton: `${container} .account-menu__lock-button`, importAccountButton: `${container} > .account-menu__item--clickable:nth-of-type(2)`, + settingsButton: `${container} > .account-menu__item--clickable:nth-of-type(5)`, accountNamesSelector: `${container} ${createDataTestSelector('account-menu__account')} .account-menu__name` } @@ -18,9 +20,16 @@ const recoveryPhraseReminder = { gotItButton: '.recovery-phrase-reminder button.btn-primary' } +const networkDropdown = { + dropdownButton: createDataTestSelector('network-display'), + networks: `${createDataTestSelector('network-droppo')} .network-dropdown-list li` +} + export default { logo: createDataTestSelector('app-header-logo'), account: createDataTestSelector('selected-account-click'), + settings, + networkDropdown, accountMenu, importAccountScreen, recoveryPhraseReminder diff --git a/wallets/metamask/src/pages/HomePage/selectors/settings.ts b/wallets/metamask/src/pages/HomePage/selectors/settings.ts new file mode 100644 index 000000000..4de46013e --- /dev/null +++ b/wallets/metamask/src/pages/HomePage/selectors/settings.ts @@ -0,0 +1,24 @@ +import { createDataTestSelector } from '../../../utils/selectors/createDataTestSelector' + +export enum SettingsSidebarMenus { + General = 1, + Advanced = 2, + Contacts = 3, + SecurityAndPrivacy = 4, + Alerts = 5, + Networks = 6, + Experimental = 7, + About = 8 +} +const sidebarMenu = (menu: SettingsSidebarMenus) => + `.settings-page__content__tabs .tab-bar__tab.pointer:nth-of-type(${menu})` + +const advanced = { + showTestNetworksToggle: `${createDataTestSelector('advanced-setting-show-testnet-conversion')} .toggle-button` +} + +export default { + SettingsSidebarMenus, + sidebarMenu, + advanced +} diff --git a/wallets/metamask/test/e2e/metamask/goBackToHomePage.spec.ts b/wallets/metamask/test/e2e/metamask/goBackToHomePage.spec.ts new file mode 100644 index 000000000..393fc398d --- /dev/null +++ b/wallets/metamask/test/e2e/metamask/goBackToHomePage.spec.ts @@ -0,0 +1,20 @@ +import { testWithSynpress } from 'fixtures' +import { MetaMask, unlockForFixture } from '../../../src' + +import basicSetup from '../wallet-setup/basic.setup' + +const test = testWithSynpress(basicSetup, unlockForFixture) + +const { expect } = test + +test('should go back to the home page', async ({ context, metamaskPage }) => { + const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword) + + await metamask.openSettings() + + await expect(metamaskPage.locator(metamask.homePage.selectors.account)).not.toBeVisible() + + await metamask.goBackToHomePage() + + await expect(metamaskPage.locator(metamask.homePage.selectors.account)).toBeVisible() +}) diff --git a/wallets/metamask/test/e2e/metamask/openSettings.spec.ts b/wallets/metamask/test/e2e/metamask/openSettings.spec.ts new file mode 100644 index 000000000..c1528b72c --- /dev/null +++ b/wallets/metamask/test/e2e/metamask/openSettings.spec.ts @@ -0,0 +1,19 @@ +import { testWithSynpress } from 'fixtures' +import { MetaMask, unlockForFixture } from '../../../src' + +import basicSetup from '../wallet-setup/basic.setup' + +const test = testWithSynpress(basicSetup, unlockForFixture) + +const { expect } = test + +test('should open settings', async ({ context, metamaskPage }) => { + const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword) + + await metamask.openSettings() + + const SidebarMenus = metamask.homePage.selectors.settings.SettingsSidebarMenus + await expect( + metamaskPage.locator(metamask.homePage.selectors.settings.sidebarMenu(SidebarMenus.General)) + ).toBeVisible() +}) diff --git a/wallets/metamask/test/e2e/metamask/openSidebarMenu.spec.ts b/wallets/metamask/test/e2e/metamask/openSidebarMenu.spec.ts new file mode 100644 index 000000000..8c9b59f90 --- /dev/null +++ b/wallets/metamask/test/e2e/metamask/openSidebarMenu.spec.ts @@ -0,0 +1,25 @@ +import { testWithSynpress } from 'fixtures' +import { MetaMask, unlockForFixture } from '../../../src' + +import basicSetup from '../wallet-setup/basic.setup' + +const test = testWithSynpress(basicSetup, unlockForFixture) + +const { expect } = test + +test('should open correct menu from the sidebar', async ({ context, metamaskPage }) => { + const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword) + + await metamask.openSettings() + + await expect( + metamaskPage.locator(metamask.homePage.selectors.settings.advanced.showTestNetworksToggle).last() + ).not.toBeVisible() + + const SidebarMenus = metamask.homePage.selectors.settings.SettingsSidebarMenus + await metamask.openSidebarMenu(SidebarMenus.Advanced) + + await expect( + metamaskPage.locator(metamask.homePage.selectors.settings.advanced.showTestNetworksToggle).last() + ).toBeVisible() +}) diff --git a/wallets/metamask/test/e2e/metamask/toggleShowTestNetworks.spec.ts b/wallets/metamask/test/e2e/metamask/toggleShowTestNetworks.spec.ts new file mode 100644 index 000000000..0a631cd62 --- /dev/null +++ b/wallets/metamask/test/e2e/metamask/toggleShowTestNetworks.spec.ts @@ -0,0 +1,38 @@ +import { testWithSynpress } from 'fixtures' +import { MetaMask, unlockForFixture } from '../../../src' + +import Selectors from '../../../src/pages/HomePage/selectors' +import basicSetup from '../wallet-setup/basic.setup' + +const test = testWithSynpress(basicSetup, unlockForFixture) + +const { expect } = test + +test('should toggle the "show test networks" option', async ({ context, metamaskPage }) => { + const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword) + + await metamaskPage.locator(metamask.homePage.selectors.networkDropdown.dropdownButton).click() + + const networksCountBefore = await metamaskPage.locator(metamask.homePage.selectors.networkDropdown.networks).count() + + // We're closing the network dropdown with this. + await metamask.goBackToHomePage() + + await metamask.openSettings() + + const SidebarMenus = metamask.homePage.selectors.settings.SettingsSidebarMenus + await metamask.openSidebarMenu(SidebarMenus.Advanced) + + await metamask.toggleShowTestNetworks() + + // We have to wait for the toggle to be "toggled". This is a hacky workaround, unfortunately. + await expect(metamaskPage.locator(Selectors.settings.advanced.showTestNetworksToggle).nth(1)).toHaveClass( + /toggle-button--on/ + ) + + await metamaskPage.locator(metamask.homePage.selectors.networkDropdown.dropdownButton).click() + + const networksCountAfter = await metamaskPage.locator(metamask.homePage.selectors.networkDropdown.networks).count() + + expect(networksCountAfter).toBeGreaterThan(networksCountBefore) +}) diff --git a/wallets/metamask/test/e2e/wallet-setup/basic.setup.ts b/wallets/metamask/test/e2e/wallet-setup/basic.setup.ts index ae0df552a..efd49d322 100644 --- a/wallets/metamask/test/e2e/wallet-setup/basic.setup.ts +++ b/wallets/metamask/test/e2e/wallet-setup/basic.setup.ts @@ -1,5 +1,6 @@ import { defineWalletSetup } from 'core' import { MetaMask } from '../../../src' +import { waitFor } from '../../../src/utils/waitFor' const SEED_PHRASE = 'test test test test test test test test test test test junk' @@ -9,4 +10,11 @@ export default defineWalletSetup(PASSWORD, async (context, walletPage) => { const metamask = new MetaMask(context, walletPage, PASSWORD) await metamask.importWallet(SEED_PHRASE) + + const recoveryPhraseReminder = walletPage.locator(metamask.homePage.selectors.recoveryPhraseReminder.gotItButton) + + const isRecoveryPhraseReminderVisible = await waitFor(recoveryPhraseReminder, 'visible', 3_000, false) + if (isRecoveryPhraseReminderVisible) { + await recoveryPhraseReminder.click() + } }) diff --git a/wallets/metamask/test/e2e/wallet-setup/connected.setup.ts b/wallets/metamask/test/e2e/wallet-setup/connected.setup.ts index 002bd3614..36af72036 100644 --- a/wallets/metamask/test/e2e/wallet-setup/connected.setup.ts +++ b/wallets/metamask/test/e2e/wallet-setup/connected.setup.ts @@ -1,6 +1,7 @@ import { defineWalletSetup } from 'core' import { getExtensionId } from 'fixtures' import { MetaMask } from '../../../src' +import { waitFor } from '../../../src/utils/waitFor' const SEED_PHRASE = 'test test test test test test test test test test test junk' @@ -13,6 +14,13 @@ export default defineWalletSetup(PASSWORD, async (context, walletPage) => { await metamask.importWallet(SEED_PHRASE) + const recoveryPhraseReminder = walletPage.locator(metamask.homePage.selectors.recoveryPhraseReminder.gotItButton) + + const isRecoveryPhraseReminderVisible = await waitFor(recoveryPhraseReminder, 'visible', 3_000, false) + if (isRecoveryPhraseReminderVisible) { + await recoveryPhraseReminder.click() + } + const page = await context.newPage() await page.goto('https://metamask.github.io/test-dapp/')