feat: migrates browser related POMs to typescript and the new framework (#17420)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
- Adds an extra type in one of the assertion class helper
- Migrates to the new withFixtures helper

### 🚀 Generic stats:
-  27 Page object files migrated to ts
- 23 selectors migrated to ts

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

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

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

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

e2e/api-specs/run-api-spec-tests.js

@@ -1,4 +1,17 @@
 /* eslint-disable import/no-commonjs */
 require('@babel/register');
-require('ts-node/register');
+
+// Configure ts-node with options that will properly handle .d.ts files
+require('ts-node').register({
+  transpileOnly: true,
+  compilerOptions: {
+    module: 'commonjs',
+    target: 'es2017',
+    allowJs: true,
+    esModuleInterop: true,
+    skipLibCheck: true,
+  },
+  files: true,
+});
+
 require('./json-rpc-coverage.js');

e2e/framework/Assertions.ts

@@ -11,7 +11,11 @@ export default class Assertions {
    * Assert element is visible with auto-retry
    */
   static async expectElementToBeVisible(
-    detoxElement: DetoxElement | WebElement | DetoxMatcher,
+    detoxElement:
+      | DetoxElement
+      | WebElement
+      | DetoxMatcher
+      | IndexableNativeElement,
     options: AssertionOptions = {},
   ): Promise<void> {
     const {
@@ -43,7 +47,11 @@ export default class Assertions {
    * Assert element is not visible with auto-retry
    */
   static async expectElementToNotBeVisible(
-    detoxElement: DetoxElement | WebElement,
+    detoxElement:
+      | DetoxElement
+      | WebElement
+      | DetoxMatcher
+      | IndexableNativeElement,
     options: AssertionOptions = {},
   ): Promise<void> {
     const {

e2e/framework/fixtures/FixtureBuilder.ts

@@ -15,6 +15,7 @@ import {
   PopularNetworksList,
 } from '../../resources/networks.e2e';
 import { BackupAndSyncSettings } from '../types';
+import { logger } from '../logger';
 
 export const DEFAULT_FIXTURE_ACCOUNT =
   '0x76cf1CdD1fcC252442b50D6e97207228aA4aefC3';
@@ -816,19 +817,42 @@ class FixtureBuilder {
     };
   }
 
+  withPermissionControllerConnectedToTestDapp() {
+    return this.withPermissionControllerConnectedToMultipleTestDapps();
+  }
+
   /**
    * Connects the PermissionController to a test dapp with specific accounts permissions and origins.
+   * For the time being, you're only able to connect 2 dapps because one will have the origin as
+   * localhost and the other dapp will have the specific device equivalent localhost.
+   * We could hardcoded the state but then Wallet behavior would be incorrectly checked.
    * @param {Object[]} additionalPermissions - Additional permissions to merge for each test dapp instance. They should be passed in the correct order
    * @returns {FixtureBuilder} - The FixtureBuilder instance for method chaining.
    */
   withPermissionControllerConnectedToMultipleTestDapps(
     additionalPermissions: Record<string, unknown>[] = [{}],
   ) {
+    if (additionalPermissions.length > 2) {
+      logger.error(
+        'You can only connect 2 dapps at a time since permissions are given based on the origin.',
+      );
+      throw new Error(
+        'You can only connect 2 dapps at a time since permissions are given based on the origin.',
+      );
+    }
     let allPermissions = {};
-    for (const permission of additionalPermissions) {
+    for (let i = 0; i < additionalPermissions.length; i++) {
+      // This needs to be escalated as permissions are given based on the origin and it's impossible to have distinct
+      // permissions for the same origin.
+      if (i === 0) {
+        additionalPermissions[i].origin = DAPP_URL;
+      } else {
+        additionalPermissions[i].origin =
+          device.getPlatform() === 'android' ? '10.0.2.2' : '127.0.0.1';
+      }
       const testDappPermissions = this.createPermissionControllerConfig(
-        permission,
-        device.getPlatform() === 'android' ? '10.0.2.2' : '127.0.0.1',
+        additionalPermissions[i],
+        additionalPermissions[i].origin as string,
       );
       allPermissions = merge(allPermissions, testDappPermissions);
     }

e2e/pages/Browser/AddBookmarkView.js renamed to e2e/pages/Browser/AddBookmarkView.ts

@@ -1,20 +1,22 @@
 import { AddBookmarkViewSelectorsIDs } from '../../selectors/Browser/AddBookmarkView.selectors';
-import Gestures from '../../utils/Gestures';
-import Matchers from '../../utils/Matchers';
+import Gestures from '../../framework/Gestures';
+import Matchers from '../../framework/Matchers';
 
 class AddFavoritesView {
-  get container() {
+  get container(): DetoxElement {
     return Matchers.getElementByID(AddBookmarkViewSelectorsIDs.CONTAINER);
   }
 
-  get addBookmarkButton() {
+  get addBookmarkButton(): DetoxElement {
     return device.getPlatform() === 'ios'
       ? Matchers.getElementByID(AddBookmarkViewSelectorsIDs.CONFIRM_BUTTON)
       : Matchers.getElementByLabel(AddBookmarkViewSelectorsIDs.CONFIRM_BUTTON);
   }
 
-  async tapAddBookmarksButton() {
-    await Gestures.waitAndTap(this.addBookmarkButton);
+  async tapAddBookmarksButton(): Promise<void> {
+    await Gestures.waitAndTap(this.addBookmarkButton, {
+      elemDescription: 'Tap on the add bookmark button',
+    });
   }
 }
 

e2e/pages/Browser/BrowserView.ts

@@ -218,6 +218,10 @@ class Browser {
     await device.enableSynchronization(); // re-enabling synchronization
   }
 
+  /**
+   * @deprecated - please migrate to the new  Framework
+   * @returns {Promise<void>}
+   */
   async waitForBrowserPageToLoad(): Promise<void> {
     await TestHelpers.delay(5000);
   }

e2e/pages/Browser/ConnectBottomSheet.js

@@ -0,0 +1,95 @@
+import {
+  ConnectAccountBottomSheetSelectorsIDs,
+  ConnectAccountBottomSheetSelectorsText,
+} from '../../selectors/Browser/ConnectAccountBottomSheet.selectors';
+import Matchers from '../../framework/Matchers';
+import Gestures from '../../framework/Gestures';
+import { CommonSelectorsIDs } from '../../selectors/Common.selectors';
+
+class ConnectBottomSheet {
+  get container(): DetoxElement {
+    return Matchers.getElementByID(
+      ConnectAccountBottomSheetSelectorsIDs.CONTAINER,
+    );
+  }
+  get connectButton(): DetoxElement {
+    return device.getPlatform() === 'android'
+      ? Matchers.getElementByLabel(CommonSelectorsIDs.CONNECT_BUTTON)
+      : Matchers.getElementByID(CommonSelectorsIDs.CONNECT_BUTTON);
+  }
+
+  get connectAccountsButton(): DetoxElement {
+    return Matchers.getElementByText(
+      ConnectAccountBottomSheetSelectorsText.CONNECT_ACCOUNTS,
+    );
+  }
+
+  get importButton(): DetoxElement {
+    return Matchers.getElementByText(
+      ConnectAccountBottomSheetSelectorsText.IMPORT_ACCOUNT,
+    );
+  }
+
+  get selectAllButton(): DetoxElement {
+    return Matchers.getElementByText(
+      ConnectAccountBottomSheetSelectorsText.SELECT_ALL,
+    );
+  }
+
+  get selectMultiButton(): DetoxElement {
+    return Matchers.getElementByID(
+      ConnectAccountBottomSheetSelectorsIDs.SELECT_MULTI_BUTTON,
+    );
+  }
+
+  get cancelButton(): DetoxElement {
+    return Matchers.getElementByID(
+      ConnectAccountBottomSheetSelectorsIDs.CANCEL_BUTTON,
+    );
+  }
+
+  async tapCancelButton(): Promise<void> {
+    await Gestures.waitAndTap(this.cancelButton, {
+      elemDescription: 'Tap on the cancel button',
+    });
+  }
+
+  async tapConnectButton(): Promise<void> {
+    await Gestures.waitAndTap(this.connectButton, {
+      elemDescription: 'Tap on the connect button',
+    });
+  }
+
+  async tapConnectMultipleAccountsButton(): Promise<void> {
+    await Gestures.waitAndTap(this.connectAccountsButton, {
+      elemDescription: 'Tap on the connect multiple accounts button',
+    });
+  }
+
+  async tapImportAccountOrHWButton(): Promise<void> {
+    await Gestures.waitAndTap(this.importButton, {
+      elemDescription: 'Tap on the import account or hardware wallet button',
+    });
+  }
+
+  async tapSelectAllButton(): Promise<void> {
+    await Gestures.waitAndTap(this.selectAllButton, {
+      elemDescription: 'Tap on the select all button',
+    });
+  }
+
+  async tapAccountConnectMultiSelectButton(): Promise<void> {
+    await Gestures.waitAndTap(this.selectMultiButton, {
+      elemDescription: 'Tap on the account connect multi select button',
+    });
+  }
+
+  async scrollToBottomOfModal(): Promise<void> {
+    await Gestures.swipe(this.container, 'down', {
+      speed: 'slow',
+      elemDescription: 'Scroll to the bottom of the modal',
+    });
+  }
+}
+
+export default new ConnectBottomSheet();