[MMI] Add Signature-request-original.component unit test (MetaMask#21090

)

## Explanation

Add Signature-request-original.component 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.

ui/components/app/signature-request-original/signature-request-original.component.js

@@ -28,15 +28,16 @@ import {
   Size,
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
   IconColor,
-  DISPLAY,
-  BLOCK_SIZES,
+  Display,
+  BlockSize,
   TextVariant,
   BackgroundColor,
   ///: END:ONLY_INCLUDE_IN
 } from '../../../helpers/constants/design-system';
 import {
   ButtonLink,
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  Box,
   Icon,
   IconName,
   Text,
@@ -45,9 +46,6 @@ import {
 ///: BEGIN:ONLY_INCLUDE_IN(blockaid)
 import BlockaidBannerAlert from '../security-provider-banner-alert/blockaid-banner-alert/blockaid-banner-alert';
 ///: END:ONLY_INCLUDE_IN
-///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
-import Box from '../../ui/box/box';
-///: END:ONLY_INCLUDE_IN
 import ConfirmPageContainerNavigation from '../confirm-page-container/confirm-page-container-navigation';
 import SecurityProviderBannerMessage from '../security-provider-banner-message/security-provider-banner-message';
 
@@ -172,8 +170,8 @@ export default class SignatureRequestOriginal extends Component {
           this.props.fromAccount.address ? null : (
             <Box
               className="request-signature__mismatch-info"
-              display={DISPLAY.FLEX}
-              width={BLOCK_SIZES.FULL}
+              Display={Display.Flex}
+              width={BlockSize.Full}
               padding={4}
               marginBottom={4}
               backgroundColor={BackgroundColor.primaryMuted}

ui/components/app/signature-request-original/signature-request-original.test.js

@@ -12,6 +12,7 @@ import {
   rejectPendingApproval,
   completedTx,
 } from '../../../store/actions';
+import { shortenAddress } from '../../../helpers/utils/util';
 import SignatureRequestOriginal from '.';
 
 jest.mock('../../../store/actions', () => ({
@@ -52,26 +53,29 @@ const MOCK_SIGN_DATA = JSON.stringify({
   },
 });
 
+const address = '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc';
+
 const props = {
   signMessage: jest.fn(),
   cancelMessage: jest.fn(),
   txData: {
     msgParams: {
-      from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+      from: address,
       data: MOCK_SIGN_DATA,
       origin: 'https://happydapp.website/governance?futarchy=true',
     },
     type: MESSAGE_TYPE.ETH_SIGN,
   },
   selectedAccount: {
-    address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+    address,
   },
 };
 
-const render = (txData = props.txData) => {
+const render = ({ txData = props.txData, selectedAddress = address } = {}) => {
   const store = configureStore({
     metamask: {
       ...mockState.metamask,
+      selectedAddress,
     },
   });
 
@@ -145,7 +149,7 @@ describe('SignatureRequestOriginal', () => {
       },
       type: MESSAGE_TYPE.ETH_SIGN_TYPED_DATA,
     };
-    const { getByText } = render(txData);
+    const { getByText } = render({ txData });
     expect(getByText('Message \\u202E test:')).toBeInTheDocument();
     expect(getByText('Hi, \\u202E Alice!')).toBeInTheDocument();
   });
@@ -196,4 +200,17 @@ describe('SignatureRequestOriginal', () => {
     render();
     expect(screen.getByText('This is a deceptive request')).toBeInTheDocument();
   });
+
+  it('should display mismatch info when selected account address and from account address are not the same', () => {
+    const selectedAddress = '0xeb9e64b93097bc15f01f13eae97015c57ab64823';
+    const mismatchAccountText = `Your selected account (${shortenAddress(
+      selectedAddress,
+    )}) is different than the account trying to sign (${shortenAddress(
+      address,
+    )})`;
+
+    render({ selectedAddress });
+
+    expect(screen.getByText(mismatchAccountText)).toBeInTheDocument();
+  });
 });