Onboarding v2 e2e test (#12628)

* add data-testid's

* import wallet test

* create wallet test

* fix lint issues

test/e2e/tests/from-import-ui.spec.js

@@ -27,6 +27,36 @@ describe('Metamask Import UI', function () {
       async ({ driver }) => {
         await driver.navigate();
 
+        if (process.env.ONBOARDING_V2 === '1') {
+          // welcome
+          await driver.clickElement('[data-testid="onboarding-import-wallet"]');
+
+          // metrics
+          await driver.clickElement('[data-testid="metametrics-no-thanks"]');
+
+          // import with recovery phrase
+          await driver.fill('[data-testid="import-srp-text"]', testSeedPhrase);
+          await driver.clickElement('[data-testid="import-srp-confirm"]');
+
+          // create password
+          await driver.fill(
+            '[data-testid="create-password-new"]',
+            'correct horse battery staple',
+          );
+          await driver.fill(
+            '[data-testid="create-password-confirm"]',
+            'correct horse battery staple',
+          );
+          await driver.clickElement('[data-testid="create-password-terms"]');
+          await driver.clickElement('[data-testid="create-password-import"]');
+
+          // complete
+          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"]');
+        } else {
           // clicks the continue button on the welcome screen
           await driver.findElement('.welcome-page__header');
           await driver.clickElement({
@@ -47,7 +77,10 @@ describe('Metamask Import UI', function () {
           );
 
           await driver.fill('#password', 'correct horse battery staple');
-        await driver.fill('#confirm-password', 'correct horse battery staple');
+          await driver.fill(
+            '#confirm-password',
+            'correct horse battery staple',
+          );
 
           await driver.clickElement('.first-time-flow__terms');
 
@@ -59,6 +92,7 @@ describe('Metamask Import UI', function () {
             text: enLocaleMessages.endOfFlowMessage10.message,
             tag: 'button',
           });
+        }
 
         // Show account information
         await driver.clickElement(

test/e2e/tests/metamask-responsive-ui.spec.js

@@ -16,6 +16,69 @@ describe('Metamask Responsive UI', function () {
       async ({ driver }) => {
         await driver.navigate();
 
+        async function clickWordAndWait(word) {
+          await driver.clickElement(
+            `[data-testid="seed-phrase-sorted"] [data-testid="draggable-seed-${word}"]`,
+          );
+          await driver.delay(tinyDelayMs);
+        }
+
+        if (process.env.ONBOARDING_V2 === '1') {
+          // 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"]',
+            'correct horse battery staple',
+          );
+          await driver.fill(
+            '[data-testid="create-password-confirm"]',
+            'correct horse battery staple',
+          );
+          await driver.clickElement('[data-testid="create-password-terms"]');
+          await driver.clickElement('[data-testid="create-password-wallet"]');
+
+          // secure wallet
+          await driver.clickElement(
+            '[data-testid="secure-wallet-recommended"]',
+          );
+
+          // review
+          await driver.clickElement('[data-testid="recovery-phrase-reveal"]');
+          const chipTwo = await (
+            await driver.findElement('[data-testid="recovery-phrase-chip-2"]')
+          ).getText();
+          const chipThree = await (
+            await driver.findElement('[data-testid="recovery-phrase-chip-3"]')
+          ).getText();
+          const chipSeven = await (
+            await driver.findElement('[data-testid="recovery-phrase-chip-7"]')
+          ).getText();
+          await driver.clickElement('[data-testid="recovery-phrase-next"]');
+
+          // confirm
+          await driver.fill('[data-testid="recovery-phrase-input-2"]', chipTwo);
+          await driver.fill(
+            '[data-testid="recovery-phrase-input-3"]',
+            chipThree,
+          );
+          await driver.fill(
+            '[data-testid="recovery-phrase-input-7"]',
+            chipSeven,
+          );
+          await driver.clickElement('[data-testid="recovery-phrase-confirm"]');
+
+          // complete
+          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"]');
+        } else {
           // clicks the continue button on the welcome screen
           await driver.findElement('.welcome-page__header');
           await driver.clickElement({
@@ -60,13 +123,6 @@ describe('Metamask Responsive UI', function () {
             tag: 'button',
           });
 
-        async function clickWordAndWait(word) {
-          await driver.clickElement(
-            `[data-testid="seed-phrase-sorted"] [data-testid="draggable-seed-${word}"]`,
-          );
-          await driver.delay(tinyDelayMs);
-        }
-
           // can retype the Secret Recovery Phrase
           const words = seedPhrase.split(' ');
           for (const word of words) {
@@ -80,13 +136,13 @@ describe('Metamask Responsive UI', function () {
             text: enLocaleMessages.endOfFlowMessage10.message,
             tag: 'button',
           });
+        }
 
-        // Show account information
+        // assert balance
-        // balance renders
+        const balance = await driver.findElement(
-        await driver.waitForSelector({
+          '[data-testid="wallet-balance"]',
-          css: '[data-testid="eth-overview__primary-currency"]',
+        );
-          text: '0 ETH',
+        assert.ok(/^0\sETH$/u.test(await balance.getText()));
-        });
       },
     );
   });

ui/components/ui/chip/chip-with-input.js

@@ -5,6 +5,7 @@ import { COLORS } from '../../../helpers/constants/design-system';
 import Chip from '.';
 
 export function ChipWithInput({
+  dataTestId,
   className,
   borderColor = COLORS.UI1,
   inputValue,
@@ -17,6 +18,7 @@ export function ChipWithInput({
     >
       {setInputValue && (
         <input
+          data-testid={dataTestId}
           type="text"
           className="chip__input"
           onChange={(e) => {
@@ -30,6 +32,7 @@ export function ChipWithInput({
 }
 
 ChipWithInput.propTypes = {
+  dataTestId: PropTypes.string,
   borderColor: PropTypes.oneOf(Object.values(COLORS)),
   className: PropTypes.string,
   inputValue: PropTypes.string,

ui/components/ui/chip/chip.js

@@ -6,6 +6,7 @@ import Typography from '../typography';
 import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
 
 export default function Chip({
+  dataTestId,
   className,
   children,
   borderColor = COLORS.UI1,
@@ -25,6 +26,7 @@ export default function Chip({
 
   return (
     <div
+      data-testid={dataTestId}
       onClick={onClick}
       onKeyPress={onKeyPress}
       className={classnames(className, 'chip', {
@@ -53,6 +55,7 @@ export default function Chip({
 }
 
 Chip.propTypes = {
+  dataTestId: PropTypes.string,
   borderColor: PropTypes.oneOf(Object.values(COLORS)),
   label: PropTypes.string,
   children: PropTypes.node,

ui/components/ui/form-field/form-field.js

@@ -16,6 +16,7 @@ import NumericInput from '../numeric-input/numeric-input.component';
 import InfoTooltip from '../info-tooltip/info-tooltip';
 
 export default function FormField({
+  dataTestId,
   titleText,
   titleUnit,
   tooltipText,
@@ -94,6 +95,7 @@ export default function FormField({
             type={password ? 'password' : 'text'}
             autoFocus={autoFocus}
             disabled={disabled}
+            data-testid={dataTestId}
           />
         )}
         {error && (
@@ -111,6 +113,7 @@ export default function FormField({
 }
 
 FormField.propTypes = {
+  dataTestId: PropTypes.string,
   titleText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   titleUnit: PropTypes.string,
   tooltipText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

ui/pages/onboarding-flow/create-password/create-password.js

@@ -131,6 +131,7 @@ export default function CreatePassword({
       >
         <form className="create-password__form" onSubmit={handleCreate}>
           <FormField
+            dataTestId="create-password-new"
             autoFocus
             error={passwordError}
             onChange={handlePasswordChange}
@@ -151,6 +152,7 @@ export default function CreatePassword({
             }
           />
           <FormField
+            dataTestId="create-password-confirm"
             onChange={handleConfirmPasswordChange}
             password={!showPassword}
             error={confirmPasswordError}
@@ -170,6 +172,7 @@ export default function CreatePassword({
             marginBottom={4}
           >
             <CheckBox
+              dataTestId="create-password-terms"
               onClick={() => setTermsChecked(!termsChecked)}
               checked={termsChecked}
             />
@@ -190,6 +193,11 @@ export default function CreatePassword({
             </Typography>
           </Box>
           <Button
+            data-testid={
+              secretRecoveryPhrase
+                ? 'create-password-import'
+                : 'create-password-wallet'
+            }
             type="primary"
             className="create-password__form--submit-button"
             disabled={!isValid || !termsChecked}

ui/pages/onboarding-flow/creation-successful/creation-successful.js

@@ -96,7 +96,13 @@ export default function CreationSuccessful() {
         >
           {t('setAdvancedPrivacySettings')}
         </Button>
-        <Button type="primary" large rounded onClick={onComplete}>
+        <Button
+          data-testid="onboarding-complete-done"
+          type="primary"
+          large
+          rounded
+          onClick={onComplete}
+        >
           {t('done')}
         </Button>
       </Box>

ui/pages/onboarding-flow/import-srp/import-srp.js

@@ -78,6 +78,7 @@ export default function ImportSRP({ submitSecretRecoveryPhrase }) {
               />
             </button>
             <textarea
+              data-testid="import-srp-text"
               className={classnames('srp-text-area__textarea', {
                 'srp-text-area__textarea--blur': !revealSRP,
                 'srp-text-area__textarea--error': error,
@@ -96,6 +97,7 @@ export default function ImportSRP({ submitSecretRecoveryPhrase }) {
           </div>
           <Button
             type="primary"
+            data-testid="import-srp-confirm"
             large
             onClick={() => {
               submitSecretRecoveryPhrase(secretRecoveryPhrase);

ui/pages/onboarding-flow/metametrics/metametrics.js

@@ -140,10 +140,18 @@ export default function OnboardingMetametrics() {
         ])}
       </Typography>
       <div className="onboarding-metametrics__buttons">
-        <Button type="secondary" onClick={onCancel}>
+        <Button
+          data-testid="metametrics-no-thanks"
+          type="secondary"
+          onClick={onCancel}
+        >
           {t('noThanks')}
         </Button>
-        <Button type="primary" onClick={onConfirm}>
+        <Button
+          data-testid="metametrics-i-agree"
+          type="primary"
+          onClick={onConfirm}
+        >
           {t('affirmAgree')}
         </Button>
       </div>

ui/pages/onboarding-flow/pin-extension/pin-extension.js

@@ -58,6 +58,9 @@ export default function OnboardingPinExtension() {
       </Carousel>
       <div className="onboarding-pin-extension__buttons">
         <Button
+          data-testid={
+            selectedIndex === 0 ? 'pin-extension-next' : 'pin-extension-done'
+          }
           type="primary"
           onClick={() => {
             if (selectedIndex === 0) {

ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js

@@ -83,6 +83,7 @@ export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) {
       />
       <div className="recovery-phrase__footer">
         <Button
+          data-testid="recovery-phrase-confirm"
           type="primary"
           className="recovery-phrase__footer--button"
           onClick={() => {

ui/pages/onboarding-flow/recovery-phrase/recovery-phrase-chips.js

@@ -36,6 +36,7 @@ export default function RecoveryPhraseChips({
       className="recovery-phrase__secret"
     >
       <div
+        data-testid="recovery-phrase-chips"
         className={classnames('recovery-phrase__chips', {
           'recovery-phrase__chips--hidden': hideSeedPhrase,
         })}
@@ -52,6 +53,7 @@ export default function RecoveryPhraseChips({
                   {`${index + 1}.`}
                 </div>
                 <ChipWithInput
+                  dataTestId={`recovery-phrase-input-${index}`}
                   borderColor={COLORS.PRIMARY1}
                   className="recovery-phrase__chip--with-input"
                   inputValue={inputValue[index]}
@@ -67,7 +69,11 @@ export default function RecoveryPhraseChips({
               <div className="recovery-phrase__chip-item__number">
                 {`${index + 1}.`}
               </div>
-              <Chip className="recovery-phrase__chip" borderColor={COLORS.UI3}>
+              <Chip
+                dataTestId={`recovery-phrase-chip-${index}`}
+                className="recovery-phrase__chip"
+                borderColor={COLORS.UI3}
+              >
                 {word}
               </Chip>
             </div>

ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js

@@ -96,6 +96,7 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
               {copied ? t('copiedExclamation') : t('copyToClipboard')}
             </Button>
             <Button
+              data-testid="recovery-phrase-next"
               type="primary"
               className="recovery-phrase__footer--button"
               onClick={() => {
@@ -107,6 +108,7 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
           </div>
         ) : (
           <Button
+            data-testid="recovery-phrase-reveal"
             type="primary"
             className="recovery-phrase__footer--button"
             onClick={() => {

ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js

@@ -103,6 +103,7 @@ export default function SecureYourWallet() {
         className="secure-your-wallet__actions"
       >
         <Button
+          data-testid="secure-wallet-later"
           type="secondary"
           rounded
           large
@@ -110,7 +111,13 @@ export default function SecureYourWallet() {
         >
           {t('seedPhraseIntroNotRecommendedButtonCopy')}
         </Button>
-        <Button type="primary" rounded large onClick={handleClickRecommended}>
+        <Button
+          data-testid="secure-wallet-recommended"
+          type="primary"
+          rounded
+          large
+          onClick={handleClickRecommended}
+        >
           {t('seedPhraseIntroRecommendedButtonCopy')}
         </Button>
       </Box>

ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js

@@ -33,6 +33,7 @@ export default function SkipSRPBackup({ handleClose }) {
             {t('goBack')}
           </Button>
           <Button
+            data-testid="skip-srp-backup"
             disabled={!checked}
             type="primary"
             rounded

ui/pages/onboarding-flow/welcome/welcome.js

@@ -96,12 +96,20 @@ export default function OnboardingWelcome() {
       </Carousel>
       <ul className="onboarding-welcome__buttons">
         <li>
-          <Button type="primary" onClick={onCreateClick}>
+          <Button
+            data-testid="onboarding-create-wallet"
+            type="primary"
+            onClick={onCreateClick}
+          >
             {t('onboardingCreateWallet')}
           </Button>
         </li>
         <li>
-          <Button type="secondary" onClick={onImportClick}>
+          <Button
+            data-testid="onboarding-import-wallet"
+            type="secondary"
+            onClick={onImportClick}
+          >
             {t('onboardingImportWallet')}
           </Button>
         </li>