Merge branch 'develop' into NOTIFY-1256-e-2-e-tests-for-accounts-sync

.storybook/main.js

@@ -52,6 +52,9 @@ module.exports = {
     config.resolve.alias['@ethereumjs/util'] = require.resolve(
       '../ui/__mocks__/ethereumjs-util.js',
     );
+    config.resolve.alias['./useNftCollectionsMetadata'] = require.resolve(
+      '../ui/__mocks__/useNftCollectionsMetadata.js',
+    );
     config.resolve.fallback = {
       child_process: false,
       constants: false,

development/README.md

@@ -65,7 +65,7 @@ or `https://api.segment.io/v1/batch` respectively.
 
 2. To display Sentry logs, include `DEBUG=metamask:sentry:*` in `.metamaskrc`.
 
-3. To display more verbose logs if not in a developer build, include `METAMASK_DEBUG=true` in `.metamaskrc`.
+3. To display more verbose logs if not in a developer build, include `METAMASK_DEBUG=1` in `.metamaskrc`.
 
 4. Ensure metrics are enabled during onboarding or via `Settings > Security & privacy > Participate in MetaMetrics`.
 

test/e2e/page-objects/flows/login.flow.ts

@@ -18,10 +18,6 @@ export const loginWithoutBalanceValidation = async (
   const loginPage = new LoginPage(driver);
   await loginPage.check_pageIsLoaded();
   await loginPage.loginToHomepage(password);
-
-  // user should land on homepage after successfully logging in with password
-  const homePage = new HomePage(driver);
-  await homePage.check_pageIsLoaded();
 };
 
 /**
@@ -37,10 +33,14 @@ export const loginWithBalanceValidation = async (
   password?: string,
 ) => {
   await loginWithoutBalanceValidation(driver, password);
+  // user should land on homepage after successfully logging in with password
+  const homePage = new HomePage(driver);
+  await homePage.check_pageIsLoaded();
+
   // Verify the expected balance on the homepage
   if (ganacheServer) {
-    await new HomePage(driver).check_ganacheBalanceIsDisplayed(ganacheServer);
+    await homePage.check_ganacheBalanceIsDisplayed(ganacheServer);
   } else {
-    await new HomePage(driver).check_expectedBalanceIsDisplayed();
+    await homePage.check_expectedBalanceIsDisplayed();
   }
 };

test/e2e/page-objects/flows/onboarding.flow.ts

@@ -0,0 +1,64 @@
+import { Driver } from '../../webdriver/driver';
+import OnboardingMetricsPage from '../pages/onboarding/onboarding-metrics-page';
+import OnboardingPasswordPage from '../pages/onboarding/onboarding-password-page';
+import OnboardingSrpPage from '../pages/onboarding/onboarding-srp-page';
+import StartOnboardingPage from '../pages/onboarding/start-onboarding-page';
+import SecureWalletPage from '../pages/onboarding/secure-wallet-page';
+import OnboardingCompletePage from '../pages/onboarding/onboarding-complete-page';
+
+export const importSRPOnboardingFlow = async (driver: Driver) => {
+  console.log('start import srp onboarding flow ');
+  await driver.navigate();
+  const startOnboardingPage = new StartOnboardingPage(driver);
+  await startOnboardingPage.check_pageIsLoaded();
+  await startOnboardingPage.checkTermsCheckbox();
+  await startOnboardingPage.clickImportWalletButton();
+
+  const onboardingMetricsPage = new OnboardingMetricsPage(driver);
+  await onboardingMetricsPage.check_pageIsLoaded();
+  await onboardingMetricsPage.clickNoThanksButton();
+
+  const onboardingSrpPage = new OnboardingSrpPage(driver);
+  await onboardingSrpPage.check_pageIsLoaded();
+  await onboardingSrpPage.fillSrp();
+  await onboardingSrpPage.clickConfirmButton();
+
+  const onboardingPasswordPage = new OnboardingPasswordPage(driver);
+  await onboardingPasswordPage.check_pageIsLoaded();
+  await onboardingPasswordPage.createImportedWalletPassword();
+};
+
+export const completeCreateNewWalletOnboardingFlow = async (driver: Driver) => {
+  console.log('start to complete create new wallet onboarding flow ');
+  await driver.navigate();
+  const startOnboardingPage = new StartOnboardingPage(driver);
+  await startOnboardingPage.check_pageIsLoaded();
+  await startOnboardingPage.checkTermsCheckbox();
+  await startOnboardingPage.clickCreateWalletButton();
+
+  const onboardingMetricsPage = new OnboardingMetricsPage(driver);
+  await onboardingMetricsPage.check_pageIsLoaded();
+  await onboardingMetricsPage.clickNoThanksButton();
+
+  const onboardingPasswordPage = new OnboardingPasswordPage(driver);
+  await onboardingPasswordPage.check_pageIsLoaded();
+  await onboardingPasswordPage.createWalletPassword();
+
+  const secureWalletPage = new SecureWalletPage(driver);
+  await secureWalletPage.check_pageIsLoaded();
+  await secureWalletPage.revealAndConfirmSRP();
+
+  const onboardingCompletePage = new OnboardingCompletePage(driver);
+  await onboardingCompletePage.check_pageIsLoaded();
+  await onboardingCompletePage.check_congratulationsMessageIsDisplayed();
+  await onboardingCompletePage.completeOnboarding();
+};
+
+export const completeImportSRPOnboardingFlow = async (driver: Driver) => {
+  console.log('start to complete import srp onboarding flow ');
+  await importSRPOnboardingFlow(driver);
+  const onboardingCompletePage = new OnboardingCompletePage(driver);
+  await onboardingCompletePage.check_pageIsLoaded();
+  await onboardingCompletePage.check_walletReadyMessageIsDisplayed();
+  await onboardingCompletePage.completeOnboarding();
+};

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

@@ -15,8 +15,16 @@ class HeaderNavbar {
   private readonly mmiPortfolioButton =
     '[data-testid="global-menu-mmi-portfolio"]';
 
+  private readonly selectNetworkMessage = {
+    text: 'Select a network',
+    tag: 'h4',
+  };
+
   private readonly settingsButton = '[data-testid="global-menu-settings"]';
 
+  private readonly switchNetworkDropDownButton =
+    '[data-testid="network-display"]';
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
@@ -63,6 +71,28 @@ class HeaderNavbar {
     await this.driver.clickElement(this.settingsButton);
   }
 
+  /**
+   * Switches to the specified network.
+   *
+   * @param networkName - The name of the network to switch to.
+   */
+  async switchToNetwork(networkName: string): Promise<void> {
+    console.log(`Switch to network ${networkName} in header bar`);
+    await this.driver.clickElement(this.switchNetworkDropDownButton);
+    await this.driver.waitForSelector(this.selectNetworkMessage);
+    await this.driver.clickElementAndWaitToDisappear(
+      `[data-testid="${networkName}"]`,
+    );
+    // check the toaster message is displayed and the network is correctly selected
+    await this.driver.waitForSelector({
+      tag: 'h6',
+      text: `“${networkName}” was successfully added!`,
+    });
+    await this.driver.waitForSelector(
+      `${this.switchNetworkDropDownButton}[aria-label="Network Menu ${networkName}"]`,
+    );
+  }
+
   /**
    * Verifies that the displayed account label in header matches the expected label.
    *

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

@@ -13,6 +13,11 @@ class HomePage {
 
   private readonly balance = '[data-testid="eth-overview__primary-currency"]';
 
+  private readonly basicFunctionalityOffWarningMessage = {
+    text: 'Basic functionality is off',
+    css: '.mm-banner-alert',
+  };
+
   private readonly completedTransactions = '[data-testid="activity-list-item"]';
 
   private readonly confirmedTransactions = {
@@ -60,6 +65,13 @@ class HomePage {
     await this.driver.clickElement(this.activityTab);
   }
 
+  async check_basicFunctionalityOffWarnigMessageIsDisplayed(): Promise<void> {
+    console.log(
+      'Check if basic functionality off warning message is displayed on homepage',
+    );
+    await this.driver.waitForSelector(this.basicFunctionalityOffWarningMessage);
+  }
+
   /**
    * This function checks if the specified number of confirmed transactions are displayed in the activity list on homepage.
    * It waits up to 10 seconds for the expected number of confirmed transactions to be visible.

test/e2e/page-objects/pages/onboarding/onboarding-complete-page.ts

@@ -0,0 +1,95 @@
+import { Driver } from '../../../webdriver/driver';
+
+class OnboardingCompletePage {
+  private driver: Driver;
+
+  private readonly congratulationsMessage = {
+    text: 'Congratulations!',
+    tag: 'h2',
+  };
+
+  private readonly defaultPrivacySettingsButton = {
+    text: 'Manage default privacy settings',
+    tag: 'button',
+  };
+
+  private readonly installCompleteMessage = {
+    text: 'Your MetaMask install is complete!',
+    tag: 'h2',
+  };
+
+  private readonly onboardingCompleteDoneButton =
+    '[data-testid="onboarding-complete-done"]';
+
+  private readonly pinExtensionDoneButton =
+    '[data-testid="pin-extension-done"]';
+
+  private readonly pinExtensionMessage = {
+    text: 'Click browser extension icon to access it instantly',
+    tag: 'p',
+  };
+
+  private readonly pinExtensionNextButton =
+    '[data-testid="pin-extension-next"]';
+
+  private readonly walletReadyMessage = {
+    text: 'Your wallet is ready',
+    tag: 'h2',
+  };
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.defaultPrivacySettingsButton,
+        this.onboardingCompleteDoneButton,
+      ]);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for onboarding wallet creation complete page to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Onboarding wallet creation complete page is loaded');
+  }
+
+  async clickCreateWalletDoneButton(): Promise<void> {
+    await this.driver.clickElementAndWaitToDisappear(
+      this.onboardingCompleteDoneButton,
+    );
+  }
+
+  async completeOnboarding(): Promise<void> {
+    console.log('Complete onboarding');
+    await this.clickCreateWalletDoneButton();
+    await this.driver.waitForSelector(this.installCompleteMessage);
+    await this.driver.clickElement(this.pinExtensionNextButton);
+
+    // Wait until the onboarding carousel has stopped moving otherwise the click has no effect.
+    await this.driver.waitForSelector(this.pinExtensionMessage);
+    await this.driver.waitForElementToStopMoving(this.pinExtensionDoneButton);
+    await this.driver.clickElementAndWaitToDisappear(
+      this.pinExtensionDoneButton,
+    );
+  }
+
+  async navigateToDefaultPrivacySettings(): Promise<void> {
+    await this.driver.clickElementAndWaitToDisappear(
+      this.defaultPrivacySettingsButton,
+    );
+  }
+
+  async check_congratulationsMessageIsDisplayed(): Promise<void> {
+    await this.driver.waitForSelector(this.congratulationsMessage);
+  }
+
+  async check_walletReadyMessageIsDisplayed(): Promise<void> {
+    await this.driver.waitForSelector(this.walletReadyMessage);
+  }
+}
+
+export default OnboardingCompletePage;

test/e2e/page-objects/pages/onboarding/onboarding-metrics-page.ts

@@ -0,0 +1,38 @@
+import { Driver } from '../../../webdriver/driver';
+
+class OnboardingMetricsPage {
+  private driver: Driver;
+
+  private readonly metametricsMessage = {
+    text: 'Help us improve MetaMask',
+    tag: 'h2',
+  };
+
+  private readonly noThanksButton = '[data-testid="metametrics-no-thanks"]';
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.metametricsMessage,
+        this.noThanksButton,
+      ]);
+    } catch (e) {
+      console.log(
+        'Timeout while waiting for onboarding metametrics page to be loaded',
+        e,
+      );
+      throw e;
+    }
+    console.log('Onboarding metametrics page is loaded');
+  }
+
+  async clickNoThanksButton(): Promise<void> {
+    await this.driver.clickElementAndWaitToDisappear(this.noThanksButton);
+  }
+}
+
+export default OnboardingMetricsPage;