test: [POM] Migrate portfolio e2e tests and permission requests tests to TS and Page Object Model (#29274)

## **Description**

- Migrate portfolio e2e tests and permission requests e2e tests to TS
and Page Object Model
 
```
test/e2e/tests/portfolio/portfolio-site.spec.ts
test/e2e/json-rpc/wallet_revokePermissions.spec.ts
test/e2e/json-rpc/wallet_requestPermissions.spec.ts
```
- Remove unused ganach setup

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27155?quickstart=1)

## **Related issues**


## **Manual testing steps**
Check code readability, make sure tests pass.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability
- [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.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.

Author: chloeYue

test/e2e/constants.ts

@@ -70,3 +70,6 @@ export const DEFAULT_SOLANA_ACCOUNT =
 
 /* Default (mocked) SOLANA balance used by the Solana RPC provider */
 export const DEFAULT_SOLANA_BALANCE = 1; // SOL
+
+/* Title of the mocked E2E test empty HTML page */
+export const EMPTY_E2E_TEST_PAGE_TITLE = 'E2E Test Page';

test/e2e/json-rpc/wallet_requestPermissions.spec.js renamed to test/e2e/json-rpc/wallet_requestPermissions.spec.ts

@@ -1,58 +1,42 @@
-const { strict: assert } = require('assert');
-const {
-  defaultGanacheOptions,
-  withFixtures,
-  switchToNotificationWindow,
-  switchToOrOpenDapp,
-  unlockWallet,
-} = require('../helpers');
-const FixtureBuilder = require('../fixture-builder');
+import { strict as assert } from 'assert';
+import { withFixtures } from '../helpers';
+import FixtureBuilder from '../fixture-builder';
+import { loginWithBalanceValidation } from '../page-objects/flows/login.flow';
+import TestDapp from '../page-objects/pages/test-dapp';
 
 describe('wallet_requestPermissions', function () {
   it('executes a request permissions on eth_accounts event', async function () {
     await withFixtures(
       {
         dapp: true,
-        fixtures: new FixtureBuilder()
-          .withPermissionControllerConnectedToTestDapp()
-          .build(),
-        ganacheOptions: defaultGanacheOptions,
-        title: this.test.title,
+        fixtures: new FixtureBuilder().build(),
+        title: this.test?.title,
       },
       async ({ driver }) => {
-        await unlockWallet(driver);
+        await loginWithBalanceValidation(driver);
+        const testDapp = new TestDapp(driver);
+        await testDapp.openTestDappPage();
 
         // wallet_requestPermissions
-        await driver.openNewPage(`http://127.0.0.1:8080`);
-
         const requestPermissionsRequest = JSON.stringify({
           jsonrpc: '2.0',
           method: 'wallet_requestPermissions',
           params: [{ eth_accounts: {} }],
         });
-
         await driver.executeScript(
           `window.ethereum.request(${requestPermissionsRequest})`,
         );
 
-        await switchToNotificationWindow(driver);
-
-        await driver.clickElement({
-          text: 'Connect',
-          tag: 'button',
-        });
-
-        await switchToOrOpenDapp(driver);
+        // confirm connect account
+        await testDapp.confirmConnectAccountModal();
 
         const getPermissionsRequest = JSON.stringify({
           method: 'wallet_getPermissions',
         });
-
         const getPermissions = await driver.executeScript(
           `return window.ethereum.request(${getPermissionsRequest})`,
         );
-
-        assert.strictEqual(getPermissions[0].parentCapability, 'eth_accounts');
+        assert.strictEqual(getPermissions[1].parentCapability, 'eth_accounts');
       },
     );
   });

test/e2e/json-rpc/wallet_revokePermissions.spec.js renamed to test/e2e/json-rpc/wallet_revokePermissions.spec.ts

@@ -1,12 +1,8 @@
-const { strict: assert } = require('assert');
-
-const {
-  withFixtures,
-  defaultGanacheOptions,
-  unlockWallet,
-  openDapp,
-} = require('../helpers');
-const FixtureBuilder = require('../fixture-builder');
+import { strict as assert } from 'assert';
+import { ACCOUNT_1, withFixtures } from '../helpers';
+import FixtureBuilder from '../fixture-builder';
+import TestDapp from '../page-objects/pages/test-dapp';
+import { loginWithBalanceValidation } from '../page-objects/flows/login.flow';
 
 describe('Revoke Dapp Permissions', function () {
   it('should revoke dapp permissions ', async function () {
@@ -16,18 +12,13 @@ describe('Revoke Dapp Permissions', function () {
         fixtures: new FixtureBuilder()
           .withPermissionControllerConnectedToTestDapp()
           .build(),
-        ganacheOptions: defaultGanacheOptions,
         title: this.test?.fullTitle(),
       },
       async ({ driver }) => {
-        await unlockWallet(driver);
-
-        await openDapp(driver);
-
-        await driver.findElement({
-          text: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1',
-          css: '#accounts',
-        });
+        await loginWithBalanceValidation(driver);
+        const testDapp = new TestDapp(driver);
+        await testDapp.openTestDappPage();
+        await testDapp.check_connectedAccounts(ACCOUNT_1);
 
         // wallet_revokePermissions request
         const revokePermissionsRequest = JSON.stringify({
@@ -43,15 +34,10 @@ describe('Revoke Dapp Permissions', function () {
         const result = await driver.executeScript(
           `return window.ethereum.request(${revokePermissionsRequest})`,
         );
-
         // Response of method call
         assert.deepEqual(result, null);
 
-        // TODO: Fix having to reload dapp as it is not the proper behavior in production, issue with test setup.
-        await driver.executeScript(`window.location.reload()`);
-
-        // You cannot use driver.findElement() with an empty string, so use xpath
-        await driver.findElement({ xpath: '//span[@id="accounts"][.=""]' });
+        await testDapp.check_connectedAccounts(ACCOUNT_1, false);
       },
     );
   });

test/e2e/page-objects/pages/home/homepage.ts

@@ -39,6 +39,8 @@ class HomePage {
     testId: 'popover-close',
   };
 
+  private readonly portfolioLink = '[data-testid="portfolio-link"]';
+
   private readonly privacyBalanceToggle = {
     testId: 'sensitive-toggle',
   };
@@ -99,6 +101,11 @@ class HomePage {
     await this.driver.clickElement(this.nftTab);
   }
 
+  async openPortfolioPage(): Promise<void> {
+    console.log(`Open portfolio page on homepage`);
+    await this.driver.clickElement(this.portfolioLink);
+  }
+
   async refreshErc20TokenList(): Promise<void> {
     console.log(`Refresh the ERC20 token list`);
     await this.driver.clickElement(this.erc20TokenDropdown);

test/e2e/page-objects/pages/test-dapp.ts

@@ -273,6 +273,16 @@ class TestDapp {
     await this.driver.clickElement(this.erc20TokenTransferButton);
   }
 
+  async confirmConnectAccountModal() {
+    console.log('Confirm connect account modal in notification window');
+    await this.driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+    await this.driver.waitForSelector(this.connectMetaMaskMessage);
+    await this.driver.clickElementAndWaitForWindowToClose(
+      this.confirmDialogButton,
+    );
+    await this.driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
+  }
+
   /**
    * Connect account to test dapp.
    *
@@ -289,25 +299,18 @@ class TestDapp {
   }) {
     console.log('Connect account to test dapp');
     await this.driver.clickElement(this.connectAccountButton);
-    await this.driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
-    await this.driver.waitForSelector(this.connectMetaMaskMessage);
     if (connectAccountButtonEnabled) {
-      await this.driver.clickElementAndWaitForWindowToClose(
-        this.confirmDialogButton,
-      );
+      await this.confirmConnectAccountModal();
     } else {
+      await this.driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+      await this.driver.waitForSelector(this.connectMetaMaskMessage);
       const confirmConnectDialogButton = await this.driver.findElement(
         this.confirmDialogButton,
       );
       assert.equal(await confirmConnectDialogButton.isEnabled(), false);
     }
-
     if (publicAddress) {
-      await this.driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
-      await this.driver.waitForSelector({
-        css: this.connectedAccount,
-        text: publicAddress.toLowerCase(),
-      });
+      await this.check_connectedAccounts(publicAddress);
       await this.driver.waitForSelector(this.localhostNetworkMessage);
     }
   }
@@ -332,28 +335,30 @@ class TestDapp {
     await this.driver.clickElement(this.revokePermissionButton);
     await this.driver.refresh();
     await this.check_pageIsLoaded();
-    await this.driver.assertElementNotPresent({
-      css: this.connectedAccount,
-      text: publicAddress.toLowerCase(),
-    });
+    await this.check_connectedAccounts(publicAddress, false);
   }
 
   /**
-   * Verifies the accounts connected to the test dapp.
+   * Check if the accounts connected to the test dapp.
    *
-   * @param connectedAccounts - The expected connected accounts separated by a comma. If no accounts are connected we can omit the param.
+   * @param connectedAccounts - Account addresses to check if connected to test dapp, separated by a comma.
+   * @param shouldBeConnected - Whether the accounts should be connected to test dapp. Defaults to true.
    */
-  async check_connectedAccounts(connectedAccounts: string = '') {
-    console.log('Verify connected accounts');
-    if (connectedAccounts) {
+  async check_connectedAccounts(
+    connectedAccounts: string,
+    shouldBeConnected: boolean = true,
+  ) {
+    if (shouldBeConnected) {
+      console.log('Verify connected accounts:', connectedAccounts);
       await this.driver.waitForSelector({
         css: this.connectedAccount,
-        text: connectedAccounts,
+        text: connectedAccounts.toLowerCase(),
       });
     } else {
-      await this.driver.waitForSelector({
+      console.log('Verify accounts not connected:', connectedAccounts);
+      await this.driver.assertElementNotPresent({
         css: this.connectedAccount,
-        text: ' ',
+        text: connectedAccounts.toLowerCase(),
       });
     }
   }

test/e2e/tests/portfolio/portfolio-site.spec.js renamed to test/e2e/tests/portfolio/portfolio-site.spec.ts

@@ -1,13 +1,13 @@
-const {
-  withFixtures,
-  unlockWallet,
-  defaultGanacheOptions,
-} = require('../../helpers');
-const FixtureBuilder = require('../../fixture-builder');
-const { emptyHtmlPage } = require('../../mock-e2e');
+import { MockttpServer } from 'mockttp';
+import { withFixtures } from '../../helpers';
+import { EMPTY_E2E_TEST_PAGE_TITLE } from '../../constants';
+import FixtureBuilder from '../../fixture-builder';
+import { emptyHtmlPage } from '../../mock-e2e';
+import HomePage from '../../page-objects/pages/home/homepage';
+import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow';
 
 describe('Portfolio site', function () {
-  async function mockPortfolioSite(mockServer) {
+  async function mockPortfolioSite(mockServer: MockttpServer) {
     return await mockServer
       .forGet('https://portfolio.metamask.io/')
       .withQuery({
@@ -27,18 +27,15 @@ describe('Portfolio site', function () {
       {
         dapp: true,
         fixtures: new FixtureBuilder().build(),
-        ganacheOptions: defaultGanacheOptions,
-        title: this.test.fullTitle(),
+        title: this.test?.fullTitle(),
         testSpecificMock: mockPortfolioSite,
       },
       async ({ driver }) => {
-        await unlockWallet(driver);
+        await loginWithBalanceValidation(driver);
+        await new HomePage(driver).openPortfolioPage();
 
         // Click Portfolio site
-        await driver.clickElement('[data-testid="portfolio-link"]');
-        await driver.waitUntilXWindowHandles(2);
-        const windowHandles = await driver.getAllWindowHandles();
-        await driver.switchToWindowWithTitle('E2E Test Page', windowHandles);
+        await driver.switchToWindowWithTitle(EMPTY_E2E_TEST_PAGE_TITLE);
 
         // Verify site
         await driver.waitForUrl({

test/e2e/tests/request-queuing/sendTx-revokePermissions.spec.ts

@@ -41,9 +41,7 @@ describe('Request Queuing', function () {
         // Open test dapp
         const testDapp = new TestDapp(driver);
         await testDapp.openTestDappPage();
-        await testDapp.check_connectedAccounts(
-          DEFAULT_FIXTURE_ACCOUNT.toLowerCase(),
-        );
+        await testDapp.check_connectedAccounts(DEFAULT_FIXTURE_ACCOUNT);
 
         // Trigger a tx
         await testDapp.clickSimpleSendButton();
@@ -71,7 +69,7 @@ describe('Request Queuing', function () {
         await driver.waitUntilXWindowHandles(2);
 
         // Cleared eth_accounts account label
-        await testDapp.check_connectedAccounts();
+        await testDapp.check_connectedAccounts(DEFAULT_FIXTURE_ACCOUNT, false);
       },
     );
   });