E2e request queuing (#22818)

## **Description** Adds e2e tests for the request queuing system. Tests include enable the toggle settings, sending a tx from a different selected/global network which results in a switch chain request, and request queuing for multiple daps on different networks.  ## **Related issues** Fixes: MetaMask/MetaMask-planning#1404 ## **Manual testing steps** 1. `yarn && yarn build:test` 2. `yarn test:e2e:single test/e2e/tests/request-queuing/enable-queuing.spec.js --browser=chrome` 3. `yarn test:e2e:single test/e2e/tests/request-queuing/switch-network.spec.js --browser=chrome` 4. `yarn test:e2e:single test/e2e/tests/request-queuing/multiple-networks-dapps-txs.spec.js --browser=chrome` 5. All request queuing tests should pass individually. `yarn test:e2e:chrome && yarn test:e2e:firefox` for a bonus. ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've clearly explained what problem this PR is solving and how it is solved. - [x] I've linked related issues - [x] I've included manual testing steps - [x] I've included screenshots/recordings if applicable - [x] I’ve included tests if applicable - [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] 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. - [x] I’ve properly set the pull request status: - [ ] In case it's not yet "ready for review", I've set it to "draft". - [x] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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. --------- Co-authored-by: Alex Donesky <[email protected]>
MetaMask · Feb 27, 2024 · d8e2901 · d8e2901
1 parent 39674d4
commit d8e2901
Show file tree

Hide file tree

Showing 8 changed files with 426 additions and 2 deletions.
diff --git a/test/e2e/fixture-builder.js b/test/e2e/fixture-builder.js
@@ -188,6 +188,10 @@ function defaultFixture(inputChainId = CHAIN_IDS.LOCALHOST) {
         useMultiAccountBalanceChecker: true,
         useRequestQueue: false,
       },
+      SelectedNetworkController: {
+        domains: {},
+        perDomainNetwork: false,
+      },
       SmartTransactionsController: {
         smartTransactionsState: {
           fees: {},
@@ -445,6 +449,7 @@ class FixtureBuilder {
           rpcUrl: 'http://localhost:8545',
           ticker: 'ETH',
           networkConfigurationId: 'networkConfigurationId',
+          id: 'networkConfigurationId',
         },
         '76e9cd59-d8e2-47e7-b369-9c205ccb602c': {
           id: '76e9cd59-d8e2-47e7-b369-9c205ccb602c',
@@ -846,6 +851,21 @@ class FixtureBuilder {
     });
   }
 
+  withSelectedNetworkController(data) {
+    merge(this.fixture.data.SelectedNetworkController, data);
+    return this;
+  }
+
+  withSelectedNetworkControllerPerDomain() {
+    return this.withSelectedNetworkController({
+      domains: {
+        [DAPP_URL]: 'networkConfigurationId',
+        [DAPP_ONE_URL]: '76e9cd59-d8e2-47e7-b369-9c205ccb602c',
+      },
+      perDomainNetwork: true,
+    });
+  }
+
   withSmartTransactionsController(data) {
     merge(this.fixture.data.SmartTransactionsController, data);
     return this;

diff --git a/test/e2e/tests/request-queuing/enable-queuing.spec.js b/test/e2e/tests/request-queuing/enable-queuing.spec.js
@@ -0,0 +1,46 @@
+const {
+  withFixtures,
+  defaultGanacheOptions,
+  unlockWallet,
+} = require('../../helpers');
+const FixtureBuilder = require('../../fixture-builder');
+
+describe('Toggle Request Queuing Setting', function () {
+  it('should enable the request queuing setting ', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder().build(),
+        ganacheOptions: defaultGanacheOptions,
+        failOnConsoleError: false,
+        title: this.test.fullTitle(),
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await unlockWallet(driver);
+
+        // Open account menu button
+        const accountOptionsMenuSelector =
+          '[data-testid="account-options-menu-button"]';
+        await driver.waitForSelector(accountOptionsMenuSelector);
+        await driver.clickElement(accountOptionsMenuSelector);
+
+        // Click settings from dropdown menu
+        const globalMenuSettingsSelector =
+          '[data-testid="global-menu-settings"]';
+        await driver.waitForSelector(globalMenuSettingsSelector);
+        await driver.clickElement(globalMenuSettingsSelector);
+
+        // Click Experimental tab
+        const securityAndPrivacyTabRawLocator = {
+          text: 'Experimental',
+          tag: 'div',
+        };
+        await driver.clickElement(securityAndPrivacyTabRawLocator);
+
+        // Toggle request queue setting
+        await driver.clickElement('.request-queue-toggle');
+      },
+    );
+  });
+});
diff --git a/test/e2e/tests/request-queuing/multiple-networks-dapps-txs.spec.js b/test/e2e/tests/request-queuing/multiple-networks-dapps-txs.spec.js
@@ -0,0 +1,172 @@
+const FixtureBuilder = require('../../fixture-builder');
+const {
+  withFixtures,
+  openDapp,
+  unlockWallet,
+  DAPP_URL,
+  DAPP_ONE_URL,
+  regularDelayMs,
+  WINDOW_TITLES,
+  defaultGanacheOptions,
+} = require('../../helpers');
+const { PAGES } = require('../../webdriver/driver');
+
+// TODO: Have to turn on the setting every time we want to test the setting!?!
+// TODO: Test this in prod, refresh the extension when the setting is on and you have to disable/enable it for the switchEthereumChain notification to work.
+
+describe('Request Queuing for Multiple Dapps and Txs on different networks.', function () {
+  it('should show switch network confirmations for per dapp selected networks when calling send transactions', async function () {
+    const port = 8546;
+    const chainId = 1338;
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withNetworkControllerDoubleGanache()
+          .withPermissionControllerConnectedToTwoTestDapps()
+          .withSelectedNetworkControllerPerDomain()
+          .build(),
+        dappOptions: { numberOfDapps: 2 },
+        ganacheOptions: {
+          ...defaultGanacheOptions,
+          concurrent: {
+            port,
+            chainId,
+            ganacheOptions2: defaultGanacheOptions,
+          },
+        },
+        title: this.test.fullTitle(),
+      },
+      async ({ driver }) => {
+        await unlockWallet(driver);
+
+        // Open account menu button
+        const accountOptionsMenuSelector =
+          '[data-testid="account-options-menu-button"]';
+        await driver.waitForSelector(accountOptionsMenuSelector);
+        await driver.clickElement(accountOptionsMenuSelector);
+
+        // Click settings from dropdown menu
+        const globalMenuSettingsSelector =
+          '[data-testid="global-menu-settings"]';
+        await driver.waitForSelector(globalMenuSettingsSelector);
+        await driver.clickElement(globalMenuSettingsSelector);
+
+        // Click Experimental tab
+        const securityAndPrivacyTabRawLocator = {
+          text: 'Experimental',
+          tag: 'div',
+        };
+        await driver.clickElement(securityAndPrivacyTabRawLocator);
+
+        // Toggle request queue setting
+        await driver.clickElement('.request-queue-toggle');
+
+        // Navigate to extension home screen
+        await driver.navigate(PAGES.HOME);
+
+        // Open Dapp One
+        await openDapp(driver, undefined, DAPP_URL);
+
+        await driver.switchToWindowWithTitle(
+          WINDOW_TITLES.ExtensionInFullScreenView,
+        );
+
+        // Network Selector
+        await driver.clickElement('[data-testid="network-display"]');
+
+        // Switch to second network
+        await driver.clickElement({
+          text: 'Localhost 8546',
+          css: 'p',
+        });
+
+        // TODO: Request Queuing bug when opening both dapps at the same time will have them stuck on the same network, with will be incorrect for one of them.
+        // Open Dapp Two
+        await openDapp(driver, undefined, DAPP_ONE_URL);
+
+        // Window Handling
+        const windowHandles = await driver.getAllWindowHandles();
+        const dappOne = windowHandles[1];
+        const dappTwo = windowHandles[2];
+
+        // Dapp one send tx
+        await driver.switchToWindow(dappOne);
+        await driver.clickElement('#sendButton');
+
+        // Dapp two send tx
+        await driver.switchToWindow(dappTwo);
+        await driver.clickElement('#sendButton');
+
+        // First switch network confirmation
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        await driver.clickElement({ text: 'Switch network', tag: 'button' });
+
+        // Wait for confirm tx after switch network confirmation.
+        await driver.delay(regularDelayMs);
+
+        await driver.waitUntilXWindowHandles(4);
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+
+        // Find correct network on confirm tx
+        await driver.findElement({
+          text: 'Localhost 8545',
+          tag: 'span',
+        });
+
+        // Reject Transaction
+        await driver.findClickableElement({ text: 'Confirm', tag: 'button' });
+        await driver.clickElement(
+          '[data-testid="page-container-footer-cancel"]',
+        );
+
+        // TODO: No second confirmation from dapp two will show, have to go back to the extension to see the switch chain & dapp two's tx.
+        await driver.switchToWindowWithTitle(
+          WINDOW_TITLES.ExtensionInFullScreenView,
+        );
+
+        // TODO: Reload fix to have the confirmations show
+        await driver.executeScript(`window.location.reload()`);
+
+        // Second Switch Network Confirmation
+        await driver.switchToWindowWithTitle(
+          WINDOW_TITLES.ExtensionInFullScreenView,
+        );
+        await driver.findElement({
+          css: '[data-testid="network-switch-from-network"]',
+          text: 'Localhost 8545',
+        });
+
+        await driver.findElement({
+          css: '[data-testid="network-switch-to-network"]',
+          text: 'Localhost 8546',
+        });
+
+        // Switch Network
+        await driver.clickElement({ text: 'Switch network', tag: 'button' });
+
+        // Check for unconfirmed transaction in tx list
+        await driver.wait(async () => {
+          const unconfirmedTxes = await driver.findElements(
+            '.transaction-list-item--unconfirmed',
+          );
+          return unconfirmedTxes.length === 1;
+        }, 10000);
+
+        // Click Unconfirmed Tx
+        await driver.clickElement('.transaction-list-item--unconfirmed');
+
+        // Confirm Tx
+        await driver.clickElement('[data-testid="page-container-footer-next"]');
+
+        // Check for Confirmed Transaction
+        await driver.wait(async () => {
+          const confirmedTxes = await driver.findElements(
+            '.transaction-list__completed-transactions .activity-list-item',
+          );
+          return confirmedTxes.length === 1;
+        }, 10000);
+      },
+    );
+  });
+});