🏗️ chore(metamask): Add core MetaMask class (#984)

wallets/metamask/src/actions/unlockForFixture.ts → wallets/metamask/src/fixture-actions/unlockForFixture.ts

@@ -1,9 +1,13 @@
 import type { Page } from '@playwright/test'
 import { errors as playwrightErrors } from '@playwright/test'
-import { CrashPageSelectors, HomePageSelectors, LoadingSelectors, unlock } from '../'
+import { MetaMask } from '../metamask'
+import { CrashPage, HomePage } from '../pages'
+import { LoadingSelectors } from '../selectors'
 
 export async function unlockForFixture(page: Page, password: string) {
-  await unlock(page, password)
+  const metamask = new MetaMask(page.context(), page, password)
+
+  await metamask.unlock()
 
   await page.locator(LoadingSelectors.spinner).waitFor({
     state: 'hidden',
@@ -14,19 +18,19 @@ export async function unlockForFixture(page: Page, password: string) {
 }
 
 async function retryIfMetaMaskCrashAfterUnlock(page: Page) {
-  const isHomePageVisible = await page.locator(HomePageSelectors.logo).isVisible()
+  const isHomePageVisible = await page.locator(HomePage.selectors.logo).isVisible()
 
   if (!isHomePageVisible) {
-    if (await page.locator(CrashPageSelectors.header).isVisible()) {
-      const errors = await page.locator(CrashPageSelectors.errors).allTextContents()
+    if (await page.locator(CrashPage.selectors.header).isVisible()) {
+      const errors = await page.locator(CrashPage.selectors.errors).allTextContents()
 
       console.warn(['[RetryIfMetaMaskCrashAfterUnlock] MetaMask crashed due to:', ...errors].join('\n'))
 
       console.log('[RetryIfMetaMaskCrashAfterUnlock] Reloading page...')
       await page.reload()
 
       try {
-        await page.locator(HomePageSelectors.logo).waitFor({
+        await page.locator(HomePage.selectors.logo).waitFor({
           state: 'visible',
           timeout: 10_000 // TODO: Extract & Make this timeout configurable.
         })

wallets/metamask/src/index.ts

@@ -1,5 +1,2 @@
-export * from './prepareExtension'
-export * from './pages'
-export * from './actions'
-export * from './selectors'
-export * from './utils/getExtensionId'
+export * from './metamask'
+export * from './fixture-actions/unlockForFixture'

wallets/metamask/src/metamask.ts

@@ -0,0 +1,35 @@
+import type { BrowserContext, Page } from '@playwright/test'
+import { CrashPage, HomePage, LockPage, NotificationPage, OnboardingPage } from './pages'
+
+export class MetaMask {
+  crashPage: CrashPage
+  onboardingPage: OnboardingPage
+  lockPage: LockPage
+  homePage: HomePage
+  notificationPage: NotificationPage
+
+  constructor(readonly context: BrowserContext, readonly page: Page, readonly password: string) {
+    this.crashPage = new CrashPage()
+
+    this.onboardingPage = new OnboardingPage(page)
+    this.lockPage = new LockPage(page)
+    this.homePage = new HomePage(page)
+    this.notificationPage = new NotificationPage(page)
+  }
+
+  async importWallet(seedPhrase: string) {
+    await this.onboardingPage.importWallet(seedPhrase, this.password)
+  }
+
+  async connectToDapp(extensionId: string) {
+    await this.notificationPage.connectToDapp(extensionId)
+  }
+
+  async lock() {
+    await this.homePage.lock()
+  }
+
+  async unlock() {
+    await this.lockPage.unlock(this.password)
+  }
+}

wallets/metamask/src/pages/CrashPage/page.ts

@@ -0,0 +1,6 @@
+import Selectors from './selectors'
+
+export class CrashPage {
+  static readonly selectors = Selectors
+  readonly selectors = Selectors
+}

wallets/metamask/src/selectors/crash/index.ts → wallets/metamask/src/pages/CrashPage/selectors/index.ts

@@ -1,6 +1,6 @@
 const container = 'section.error-page'
 
-export const CrashPageSelectors = {
+export default {
   header: `${container} > .error-page__header`,
   errors: `${container} > .error-page__details li`
 }

wallets/metamask/src/pages/HomePage/actions/index.ts

@@ -0,0 +1 @@
+export * from './lock'

wallets/metamask/src/pages/HomePage/actions/lock.ts

@@ -0,0 +1,7 @@
+import type { Page } from '@playwright/test'
+import Selectors from '../selectors'
+
+export async function lock(page: Page) {
+  await page.locator(Selectors.accountMenu.accountMenuButton).click()
+  await page.locator(Selectors.accountMenu.lockButton).click()
+}

wallets/metamask/src/pages/HomePage/page.ts

@@ -0,0 +1,18 @@
+import type { Page } from '@playwright/test'
+import { lock } from './actions'
+import Selectors from './selectors'
+
+export class HomePage {
+  static readonly selectors = Selectors
+  readonly selectors = Selectors
+
+  readonly page: Page
+
+  constructor(page: Page) {
+    this.page = page
+  }
+
+  async lock() {
+    await lock(this.page)
+  }
+}

wallets/metamask/src/selectors/main/homePage.ts → wallets/metamask/src/pages/HomePage/selectors/index.ts

@@ -1,4 +1,4 @@
-import { createDataTestSelector } from '../../utils/selectors/createDataTestSelector'
+import { createDataTestSelector } from '../../../utils/selectors/createDataTestSelector'
 
 const container = '.account-menu'
 const accountMenu = {

wallets/metamask/src/pages/LockPage/actions/index.ts

@@ -0,0 +1 @@
+export * from './unlock'

wallets/metamask/src/pages/LockPage/actions/unlock.ts

@@ -0,0 +1,10 @@
+import type { Page } from '@playwright/test'
+import { waitForSpinnerToVanish } from '../../../utils/waitForSpinnerToVanish'
+import Selectors from '../selectors'
+
+export async function unlock(page: Page, password: string) {
+  await page.locator(Selectors.passwordInput).fill(password)
+  await page.locator(Selectors.submitButton).click()
+
+  await waitForSpinnerToVanish(page)
+}

wallets/metamask/src/pages/LockPage/page.ts

@@ -0,0 +1,18 @@
+import type { Page } from '@playwright/test'
+import { unlock } from './actions'
+import Selectors from './selectors'
+
+export class LockPage {
+  static readonly selectors = Selectors
+  readonly selectors = Selectors
+
+  readonly page: Page
+
+  constructor(page: Page) {
+    this.page = page
+  }
+
+  async unlock(password: string) {
+    await unlock(this.page, password)
+  }
+}

wallets/metamask/src/pages/LockPage/selectors/index.ts

@@ -0,0 +1,6 @@
+import { createDataTestSelector } from '../../../utils/selectors/createDataTestSelector'
+
+export default {
+  passwordInput: createDataTestSelector('unlock-password'),
+  submitButton: createDataTestSelector('unlock-submit')
+}

wallets/metamask/src/actions/connectToDapp.ts → wallets/metamask/src/pages/NotificationPage/actions/connectToDapp.ts

@@ -1,5 +1,5 @@
 import type { BrowserContext } from '@playwright/test'
-import { getNotificationPage } from '../utils/getNotificationPage'
+import { getNotificationPage } from '../utils'
 
 export async function connectToDapp(context: BrowserContext, extensionId: string) {
   const notificationPage = await getNotificationPage(context, extensionId)

wallets/metamask/src/pages/NotificationPage/actions/index.ts

@@ -0,0 +1 @@
+export * from './connectToDapp'

wallets/metamask/src/pages/NotificationPage/page.ts

@@ -0,0 +1,14 @@
+import type { Page } from '@playwright/test'
+import { connectToDapp } from './actions'
+
+export class NotificationPage {
+  readonly page: Page
+
+  constructor(page: Page) {
+    this.page = page
+  }
+
+  async connectToDapp(extensionId: string) {
+    await connectToDapp(this.page.context(), extensionId)
+  }
+}

wallets/metamask/src/pages/NotificationPage/utils/index.ts

@@ -0,0 +1 @@
+export * from './getNotificationPage'

wallets/metamask/src/pages/OnboardingPage/actions/helpers/confirmSecretRecoveryPhrase.ts

@@ -1,7 +1,7 @@
 import type { Page } from '@playwright/test'
-import { SecretRecoveryPhrasePageSelectors } from '../../selectors'
+import Selectors from '../../selectors'
 
-const StepSelectors = SecretRecoveryPhrasePageSelectors.recoveryStep
+const StepSelectors = Selectors.SecretRecoveryPhrasePageSelectors.recoveryStep
 
 export async function confirmSecretRecoveryPhrase(page: Page, seedPhrase: string) {
   const seedPhraseWords = seedPhrase.split(' ')

wallets/metamask/src/pages/OnboardingPage/actions/helpers/createPassword.ts

@@ -1,7 +1,7 @@
 import type { Page } from '@playwright/test'
-import { SecretRecoveryPhrasePageSelectors } from '../../selectors'
+import Selectors from '../../selectors'
 
-const StepSelectors = SecretRecoveryPhrasePageSelectors.passwordStep
+const StepSelectors = Selectors.SecretRecoveryPhrasePageSelectors.passwordStep
 
 export async function createPassword(page: Page, password: string) {
   await page.locator(StepSelectors.passwordInput).fill(password)

wallets/metamask/src/pages/OnboardingPage/actions/importWallet.ts

@@ -1,23 +1,18 @@
 import type { Page } from '@playwright/test'
-import {
-  AnalyticsPageSelectors,
-  GetStartedPageSelectors,
-  PinExtensionPageSelectors,
-  WalletCreationSuccessPageSelectors
-} from '../selectors'
+import Selectors from '../selectors'
 import { confirmSecretRecoveryPhrase, createPassword } from './helpers'
 
 export async function importWallet(page: Page, seedPhrase: string, password: string) {
-  await page.locator(GetStartedPageSelectors.importWallet).click()
+  await page.locator(Selectors.GetStartedPageSelectors.importWallet).click()
 
-  await page.locator(AnalyticsPageSelectors.optOut).click()
+  await page.locator(Selectors.AnalyticsPageSelectors.optOut).click()
 
   // Secret Recovery Phrase Page
   await confirmSecretRecoveryPhrase(page, seedPhrase)
   await createPassword(page, password)
 
-  await page.locator(WalletCreationSuccessPageSelectors.confirmButton).click()
+  await page.locator(Selectors.WalletCreationSuccessPageSelectors.confirmButton).click()
 
-  await page.locator(PinExtensionPageSelectors.nextButton).click()
-  await page.locator(PinExtensionPageSelectors.confirmButton).click()
+  await page.locator(Selectors.PinExtensionPageSelectors.nextButton).click()
+  await page.locator(Selectors.PinExtensionPageSelectors.confirmButton).click()
 }

wallets/metamask/src/pages/OnboardingPage/page.ts

@@ -1,11 +1,13 @@
 import type { Page } from '@playwright/test'
 import { importWallet } from './actions'
-import * as Selectors from './selectors'
+import Selectors from './selectors'
 
 export class OnboardingPage {
-  readonly page: Page
+  static readonly selectors = Selectors
   readonly selectors = Selectors
 
+  readonly page: Page
+
   constructor(page: Page) {
     this.page = page
   }

wallets/metamask/src/pages/OnboardingPage/selectors/index.ts

@@ -5,7 +5,7 @@ import SecretRecoveryPhrasePageSelectors from './secretRecoveryPhrasePage'
 import WalletCreationSuccessPageSelectors from './walletCreationSuccessPage'
 
 // biome-ignore format: empty lines should be preserved
-export {
+export default {
   // Initial Welcome Page
   GetStartedPageSelectors,
 

wallets/metamask/src/pages/index.ts

@@ -1 +1,5 @@
 export * from './OnboardingPage/page'
+export * from './CrashPage/page'
+export * from './LockPage/page'
+export * from './HomePage/page'
+export * from './NotificationPage/page'

wallets/metamask/src/selectors/index.ts

@@ -1,4 +1 @@
-export * from './unlocking'
 export * from './loading'
-export * from './crash'
-export * from './main'