E2e dapp interactions (#14149)

* Connect to a second Dapp when MM is locked

* Refactored dapp server setup to allow multiple servers

* Triggering notification with MM locked

* Fix testcase description

* Fix lint

* Merge develop and remove extra line

* Updated baseport and included iselementPresent for a clearer assertion

* Fix lint issues

* Use Ganache pattern for defining number of Dapp servers

* Fix lint issues

test/e2e/helpers.js

@@ -13,7 +13,7 @@ const tinyDelayMs = 200;
 const regularDelayMs = tinyDelayMs * 2;
 const largeDelayMs = regularDelayMs * 2;
 const veryLargeDelayMs = largeDelayMs * 2;
-const dappPort = 8080;
+const dappBasePort = 8080;
 
 const convertToHexValue = (val) => `0x${new BigNumber(val, 10).toString(16)}`;
 
@@ -23,6 +23,7 @@ async function withFixtures(options, testSuite) {
     fixtures,
     ganacheOptions,
     driverOptions,
+    dappOptions,
     title,
     failOnConsoleError = true,
     dappPath = undefined,
@@ -35,7 +36,8 @@ async function withFixtures(options, testSuite) {
   const https = await mockttp.generateCACertificate();
   const mockServer = mockttp.getLocal({ https, cors: true });
   let secondaryGanacheServer;
-  let dappServer;
+  let numberOfDapps = dapp ? 1 : 0;
+  const dappServer = [];
 
   let webDriver;
   let failed = false;
@@ -54,26 +56,31 @@ async function withFixtures(options, testSuite) {
     await fixtureServer.start();
     await fixtureServer.loadState(path.join(__dirname, 'fixtures', fixtures));
     if (dapp) {
-      let dappDirectory;
+      if (dappOptions?.numberOfDapps) {
-      if (dappPath) {
+        numberOfDapps = dappOptions.numberOfDapps;
-        dappDirectory = path.resolve(__dirname, dappPath);
+      }
-      } else {
+      for (let i = 0; i < numberOfDapps; i++) {
-        dappDirectory = path.resolve(
+        let dappDirectory;
-          __dirname,
+        if (dappPath) {
-          '..',
+          dappDirectory = path.resolve(__dirname, dappPath);
-          '..',
+        } else {
-          'node_modules',
+          dappDirectory = path.resolve(
-          '@metamask',
+            __dirname,
-          'test-dapp',
+            '..',
-          'dist',
+            '..',
-        );
+            'node_modules',
+            '@metamask',
+            'test-dapp',
+            'dist',
+          );
+        }
+        dappServer.push(createStaticServer(dappDirectory));
+        dappServer[i].listen(`${dappBasePort + i}`);
+        await new Promise((resolve, reject) => {
+          dappServer[i].on('listening', resolve);
+          dappServer[i].on('error', reject);
+        });
       }
-      dappServer = createStaticServer(dappDirectory);
-      dappServer.listen(dappPort);
-      await new Promise((resolve, reject) => {
-        dappServer.on('listening', resolve);
-        dappServer.on('error', reject);
-      });
     }
     await setupMocking(mockServer, testSpecificMock);
     await mockServer.start(8000);
@@ -125,15 +132,19 @@ async function withFixtures(options, testSuite) {
       if (webDriver) {
         await webDriver.quit();
       }
-      if (dappServer && dappServer.listening) {
+      if (dapp) {
-        await new Promise((resolve, reject) => {
+        for (let i = 0; i < numberOfDapps; i++) {
-          dappServer.close((error) => {
+          if (dappServer[i] && dappServer[i].listening) {
-            if (error) {
+            await new Promise((resolve, reject) => {
-              return reject(error);
+              dappServer[i].close((error) => {
-            }
+                if (error) {
-            return resolve();
+                  return reject(error);
-          });
+                }
-        });
+                return resolve();
+              });
+            });
+          }
+        }
       }
       await mockServer.stop();
     }
@@ -164,7 +175,7 @@ const getWindowHandles = async (driver, handlesCount) => {
 };
 
 const connectDappWithExtensionPopup = async (driver) => {
-  await driver.openNewPage(`http://127.0.0.1:${dappPort}/`);
+  await driver.openNewPage(`http://127.0.0.1:${dappBasePort}/`);
   await driver.delay(regularDelayMs);
   await driver.clickElement({ text: 'Connect', tag: 'button' });
   await driver.delay(regularDelayMs);

test/e2e/tests/dapp-interactions.spec.js

@@ -0,0 +1,126 @@
+const { strict: assert } = require('assert');
+const {
+  convertToHexValue,
+  withFixtures,
+  connectDappWithExtensionPopup,
+} = require('../helpers');
+
+describe('Dapp interactions', function () {
+  let windowHandles;
+  let extension;
+  let popup;
+  const ganacheOptions = {
+    accounts: [
+      {
+        secretKey:
+          '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
+        balance: convertToHexValue(25000000000000000000),
+      },
+    ],
+  };
+  it('should trigger the add chain confirmation despite MetaMask being locked', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: 'imported-account',
+        ganacheOptions,
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        // Connect to Dapp0
+        await connectDappWithExtensionPopup(driver, 0);
+        windowHandles = await driver.getAllWindowHandles();
+        extension = windowHandles[0];
+
+        // Lock Account
+        await driver.switchToWindow(extension);
+        await driver.clickElement('.account-menu__icon');
+        await driver.clickElement({ text: 'Lock', tag: 'button' });
+
+        // Trigger Notification
+        await driver.switchToWindowWithTitle('E2E Test Dapp', windowHandles);
+        await driver.clickElement('#addEthereumChain');
+        await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+        const notification = await driver.isElementPresent({
+          text: 'Allow this site to add a network?',
+          tag: 'h3',
+        });
+
+        assert.ok(notification, 'Dapp action does not appear in Metamask');
+      },
+    );
+  });
+
+  it('should connect a second Dapp despite Metamask being locked', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: 'imported-account',
+        ganacheOptions,
+        dappOptions: { numberOfDapps: 2 },
+        title: this.test.title,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+
+        // Connect to Dapp0
+        await connectDappWithExtensionPopup(driver, 0);
+        windowHandles = await driver.getAllWindowHandles();
+        extension = windowHandles[0];
+
+        // Lock Account
+        await driver.switchToWindow(extension);
+        await driver.clickElement('.account-menu__icon');
+        await driver.clickElement({ text: 'Lock', tag: 'button' });
+
+        // Connect to Dapp1
+        await driver.openNewPage('http://127.0.0.1:8081/');
+        await driver.clickElement({ text: 'Connect', tag: 'button' });
+
+        windowHandles = await driver.getAllWindowHandles();
+
+        popup = await driver.switchToWindowWithTitle(
+          'MetaMask Notification',
+          windowHandles,
+        );
+
+        await driver.switchToWindow(popup);
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+        await driver.clickElement({ text: 'Next', tag: 'button' });
+        await driver.clickElement({ text: 'Connect', tag: 'button' });
+
+        // Assert Connection
+        await driver.switchToWindow(extension);
+        await driver.fill('#password', 'correct horse battery staple');
+        await driver.press('#password', driver.Key.ENTER);
+        await driver.clickElement(
+          '[data-testid ="account-options-menu-button"]',
+        );
+        await driver.clickElement({ text: 'Connected sites', tag: 'span' });
+        const connectedDapp1 = await driver.isElementPresent({
+          text: 'http://127.0.0.1:8080',
+          tag: 'span',
+        });
+        const connectedDapp2 = await driver.isElementPresent({
+          text: 'http://127.0.0.1:8081',
+          tag: 'span',
+        });
+
+        assert.ok(connectedDapp1, 'Account not connected to Dapp1');
+        assert.ok(connectedDapp2, 'Account not connected to Dapp2');
+      },
+    );
+  });
+});