Fix unit tests

MetaMask · Nov 28, 2024 · 8144d6e · 8144d6e
1 parent 9a083e9
commit 8144d6e
Show file tree

Hide file tree

Showing 22 changed files with 121 additions and 52 deletions.
diff --git a/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap b/ui/components/app/snaps/snap-ui-address/__snapshots__/snap-ui-address.test.tsx.snap
@@ -172,7 +172,7 @@ exports[`SnapUIAddress renders Ethereum address 1`] = `
           <rect
             fill="#F29602"
             height="32"
-            transform="translate(-2.81750896228304 4.951916544006229) rotate(230.4 16 16)"
+            transform="translate(-2.8175089622830405 4.951916544006229) rotate(230.4 16 16)"
             width="32"
             x="0"
             y="0"
@@ -476,7 +476,7 @@ exports[`SnapUIAddress renders legacy Ethereum address 1`] = `
           <rect
             fill="#F29602"
             height="32"
-            transform="translate(-2.81750896228304 4.951916544006229) rotate(230.4 16 16)"
+            transform="translate(-2.8175089622830405 4.951916544006229) rotate(230.4 16 16)"
             width="32"
             x="0"
             y="0"

diff --git a/...ents/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap b/...ents/multichain/connect-accounts-modal/__snapshots__/connect-accounts-modal.test.tsx.snap
@@ -159,7 +159,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
                                 <rect
                                   fill="#FA4300"
                                   height="32"
-                                  transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
+                                  transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
                                   width="32"
                                   x="0"
                                   y="0"
@@ -202,7 +202,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
                                 <rect
                                   fill="#FA4300"
                                   height="32"
-                                  transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
+                                  transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
                                   width="32"
                                   x="0"
                                   y="0"
@@ -261,7 +261,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
                         <rect
                           fill="#FA4300"
                           height="32"
-                          transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
+                          transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
                           width="32"
                           x="0"
                           y="0"
@@ -304,7 +304,7 @@ exports[`Connect More Accounts Modal should render correctly 1`] = `
                         <rect
                           fill="#FA4300"
                           height="32"
-                          transform="translate(-1.712066926084717 -0.6920409130150889) rotate(264.3 16 16)"
+                          transform="translate(-1.712066926084717 -0.6920409130150887) rotate(264.3 16 16)"
                           width="32"
                           x="0"
                           y="0"

diff --git a/...mponents/signature-request-original/__snapshots__/signature-request-original.test.js.snap b/...mponents/signature-request-original/__snapshots__/signature-request-original.test.js.snap
@@ -40,7 +40,7 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
           <div
             class="confirm-page-container-navigation__navtext"
           >
-            0
+            1
              
             of
              
@@ -54,7 +54,7 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
         </div>
         <div
           class="confirm-page-container-navigation__container"
-          style="visibility: initial;"
+          style="visibility: hidden;"
         >
           <button
             class="confirm-page-container-navigation__arrow"

diff --git a/...tions/components/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap b/...tions/components/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap
@@ -40,7 +40,7 @@ exports[`SignatureRequestSIWE (Sign in with Ethereum) should match snapshot 1`]
           <div
             class="confirm-page-container-navigation__navtext"
           >
-            0
+            1
              
             of
              
@@ -54,7 +54,7 @@ exports[`SignatureRequestSIWE (Sign in with Ethereum) should match snapshot 1`]
         </div>
         <div
           class="confirm-page-container-navigation__container"
-          style="visibility: initial;"
+          style="visibility: hidden;"
         >
           <button
             class="confirm-page-container-navigation__arrow"

diff --git a/ui/pages/confirmations/components/signature-request-siwe/signature-request-siwe.test.js b/ui/pages/confirmations/components/signature-request-siwe/signature-request-siwe.test.js
@@ -192,6 +192,10 @@ describe('SignatureRequestSIWE (Sign in with Ethereum)', () => {
             },
           ],
           unapprovedPersonalMsgCount: 2,
+          pendingApprovals: {
+            test1: { type: ApprovalType.PersonalSign },
+            test2: { type: ApprovalType.PersonalSign },
+          },
         },
       });
 

diff --git a/...s/confirmations/components/signature-request/__snapshots__/signature-request.test.js.snap b/...s/confirmations/components/signature-request/__snapshots__/signature-request.test.js.snap
@@ -37,11 +37,11 @@ exports[`Signature Request Component render should match snapshot when we are us
         <div
           class="confirm-page-container-navigation__navtext"
         >
-          0
+          1
            
           of
            
-          0
+          1
         </div>
         <div
           class="confirm-page-container-navigation__longtext"
@@ -810,11 +810,11 @@ exports[`Signature Request Component render should match snapshot when we want t
         <div
           class="confirm-page-container-navigation__navtext"
         >
-          0
+          1
            
           of
            
-          0
+          1
         </div>
         <div
           class="confirm-page-container-navigation__longtext"

diff --git a/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -8,7 +8,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
   >
     <div
       class="confirm-page-container-navigation"
-      style="display: flex;"
+      style="display: none;"
     >
       <div
         class="confirm-page-container-navigation__container"
@@ -38,11 +38,11 @@ exports[`ConfirmSendEther should render correct information for for confirm send
         <div
           class="confirm-page-container-navigation__navtext"
         >
-          0
+          1
            
           of
            
-          2
+          1
         </div>
         <div
           class="confirm-page-container-navigation__longtext"
@@ -52,7 +52,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
       </div>
       <div
         class="confirm-page-container-navigation__container"
-        style="visibility: initial;"
+        style="visibility: hidden;"
       >
         <button
           class="confirm-page-container-navigation__arrow"

diff --git a/ui/pages/confirmations/confirm-signature-request/__snapshots__/index.test.js.snap b/ui/pages/confirmations/confirm-signature-request/__snapshots__/index.test.js.snap
@@ -37,7 +37,7 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
         <div
           class="confirm-page-container-navigation__navtext"
         >
-          0
+          1
            
           of
            
@@ -51,7 +51,7 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
       </div>
       <div
         class="confirm-page-container-navigation__container"
-        style="visibility: initial;"
+        style="visibility: hidden;"
       >
         <button
           class="confirm-page-container-navigation__arrow"

diff --git a/...onfirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/...onfirmations/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -38,7 +38,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
         <div
           class="confirm-page-container-navigation__navtext"
         >
-          0
+          1
            
           of
            
@@ -52,7 +52,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
       </div>
       <div
         class="confirm-page-container-navigation__container"
-        style="visibility: initial;"
+        style="visibility: hidden;"
       >
         <button
           class="confirm-page-container-navigation__arrow"

diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
@@ -7,7 +7,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
   >
     <div
       class="mm-box confirmation-page__content mm-box--padding-4"
-      style="margin-top: 0px; overflow-y: auto;"
+      style="overflow-y: auto;"
     >
       <h3
         class="box box--md:margin-4 box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h3 typography--weight-bold typography--style-normal typography--align-center typography--color-text-default"

diff --git a/...confirmations/confirmation/templates/__snapshots__/create-named-snap-account.test.js.snap b/...confirmations/confirmation/templates/__snapshots__/create-named-snap-account.test.js.snap
@@ -5,9 +5,63 @@ exports[`create-named-snap-account confirmation matches snapshot 1`] = `
   <div
     class="confirmation-page"
   >
+    <div
+      class="mm-box"
+      style="width: 100%;"
+    >
+      <div
+        class="mm-box mm-box--padding-3 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--align-items-center mm-box--background-color-background-default"
+        style="z-index: 2;"
+      >
+        <div
+          class="mm-box mm-box--display-flex mm-box--align-items-center"
+        >
+          <button
+            aria-label="Previous Confirmation"
+            class="mm-box mm-button-icon mm-button-icon--size-sm mm-button-icon--disabled confirm_nav__left_btn mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+            data-testid="confirm-nav__previous-confirmation"
+            disabled=""
+          >
+            <span
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+              style="mask-image: url('./images/icons/arrow-left.svg');"
+            />
+          </button>
+          <p
+            class="mm-box mm-text mm-text--body-sm mm-box--margin-inline-2 mm-box--color-text-alternative"
+          >
+            1
+             of 
+            2
+          </p>
+          <button
+            aria-label="Next Confirmation"
+            class="mm-box mm-button-icon mm-button-icon--size-sm confirm_nav__right_btn mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-alternative mm-box--background-color-background-alternative mm-box--rounded-full"
+            data-testid="confirm-nav__next-confirmation"
+          >
+            <span
+              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+              style="mask-image: url('./images/icons/arrow-right.svg');"
+            />
+          </button>
+        </div>
+        <button
+          class="mm-box mm-text mm-button-base mm-button-base--size-md confirm_nav__reject_all mm-button-primary mm-text--body-md-medium mm-text--font-weight-normal mm-box--padding-0 mm-box--padding-right-3 mm-box--padding-left-3 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-xl"
+          data-testid="confirm-nav__reject-all"
+          data-theme="light"
+          type="secondary"
+        >
+          <span
+            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-inherit"
+            style="mask-image: url('./images/icons/close.svg');"
+          />
+          Reject all
+        </button>
+      </div>
+    </div>
     <div
       class="mm-box confirmation-page__content mm-box--padding-4"
-      style="margin-top: 0px; overflow-y: auto;"
+      style="overflow-y: auto;"
     >
       <div
         class="mm-box name-snap-account-page mm-box--padding-4"

diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
@@ -7,7 +7,7 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
   >
     <div
       class="mm-box confirmation-page__content mm-box--padding-4"
-      style="margin-top: 0px; overflow-y: auto;"
+      style="overflow-y: auto;"
     >
       <div
         class="mm-box create-snap-account-page mm-box--margin-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"

diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/error.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/error.test.js.snap
@@ -7,7 +7,7 @@ exports[`error template matches the snapshot 1`] = `
   >
     <div
       class="mm-box confirmation-page__content mm-box--padding-4"
-      style="margin-top: 0px; overflow-y: auto;"
+      style="overflow-y: auto;"
     >
       <h2
         class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h2 typography--weight-normal typography--style-normal typography--color-text-default"

diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
@@ -7,7 +7,7 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
   >
     <div
       class="mm-box confirmation-page__content mm-box--padding-4"
-      style="margin-top: 0px; overflow-y: auto;"
+      style="overflow-y: auto;"
     >
       <div
         class="mm-box remove-snap-account-page mm-box--margin-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"

diff --git a/...ges/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap b/...ges/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
@@ -7,7 +7,7 @@ exports[`snap-account-redirect confirmation should match snapshot 1`] = `
   >
     <div
       class="mm-box confirmation-page__content mm-box--padding-4"
-      style="margin-top: 0px; overflow-y: auto;"
+      style="overflow-y: auto;"
     >
       <div
         class="mm-box create-snap-account-page mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full mm-box--height-full mm-box--border-style-none"

diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/success.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/success.test.js.snap
@@ -7,7 +7,7 @@ exports[`success template matches the snapshot 1`] = `
   >
     <div
       class="mm-box confirmation-page__content mm-box--padding-4"
-      style="margin-top: 0px; overflow-y: auto;"
+      style="overflow-y: auto;"
     >
       <h2
         class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h2 typography--weight-normal typography--style-normal typography--color-text-default"

diff --git a/...ges/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap b/...ges/confirmations/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap
@@ -7,7 +7,7 @@ exports[`switch-ethereum-chain confirmation should match snapshot 1`] = `
   >
     <div
       class="mm-box confirmation-page__content mm-box--padding-4"
-      style="margin-top: 0px; overflow-y: auto;"
+      style="overflow-y: auto;"
     >
       <h3
         class="box box--md:margin-2 box--margin-top-1 box--margin-bottom-1 box--sm:padding-4 box--lg:padding-4 box--flex-direction-row typography typography--h3 typography--weight-normal typography--style-normal typography--align-center typography--color-text-default"
@@ -99,7 +99,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi
   >
     <div
       class="mm-box confirmation-page__content mm-box--padding-4"
-      style="margin-top: 0px; overflow-y: auto;"
+      style="overflow-y: auto;"
     >
       <h3
         class="box box--md:margin-2 box--margin-top-1 box--margin-bottom-1 box--sm:padding-4 box--lg:padding-4 box--flex-direction-row typography typography--h3 typography--weight-normal typography--style-normal typography--align-center typography--color-text-default"

diff --git a/ui/pages/confirmations/hooks/syncConfirmPath.test.ts b/ui/pages/confirmations/hooks/syncConfirmPath.test.ts
@@ -1,3 +1,4 @@
+import { ApprovalType } from '@metamask/controller-utils';
 import mockState from '../../../../test/data/mock-state.json';
 import { unapprovedPersonalSignMsg } from '../../../../test/data/confirmations/personal_sign';
 import { renderHookWithConfirmContextProvider } from '../../../../test/lib/confirmations/render-helpers';
@@ -10,11 +11,24 @@ jest.mock('react-router-dom', () => ({
   useHistory: () => ({ replace: mockHistoryReplace }),
 }));
 
+const STATE_MOCK = {
+  ...mockState,
+  metamask: {
+    ...mockState.metamask,
+    pendingApprovals: {
+      [unapprovedPersonalSignMsg.id]: {
+        id: unapprovedPersonalSignMsg.id,
+        type: ApprovalType.PersonalSign,
+      },
+    },
+  },
+};
+
 describe('syncConfirmPath', () => {
   it('should execute correctly', () => {
     const result = renderHookWithConfirmContextProvider(
       () => syncConfirmPath(unapprovedPersonalSignMsg),
-      mockState,
+      STATE_MOCK,
     );
     expect(result).toBeDefined();
   });
@@ -23,7 +37,7 @@ describe('syncConfirmPath', () => {
     mockHistoryReplace.mockClear();
     renderHookWithConfirmContextProvider(
       () => syncConfirmPath(unapprovedPersonalSignMsg),
-      mockState,
+      STATE_MOCK,
     );
     expect(mockHistoryReplace).toHaveBeenCalled();
   });

diff --git a/ui/pages/confirmations/hooks/syncConfirmPath.ts b/ui/pages/confirmations/hooks/syncConfirmPath.ts
@@ -7,16 +7,17 @@ import { useConfirmationNavigation } from './useConfirmationNavigation';
 const syncConfirmPath = (currentConfirmation?: Confirmation) => {
   const { navigateToId } = useConfirmationNavigation();
   const { id: paramId } = useParams<{ id: string }>();
+  const confirmationId = currentConfirmation?.id;
 
   useEffect(() => {
-    if (!currentConfirmation) {
+    if (!confirmationId) {
       return;
     }
 
     if (!paramId) {
-      navigateToId(currentConfirmation.id);
+      navigateToId(confirmationId);
     }
-  }, [currentConfirmation, paramId, navigateToId]);
+  }, [confirmationId, paramId, navigateToId]);
 };
 
 export default syncConfirmPath;
-Original file line number
+Diff line change
@@ Expand Up @@
             <div
               class="confirm-page-container-navigation__navtext"
             >
               of
             </div>
             <div
               class="confirm-page-container-navigation__longtext"
@@ Expand Down Expand Up @@
             <div
               class="confirm-page-container-navigation__navtext"
             >
               of
             </div>
             <div
               class="confirm-page-container-navigation__longtext"
@@ Expand Down @@