test: [POM] Create permission pages base classes and methods for e2e …

…tests (#29097)

## **Description**

- Create permission pages base classes  and methods
- Migrate permission e2e tests to TS and Page Object Model
 
```
test/e2e/tests/multichain/all-permissions-page.spec.js
test/e2e/tests/multichain/permission-page.spec.js
```

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

## **Related issues**

Fixes: #29099

## **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.

---------

Co-authored-by: seaona <[email protected]>

test/e2e/page-objects/pages/header-navbar.ts

@@ -5,6 +5,9 @@ class HeaderNavbar {
 
   private readonly accountMenuButton = '[data-testid="account-menu-icon"]';
 
+  private readonly allPermissionsButton =
+    '[data-testid="global-menu-connected-sites"]';
+
   private readonly threeDotMenuButton =
     '[data-testid="account-options-menu-button"]';
 
@@ -54,6 +57,12 @@ class HeaderNavbar {
     }
   }
 
+  async openPermissionsPage(): Promise<void> {
+    console.log('Open permissions page in header navbar');
+    await this.openThreeDotMenu();
+    await this.driver.clickElement(this.allPermissionsButton);
+  }
+
   async openSnapListPage(): Promise<void> {
     console.log('Open account snap page');
     await this.openThreeDotMenu();

test/e2e/page-objects/pages/permission/permission-list-page.ts

@@ -0,0 +1,50 @@
+import { Driver } from '../../../webdriver/driver';
+
+/**
+ * Represents the permissions list page.
+ * This page allows users to view permissions for connected sites.
+ */
+class PermissionListPage {
+  private driver: Driver;
+
+  private readonly permissionsPage = '[data-testid="permissions-page"]';
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForSelector(this.permissionsPage);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for permission list page to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Permission list page is loaded');
+  }
+
+  /**
+   * Open permission page for site
+   *
+   * @param site - Site to open
+   */
+  async openPermissionPageForSite(site: string): Promise<void> {
+    console.log('Open permission page for site', site);
+    await this.driver.clickElement({ text: site, tag: 'p' });
+  }
+
+  /**
+   * Check if account is connected to site
+   *
+   * @param site - Site to check
+   */
+  async check_connectedToSite(site: string): Promise<void> {
+    console.log('Check if account is connected to site', site);
+    await this.driver.waitForSelector({ text: site, tag: 'p' });
+  }
+}
+
+export default PermissionListPage;

test/e2e/page-objects/pages/permission/site-permission-page.ts

@@ -0,0 +1,36 @@
+import { Driver } from '../../../webdriver/driver';
+
+/**
+ * Represents the site permission page.
+ * This page allows users to view and manage permissions for a connected site.
+ */
+class SitePermissionPage {
+  private driver: Driver;
+
+  private readonly permissionPage = '[data-testid ="connections-page"]';
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  /**
+   * Check if site permission page is loaded
+   *
+   * @param site - Site to check
+   */
+  async check_pageIsLoaded(site: string): Promise<void> {
+    try {
+      await this.driver.waitForSelector(this.permissionPage);
+      await this.driver.waitForSelector({ text: site, tag: 'span' });
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for site permission page to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Site permission page is loaded');
+  }
+}
+
+export default SitePermissionPage;

test/e2e/page-objects/pages/settings/experimental-settings.ts

@@ -15,6 +15,9 @@ class ExperimentalSettings {
   private readonly redesignedSignatureToggle =
     '[data-testid="toggle-redesigned-confirmations-container"]';
 
+  private readonly requestQueueToggle =
+    '[data-testid="experimental-setting-toggle-request-queue"] label';
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
@@ -41,6 +44,11 @@ class ExperimentalSettings {
     console.log('Toggle Redesigned Signature on experimental setting page');
     await this.driver.clickElement(this.redesignedSignatureToggle);
   }
+
+  async toggleRequestQueue(): Promise<void> {
+    console.log('Toggle Request Queue on experimental setting page');
+    await this.driver.clickElement(this.requestQueueToggle);
+  }
 }
 
 export default ExperimentalSettings;

test/e2e/tests/account/import-flow.spec.ts

@@ -1,4 +1,5 @@
 import path from 'path';
+import { DEFAULT_FIXTURE_ACCOUNT } from '../../constants';
 import { withFixtures } from '../../helpers';
 import FixtureBuilder from '../../fixture-builder';
 import AccountListPage from '../../page-objects/pages/account-list-page';
@@ -9,7 +10,6 @@ import { completeImportSRPOnboardingFlow } from '../../page-objects/flows/onboar
 
 describe('Import flow @no-mmi', function () {
   it('Import wallet using Secret Recovery Phrase with pasting word by word', async function () {
-    const testAddress = '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1';
     await withFixtures(
       {
         fixtures: new FixtureBuilder({ onboarding: true }).build(),
@@ -33,7 +33,7 @@ describe('Import flow @no-mmi', function () {
         await accountListPage.check_pageIsLoaded();
         await accountListPage.openAccountDetailsModal('Account 1');
         await accountListPage.check_addressInAccountDetailsModal(
-          testAddress.toLowerCase(),
+          DEFAULT_FIXTURE_ACCOUNT.toLowerCase(),
         );
       },
     );

test/e2e/tests/multichain/all-permissions-page.spec.ts

@@ -0,0 +1,75 @@
+import { DEFAULT_FIXTURE_ACCOUNT, DAPP_HOST_ADDRESS } from '../../constants';
+import { withFixtures, WINDOW_TITLES } from '../../helpers';
+import FixtureBuilder from '../../fixture-builder';
+import ExperimentalSettings from '../../page-objects/pages/settings/experimental-settings';
+import HeaderNavbar from '../../page-objects/pages/header-navbar';
+import Homepage from '../../page-objects/pages/home/homepage';
+import PermissionListPage from '../../page-objects/pages/permission/permission-list-page';
+import SettingsPage from '../../page-objects/pages/settings/settings-page';
+import TestDapp from '../../page-objects/pages/test-dapp';
+import { loginWithoutBalanceValidation } from '../../page-objects/flows/login.flow';
+
+describe('Permissions Page', function () {
+  it('should show connected site permissions when a single dapp is connected', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder().build(),
+        title: this.test?.fullTitle(),
+      },
+      async ({ driver }) => {
+        await loginWithoutBalanceValidation(driver);
+        const testDapp = new TestDapp(driver);
+        await testDapp.openTestDappPage();
+        await testDapp.connectAccount(DEFAULT_FIXTURE_ACCOUNT);
+
+        // switch to extension window and check the site permissions
+        await driver.switchToWindowWithTitle(
+          WINDOW_TITLES.ExtensionInFullScreenView,
+        );
+        const homepage = new Homepage(driver);
+        await homepage.check_pageIsLoaded();
+        await homepage.check_expectedBalanceIsDisplayed();
+        await homepage.headerNavbar.openPermissionsPage();
+
+        const permissionListPage = new PermissionListPage(driver);
+        await permissionListPage.check_pageIsLoaded();
+        await permissionListPage.check_connectedToSite(DAPP_HOST_ADDRESS);
+      },
+    );
+  });
+
+  it('should show all permissions listed when experimental settings toggle is off', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPermissionControllerConnectedToTestDapp()
+          .build(),
+        title: this.test?.fullTitle(),
+      },
+      async ({ driver }) => {
+        await loginWithoutBalanceValidation(driver);
+        const headerNavbar = new HeaderNavbar(driver);
+        await headerNavbar.openSettingsPage();
+
+        // go to experimental settings page and toggle request queue
+        const settingsPage = new SettingsPage(driver);
+        await settingsPage.check_pageIsLoaded();
+        await settingsPage.goToExperimentalSettings();
+
+        const experimentalSettings = new ExperimentalSettings(driver);
+        await experimentalSettings.check_pageIsLoaded();
+        await experimentalSettings.toggleRequestQueue();
+        await settingsPage.closeSettingsPage();
+
+        // go to homepage and check site permissions
+        await new Homepage(driver).check_pageIsLoaded();
+        await headerNavbar.openPermissionsPage();
+        const permissionListPage = new PermissionListPage(driver);
+        await permissionListPage.check_pageIsLoaded();
+        await permissionListPage.check_connectedToSite(DAPP_HOST_ADDRESS);
+      },
+    );
+  });
+});