Confirm transaction test (#17780)

ui/helpers/utils/util.js

@@ -549,7 +549,7 @@ export function getSnapDerivationPathName(path, curve) {
 /**
  * The method escape RTL character in string
  *
- * @param {any} value
+ * @param {*} value
  * @returns {(string|*)} escaped string or original param value
  */
 export const sanitizeString = (value) => {

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -93,7 +93,7 @@ export default class ConfirmTransactionBase extends Component {
     sendTransaction: PropTypes.func,
     showTransactionConfirmedModal: PropTypes.func,
     showRejectTransactionsConfirmationModal: PropTypes.func,
-    toAccounts: PropTypes.object,
+    toAccounts: PropTypes.array,
     toAddress: PropTypes.string,
     tokenData: PropTypes.object,
     tokenProps: PropTypes.object,

ui/pages/confirm-transaction/confirm-transaction.transaction.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+import { renderWithProvider } from '../../../test/lib/render-helpers';
+import { setBackgroundConnection } from '../../../test/jest';
+import mockState from '../../../test/data/mock-state.json';
+import {
+  CONFIRM_SEND_ETHER_PATH,
+  CONFIRM_TRANSACTION_ROUTE,
+} from '../../helpers/constants/routes';
+
+import ConfirmTransaction from './confirm-transaction.component';
+
+const middleware = [thunk];
+
+setBackgroundConnection({
+  getGasFeeTimeEstimate: jest.fn(),
+  getGasFeeEstimatesAndStartPolling: jest.fn(),
+  promisifiedBackground: jest.fn(),
+  tryReverseResolveAddress: jest.fn(),
+  getNextNonce: jest.fn(),
+  addKnownMethodData: jest.fn(),
+});
+
+describe('Confirm Transaction', () => {
+  const unapprovedTransactionId = Object.keys(
+    mockState.metamask.unapprovedTxs,
+  )[0];
+  it('should render correct information for approve transaction with value', () => {
+    const store = configureMockStore(middleware)({
+      ...mockState,
+      confirmTransaction: {
+        txData: mockState.metamask.unapprovedTxs[unapprovedTransactionId],
+      },
+    });
+    const { getByText, getByRole } = renderWithProvider(
+      <ConfirmTransaction actionKey="confirm" />,
+      store,
+      `${CONFIRM_TRANSACTION_ROUTE}/${unapprovedTransactionId}${CONFIRM_SEND_ETHER_PATH}`,
+    );
+    expect(getByText('0xb19...0c5e')).toBeInTheDocument();
+    expect(getByRole('button', { name: 'Details' })).toBeInTheDocument();
+    expect(getByRole('button', { name: 'Data' })).toBeInTheDocument();
+    expect(getByRole('button', { name: 'Hex' })).toBeInTheDocument();
+  });
+});