test: [POM] create ResetPasswordPage for e2e tests and migrate 2 test…

… files to POM (#27244)

## **Description**
This pull request creates the ResetPasswordPage class for the E2E tests
page object model and migrates 2 test files in `test/e2e/tests/account`
to POM **and** TypeScript, with enhanced log messages.

I have placed the test
`test/e2e/tests/account/metamask-responsive-ui.spec.js` outside the
account folder because these tests don't test account functionality.
They are for testing the extension UI in small viewports.

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

## **Related issues**

Fixes: #27245  

## **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: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Chloe Gao <[email protected]>

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

@@ -33,6 +33,19 @@ class AccountListPage {
       '.multichain-account-menu-popover__list--menu-item-hidden-account [data-testid="account-list-item-menu-button"]';
   }
 
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.accountListItem,
+        this.accountOptionsMenuButton,
+      ]);
+    } catch (e) {
+      console.log('Timeout while waiting for account list to be loaded', e);
+      throw e;
+    }
+    console.log('Account list is loaded');
+  }
+
   async hideAccount(): Promise<void> {
     console.log(`Hide account in account list`);
     await this.driver.clickElement(this.hideUnhideAccountButton);

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

@@ -9,6 +9,8 @@ class LoginPage {
 
   private welcomeBackMessage: object;
 
+  private forgotPasswordButton: object;
+
   constructor(driver: Driver) {
     this.driver = driver;
     this.passwordInput = '[data-testid="unlock-password"]';
@@ -17,6 +19,10 @@ class LoginPage {
       css: '[data-testid="unlock-page-title"]',
       text: 'Welcome back!',
     };
+    this.forgotPasswordButton = {
+      text: 'Forgot password?',
+      tag: 'a',
+    };
   }
 
   async check_pageIsLoaded(): Promise<void> {
@@ -40,6 +46,11 @@ class LoginPage {
   async clickUnlockButton(): Promise<void> {
     await this.driver.clickElement(this.unlockButton);
   }
+
+  async gotoResetPasswordPage(): Promise<void> {
+    console.log('Navigating to reset password page');
+    await this.driver.clickElement(this.forgotPasswordButton);
+  }
 }
 
 export default LoginPage;

test/e2e/page-objects/pages/reset-password-page.ts

@@ -0,0 +1,53 @@
+import { Driver } from '../../webdriver/driver';
+
+class ResetPasswordPage {
+  private driver: Driver;
+
+  private seedPhraseInput: string;
+
+  private passwordInput: string;
+
+  private confirmPasswordInput: string;
+
+  private restoreButton: string;
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+    this.seedPhraseInput = '[data-testid="import-srp__srp-word-0"]';
+    this.passwordInput = '[data-testid="create-vault-password"]';
+    this.confirmPasswordInput = '[data-testid="create-vault-confirm-password"]';
+    this.restoreButton = '[data-testid="create-new-vault-submit-button"]';
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.passwordInput,
+        this.confirmPasswordInput,
+      ]);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for reset password page to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Reset password page is loaded');
+  }
+
+  /**
+   * Resets the password using the provided seed phrase and new password.
+   *
+   * @param seedPhrase - The seed phrase to verify account ownership
+   * @param newPassword - The new password to set for the account
+   */
+  async resetPassword(seedPhrase: string, newPassword: string): Promise<void> {
+    console.log(`Resetting password with new password: ${newPassword}`);
+    await this.driver.pasteIntoField(this.seedPhraseInput, seedPhrase);
+    await this.driver.fill(this.passwordInput, newPassword);
+    await this.driver.fill(this.confirmPasswordInput, newPassword);
+    await this.driver.clickElement(this.restoreButton);
+  }
+}
+
+export default ResetPasswordPage;

test/e2e/tests/account/account-hide-unhide.spec.ts

@@ -20,6 +20,7 @@ describe('Account list - hide/unhide functionality', function (this: Suite) {
 
         // hide account
         const accountListPage = new AccountListPage(driver);
+        await accountListPage.check_pageIsLoaded();
         await accountListPage.openAccountOptionsMenu();
         await accountListPage.hideAccount();
         await accountListPage.check_hiddenAccountsListExists();

test/e2e/tests/account/account-pin-unpin.spec.ts

@@ -20,6 +20,7 @@ describe('Account list - pin/unpin functionality', function (this: Suite) {
 
         // pin account
         const accountListPage = new AccountListPage(driver);
+        await accountListPage.check_pageIsLoaded();
         await accountListPage.openAccountOptionsMenu();
         await accountListPage.pinAccount();
         await accountListPage.check_accountIsPinned();
@@ -45,6 +46,7 @@ describe('Account list - pin/unpin functionality', function (this: Suite) {
 
         // pin account
         const accountListPage = new AccountListPage(driver);
+        await accountListPage.check_pageIsLoaded();
         await accountListPage.openAccountOptionsMenu();
         await accountListPage.pinAccount();
         await accountListPage.check_accountIsPinned();

test/e2e/tests/account/forgot-password.spec.ts

@@ -0,0 +1,42 @@
+import { withFixtures, defaultGanacheOptions } from '../../helpers';
+import FixtureBuilder from '../../fixture-builder';
+import { E2E_SRP } from '../../default-fixture';
+import { Driver } from '../../webdriver/driver';
+import HomePage from '../../page-objects/pages/homepage';
+import LoginPage from '../../page-objects/pages/login-page';
+import ResetPasswordPage from '../../page-objects/pages/reset-password-page';
+import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow';
+
+const newPassword = 'this is the best password ever';
+
+describe('Forgot password', function () {
+  it('resets password and then unlock wallet with new password', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+      },
+      async ({ driver }: { driver: Driver }) => {
+        await loginWithBalanceValidation(driver);
+
+        // Lock Wallet
+        const homePage = new HomePage(driver);
+        await homePage.headerNavbar.lockMetaMask();
+
+        // Click forgot password button and reset password
+        await new LoginPage(driver).gotoResetPasswordPage();
+
+        const resetPasswordPage = new ResetPasswordPage(driver);
+        await resetPasswordPage.check_pageIsLoaded();
+        await resetPasswordPage.resetPassword(E2E_SRP, newPassword);
+
+        // Lock wallet again
+        await homePage.headerNavbar.lockMetaMask();
+
+        // Check user can log in with new password
+        await loginWithBalanceValidation(driver, newPassword);
+      },
+    );
+  });
+});

test/e2e/tests/account/migrate-old-vault.spec.ts

@@ -0,0 +1,24 @@
+import { Suite } from 'mocha';
+import { defaultGanacheOptions, withFixtures } from '../../helpers';
+import FixtureBuilder from '../../fixture-builder';
+import { Driver } from '../../webdriver/driver';
+import HomePage from '../../page-objects/pages/homepage';
+import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow';
+
+describe('Migrate vault with old encryption', function (this: Suite) {
+  it('successfully unlocks an old vault, locks it, and unlocks again', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().withKeyringControllerOldVault().build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test?.fullTitle(),
+      },
+      async ({ driver }: { driver: Driver }) => {
+        await loginWithBalanceValidation(driver);
+        const homePage = new HomePage(driver);
+        await homePage.headerNavbar.lockMetaMask();
+        await loginWithBalanceValidation(driver);
+      },
+    );
+  });
+});