🐛 fix(metamask): Close popup after adding new network

Synthetixio · Nov 27, 2023 · 7328dd9 · 7328dd9
1 parent ed74ac1
commit 7328dd9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/wallets/metamask/src/pages/HomePage/actions/addNetwork.ts b/wallets/metamask/src/pages/HomePage/actions/addNetwork.ts
@@ -1,5 +1,6 @@
 import type { Page } from '@playwright/test'
 import { z } from 'zod'
+import { clickLocatorIfCondition } from '../../../utils/closePopup'
 import { waitFor } from '../../../utils/waitFor'
 import Selectors from '../selectors'
 
@@ -48,4 +49,9 @@ export async function addNetwork(page: Page, network: Network) {
   }
 
   await page.locator(Selectors.settings.networks.newNetworkForm.saveButton).click()
+
+  // Closes the "Network added successfully!" popup.
+  // Note: The "Dismiss" button does NOTHING and the network is ALWAYS automatically switched.
+  const switchToNetworkButtonLocator = page.locator(Selectors.networkAddedPopover.switchToNetworkButton)
+  await clickLocatorIfCondition(switchToNetworkButtonLocator, () => switchToNetworkButtonLocator.isVisible(), 1_000)
 }
diff --git a/wallets/metamask/src/pages/HomePage/selectors/index.ts b/wallets/metamask/src/pages/HomePage/selectors/index.ts
@@ -37,6 +37,11 @@ const popover = {
   closeButton: `${popoverContainer} ${createDataTestSelector('popover-close')}`
 }
 
+const networkAddedPopover = {
+  switchToNetworkButton: `${popoverContainer} button.btn-primary`,
+  dismissButton: `${popoverContainer} button.btn-secondary`
+}
+
 const recoveryPhraseReminder = {
   gotItButton: '.recovery-phrase-reminder button.btn-primary'
 }
@@ -75,5 +80,6 @@ export default {
   networkDropdown,
   accountMenu,
   recoveryPhraseReminder,
-  popover
+  popover,
+  networkAddedPopover
 }
diff --git a/wallets/metamask/test/e2e/metamask/addNetwork.spec.ts b/wallets/metamask/test/e2e/metamask/addNetwork.spec.ts
@@ -1,7 +1,8 @@
 import { testWithSynpress } from 'fixtures'
+import { z } from 'zod'
 import { MetaMask, unlockForFixture } from '../../../src'
+import { waitFor } from '../../../src/utils/waitFor'
 
-import { z } from 'zod'
 import basicSetup from '../wallet-setup/basic.setup'
 
 const test = testWithSynpress(basicSetup, unlockForFixture)
@@ -16,11 +17,18 @@ const network = {
   blockExplorerUrl: 'https://optimistic.etherscan.io'
 }
 
-test('should add network', async ({ context, metamaskPage }) => {
+test('should add network and close network added popup', async ({ context, metamaskPage }) => {
   const metamask = new MetaMask(context, metamaskPage, basicSetup.walletPassword)
 
   await metamask.addNetwork(network)
 
+  const isNetworkAddedPopupVisible = await waitFor(
+    () => metamaskPage.locator(metamask.homePage.selectors.networkAddedPopover.switchToNetworkButton).isVisible(),
+    1_000,
+    false
+  )
+  expect(isNetworkAddedPopupVisible).toBe(false)
+
   await expect(metamaskPage.locator(metamask.homePage.selectors.currentNetwork)).toHaveText(network.name)
 })