add e2e test for onboarding flow (#15122)

* add e2e test for onboarding flow

* Add method to test if we create a new wallet

* fix code

* editng code

* Add test if import wrong SRP

* fix test

* add test where we chack if user select diffrent type of SRP

* update test for checking if user select different SRP

* update code

* add test for if user enter wrong password in confirm password field

* add two test to verify if user is on correct page after import wallet

* update cod

* lint fix

* fix code to test pass

* fix code

* improve code

* change completeCreateNewWalletOnboardingFlow function parameters and update code

* delete unnecessary wait

---------

Co-authored-by: dzfjz <120640011+dzfjz@users.noreply.github.com>
Co-authored-by: dzfjz <dzenana.fejzic-ext@consensys.net>

test/e2e/helpers.js

@@ -1,3 +1,4 @@
+const { strict: assert } = require('assert');
 const path = require('path');
 const { promises: fs } = require('fs');
 const BigNumber = require('bignumber.js');
@@ -289,6 +290,91 @@ const completeImportSRPOnboardingFlowWordByWord = async (
   await driver.clickElement('[data-testid="pin-extension-done"]');
 };
 
+const completeCreateNewWalletOnboardingFlow = async (driver, password) => {
+  // welcome
+  await driver.clickElement('[data-testid="onboarding-create-wallet"]');
+
+  // metrics
+  await driver.clickElement('[data-testid="metametrics-no-thanks"]');
+
+  // create password
+  await driver.fill('[data-testid="create-password-new"]', password);
+  await driver.fill('[data-testid="create-password-confirm"]', password);
+  await driver.clickElement('[data-testid="create-password-terms"]');
+  await driver.clickElement('[data-testid="create-password-wallet"]');
+
+  // secure my wallet
+  await driver.clickElement('[data-testid="secure-wallet-recommended"]');
+
+  // reveal SRP
+  await driver.clickElement('[data-testid="recovery-phrase-reveal"]');
+
+  const revealedSeedPhrase = await driver.findElement(
+    '[data-testid="recovery-phrase-chips"]',
+  );
+
+  const recoveryPhrase = await revealedSeedPhrase.getText();
+
+  await driver.clickElement('[data-testid="recovery-phrase-next"]');
+
+  // confirm SRP
+  const words = recoveryPhrase.split(/\s*(?:[0-9)]+|\n|\.|^$|$)\s*/u);
+  const finalWords = words.filter((str) => str !== '');
+  assert.equal(finalWords.length, 12);
+
+  await driver.fill('[data-testid="recovery-phrase-input-2"]', finalWords[2]);
+  await driver.fill('[data-testid="recovery-phrase-input-3"]', finalWords[3]);
+  await driver.fill('[data-testid="recovery-phrase-input-7"]', finalWords[7]);
+
+  await driver.clickElement('[data-testid="confirm-recovery-phrase"]');
+
+  await driver.clickElement({ text: 'Confirm', tag: 'button' });
+
+  // complete
+  await driver.findElement({ text: 'Wallet creation successful', tag: 'h2' });
+  await driver.clickElement('[data-testid="onboarding-complete-done"]');
+
+  // pin extension
+  await driver.clickElement('[data-testid="pin-extension-next"]');
+  await driver.clickElement('[data-testid="pin-extension-done"]');
+};
+
+const importWrongSRPOnboardingFlow = async (driver, seedPhrase) => {
+  // welcome
+  await driver.clickElement('[data-testid="onboarding-import-wallet"]');
+
+  // metrics
+  await driver.clickElement('[data-testid="metametrics-no-thanks"]');
+
+  // import with recovery phrase
+  await driver.pasteIntoField(
+    '[data-testid="import-srp__srp-word-0"]',
+    seedPhrase,
+  );
+
+  const warningText = 'Invalid Secret Recovery Phrase';
+  const warnings = await driver.findElements('.actionable-message__message');
+  const warning = warnings[1];
+
+  assert.equal(await warning.getText(), warningText);
+};
+
+const selectDropdownByNum = async (elements, index) => {
+  await elements[index].click();
+};
+
+const testSRPDropdownIterations = async (options, driver, iterations) => {
+  for (let i = 0; i < iterations; i++) {
+    await selectDropdownByNum(options, i);
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    const formFields = await driver.findElements('.import-srp__srp-word-label');
+    const expectedNumFields = 12 + i * 3;
+    const actualNumFields = formFields.length;
+    assert.equal(actualNumFields, expectedNumFields);
+  }
+};
+
 module.exports = {
   getWindowHandles,
   convertToHexValue,
@@ -300,5 +386,8 @@ module.exports = {
   importSRPOnboardingFlow,
   completeImportSRPOnboardingFlow,
   completeImportSRPOnboardingFlowWordByWord,
+  completeCreateNewWalletOnboardingFlow,
   createDownloadFolder,
+  importWrongSRPOnboardingFlow,
+  testSRPDropdownIterations,
 };

test/e2e/tests/onboarding.spec.js

@@ -1,8 +1,13 @@
 const { strict: assert } = require('assert');
+const { By } = require('selenium-webdriver');
 const {
   convertToHexValue,
   withFixtures,
+  completeCreateNewWalletOnboardingFlow,
+  completeImportSRPOnboardingFlow,
   importSRPOnboardingFlow,
+  importWrongSRPOnboardingFlow,
+  testSRPDropdownIterations,
 } = require('../helpers');
 const FixtureBuilder = require('../fixture-builder');
 
@@ -10,6 +15,10 @@ describe('MetaMask onboarding', function () {
   const testSeedPhrase =
     'forum vessel pink push lonely enact gentle tail admit parrot grunt dress';
   const testPassword = 'correct horse battery staple';
+  const wrongSeedPhrase =
+    'test test test test test test test test test test test test';
+  const wrongTestPassword = 'test test test test';
+
   const ganacheOptions = {
     accounts: [
       {
@@ -19,6 +28,212 @@ describe('MetaMask onboarding', function () {
       },
     ],
   };
+
+  it('Clicks create a new wallet, accepts a secure password, reveals the Secret Recovery Phrase, confirm SRP', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder({ onboarding: true }).build(),
+        ganacheOptions,
+        title: this.test.title,
+        failOnConsoleError: false,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+
+        await completeCreateNewWalletOnboardingFlow(driver, testPassword);
+
+        const homePage = await driver.findElement('.home__main-view');
+        const homePageDisplayed = await homePage.isDisplayed();
+
+        assert.equal(homePageDisplayed, true);
+      },
+    );
+  });
+
+  it('Clicks import a new wallet, accepts a secure password, reveals the Secret Recovery Phrase, confirm SRP', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder({ onboarding: true }).build(),
+        ganacheOptions,
+        title: this.test.title,
+        failOnConsoleError: false,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+
+        await completeImportSRPOnboardingFlow(
+          driver,
+          testSeedPhrase,
+          testPassword,
+        );
+
+        const homePage = await driver.findElement('.home__main-view');
+        const homePageDisplayed = await homePage.isDisplayed();
+
+        assert.equal(homePageDisplayed, true);
+      },
+    );
+  });
+
+  it('User import wrong Secret Recovery Phrase', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder({ onboarding: true }).build(),
+        ganacheOptions,
+        title: this.test.title,
+        failOnConsoleError: false,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+
+        await importWrongSRPOnboardingFlow(driver, wrongSeedPhrase);
+
+        const confirmSeedPhrase = await driver.findElement(
+          '[data-testid="import-srp-confirm"]',
+        );
+
+        assert.equal(await confirmSeedPhrase.isEnabled(), false);
+      },
+    );
+  });
+
+  it('Check if user select different type of secret recovery phrase', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder({ onboarding: true }).build(),
+        ganacheOptions,
+        title: this.test.title,
+        failOnConsoleError: false,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+
+        // welcome
+        await driver.clickElement('[data-testid="onboarding-import-wallet"]');
+
+        await driver.clickElement('[data-testid="metametrics-no-thanks"]');
+
+        const dropdowns = await driver.findElements('select');
+        const dropdownElement = dropdowns[1];
+        await dropdownElement.click();
+        const options = await dropdownElement.findElements(
+          By.tagName('option'),
+        );
+
+        const iterations = options.length;
+
+        await testSRPDropdownIterations(options, driver, iterations);
+
+        const finalFormFields = await driver.findElements(
+          '.import-srp__srp-word-label',
+        );
+        const expectedFinalNumFields = 24; // The last iteration will have 24 fields
+        const actualFinalNumFields = finalFormFields.length;
+        assert.equal(actualFinalNumFields, expectedFinalNumFields);
+      },
+    );
+  });
+
+  it('User enters the wrong password during password creation', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder({ onboarding: true }).build(),
+        ganacheOptions,
+        title: this.test.title,
+        failOnConsoleError: false,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+
+        await driver.clickElement('[data-testid="onboarding-create-wallet"]');
+
+        // metrics
+        await driver.clickElement('[data-testid="metametrics-no-thanks"]');
+
+        // Fill in confirm password field with incorrect password
+        await driver.fill('[data-testid="create-password-new"]', testPassword);
+        await driver.fill(
+          '[data-testid="create-password-confirm"]',
+          wrongTestPassword,
+        );
+
+        // Check that the error message is displayed for the password fields
+        await driver.isElementPresent(
+          // eslint-disable-next-line prettier/prettier
+            { text: 'Passwords don\'t match', tag: 'h6' },
+          true,
+        );
+
+        // Check that the "Confirm Password" button is disabled
+        const confirmPasswordButton = await driver.findElement(
+          '[data-testid="create-password-wallet"]',
+        );
+        assert.equal(await confirmPasswordButton.isEnabled(), false);
+      },
+    );
+  });
+
+  it('Verify that the user has been redirected to the correct page after importing their wallet', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder({ onboarding: true }).build(),
+        ganacheOptions,
+        title: this.test.title,
+        failOnConsoleError: false,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+
+        await importSRPOnboardingFlow(driver, testSeedPhrase, testPassword);
+        // Verify site
+        assert.equal(
+          await driver.isElementPresent({
+            text: 'Wallet creation successful',
+            tag: 'h2',
+          }),
+          true,
+        );
+      },
+    );
+  });
+
+  it('Verify that the user has been redirected to the correct page after creating a password for their new wallet', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder({ onboarding: true }).build(),
+        ganacheOptions,
+        title: this.test.title,
+        failOnConsoleError: false,
+      },
+      async ({ driver }) => {
+        await driver.navigate();
+
+        await driver.clickElement('[data-testid="onboarding-create-wallet"]');
+
+        // metrics
+        await driver.clickElement('[data-testid="metametrics-no-thanks"]');
+
+        // Fill in confirm password field with correct password
+        await driver.fill('[data-testid="create-password-new"]', testPassword);
+        await driver.fill(
+          '[data-testid="create-password-confirm"]',
+          testPassword,
+        );
+        await driver.clickElement('[data-testid="create-password-terms"]');
+        await driver.clickElement('[data-testid="create-password-wallet"]');
+
+        // Verify site
+        assert.equal(
+          await driver.isElementPresent({
+            text: 'Secure your wallet',
+            tag: 'h2',
+          }),
+          true,
+        );
+      },
+    );
+  });
+
   const ganacheOptions2 = {
     accounts: [
       {