@magento/venia-ui 9.2.0 → 9.3.0-alpha.1

package/lib/components/MyAccount/ResetPassword/__tests__/__snapshots__/resetPassword.spec.js.snap

@@ -6,7 +6,10 @@ exports[`should render error message if token is falsy 1`] = `
     Reset Password
   </mock-StoreTitle>
   <h1>
-    Reset Password
+    <mock-FormattedMessage
+      defaultMessage="Reset Password"
+      id="resetPassword.header"
+    />
   </h1>
   <div>
     <div>
@@ -25,137 +28,144 @@ exports[`should render formErrors 1`] = `
     Reset Password
   </mock-StoreTitle>
   <h1>
-    Reset Password
+    <mock-FormattedMessage
+      defaultMessage="Reset Password"
+      id="resetPassword.header"
+    />
   </h1>
-  <form
-    onKeyDown={[Function]}
-    onReset={[Function]}
-    onSubmit={[Function]}
-  >
-    <div>
-      <mock-FormattedMessage
-        defaultMessage="Please enter your email address and new password."
-        id="resetPassword.descriptionText"
-      />
-    </div>
-    <div>
-      <label>
-        Email address
-      </label>
-      <span
-        style={
-          Object {
-            "--iconsAfter": 0,
-            "--iconsBefore": 0,
-          }
-        }
-      >
-        <span>
-          <input
-            id="email"
-            name="email"
-            onBlur={[Function]}
-            onChange={[Function]}
-            value=""
-          />
-        </span>
-        <span />
-        <span />
-      </span>
-      <p />
-    </div>
-    <div>
-      <label>
-        New Password
-      </label>
-      <span
-        style={
-          Object {
-            "--iconsAfter": 1,
-            "--iconsBefore": 0,
-          }
-        }
-      >
-        <span>
-          <input
-            id="newPassword"
-            name="newPassword"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="password"
-            value=""
-          />
-        </span>
-        <span />
-        <span>
-          <button
-            disabled={false}
-            onClick={[Function]}
-            onDragStart={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchCancel={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-            type="button"
-          >
-            <span>
-              <svg
-                fill="none"
-                height={24}
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-                width={24}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
-                />
-                <line
-                  x1="1"
-                  x2="23"
-                  y1="1"
-                  y2="23"
-                />
-              </svg>
-            </span>
-          </button>
-        </span>
-      </span>
-      <p />
-    </div>
-    <button
-      disabled={false}
-      onClick={[Function]}
-      onDragStart={[Function]}
+  <div>
+    <form
       onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      onMouseUp={[Function]}
-      onTouchCancel={[Function]}
-      onTouchEnd={[Function]}
-      onTouchMove={[Function]}
-      onTouchStart={[Function]}
-      type="submit"
+      onReset={[Function]}
+      onSubmit={[Function]}
     >
-      <span>
+      <div>
         <mock-FormattedMessage
-          defaultMessage="Save Password"
-          id="resetPassword.savePassword"
+          defaultMessage="Please enter your email address and new password."
+          id="resetPassword.descriptionText"
         />
-      </span>
-    </button>
-  </form>
+      </div>
+      <div>
+        <label>
+          Email address
+        </label>
+        <span
+          style={
+            Object {
+              "--iconsAfter": 0,
+              "--iconsBefore": 0,
+            }
+          }
+        >
+          <span>
+            <input
+              id="email"
+              name="email"
+              onBlur={[Function]}
+              onChange={[Function]}
+              value=""
+            />
+          </span>
+          <span />
+          <span />
+        </span>
+        <p />
+      </div>
+      <div>
+        <label>
+          New Password
+        </label>
+        <span
+          style={
+            Object {
+              "--iconsAfter": 1,
+              "--iconsBefore": 0,
+            }
+          }
+        >
+          <span>
+            <input
+              id="newPassword"
+              name="newPassword"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="password"
+              value=""
+            />
+          </span>
+          <span />
+          <span>
+            <button
+              disabled={false}
+              onClick={[Function]}
+              onDragStart={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
+              type="button"
+            >
+              <span>
+                <svg
+                  fill="none"
+                  height={24}
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+                  />
+                  <line
+                    x1="1"
+                    x2="23"
+                    y1="1"
+                    y2="23"
+                  />
+                </svg>
+              </span>
+            </button>
+          </span>
+        </span>
+        <p />
+      </div>
+      <div>
+        <button
+          disabled={false}
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          type="submit"
+        >
+          <span>
+            <mock-FormattedMessage
+              defaultMessage="Save Password"
+              id="resetPassword.savePassword"
+            />
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
 </div>
 `;
 
@@ -165,137 +175,144 @@ exports[`should render properly 1`] = `
     Reset Password
   </mock-StoreTitle>
   <h1>
-    Reset Password
+    <mock-FormattedMessage
+      defaultMessage="Reset Password"
+      id="resetPassword.header"
+    />
   </h1>
-  <form
-    onKeyDown={[Function]}
-    onReset={[Function]}
-    onSubmit={[Function]}
-  >
-    <div>
-      <mock-FormattedMessage
-        defaultMessage="Please enter your email address and new password."
-        id="resetPassword.descriptionText"
-      />
-    </div>
-    <div>
-      <label>
-        Email address
-      </label>
-      <span
-        style={
-          Object {
-            "--iconsAfter": 0,
-            "--iconsBefore": 0,
-          }
-        }
-      >
-        <span>
-          <input
-            id="email"
-            name="email"
-            onBlur={[Function]}
-            onChange={[Function]}
-            value=""
-          />
-        </span>
-        <span />
-        <span />
-      </span>
-      <p />
-    </div>
-    <div>
-      <label>
-        New Password
-      </label>
-      <span
-        style={
-          Object {
-            "--iconsAfter": 1,
-            "--iconsBefore": 0,
-          }
-        }
-      >
-        <span>
-          <input
-            id="newPassword"
-            name="newPassword"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="password"
-            value=""
-          />
-        </span>
-        <span />
-        <span>
-          <button
-            disabled={false}
-            onClick={[Function]}
-            onDragStart={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchCancel={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-            type="button"
-          >
-            <span>
-              <svg
-                fill="none"
-                height={24}
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-                width={24}
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
-                />
-                <line
-                  x1="1"
-                  x2="23"
-                  y1="1"
-                  y2="23"
-                />
-              </svg>
-            </span>
-          </button>
-        </span>
-      </span>
-      <p />
-    </div>
-    <button
-      disabled={false}
-      onClick={[Function]}
-      onDragStart={[Function]}
+  <div>
+    <form
       onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      onMouseUp={[Function]}
-      onTouchCancel={[Function]}
-      onTouchEnd={[Function]}
-      onTouchMove={[Function]}
-      onTouchStart={[Function]}
-      type="submit"
+      onReset={[Function]}
+      onSubmit={[Function]}
     >
-      <span>
+      <div>
         <mock-FormattedMessage
-          defaultMessage="Save Password"
-          id="resetPassword.savePassword"
+          defaultMessage="Please enter your email address and new password."
+          id="resetPassword.descriptionText"
         />
-      </span>
-    </button>
-  </form>
+      </div>
+      <div>
+        <label>
+          Email address
+        </label>
+        <span
+          style={
+            Object {
+              "--iconsAfter": 0,
+              "--iconsBefore": 0,
+            }
+          }
+        >
+          <span>
+            <input
+              id="email"
+              name="email"
+              onBlur={[Function]}
+              onChange={[Function]}
+              value=""
+            />
+          </span>
+          <span />
+          <span />
+        </span>
+        <p />
+      </div>
+      <div>
+        <label>
+          New Password
+        </label>
+        <span
+          style={
+            Object {
+              "--iconsAfter": 1,
+              "--iconsBefore": 0,
+            }
+          }
+        >
+          <span>
+            <input
+              id="newPassword"
+              name="newPassword"
+              onBlur={[Function]}
+              onChange={[Function]}
+              type="password"
+              value=""
+            />
+          </span>
+          <span />
+          <span>
+            <button
+              disabled={false}
+              onClick={[Function]}
+              onDragStart={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchCancel={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
+              type="button"
+            >
+              <span>
+                <svg
+                  fill="none"
+                  height={24}
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
+                  />
+                  <line
+                    x1="1"
+                    x2="23"
+                    y1="1"
+                    y2="23"
+                  />
+                </svg>
+              </span>
+            </button>
+          </span>
+        </span>
+        <p />
+      </div>
+      <div>
+        <button
+          disabled={false}
+          onClick={[Function]}
+          onDragStart={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+          onTouchCancel={[Function]}
+          onTouchEnd={[Function]}
+          onTouchMove={[Function]}
+          onTouchStart={[Function]}
+          type="submit"
+        >
+          <span>
+            <mock-FormattedMessage
+              defaultMessage="Save Password"
+              id="resetPassword.savePassword"
+            />
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
 </div>
 `;
 
@@ -305,7 +322,10 @@ exports[`should render success message if hasCompleted is true 1`] = `
     Reset Password
   </mock-StoreTitle>
   <h1>
-    Reset Password
+    <mock-FormattedMessage
+      defaultMessage="Reset Password"
+      id="resetPassword.header"
+    />
   </h1>
   <div>
     <div>

package/lib/components/MyAccount/ResetPassword/__tests__/resetPassword.spec.js

@@ -15,7 +15,8 @@ jest.mock('@magento/peregrine/lib/talons/MyAccount/useResetPassword', () => ({
         loading: false,
         token: '********',
         formErrors: [],
-        handleSubmit: jest.fn().mockName('handleSubmit')
+        handleSubmit: jest.fn().mockName('handleSubmit'),
+        recaptchaWidgetProps: {}
     })
 }));
 
@@ -35,7 +36,8 @@ test('should render error message if token is falsy', () => {
         loading: false,
         token: null,
         formErrors: [],
-        handleSubmit: jest.fn()
+        handleSubmit: jest.fn(),
+        recaptchaWidgetProps: {}
     });
 
     const tree = createTestInstance(<ResetPassword />);
@@ -55,7 +57,8 @@ test('should render formErrors', () => {
                 }
             }
         ],
-        handleSubmit: jest.fn()
+        handleSubmit: jest.fn(),
+        recaptchaWidgetProps: {}
     });
 
     const tree = createTestInstance(<ResetPassword />);
@@ -69,7 +72,8 @@ test('should render success message if hasCompleted is true', () => {
         loading: false,
         token: '**********',
         formErrors: [],
-        handleSubmit: jest.fn()
+        handleSubmit: jest.fn(),
+        recaptchaWidgetProps: {}
     });
 
     const tree = createTestInstance(<ResetPassword />);
@@ -85,7 +89,8 @@ test('should render toast if hasCompleted is true', () => {
         loading: false,
         token: '**********',
         formErrors: [],
-        handleSubmit: jest.fn()
+        handleSubmit: jest.fn(),
+        recaptchaWidgetProps: {}
     });
 
     createTestInstance(<ResetPassword />);