Create Password onboarding unit test, test-ids, and snapshot (#18257)

* Create Password onboarding unit test, test-ids, and snapshot * Add button inline snapshot check for import wallet text * Don't adjust inlineSnapshot formatting * Get text content --------- Co-authored-by: Brad Decker <[email protected]>
MetaMask · Apr 20, 2023 · 8d29fc9 · 8d29fc9
1 parent b91043c
commit 8d29fc9
Show file tree

Hide file tree

Showing 3 changed files with 577 additions and 1 deletion.
diff --git a/ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap b/ui/pages/onboarding-flow/create-password/__snapshots__/create-password.test.js.snap
@@ -0,0 +1,172 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Onboarding Create Password Render should match snapshot 1`] = `
+<div>
+  <div
+    class="create-password__wrapper"
+    data-testid="create-password"
+  >
+    <div
+      class="box box--margin-bottom-4 box--flex-direction-row"
+    >
+      <ul
+        class="progressbar"
+      >
+        <li
+          class="active"
+        >
+          Create password
+        </li>
+        <li
+          class=""
+        >
+          Secure wallet
+        </li>
+        <li
+          class=""
+        >
+          Confirm secret recovery phrase
+        </li>
+      </ul>
+    </div>
+    <h2
+      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h2 typography--weight-bold typography--style-normal typography--color-text-default"
+    >
+      Create password
+    </h2>
+    <h4
+      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--align-center typography--color-text-default"
+    >
+      This password will unlock your MetaMask wallet only on this device. MetaMask can not recover this password.
+    </h4>
+    <div
+      class="box box--margin-top-3 box--flex-direction-row box--justify-content-center box--display-flex"
+    >
+      <form
+        class="create-password__form"
+      >
+        <div
+          class="form-field"
+        >
+          <label
+            class="box box--flex-direction-row"
+          >
+            <div
+              class="form-field__heading"
+            >
+              <div
+                class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+              >
+                <h6
+                  class="box box--margin-top-1 box--margin-bottom-1 box--display-inline-block box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+                >
+                  New password (8 characters min)
+                </h6>
+                
+                
+              </div>
+              <div
+                class="box form-field__heading-detail box--margin-right-2 box--flex-direction-row box--text-align-end"
+              >
+                <h6
+                  class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-default"
+                >
+                  <a
+                    class="create-password__form--password-button"
+                    data-testid="show-password"
+                    href=""
+                  >
+                    Show
+                  </a>
+                </h6>
+              </div>
+            </div>
+            <input
+              class="form-field__input"
+              data-testid="create-password-new"
+              type="password"
+              value=""
+            />
+            
+            
+          </label>
+        </div>
+        <div
+          class="form-field"
+        >
+          <label
+            class="box box--flex-direction-row"
+          >
+            <div
+              class="form-field__heading"
+            >
+              <div
+                class="box form-field__heading-title box--display-flex box--flex-direction-row box--align-items-baseline"
+              >
+                <h6
+                  class="box box--margin-top-1 box--margin-bottom-1 box--display-inline-block box--flex-direction-row typography typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
+                >
+                  Confirm password
+                </h6>
+                
+                
+              </div>
+            </div>
+            <input
+              class="form-field__input"
+              data-testid="create-password-confirm"
+              type="password"
+              value=""
+            />
+            
+          </label>
+        </div>
+        <div
+          class="box box--margin-bottom-4 box--flex-direction-row box--justify-content-space-between box--align-items-center box--display-flex"
+        >
+          <label
+            class="create-password__form__terms-label"
+          >
+            <input
+              class="check-box far fa-square"
+              data-testid="create-password-terms"
+              readonly=""
+              type="checkbox"
+            />
+            <h5
+              class="box box--margin-top-1 box--margin-bottom-1 box--margin-left-3 box--flex-direction-row typography typography--h5 typography--weight-normal typography--style-normal typography--color-text-default"
+            >
+              <span>
+                 
+                I understand that MetaMask cannot recover this password for me. 
+                <a
+                  href="https://metamask.zendesk.com/hc/en-us/articles/4404722782107"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  <span
+                    class="create-password__link-text"
+                  >
+                    Learn more
+                  </span>
+                </a>
+                
+                 
+              </span>
+            </h5>
+          </label>
+        </div>
+        <button
+          class="button btn--rounded btn-primary btn--large create-password__form--submit-button"
+          data-testid="create-password-wallet"
+          disabled=""
+          role="button"
+          tabindex="0"
+        >
+          Create a new wallet
+        </button>
+      </form>
+    </div>
+  </div>
+</div>
+`;
diff --git a/ui/pages/onboarding-flow/create-password/create-password.js b/ui/pages/onboarding-flow/create-password/create-password.js
@@ -85,26 +85,30 @@ export default function CreatePassword({
     if (isTooShort) {
       return {
         className: 'create-password__weak',
+        dataTestId: 'short-password-error',
         text: t('passwordNotLongEnough'),
         description: '',
       };
     }
     if (score >= 4) {
       return {
         className: 'create-password__strong',
+        dataTestId: 'strong-password',
         text: t('strong'),
         description: '',
       };
     }
     if (score === 3) {
       return {
         className: 'create-password__average',
+        dataTestId: 'average-password',
         text: t('average'),
         description: t('passwordStrengthDescription'),
       };
     }
     return {
       className: 'create-password__weak',
+      dataTestId: 'weak-password',
       text: t('weak'),
       description: t('passwordStrengthDescription'),
     };
@@ -116,7 +120,11 @@ export default function CreatePassword({
     const { score } = zxcvbn(passwordInput);
     const passwordStrengthLabel = getPasswordStrengthLabel(isTooShort, score);
     const passwordStrengthComponent = t('passwordStrength', [
-      <span key={score} className={passwordStrengthLabel.className}>
+      <span
+        key={score}
+        data-testid={passwordStrengthLabel.dataTestId}
+        className={passwordStrengthLabel.className}
+      >
         {passwordStrengthLabel.text}
       </span>,
     ]);
@@ -206,6 +214,7 @@ export default function CreatePassword({
               <Typography variant={TypographyVariant.H7}>
                 <a
                   href=""
+                  data-testid="show-password"
                   className="create-password__form--password-button"
                   onClick={(e) => {
                     e.preventDefault();