feat: added test network as selected network if globally selected for…

… connection Request (#27980) This PR is to select a test network in the default selected networks list if its the globally selected network at the time of connection request. ## **Related issues** Fixes: [#27891](#27891) ## **Manual testing steps** 1. Run extension with yarn start 2. Switch to Sepolia 3. Go to test-dapp, click on connect. 4. In the connections page, check Sepolia is the selected along with non test networks 5. Click confirm, dapp should be connected to MM and user should be on Sepolia network in MM. ## **Screenshots/Recordings** ### **Before** https://github.com/user-attachments/assets/127fc7bb-2e68-411a-b407-7f6d5158e911 ### **After** https://github.com/user-attachments/assets/dd0b5aa6-404a-421f-93a4-67cab43d60c6 ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
MetaMask · Oct 29, 2024 · 1eb190f · 1eb190f
1 parent f37388c
commit 1eb190f
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 64 deletions.
diff --git a/test/e2e/api-specs/ConfirmationRejectionRule.ts b/test/e2e/api-specs/ConfirmationRejectionRule.ts
@@ -73,20 +73,6 @@ export class ConfirmationsRejectRule implements Rule {
                 tag: 'button',
               });
 
-              const editButtons = await this.driver.findElements(
-                '[data-testid="edit"]',
-              );
-              await editButtons[1].click();
-
-              await this.driver.clickElement({
-                text: 'Localhost 8545',
-                tag: 'p',
-              });
-
-              await this.driver.clickElement(
-                '[data-testid="connect-more-chains-button"]',
-              );
-
               const screenshotTwo = await this.driver.driver.takeScreenshot();
               call.attachments.push({
                 type: 'image',

diff --git a/test/e2e/helpers.js b/test/e2e/helpers.js
@@ -783,16 +783,6 @@ const connectToDapp = async (driver) => {
 
   await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
-  const editButtons = await driver.findElements('[data-testid="edit"]');
-  await editButtons[1].click();
-
-  await driver.clickElement({
-    text: 'Localhost 8545',
-    tag: 'p',
-  });
-
-  await driver.clickElement('[data-testid="connect-more-chains-button"]');
-
   await driver.clickElementAndWaitForWindowToClose({
     text: 'Connect',
     tag: 'button',

diff --git a/test/e2e/json-rpc/switchEthereumChain.spec.js b/test/e2e/json-rpc/switchEthereumChain.spec.js
@@ -157,8 +157,34 @@ describe('Switch Ethereum Chain for two dapps', function () {
           tag: 'button',
         });
 
-        await driver.switchToWindowWithUrl(DAPP_ONE_URL);
+        // Switch to Dapp One and connect it
+        await driver.switchToWindowWithUrl(DAPP_URL);
+        await driver.findClickableElement({
+          text: 'Connect',
+          tag: 'button',
+        });
+        await driver.clickElement('#connectButton');
 
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        const editButtons = await driver.findElements('[data-testid="edit"]');
+
+        await editButtons[1].click();
+
+        // Disconnect Localhost 8545
+        await driver.clickElement({
+          text: 'Localhost 8545',
+          tag: 'p',
+        });
+
+        await driver.clickElement('[data-testid="connect-more-chains-button"]');
+
+        await driver.clickElementAndWaitForWindowToClose({
+          text: 'Connect',
+          tag: 'button',
+        });
+
+        // Switch to Dapp Two
+        await driver.switchToWindowWithUrl(DAPP_ONE_URL);
         // Initiate send transaction on Dapp two
         await driver.clickElement('#sendButton');
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
@@ -181,8 +207,6 @@ describe('Switch Ethereum Chain for two dapps', function () {
         await driver.executeScript(
           `window.ethereum.request(${switchEthereumChainRequest})`,
         );
-
-        // Switch to tx and confirm send tx.
         await switchToNotificationWindow(driver, 4);
         await driver.findClickableElements({
           text: 'Confirm',
@@ -192,7 +216,6 @@ describe('Switch Ethereum Chain for two dapps', function () {
           text: 'Confirm',
           tag: 'button',
         });
-
         // Delay here after notification for second notification popup for switchEthereumChain
         await driver.delay(1000);
 
@@ -203,7 +226,12 @@ describe('Switch Ethereum Chain for two dapps', function () {
           text: 'Confirm',
           tag: 'button',
         });
-        await driver.clickElement({ text: 'Confirm', tag: 'button' });
+        await driver.clickElementAndWaitForWindowToClose({
+          text: 'Confirm',
+          tag: 'button',
+        });
+        await driver.switchToWindowWithUrl(DAPP_URL);
+        await driver.findElement({ css: '#chainId', text: '0x539' });
       },
     );
   });
@@ -273,7 +301,18 @@ describe('Switch Ethereum Chain for two dapps', function () {
         await driver.clickElement('#connectButton');
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        const editButtons = await driver.findElements('[data-testid="edit"]');
+
+        // Click the edit button for networks
+        await editButtons[1].click();
+
+        // Disconnect Mainnet
+        await driver.clickElement({
+          text: 'Localhost 8545',
+          tag: 'p',
+        });
 
+        await driver.clickElement('[data-testid="connect-more-chains-button"]');
         await driver.clickElementAndWaitForWindowToClose({
           text: 'Connect',
           tag: 'button',
@@ -293,14 +332,11 @@ describe('Switch Ethereum Chain for two dapps', function () {
         await driver.executeScript(
           `window.ethereum.request(${switchEthereumChainRequest})`,
         );
-
-        // Switch to notification of switchEthereumChain
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
         await driver.findClickableElements({
           text: 'Confirm',
           tag: 'button',
         });
-
         // Switch back to dapp one
         await driver.switchToWindow(dappOne);
         assert.equal(await driver.getCurrentUrl(), `${DAPP_URL}/`);
@@ -397,11 +433,22 @@ describe('Switch Ethereum Chain for two dapps', function () {
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
+        const editButtons = await driver.findElements('[data-testid="edit"]');
+
+        // Click the edit button for networks
+        await editButtons[1].click();
+
+        // Disconnect Mainnet
+        await driver.clickElement({
+          text: 'Localhost 8545',
+          tag: 'p',
+        });
+
+        await driver.clickElement('[data-testid="connect-more-chains-button"]');
         await driver.clickElementAndWaitForWindowToClose({
           text: 'Connect',
           tag: 'button',
         });
-
         await driver.switchToWindow(dappTwo);
         assert.equal(await driver.getCurrentUrl(), `${DAPP_ONE_URL}/`);
 

diff --git a/test/e2e/page-objects/pages/test-dapp.ts b/test/e2e/page-objects/pages/test-dapp.ts
@@ -209,15 +209,6 @@ class TestDapp {
     await this.driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
     await this.driver.waitForSelector(this.connectMetaMaskMessage);
 
-    // TODO: Extra steps needed to preserve the current network.
-    // Following steps can be removed once the issue is fixed (#27891)
-    const editNetworkButton = await this.driver.findClickableElements(
-      this.editConnectButton,
-    );
-    await editNetworkButton[1].click();
-    await this.driver.clickElement(this.localhostCheckbox);
-    await this.driver.clickElement(this.updateNetworkButton);
-
     await this.driver.clickElementAndWaitForWindowToClose(
       this.confirmDialogButton,
     );

diff --git a/test/e2e/snaps/test-snap-txinsights-v2.spec.js b/test/e2e/snaps/test-snap-txinsights-v2.spec.js
@@ -127,6 +127,11 @@ describe('Test Snap TxInsights-v2', function () {
           tag: 'button',
           text: 'Activity',
         });
+        // wait for transaction confirmation
+        await driver.waitForSelector({
+          css: '.transaction-status-label',
+          text: 'Confirmed',
+        });
       },
     );
   });

diff --git a/test/e2e/tests/connections/edit-networks-flow.spec.js b/test/e2e/tests/connections/edit-networks-flow.spec.js
@@ -9,11 +9,6 @@ const {
 } = require('../../helpers');
 const FixtureBuilder = require('../../fixture-builder');
 
-async function switchToNetworkByName(driver, networkName) {
-  await driver.clickElement('.mm-picker-network');
-  await driver.clickElement(`[data-testid="${networkName}"]`);
-}
-
 describe('Edit Networks Flow', function () {
   it('should be able to edit networks', async function () {
     await withFixtures(
@@ -43,9 +38,6 @@ describe('Edit Networks Flow', function () {
         await driver.clickElement(
           '.mm-modal-content__dialog button[aria-label="Close"]',
         );
-
-        // Switch to first network, whose send transaction was just confirmed
-        await switchToNetworkByName(driver, 'Localhost 8545');
         await locateAccountBalanceDOM(driver);
         await driver.clickElement(
           '[data-testid ="account-options-menu-button"]',

diff --git a/test/e2e/tests/request-queuing/dapp1-switch-dapp2-send.spec.js b/test/e2e/tests/request-queuing/dapp1-switch-dapp2-send.spec.js
@@ -51,6 +51,17 @@ describe('Request Queuing Dapp 1, Switch Tx -> Dapp 2 Send Tx', function () {
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
+        const editButtons = await driver.findElements('[data-testid="edit"]');
+
+        await editButtons[1].click();
+
+        // Disconnect Localhost 8545
+        await driver.clickElement({
+          text: 'Localhost 8545',
+          tag: 'p',
+        });
+
+        await driver.clickElement('[data-testid="connect-more-chains-button"]');
         await driver.clickElementAndWaitForWindowToClose({
           text: 'Connect',
           tag: 'button',
@@ -93,7 +104,7 @@ describe('Request Queuing Dapp 1, Switch Tx -> Dapp 2 Send Tx', function () {
           params: [{ chainId: '0x539' }],
         });
 
-        // Initiate switchEthereumChain on Dapp Two
+        // Initiate switchEthereumChain on Dapp One
         await driver.executeScript(
           `window.ethereum.request(${switchEthereumChainRequest})`,
         );
@@ -192,7 +203,17 @@ describe('Request Queuing Dapp 1, Switch Tx -> Dapp 2 Send Tx', function () {
         await driver.clickElement('#connectButton');
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        const editButtons = await driver.findElements('[data-testid="edit"]');
+
+        await editButtons[1].click();
+
+        // Disconnect Localhost 8545
+        await driver.clickElement({
+          text: 'Localhost 8545',
+          tag: 'p',
+        });
 
+        await driver.clickElement('[data-testid="connect-more-chains-button"]');
         await driver.clickElementAndWaitForWindowToClose({
           text: 'Connect',
           tag: 'button',
@@ -235,17 +256,11 @@ describe('Request Queuing Dapp 1, Switch Tx -> Dapp 2 Send Tx', function () {
           params: [{ chainId: '0x539' }],
         });
 
-        // Initiate switchEthereumChain on Dapp Two
+        // Initiate switchEthereumChain on Dapp One
         await driver.executeScript(
           `window.ethereum.request(${switchEthereumChainRequest})`,
         );
 
-        await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
-        await driver.findElement({
-          text: 'Use your enabled networks',
-          tag: 'p',
-        });
-
         await driver.switchToWindowWithUrl(DAPP_ONE_URL);
 
         await driver.clickElement('#sendButton');
@@ -259,6 +274,7 @@ describe('Request Queuing Dapp 1, Switch Tx -> Dapp 2 Send Tx', function () {
         // There is an extra window appearing and disappearing
         // so we leave this delay until the issue is fixed (#27360)
         await driver.delay(5000);
+
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
         // Check correct network on the send confirmation.

diff --git a/test/e2e/tests/request-queuing/multi-dapp-sendTx-revokePermission.spec.js b/test/e2e/tests/request-queuing/multi-dapp-sendTx-revokePermission.spec.js
@@ -88,7 +88,7 @@ describe('Request Queuing for Multiple Dapps and Txs on different networks revok
         await driver.switchToWindowWithUrl(DAPP_URL);
         await driver.findElement({
           css: '[id="chainId"]',
-          text: '0x1',
+          text: '0x539',
         });
         await driver.clickElement('#sendButton');
 
@@ -108,7 +108,7 @@ describe('Request Queuing for Multiple Dapps and Txs on different networks revok
         await driver.switchToWindowWithUrl(DAPP_URL);
         await driver.findElement({
           css: '[id="chainId"]',
-          text: '0x1',
+          text: '0x539',
         });
         await driver.assertElementNotPresent({
           css: '[id="chainId"]',

diff --git a/test/e2e/tests/request-queuing/switchChain-watchAsset.spec.js b/test/e2e/tests/request-queuing/switchChain-watchAsset.spec.js
@@ -3,9 +3,9 @@ const {
   defaultGanacheOptions,
   logInWithBalanceValidation,
   openDapp,
-  switchToNotificationWindow,
   WINDOW_TITLES,
   withFixtures,
+  switchToNotificationWindow,
 } = require('../../helpers');
 const { SMART_CONTRACTS } = require('../../seeder/smart-contracts');
 const { DAPP_URL } = require('../../constants');
@@ -48,7 +48,17 @@ describe('Request Queue SwitchChain -> WatchAsset', function () {
         await driver.clickElement('#connectButton');
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        const editButtons = await driver.findElements('[data-testid="edit"]');
+
+        await editButtons[1].click();
 
+        // Disconnect Localhost 8545. By Default, this was the globally selected network
+        await driver.clickElement({
+          text: 'Localhost 8545',
+          tag: 'p',
+        });
+
+        await driver.clickElement('[data-testid="connect-more-chains-button"]');
         await driver.clickElementAndWaitForWindowToClose({
           text: 'Connect',
           tag: 'button',
@@ -72,7 +82,6 @@ describe('Request Queue SwitchChain -> WatchAsset', function () {
           text: 'Use your enabled networks',
           tag: 'p',
         });
-
         // Switch back to test dapp
         await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
 
@@ -81,7 +90,6 @@ describe('Request Queue SwitchChain -> WatchAsset', function () {
           text: 'Add Token(s) to Wallet',
           tag: 'button',
         });
-
         await switchToNotificationWindow(driver);
 
         // Confirm Switch Network

diff --git a/ui/pages/permissions-connect/connect-page/connect-page.tsx b/ui/pages/permissions-connect/connect-page/connect-page.tsx
@@ -39,6 +39,7 @@ import {
   EndowmentTypes,
   RestrictedMethods,
 } from '../../../../shared/constants/permissions';
+import { getMultichainNetwork } from '../../../selectors/multichain';
 
 export type ConnectPageRequest = {
   id: string;
@@ -92,10 +93,24 @@ export const ConnectPage: React.FC<ConnectPageProps> = ({
       ),
     [networkConfigurations],
   );
+
+  // By default, if a non test network is the globally selected network. We will only show non test networks as default selected.
+  const currentlySelectedNetwork = useSelector(getMultichainNetwork);
+  const currentlySelectedNetworkChainId =
+    currentlySelectedNetwork.network.chainId;
+  // If globally selected network is a test network, include that in the default selcted networks for connection request
+  const selectedTestNetwork = testNetworks.find(
+    (network: { chainId: string }) =>
+      network.chainId === currentlySelectedNetworkChainId,
+  );
+
+  const selectedNetworksList = selectedTestNetwork
+    ? [...nonTestNetworks, selectedTestNetwork]
+    : nonTestNetworks;
   const defaultSelectedChainIds =
     requestedChainIds.length > 0
       ? requestedChainIds
-      : nonTestNetworks.map(({ chainId }) => chainId);
+      : selectedNetworksList.map(({ chainId }) => chainId);
   const [selectedChainIds, setSelectedChainIds] = useState(
     defaultSelectedChainIds,
   );