Update E2E tests for new test-dapp version (#14939)

* Update xDAI E2E information

* Use local Ganache instance instead of Gnosis Chain

* Bump test-dapp

* Bump test-dapp

* Enable secondary Ganache server for other test

* Fix linting

* Improve E2E stability

* Update network selector

package.json

@@ -252,7 +252,7 @@
     "@metamask/eslint-config-typescript": "^9.0.1",
     "@metamask/forwarder": "^1.1.0",
     "@metamask/phishing-warning": "^1.1.0",
-    "@metamask/test-dapp": "^5.0.0",
+    "@metamask/test-dapp": "^5.1.1",
     "@sentry/cli": "^1.58.0",
     "@storybook/addon-a11y": "^6.3.12",
     "@storybook/addon-actions": "^6.3.12",

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

@@ -2,7 +2,8 @@ const { strict: assert } = require('assert');
 const { convertToHexValue, withFixtures } = require('../helpers');
 
 describe('Chain Interactions', function () {
-  it('should add the XDAI chain and not switch the network', async function () {
+  const port = 8546;
+  const chainId = 1338;
   const ganacheOptions = {
     accounts: [
       {
@@ -11,7 +12,9 @@ describe('Chain Interactions', function () {
         balance: convertToHexValue(25000000000000000000),
       },
     ],
+    concurrent: { port, chainId },
   };
+  it('should add the Ganache test chain and not switch the network', async function () {
     await withFixtures(
       {
         dapp: true,
@@ -36,12 +39,14 @@ describe('Chain Interactions', function () {
         );
 
         // verify chain details
-        const [networkName, networkUrl, chainId] = await driver.findElements(
-          '.definition-list dd',
-        );
-        assert.equal(await networkName.getText(), 'xDAI Chain');
-        assert.equal(await networkUrl.getText(), 'https://dai.poa.network');
-        assert.equal(await chainId.getText(), '100');
+        const [
+          networkName,
+          networkUrl,
+          chainIdElement,
+        ] = await driver.findElements('.definition-list dd');
+        assert.equal(await networkName.getText(), `Localhost ${port}`);
+        assert.equal(await networkUrl.getText(), `http://127.0.0.1:${port}`);
+        assert.equal(await chainIdElement.getText(), chainId.toString());
 
         // approve add chain, cancel switch chain
         await driver.clickElement({ text: 'Approve', tag: 'button' });
@@ -55,25 +60,16 @@ describe('Chain Interactions', function () {
         const networkDisplay = await driver.findElement('.network-display');
         await networkDisplay.click();
         assert.equal(await networkDisplay.getText(), 'Localhost 8545');
-        const xDaiChain = await driver.findElements({
-          text: 'xDAI Chain',
+        const ganacheChain = await driver.findElements({
+          text: `Localhost ${port}`,
           tag: 'span',
         });
-        assert.ok(xDaiChain.length, 1);
+        assert.ok(ganacheChain.length, 1);
       },
     );
   });
 
-  it('should add the XDAI chain and switch the network', async function () {
-    const ganacheOptions = {
-      accounts: [
-        {
-          secretKey:
-            '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
-          balance: convertToHexValue(25000000000000000000),
-        },
-      ],
-    };
+  it('should add the Ganache chain and switch the network', async function () {
     await withFixtures(
       {
         dapp: true,
@@ -107,7 +103,7 @@ describe('Chain Interactions', function () {
 
         // verify current network
         const networkDisplay = await driver.findElement('.network-display');
-        assert.equal(await networkDisplay.getText(), 'xDAI Chain');
+        assert.equal(await networkDisplay.getText(), `Localhost ${port}`);
       },
     );
   });

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

@@ -23,7 +23,10 @@ describe('Dapp interactions', function () {
       {
         dapp: true,
         fixtures: 'imported-account',
-        ganacheOptions,
+        ganacheOptions: {
+          ...ganacheOptions,
+          concurrent: { port: 8546, chainId: 1338 },
+        },
         title: this.test.title,
       },
       async ({ driver }) => {
@@ -44,6 +47,7 @@ describe('Dapp interactions', function () {
         // Trigger Notification
         await driver.switchToWindowWithTitle('E2E Test Dapp', windowHandles);
         await driver.clickElement('#addEthereumChain');
+        await driver.waitUntilXWindowHandles(3);
         await driver.switchToWindowWithTitle(
           'MetaMask Notification',
           windowHandles,

test/e2e/tests/provider-api.spec.js

@@ -47,7 +47,7 @@ describe('MetaMask', function () {
         await driver.switchToWindowWithTitle('E2E Test Dapp', windowHandles);
         const switchedNetworkDiv = await driver.waitForSelector({
           css: '#network',
-          text: '1',
+          text: '0x1',
         });
         const switchedChainIdDiv = await driver.waitForSelector({
           css: '#chainId',
@@ -55,7 +55,7 @@ describe('MetaMask', function () {
         });
         const accountsDiv = await driver.findElement('#accounts');
 
-        assert.equal(await switchedNetworkDiv.getText(), '1');
+        assert.equal(await switchedNetworkDiv.getText(), '0x1');
         assert.equal(await switchedChainIdDiv.getText(), '0x1');
         assert.equal(
           await accountsDiv.getText(),

yarn.lock

@@ -3132,10 +3132,10 @@
   dependencies:
     "@metamask/controllers" "^29.0.1"
 
-"@metamask/test-dapp@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@metamask/test-dapp/-/test-dapp-5.0.0.tgz#ecea832b57ff97782bfdd57a4af3408c7c64c02d"
-  integrity sha512-eR9JQ0jPOeP/hdQj9hUkqbvinfjVLYTtdHV+mDCN1tsNxiTdninZbltg9bx6Gqp91v9/9YPhlhXCmMQPq/AMxQ==
+"@metamask/test-dapp@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@metamask/test-dapp/-/test-dapp-5.1.1.tgz#aadebf28542809650c57aa8f5a3489c748e1414f"
+  integrity sha512-Vast76cYR9vOvSH9Ut8y8LXZbDledUE2BkiLX+PGP5AOTp8Pn8V6jiYg1D/slBh7M8/Q/1AmdW9D0B+fw7esBQ==
 
 "@metamask/types@^1.1.0":
   version "1.1.0"