Fix unit tests

MetaMask · Jun 20, 2024 · dd2f528 · dd2f528
1 parent 3ee3667
commit dd2f528
Show file tree

Hide file tree

Showing 8 changed files with 473 additions and 528 deletions.
diff --git a/ui/components/app/confirm/info/__snapshots__/info.test.tsx.snap b/ui/components/app/confirm/info/__snapshots__/info.test.tsx.snap
@@ -77,7 +77,7 @@ exports[`ConfirmInfo should match snapshot 1`] = `
       </div>
     </div>
     <div
-      style="height: 1px;"
+      style="height: 1px; margin-left: -8px; margin-right: -8px;"
     />
     <div
       class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"

diff --git a/ui/components/app/confirm/info/row/__snapshots__/divider.test.tsx.snap b/ui/components/app/confirm/info/row/__snapshots__/divider.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ConfirmInfoRowDivider should match snapshot 1`] = `
 <div>
   <div
-    style="height: 1px;"
+    style="height: 1px; margin-left: -8px; margin-right: -8px;"
   />
 </div>
 `;
diff --git a/ui/components/app/confirm/info/row/divider.tsx b/ui/components/app/confirm/info/row/divider.tsx
@@ -6,6 +6,7 @@ export const ConfirmInfoRowDivider: React.FC = () => {
       style={{
         height: '1px',
         backgroundColor: 'var(--color-border-muted)',
+        // Ignore the padding from the section.
         marginLeft: '-8px',
         marginRight: '-8px',
       }}

diff --git a/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
@@ -78,122 +78,114 @@ exports[`Info renders info section for personal sign request 1`] = `
 exports[`Info renders info section for typed sign request 1`] = `
 <div>
   <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
       <div
-        class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px;"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        <div
-          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
+          Request from
+        </p>
+        <div>
+          <div
+            aria-describedby="tippy-tooltip-2"
+            class=""
+            data-original-title="This is the site asking for your signature."
+            data-tooltipped=""
+            style="display: flex;"
+            tabindex="0"
           >
-            Request from
-          </p>
-          <div>
-            <div
-              aria-describedby="tippy-tooltip-2"
-              class=""
-              data-original-title="This is the site asking for your signature."
-              data-tooltipped=""
-              style="display: flex;"
-              tabindex="0"
-            >
-              <span
-                class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
-                style="mask-image: url('./images/icons/question.svg');"
-              />
-            </div>
+            <span
+              class="mm-box mm-icon mm-icon--size-sm mm-box--margin-left-1 mm-box--display-inline-block mm-box--color-icon-muted"
+              style="mask-image: url('./images/icons/question.svg');"
+            />
           </div>
         </div>
-        <div
-          class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--flex-wrap-wrap mm-box--align-items-center"
+      >
+        <p
+          class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-          >
-            metamask.github.io
-          </p>
-        </div>
+          metamask.github.io
+        </p>
       </div>
     </div>
     <div
-      class="mm-box mm-box--padding-2"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
+      style="overflow-wrap: anywhere; min-height: 24px;"
     >
       <div
-        class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
-        style="overflow-wrap: anywhere; min-height: 24px;"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
       >
-        <div
-          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-center"
+        <p
+          class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
         >
-          <p
-            class="mm-box mm-text mm-text--body-md-medium mm-box--color-inherit"
-          >
-            Interacting with
-          </p>
-        </div>
+          Interacting with
+        </p>
+      </div>
+      <div
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+      >
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
         >
           <div
-            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--align-items-center"
+            class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
           >
             <div
-              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-account mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+              class="mm-avatar-account__jazzicon"
             >
               <div
-                class="mm-avatar-account__jazzicon"
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
               >
-                <div
-                  style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 16px; height: 16px; display: inline-block; background: rgb(1, 142, 116);"
+                <svg
+                  height="16"
+                  width="16"
+                  x="0"
+                  y="0"
                 >
-                  <svg
+                  <rect
+                    fill="#FB1891"
                     height="16"
+                    transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
                     width="16"
                     x="0"
                     y="0"
-                  >
-                    <rect
-                      fill="#FB1891"
-                      height="16"
-                      transform="translate(0.6335263099240563 1.7352552986765108) rotate(129.9 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                    <rect
-                      fill="#F90901"
-                      height="16"
-                      transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                    <rect
-                      fill="#F26A02"
-                      height="16"
-                      transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
-                      width="16"
-                      x="0"
-                      y="0"
-                    />
-                  </svg>
-                </div>
+                  />
+                  <rect
+                    fill="#F90901"
+                    height="16"
+                    transform="translate(-5.227286615169763 8.640359200885621) rotate(141.5 8 8)"
+                    width="16"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#F26A02"
+                    height="16"
+                    transform="translate(10.585940898259892 -4.814122444807073) rotate(339.2 8 8)"
+                    width="16"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
               </div>
             </div>
-            <p
-              class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
-              data-testid="confirm-info-row-display-name"
-            >
-              0xCcCCc...ccccC
-            </p>
           </div>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--margin-left-2 mm-box--color-inherit"
+            data-testid="confirm-info-row-display-name"
+          >
+            0xCcCCc...ccccC
+          </p>
         </div>
       </div>
     </div>

diff --git a/...onents/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap b/...onents/confirm/info/contract-interaction/__snapshots__/contract-interaction.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`<ContractInteractionInfo /> does not render if required data is not pre
 exports[`<ContractInteractionInfo /> renders component for contract interaction request 1`] = `
 <div>
   <div
-    class="mm-box mm-box--margin-bottom-4 mm-box--background-color-background-default mm-box--rounded-md"
+    class="mm-box mm-box--margin-bottom-4 mm-box--padding-0 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
       class="mm-box simulation-details-layout mm-box--padding-3 mm-box--display-flex mm-box--gap-3 mm-box--flex-direction-column mm-box--rounded-lg mm-box--border-color-transparent box--border-style-solid box--border-width-1"
-Original file line number
+Diff line change
@@ Expand Up / @@ -77,7 +77,7 @@ exports[`ConfirmInfo should match snapshot 1`] = ` @@
           </div>
         </div>
         <div
-          style="height: 1px;"
+          style="height: 1px; margin-left: -8px; margin-right: -8px;"
         />
         <div
           class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--color-text-default mm-box--rounded-lg"
@@ Expand Down @@