Portfolio site e2e (#15921)

* add env variables to test build

* add data-testid attribute to home component

* add method to retrieve the url of the current page

* add portfolio site test

Co-authored-by: ryanml <ryanlanese@gmail.com>

package.json

@@ -16,12 +16,12 @@
     "build": "yarn lavamoat:build",
     "build:dev": "node development/build/index.js",
     "build:icons": "node ui/components/component-library/icon/scripts/generate-icon-names.js && node ui/components/component-library/icon/scripts/generate-icon-scss.js",
-    "start:test": "SEGMENT_HOST='https://api.segment.io' SEGMENT_WRITE_KEY='FAKE' SENTRY_DSN_DEV=https://fake@sentry.io/0000000 yarn build testDev",
+    "start:test": "SEGMENT_HOST='https://api.segment.io' SEGMENT_WRITE_KEY='FAKE' SENTRY_DSN_DEV=https://fake@sentry.io/0000000 PORTFOLIO_URL=http://127.0.0.1:8080 yarn build testDev",
     "benchmark:chrome": "SELENIUM_BROWSER=chrome node test/e2e/benchmark.js",
     "mv3:stats:chrome": "SELENIUM_BROWSER=chrome ENABLE_MV3=true node test/e2e/mv3-perf-stats/index.js",
     "user-actions-benchmark:chrome": "SELENIUM_BROWSER=chrome node test/e2e/user-actions-benchmark.js",
     "benchmark:firefox": "SELENIUM_BROWSER=firefox node test/e2e/benchmark.js",
-    "build:test": "SEGMENT_HOST='https://api.segment.io' SEGMENT_WRITE_KEY='FAKE' SENTRY_DSN_DEV=https://fake@sentry.io/0000000 yarn build test",
+    "build:test": "SEGMENT_HOST='https://api.segment.io' SEGMENT_WRITE_KEY='FAKE' SENTRY_DSN_DEV=https://fake@sentry.io/0000000 PORTFOLIO_URL=http://127.0.0.1:8080 yarn build test",
     "build:test:flask": "yarn build test --build-type flask",
     "build:test:mv3": "ENABLE_MV3=true yarn build test",
     "test": "yarn lint && yarn test:unit && yarn test:unit:jest",

test/e2e/tests/portfolio-site.spec.js

@@ -0,0 +1,41 @@
+const { strict: assert } = require('assert');
+const { convertToHexValue, withFixtures } = require('../helpers');
+
+describe('Portfolio site', function () {
+  const ganacheOptions = {
+    accounts: [
+      {
+        secretKey:
+          '0x7C9529A67102755B7E6102D6D950AC5D5863C98713805CEC576B945B15B71EAC',
+        balance: convertToHexValue(25000000000000000000),
+      },
+    ],
+  };
+  it('should link to the portfolio site', 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);
+
+        // Click Portfolio site
+        await driver.clickElement('[data-testid="home__portfolio-site"]');
+        await driver.waitUntilXWindowHandles(2);
+        const windowHandles = await driver.getAllWindowHandles();
+        await driver.switchToWindowWithTitle('E2E Test Dapp', windowHandles);
+
+        // Verify site
+        assert.equal(
+          await driver.getCurrentUrl(),
+          'http://127.0.0.1:8080/?metamaskEntry=ext',
+        );
+      },
+    );
+  });
+});

test/e2e/webdriver/driver.js

@@ -289,6 +289,10 @@ class Driver {
     return await this.driver.get(`${this.extensionUrl}/${page}.html`);
   }
 
+  async getCurrentUrl() {
+    return await this.driver.getCurrentUrl();
+  }
+
   // Metrics
 
   async collectMetrics() {

ui/pages/home/home.component.js

@@ -715,7 +715,10 @@ export default class Home extends PureComponent {
                     }}
                   >
                     <IconChart />
-                    <div className="home__subheader-link--text">
+                    <div
+                      className="home__subheader-link--text"
+                      data-testid="home__portfolio-site"
+                    >
                       {t('portfolioSite')}
                     </div>
                   </div>