1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/pages/confirm-transaction-base/confirm-transaction-base.test.js
Albert Olivé b5ece42ca1
[MMI] Fix Connect MMI and Deep link Flows (#19881)
* Sending showCustodyConfirmLink as a prop and fixing other issues

* Upgraded MMI extension monrepo and trying to fix the issue

* prevents deeplink from closing

* Fixed styles of Custody view and changed the place of it

* Fixed CI issues

* fixing eslint issues

* Update LavaMoat policies

* fixing tests

* Fixed test

* updated snapshots

* reorder, otherwise it won't make sense

* adds necessary methods

* removes duplicated key value

* updated snapshot

---------

Co-authored-by: Antonio Regadas <antonio.regadas@consensys.net>
Co-authored-by: MetaMask Bot <metamaskbot@users.noreply.github.com>
Co-authored-by: António Regadas <apregadas@gmail.com>
2023-07-13 10:42:08 +02:00

500 lines
15 KiB
JavaScript

import React from 'react';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { fireEvent } from '@testing-library/react';
import { renderWithProvider } from '../../../test/lib/render-helpers';
import { setBackgroundConnection } from '../../../test/jest';
import { INITIAL_SEND_STATE_FOR_EXISTING_DRAFT } from '../../../test/jest/mocks';
import { GasEstimateTypes } from '../../../shared/constants/gas';
import { KeyringType } from '../../../shared/constants/keyring';
import { CHAIN_IDS } from '../../../shared/constants/network';
import {
TransactionStatus,
TransactionType,
} from '../../../shared/constants/transaction';
import { domainInitialState } from '../../ducks/domains';
import ConfirmTransactionBase from './confirm-transaction-base.container';
const middleware = [thunk];
setBackgroundConnection({
getGasFeeTimeEstimate: jest.fn(),
getGasFeeEstimatesAndStartPolling: jest.fn(),
promisifiedBackground: jest.fn(),
tryReverseResolveAddress: jest.fn(),
getNextNonce: jest.fn(),
});
const mockNetworkId = '5';
const mockTxParamsFromAddress = '0x123456789';
const mockTxParamsToAddress = '0x85c1685cfceaa5c0bdb1609fc536e9a8387dd65e';
const mockTxParamsToAddressConcat = '0x85c...D65e';
const mockParsedTxDataToAddressWithout0x =
'e57e7847fd3661a9b7c86aaf1daea08d9da5750a';
const mockParsedTxDataToAddress = '0xe57...750A';
const mockPropsToAddress = '0x33m1685cfceaa5c0bdb1609fc536e9a8387dd567';
const mockPropsToAddressConcat = '0x33m...d567';
const mockTxParams = {
from: mockTxParamsFromAddress,
to: mockTxParamsToAddress,
value: '0x5af3107a4000',
gas: '0x5208',
maxFeePerGas: '0x59682f16',
maxPriorityFeePerGas: '0x59682f00',
type: '0x2',
data: `0xa22cb465000000000000000000000000${mockParsedTxDataToAddressWithout0x}0000000000000000000000000000000000000000000000000000000000000001`,
};
const baseStore = {
send: {
...INITIAL_SEND_STATE_FOR_EXISTING_DRAFT,
currentTransactionUUID: null,
draftTransactions: {},
},
DNS: domainInitialState,
gas: {
customData: { limit: null, price: null },
},
history: { mostRecentOverviewPage: '/' },
metamask: {
unapprovedTxs: {
1: {
id: 1,
metamaskNetworkId: mockNetworkId,
txParams: { ...mockTxParams },
},
},
gasEstimateType: GasEstimateTypes.legacy,
gasFeeEstimates: {
low: '0',
medium: '1',
fast: '2',
},
selectedAddress: mockTxParamsFromAddress,
keyrings: [
{
type: KeyringType.hdKeyTree,
accounts: ['0x0'],
},
],
networkId: mockNetworkId,
networkDetails: {
EIPS: {},
},
tokens: [],
preferences: {
useNativeCurrencyAsPrimaryCurrency: false,
},
currentCurrency: 'USD',
providerConfig: {
chainId: CHAIN_IDS.GOERLI,
},
nativeCurrency: 'ETH',
featureFlags: {
sendHexData: false,
},
addressBook: {
[CHAIN_IDS.GOERLI]: [],
},
cachedBalances: {
[CHAIN_IDS.GOERLI]: {},
},
accounts: {
[mockTxParamsFromAddress]: {
balance: '0x0',
address: mockTxParamsFromAddress,
},
},
identities: {
[mockTxParamsFromAddress]: { address: mockTxParamsFromAddress },
[mockTxParamsToAddress]: {
name: 'Test Address 1',
},
},
tokenAddress: '0x32e6c34cd57087abbd59b5a4aecc4cb495924356',
tokenList: {},
ensResolutionsByAddress: {},
snaps: {},
},
confirmTransaction: {
txData: {
id: 1,
metamaskNetworkId: mockNetworkId,
txParams: { ...mockTxParams },
time: 1675012496170,
status: TransactionStatus.unapproved,
originalGasEstimate: '0x5208',
userEditedGasLimit: false,
chainId: '0x5',
loadingDefaults: false,
dappSuggestedGasFees: null,
sendFlowHistory: [],
origin: 'metamask',
actionId: 1675012496153.2039,
type: 'simpleSend',
history: [],
userFeeLevel: 'medium',
defaultGasEstimates: {
estimateType: 'medium',
gas: '0x5208',
maxFeePerGas: '0x59682f16',
maxPriorityFeePerGas: '0x59682f00',
},
},
tokenData: {},
tokenProps: {},
fiatTransactionAmount: '0.16',
fiatTransactionFee: '0',
fiatTransactionTotal: '0.16',
ethTransactionAmount: '0.0001',
ethTransactionFee: '0',
ethTransactionTotal: '0.0001',
hexTransactionAmount: '0x5af3107a4000',
hexTransactionFee: '0x0',
hexTransactionTotal: '0x5af3107a4000',
nonce: '',
},
appState: {
sendInputCurrencySwitched: false,
},
};
const mockedStore = jest.mocked(baseStore);
const mockedStoreWithConfirmTxParams = (_mockTxParams = mockTxParams) => {
mockedStore.metamask.unapprovedTxs[1].txParams = { ..._mockTxParams };
mockedStore.confirmTransaction.txData.txParams = { ..._mockTxParams };
};
const sendToRecipientSelector =
'.sender-to-recipient__party--recipient .sender-to-recipient__name';
describe('Confirm Transaction Base', () => {
it('should match snapshot', () => {
const store = configureMockStore(middleware)(baseStore);
const { container } = renderWithProvider(
<ConfirmTransactionBase actionKey="confirm" />,
store,
);
expect(container).toMatchSnapshot();
});
it('should not contain L1 L2 fee details for chains that are not optimism', () => {
const store = configureMockStore(middleware)(baseStore);
const { queryByText } = renderWithProvider(
<ConfirmTransactionBase actionKey="confirm" />,
store,
);
expect(queryByText('Layer 1 fees')).not.toBeInTheDocument();
expect(queryByText('Layer 2 gas fee')).not.toBeInTheDocument();
});
it('should contain L1 L2 fee details for optimism', () => {
mockedStore.metamask.providerConfig.chainId = CHAIN_IDS.OPTIMISM;
mockedStore.confirmTransaction.txData.chainId = CHAIN_IDS.OPTIMISM;
const store = configureMockStore(middleware)(mockedStore);
const { queryByText } = renderWithProvider(
<ConfirmTransactionBase actionKey="confirm" />,
store,
);
expect(queryByText('Layer 1 fees')).toBeInTheDocument();
expect(queryByText('Layer 2 gas fee')).toBeInTheDocument();
});
it('should render NoteToTrader when isNoteToTraderSupported is true', () => {
mockedStore.metamask.custodyAccountDetails = {
[mockTxParamsFromAddress]: {
address: mockTxParamsFromAddress,
details: 'details',
custodyType: 'testCustody - Saturn',
custodianName: 'saturn-dev',
},
};
mockedStore.metamask.mmiConfiguration = {
custodians: [
{
name: 'saturn-dev',
displayName: 'Saturn Custody',
isNoteToTraderSupported: true,
},
],
};
const store = configureMockStore(middleware)(mockedStore);
const { getByTestId } = renderWithProvider(
<ConfirmTransactionBase actionKey="confirm" />,
store,
);
expect(getByTestId('note-tab')).toBeInTheDocument();
});
it('handleMainSubmit calls sendTransaction correctly', async () => {
const newMockedStore = {
...mockedStore,
appState: {
...mockedStore.appState,
gasLoadingAnimationIsShowing: false,
},
metamask: {
...mockedStore.metamask,
accounts: {
[mockTxParamsFromAddress]: {
balance: '0x1000000000000000000',
address: mockTxParamsFromAddress,
},
},
gasEstimateType: GasEstimateTypes.feeMarket,
networkDetails: {
...mockedStore.metamask.networkDetails,
EIPS: {
1559: true,
},
},
customGas: {
gasLimit: '0x5208',
gasPrice: '0x59682f00',
},
noGasPrice: false,
},
send: {
...mockedStore.send,
gas: {
...mockedStore.send.gas,
gasEstimateType: GasEstimateTypes.legacy,
gasFeeEstimates: {
low: '0',
medium: '1',
high: '2',
},
},
hasSimulationError: false,
userAcknowledgedGasMissing: false,
submitting: false,
hardwareWalletRequiresConnection: false,
gasIsLoading: false,
gasFeeIsCustom: true,
},
};
const store = configureMockStore(middleware)(newMockedStore);
const sendTransaction = jest.fn().mockResolvedValue();
const { getByTestId } = renderWithProvider(
<ConfirmTransactionBase
actionKey="confirm"
sendTransaction={sendTransaction}
toAddress={mockPropsToAddress}
toAccounts={[{ address: mockPropsToAddress }]}
/>,
store,
);
const confirmButton = getByTestId('page-container-footer-next');
fireEvent.click(confirmButton);
expect(sendTransaction).toHaveBeenCalled();
});
it('handleMMISubmit calls sendTransaction correctly and then showCustodianDeepLink', async () => {
const newMockedStore = {
...mockedStore,
appState: {
...mockedStore.appState,
gasLoadingAnimationIsShowing: false,
},
confirmTransaction: {
...mockedStore.confirmTransaction,
txData: {
...mockedStore.confirmTransaction.txData,
custodyStatus: true,
},
},
metamask: {
...mockedStore.metamask,
accounts: {
[mockTxParamsFromAddress]: {
balance: '0x1000000000000000000',
address: mockTxParamsFromAddress,
},
},
gasEstimateType: GasEstimateTypes.feeMarket,
networkDetails: {
...mockedStore.metamask.networkDetails,
EIPS: {
1559: true,
},
},
customGas: {
gasLimit: '0x5208',
gasPrice: '0x59682f00',
},
noGasPrice: false,
},
send: {
...mockedStore.send,
gas: {
...mockedStore.send.gas,
gasEstimateType: GasEstimateTypes.legacy,
gasFeeEstimates: {
low: '0',
medium: '1',
high: '2',
},
},
hasSimulationError: false,
userAcknowledgedGasMissing: false,
submitting: false,
hardwareWalletRequiresConnection: false,
gasIsLoading: false,
gasFeeIsCustom: true,
},
};
const store = configureMockStore(middleware)(newMockedStore);
const sendTransaction = jest
.fn()
.mockResolvedValue(newMockedStore.confirmTransaction.txData);
const showCustodianDeepLink = jest.fn();
const setWaitForConfirmDeepLinkDialog = jest.fn();
const { getByTestId } = renderWithProvider(
<ConfirmTransactionBase
actionKey="confirm"
sendTransaction={sendTransaction}
showCustodianDeepLink={showCustodianDeepLink}
setWaitForConfirmDeepLinkDialog={setWaitForConfirmDeepLinkDialog}
toAddress={mockPropsToAddress}
toAccounts={[{ address: mockPropsToAddress }]}
isMainBetaFlask={false}
/>,
store,
);
const confirmButton = getByTestId('page-container-footer-next');
fireEvent.click(confirmButton);
expect(setWaitForConfirmDeepLinkDialog).toHaveBeenCalled();
await expect(sendTransaction).toHaveBeenCalled();
expect(showCustodianDeepLink).toHaveBeenCalled();
});
describe('when rendering the recipient value', () => {
describe(`when the transaction is a ${TransactionType.simpleSend} type`, () => {
it(`should use txParams.to address`, () => {
const store = configureMockStore(middleware)(mockedStore);
const { container } = renderWithProvider(
<ConfirmTransactionBase actionKey="confirm" />,
store,
);
const recipientElem = container.querySelector(sendToRecipientSelector);
expect(recipientElem).toHaveTextContent(mockTxParamsToAddressConcat);
});
it(`should use txParams.to address even if there is no amount sent`, () => {
mockedStoreWithConfirmTxParams({
...mockTxParams,
value: '0x0',
});
const store = configureMockStore(middleware)(mockedStore);
const { container } = renderWithProvider(
<ConfirmTransactionBase actionKey="confirm" />,
store,
);
const recipientElem = container.querySelector(sendToRecipientSelector);
expect(recipientElem).toHaveTextContent(mockTxParamsToAddressConcat);
});
});
describe(`when the transaction is NOT a ${TransactionType.simpleSend} type`, () => {
beforeEach(() => {
mockedStore.confirmTransaction.txData.type =
TransactionType.contractInteraction;
});
describe('when there is an amount being sent (it should be treated as a general contract intereaction rather than custom one)', () => {
it('should use txParams.to address (contract address)', () => {
mockedStoreWithConfirmTxParams({
...mockTxParams,
value: '0x45666',
});
const store = configureMockStore(middleware)(mockedStore);
const { container } = renderWithProvider(
<ConfirmTransactionBase actionKey="confirm" />,
store,
);
const recipientElem = container.querySelector(
sendToRecipientSelector,
);
expect(recipientElem).toHaveTextContent(mockTxParamsToAddressConcat);
});
});
describe(`when there is no amount being sent`, () => {
it('should use propToAddress (toAddress passed as prop)', () => {
mockedStoreWithConfirmTxParams({
...mockTxParams,
value: '0x0',
});
const store = configureMockStore(middleware)(mockedStore);
const { container } = renderWithProvider(
<ConfirmTransactionBase
// we want to test toAddress provided by ownProps in mapStateToProps, but this
// currently overrides toAddress this should pan out fine when we refactor the
// component into a functional component and remove the container.js file
toAddress={mockPropsToAddress}
actionKey="confirm"
/>,
store,
);
const recipientElem = container.querySelector(
sendToRecipientSelector,
);
expect(recipientElem).toHaveTextContent(mockPropsToAddressConcat);
});
it('should use address parsed from transaction data if propToAddress is not provided', () => {
mockedStoreWithConfirmTxParams({
...mockTxParams,
value: '0x0',
});
const store = configureMockStore(middleware)(mockedStore);
const { container } = renderWithProvider(
<ConfirmTransactionBase actionKey="confirm" />,
store,
);
const recipientElem = container.querySelector(
sendToRecipientSelector,
);
expect(recipientElem).toHaveTextContent(mockParsedTxDataToAddress);
});
it('should use txParams.to if neither propToAddress is not provided nor the transaction data to address were provided', () => {
mockedStoreWithConfirmTxParams({
...mockTxParams,
data: '0x',
value: '0x0',
});
const store = configureMockStore(middleware)(mockedStore);
const { container } = renderWithProvider(
<ConfirmTransactionBase actionKey="confirm" />,
store,
);
const recipientElem = container.querySelector(
sendToRecipientSelector,
);
expect(recipientElem).toHaveTextContent(mockTxParamsToAddressConcat);
});
});
});
});
});