✨ feat(metamask): Upgrade unlockForFixture to reload page

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

@@ -8,17 +8,31 @@ import { waitForSpinnerToVanish } from '../utils/waitForSpinnerToVanish'
 export async function unlockForFixture(page: Page, password: string) {
   const metamask = new MetaMask(page.context(), page, password)
 
-  await metamask.unlock()
-
-  // TODO: If this function times out -> page.reload() and try again.
-  await waitForSpinnerToVanish(page)
+  await unlockWalletButReloadIfSpinnerDoesNotVanish(metamask)
 
   await retryIfMetaMaskCrashAfterUnlock(page)
 
   await closePopover(page)
   await closeRecoveryPhraseReminder(page)
 }
 
+async function unlockWalletButReloadIfSpinnerDoesNotVanish(metamask: MetaMask) {
+  try {
+    await metamask.unlock()
+  } catch (e) {
+    if (e instanceof playwrightErrors.TimeoutError) {
+      console.warn('[UnlockWalletButReloadIfSpinnerDoesNotVanish] Unlocking MetaMask timed out. Reloading page...')
+
+      const page = metamask.page
+
+      await page.reload()
+      await waitForSpinnerToVanish(page)
+    } else {
+      throw e
+    }
+  }
+}
+
 async function retryIfMetaMaskCrashAfterUnlock(page: Page) {
   const homePageLogoLocator = page.locator(HomePage.selectors.logo)
 

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

@@ -28,7 +28,7 @@ export async function addNetwork(page: Page, network: Network) {
 
   // We have to wait for the RPC URL error to appear.
   const rpcUrlErrorLocator = page.locator(Selectors.settings.networks.newNetworkForm.rpcUrlError)
-  if (await waitFor(() => rpcUrlErrorLocator.isVisible(), 1_000, false)) {
+  if (await waitFor(() => rpcUrlErrorLocator.isVisible(), 2_000, false)) {
     const rpcUrlErrorText = await rpcUrlErrorLocator.textContent({ timeout: 1_000 })
     throw new Error(`[AddNetwork] RPC URL error: ${rpcUrlErrorText}`)
   }
@@ -37,7 +37,7 @@ export async function addNetwork(page: Page, network: Network) {
 
   // We have to wait for the Chain ID error to appear.
   const chainIdErrorLocator = page.locator(Selectors.settings.networks.newNetworkForm.chainIdError)
-  if (await waitFor(() => chainIdErrorLocator.isVisible(), 1_000, false)) {
+  if (await waitFor(() => chainIdErrorLocator.isVisible(), 2_000, false)) {
     const chainIdErrorText = await chainIdErrorLocator.textContent({ timeout: 1_000 })
     throw new Error(`[AddNetwork] Chain ID error: ${chainIdErrorText}`)
   }

wallets/metamask/src/utils/waitForSpinnerToVanish.ts

@@ -1,6 +1,7 @@
 import type { Page } from '@playwright/test'
 import { LoadingSelectors } from '../selectors'
 
+// TODO: Should we decrease the timeout?
 // TODO: Not sure if hard coding the timeout is a good idea but must be enough for now.
 const DEFAULT_TIMEOUT = 10_000
 

wallets/metamask/test/e2e/metamask/addNetwork.spec.ts

@@ -9,14 +9,6 @@ const test = testWithSynpress(basicSetup, unlockForFixture)
 
 const { expect } = test
 
-const optimismMainnet = {
-  name: 'OP Mainnet',
-  rpcUrl: 'https://mainnet.optimism.io',
-  chainId: 10,
-  symbol: 'ETH',
-  blockExplorerUrl: 'https://optimistic.etherscan.io'
-}
-
 test('should add network and close network added popup', async ({ context, metamaskPage, createAnvilNode }) => {
   const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword)
 
@@ -70,6 +62,14 @@ test('should validate the network object with Zod', async ({ context, metamaskPa
 test('should throw if there is an issue with rpc url', async ({ context, metamaskPage }) => {
   const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword)
 
+  const optimismMainnet = {
+    name: 'OP Mainnet',
+    rpcUrl: 'https://mainnet.optimism.io',
+    chainId: 10,
+    symbol: 'ETH',
+    blockExplorerUrl: 'https://optimistic.etherscan.io'
+  }
+
   const promise = metamask.addNetwork({
     ...optimismMainnet,
     rpcUrl: 'hps://mainnet.optimism.io' // Incorrect.
@@ -80,15 +80,25 @@ test('should throw if there is an issue with rpc url', async ({ context, metamas
   )
 })
 
-test('should throw if there is an issue with chain id', async ({ context, metamaskPage }) => {
+test('should throw if there is an issue with chain id', async ({ context, metamaskPage, createAnvilNode }) => {
   const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword)
 
+  const { rpcUrl, chainId } = await createAnvilNode()
+
+  const network = {
+    name: 'Anvil',
+    rpcUrl,
+    chainId,
+    symbol: 'ETH',
+    blockExplorerUrl: 'https://etherscan.io/'
+  }
+
   const promise = metamask.addNetwork({
-    ...optimismMainnet,
+    ...network,
     chainId: 0x42069 // Incorrect.
   })
 
   await expect(promise).rejects.toThrowError(
-    '[AddNetwork] Chain ID error: The RPC URL you have entered returned a different chain ID (10). Please update the Chain ID to match the RPC URL of the network you are trying to add.'
+    '[AddNetwork] Chain ID error: The RPC URL you have entered returned a different chain ID (31337). Please update the Chain ID to match the RPC URL of the network you are trying to add.'
   )
 })