[MMI] Add Account-list-item-menu unit test (#21138)

## Explanation Add Account-list-item-menu unit test ## Pre-merge author checklist - [x] I've clearly explained: - [x] What problem this PR is solving - [x] How this problem was solved - [x] How reviewers can test my changes - [x] Sufficient automated test coverage has been added ## Pre-merge reviewer checklist - [x] Manual testing (e.g. pull and build branch, run in browser, test code being changed) - [x] **IF** this PR fixes a bug in the release milestone, add this PR to the release milestone If further QA is required (e.g. new feature, complex testing steps, large refactor), add the `Extension QA Board` label. In this case, a QA Engineer approval will be be required.
MetaMask · Oct 2, 2023 · b8591ea · b8591ea
1 parent 0107c2c
commit b8591ea
Show file tree

Hide file tree

Showing 7 changed files with 191 additions and 5 deletions.
diff --git a/test/data/mock-state.json b/test/data/mock-state.json
@@ -152,6 +152,10 @@
       {
         "type": "Snap Keyring",
         "accounts": ["0xb552685e3d2790efd64a175b00d51f02cdafee5d"]
+      },
+      {
+        "type": "Custody test",
+        "accounts": ["0xca8f1F0245530118D0cf14a06b01Daf8f76Cf281"]
       }
     ],
     "identities": {
@@ -170,6 +174,10 @@
       "0xeb9e64b93097bc15f01f13eae97015c57ab64823": {
         "name": "Test Account 3",
         "address": "0xeb9e64b93097bc15f01f13eae97015c57ab64823"
+      },
+      "0xca8f1F0245530118D0cf14a06b01Daf8f76Cf281": {
+        "name": "Custody test",
+        "address": "0xca8f1F0245530118D0cf14a06b01Daf8f76Cf281"
       }
     },
     "selectedNetworkClientId": "goerli",

diff --git a/ui/components/multichain/account-list-item-menu/account-list-item-menu.js b/ui/components/multichain/account-list-item-menu/account-list-item-menu.js
@@ -178,12 +178,14 @@ export const AccountListItemMenu = ({
                   const token = await dispatch(
                     mmiActions.getCustodianToken(identity.address),
                   );
+
                   const custodyAccountDetails = await dispatch(
                     mmiActions.getAllCustodianAccountsWithToken(
                       keyring.type.split(' - ')[1],
                       token,
                     ),
                   );
+
                   dispatch(
                     showModal({
                       name: 'CONFIRM_REMOVE_JWT',

diff --git a/ui/components/multichain/account-list-item-menu/account-list-item-menu.test.js b/ui/components/multichain/account-list-item-menu/account-list-item-menu.test.js
@@ -1,10 +1,22 @@
 /* eslint-disable jest/require-top-level-describe */
 import React from 'react';
+import { act, fireEvent } from '@testing-library/react';
+import { mmiActionsFactory } from '../../../store/institutional/institution-background';
 import { renderWithProvider } from '../../../../test/jest';
 import configureStore from '../../../store/store';
 import mockState from '../../../../test/data/mock-state.json';
 import { AccountListItemMenu } from '.';
 
+const mockShowModal = jest.fn();
+
+jest.mock('../../../store/institutional/institution-background');
+
+jest.mock('../../../store/actions', () => {
+  return {
+    showModal: () => mockShowModal,
+  };
+});
+
 const identity = {
   ...mockState.metamask.identities[
     '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'
@@ -35,4 +47,42 @@ describe('AccountListItem', () => {
     const { getByTestId } = render({ isRemovable: true });
     expect(getByTestId('account-list-menu-remove')).toBeInTheDocument();
   });
+
+  it('should render remove JWT menu item if the user is custodian and click the button', async () => {
+    const mockedGetCustodianToken = jest
+      .fn()
+      .mockReturnValue({ type: 'Custody', payload: 'token' });
+    const mockedGetAllCustodianAccountsWithToken = jest
+      .fn()
+      .mockReturnValue({ type: 'Custody', payload: 'token' });
+
+    mmiActionsFactory.mockReturnValue({
+      getCustodianToken: mockedGetCustodianToken,
+      getAllCustodianAccountsWithToken: mockedGetAllCustodianAccountsWithToken,
+    });
+
+    const newIdentity = {
+      ...mockState.metamask.identities[
+        '0xca8f1F0245530118D0cf14a06b01Daf8f76Cf281'
+      ],
+      balance: '0x152387ad22c3f0',
+    };
+
+    const { getByTestId } = render({ identity: newIdentity });
+
+    const removeJWTButton = getByTestId('account-options-menu__remove-jwt');
+
+    expect(removeJWTButton).toBeInTheDocument();
+
+    fireEvent.click(removeJWTButton);
+
+    await act(async () => {
+      expect(mockedGetCustodianToken).toHaveBeenCalledWith(newIdentity.address);
+    });
+
+    await act(async () => {
+      expect(mockedGetAllCustodianAccountsWithToken).toHaveBeenCalled();
+      expect(mockShowModal).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/ui/components/multichain/account-list-menu/account-list-menu.test.js b/ui/components/multichain/account-list-menu/account-list-menu.test.js
@@ -94,7 +94,7 @@ describe('AccountListMenu', () => {
     const listItems = document.querySelectorAll(
       '.multichain-account-list-item',
     );
-    expect(listItems).toHaveLength(4);
+    expect(listItems).toHaveLength(5);
 
     const searchBox = document.querySelector('input[type=search]');
     fireEvent.change(searchBox, {

diff --git a/ui/components/multichain/create-account/create-account.test.js b/ui/components/multichain/create-account/create-account.test.js
@@ -26,14 +26,14 @@ describe('CreateAccount', () => {
   it('displays account name input and suggests name', () => {
     const { getByPlaceholderText } = render();
 
-    expect(getByPlaceholderText('Account 5')).toBeInTheDocument();
+    expect(getByPlaceholderText('Account 6')).toBeInTheDocument();
   });
 
   it('fires onActionComplete when clicked', async () => {
     const onActionComplete = jest.fn();
     const { getByText, getByPlaceholderText } = render({ onActionComplete });
 
-    const input = getByPlaceholderText('Account 5');
+    const input = getByPlaceholderText('Account 6');
     const newAccountName = 'New Account Name';
 
     fireEvent.change(input, {
@@ -54,7 +54,7 @@ describe('CreateAccount', () => {
   it(`doesn't allow duplicate account names`, async () => {
     const { getByText, getByPlaceholderText } = render();
 
-    const input = getByPlaceholderText('Account 5');
+    const input = getByPlaceholderText('Account 6');
     const usedAccountName = 'Account 4';
 
     fireEvent.change(input, {

diff --git a/ui/pages/send/send-content/add-recipient/__snapshots__/add-recipient.component.test.js.snap b/ui/pages/send/send-content/add-recipient/__snapshots__/add-recipient.component.test.js.snap
@@ -273,6 +273,69 @@ exports[`Add Recipient Component Domain Resolution should match snapshot 1`] = `
             </p>
           </div>
         </div>
+        <div
+          class="box send__select-recipient-wrapper__group-item box--padding-4 box--flex-direction-row"
+        >
+          <div
+            class=""
+          >
+            <div
+              class="identicon"
+              style="height: 28px; width: 28px; border-radius: 14px;"
+            >
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 28px; height: 28px; display: inline-block; background: rgb(250, 62, 0);"
+              >
+                <svg
+                  height="28"
+                  width="28"
+                  x="0"
+                  y="0"
+                >
+                  <rect
+                    fill="#238FE1"
+                    height="28"
+                    transform="translate(-3.696976537625548 4.334010253908054) rotate(161.9 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#FB1891"
+                    height="28"
+                    transform="translate(-3.8726006416348677 11.341987744107225) rotate(224.3 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#F90901"
+                    height="28"
+                    transform="translate(-23.479125860782805 -13.386102528655465) rotate(344.7 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="box send__select-recipient-wrapper__group-item__content box--flex-direction-row"
+            data-testid="recipient"
+          >
+            <p
+              class="mm-box mm-text send__select-recipient-wrapper__group-item__title mm-text--body-lg-medium mm-box--color-text-default"
+            >
+              Custody test
+            </p>
+            <p
+              class="mm-box mm-text send__select-recipient-wrapper__group-item__subtitle mm-text--body-md mm-box--color-text-alternative"
+            >
+              0xca8f...f281
+            </p>
+          </div>
+        </div>
       </div>
     </div>
     <div
@@ -709,6 +772,69 @@ exports[`Add Recipient Component render should match snapshot 1`] = `
             </p>
           </div>
         </div>
+        <div
+          class="box send__select-recipient-wrapper__group-item box--padding-4 box--flex-direction-row"
+        >
+          <div
+            class=""
+          >
+            <div
+              class="identicon"
+              style="height: 28px; width: 28px; border-radius: 14px;"
+            >
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 28px; height: 28px; display: inline-block; background: rgb(250, 62, 0);"
+              >
+                <svg
+                  height="28"
+                  width="28"
+                  x="0"
+                  y="0"
+                >
+                  <rect
+                    fill="#238FE1"
+                    height="28"
+                    transform="translate(-3.696976537625548 4.334010253908054) rotate(161.9 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#FB1891"
+                    height="28"
+                    transform="translate(-3.8726006416348677 11.341987744107225) rotate(224.3 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#F90901"
+                    height="28"
+                    transform="translate(-23.479125860782805 -13.386102528655465) rotate(344.7 14 14)"
+                    width="28"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="box send__select-recipient-wrapper__group-item__content box--flex-direction-row"
+            data-testid="recipient"
+          >
+            <p
+              class="mm-box mm-text send__select-recipient-wrapper__group-item__title mm-text--body-lg-medium mm-box--color-text-default"
+            >
+              Custody test
+            </p>
+            <p
+              class="mm-box mm-text send__select-recipient-wrapper__group-item__subtitle mm-text--body-md mm-box--color-text-alternative"
+            >
+              0xca8f...f281
+            </p>
+          </div>
+        </div>
       </div>
     </div>
     <div

diff --git a/ui/selectors/selectors.test.js b/ui/selectors/selectors.test.js
@@ -556,7 +556,7 @@ describe('Selectors', () => {
   it('returns accounts with balance, address, and name from identity and accounts in state', () => {
     const accountsWithSendEther =
       selectors.accountsWithSendEtherInfoSelector(mockState);
-    expect(accountsWithSendEther).toHaveLength(4);
+    expect(accountsWithSendEther).toHaveLength(5);
     expect(accountsWithSendEther[0].balance).toStrictEqual(
       '0x346ba7725f412cbfdb',
     );