1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-23 03:36:18 +02:00
metamask-extension/ui/components/app/confirm-page-container/confirm-page-container-container.test.js
Alaa Hadad e056c88ba7
Feature: Transaction Insights (#12881)
* integration for tx decoding confirmation and history view

* upgrading @truffle/decoder to latest release 5.1.0

* Update acorn and colors patches

* feat: remove redundant styling

* feat: basic integration for nickname components

* feat: wiring functionality of adding new nickname

* feat: wire functionality of showing nickname modal

* feat: link the nickname popover with add/update popover

* feat: moving forward with address nicknames integration

* feat: fixing a bug related to passing chainId in addressBook

* feat: populating memo prop in addressbook entry

* feat: add explorer link

* feat: bug fixing update nickname component

* feat: fix proptypes

* feat: adding tooltip for copying nickname address

* featL fix styling for tx-details page

* feat: optimize code for error handling

* feat: limiting transaction decoding to tx with data

* feat: remove tree UI component

* feat: adding request to check for tx decoding supported networks

* feat: showing data hex component

* feat: fix react warnings

* feat: remove extra margin in tx decoding

* Remove unused package @truffle/source-map-utils

* Ensure messages get translated

* feat: link tx-decoding addresses with nicknames

* Omit value for boolean attributes

* Fix props reading in CopyRawData

* fix: fixing issue with transaltion

* Fix lint errors in TransactionDecoding

- Remove unused import
- Reorder imports
- Address conflict between caught `error` and error state flag by
  renaming state flag to `hasError`
- Fix requestUrl identifier casing and use of template string
- Ensure `useEffect` gets passed the deps it needs
- Add scope braces around case statement where it's needed
- Omit literal `true` for boolean jsx attribute
- Refactor nested ternary as `if` statements

* fix: revert fetchWithCache modifications

* Fix linting for TransactionListItemDetails

- Remove unused import
- Fix import spacing
- Remove unused prop dereference
- Fix string interpolation for translated From/To

* Moving to popover pattern

* fix: sass color variable

* Omit value for boolean attribute

* Remove changes from modal.js

* fix: refactor nickname popovers

* Ensure const gets declared before it's used

* Fix linting for ConfirmTransactionBase

- Remove unused prop chainId
- Stop destructuring an unused field

* fix: refactor usage of nicknames popovers in send-content-container

* fix: remove extra prop updateAccountNicknameModal

* fix: refactor code for address.component

* fix: remove extra tooltip

* Ensure NicknamePopovers always returns component

* Fix linting for NicknamePopover component

- Fix useCallback deps
- Switch ternary to logical-or

* Fix linting for SenderToRecipient

... by fixing import order

* Remove unused addressCopied state

* Delete empty file

* fix: remove sender-to-recipient.container

* fix: refactor usage of nickname popovers in confirm-page-container

* fix: bug related to state variable

* Stylelint fix

* Lint fix

* Change "Total Amount" to "Total"

* Lint fix locales

* Update address-book.spec.js

* e2e test update

* Update e2e tests

* Fix issue where absence of function params in data hex tab would result in rendering a  string

* Fix border radius, and width and height in small notification windows, of the update-nickname-popover

* Remove fake await

* Clean up

* Clean up

Co-authored-by: Alaa Hadad <alaahd@Alaas-MacBook-M1-Pro-14-inch.local>
Co-authored-by: Dan Miller <danjm.com@gmail.com>
Co-authored-by: g. nicholas d'andrea <gnidan@trufflesuite.com>
2021-12-01 13:52:08 -03:30

176 lines
5.1 KiB
JavaScript

import React from 'react';
import configureMockStore from 'redux-mock-store';
import sinon from 'sinon';
import { Provider } from 'react-redux';
import SenderToRecipient from '../../ui/sender-to-recipient';
import { mountWithRouter } from '../../../../test/lib/render-helpers';
import Dialog from '../../ui/dialog';
import ConfirmPageContainer, {
ConfirmPageContainerHeader,
ConfirmPageContainerNavigation,
} from '.';
jest.mock('../../../store/actions', () => ({
disconnectGasFeeEstimatePoller: jest.fn(),
getGasFeeEstimatesAndStartPolling: jest
.fn()
.mockImplementation(() => Promise.resolve()),
addPollingTokenToAppState: jest.fn(),
}));
describe('Confirm Page Container Container Test', () => {
let wrapper;
const mockStore = {
metamask: {
provider: {
type: 'test',
},
preferences: {
useNativeCurrencyAsPrimaryCurrency: true,
},
accounts: {
'0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5': {
address: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
balance: '0x03',
},
},
cachedBalances: {},
selectedAddress: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
addressBook: [],
chainId: 'test',
identities: [],
featureFlags: {},
},
};
const store = configureMockStore()(mockStore);
const props = {
fromAddress: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
toAddress: '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8',
origin: 'testOrigin', // required
onNextTx: sinon.spy(),
// Footer
onCancelAll: sinon.spy(),
onCancel: sinon.spy(),
onSubmit: sinon.spy(),
handleCloseEditGas: sinon.spy(),
// Gas Popover
currentTransaction: {},
contact: undefined,
isOwnedAccount: false,
};
beforeAll(() => {
wrapper = mountWithRouter(
<Provider store={store}>
<ConfirmPageContainer.WrappedComponent {...props} />,
</Provider>,
store,
);
});
it('should render a confirm page container component', () => {
const pageContainer = wrapper.find('.page-container');
expect(pageContainer).toHaveLength(1);
expect(pageContainer.getElements()[0].props.className).toStrictEqual(
'page-container',
);
});
it('should render navigation', () => {
expect(wrapper.find(ConfirmPageContainerNavigation)).toHaveLength(1);
});
it('should render header', () => {
expect(wrapper.find(ConfirmPageContainerHeader)).toHaveLength(1);
expect(
wrapper.find(ConfirmPageContainerHeader).getElements()[0].props
.accountAddress,
).toStrictEqual('0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5');
});
it('should render sender to recipient in header', () => {
expect(wrapper.find(SenderToRecipient)).toHaveLength(1);
expect(
wrapper.find(SenderToRecipient).getElements()[0].props.senderAddress,
).toStrictEqual('0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5');
expect(
wrapper.find(SenderToRecipient).getElements()[0].props.recipientAddress,
).toStrictEqual('0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8');
});
it('should render recipient as address', () => {
const recipientWithAddress = wrapper.find(
'.sender-to-recipient__party--recipient-with-address',
);
expect(recipientWithAddress).toHaveLength(1);
expect(wrapper.find('.sender-to-recipient__name')).toHaveLength(2);
});
it('should render add address to address book dialog', () => {
expect(wrapper.find(Dialog)).toHaveLength(1);
expect(wrapper.find(Dialog).getElements()[0].props.children).toStrictEqual(
'newAccountDetectedDialogMessage',
);
});
it('should not show add to address dialog if contact is not undefined', () => {
props.contact = {
address: '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8',
name: 'test saved name',
isEns: false,
chainId: 'test',
};
const wrapper2 = mountWithRouter(
<Provider store={store}>
<ConfirmPageContainer.WrappedComponent {...props} />,
</Provider>,
store,
);
expect(wrapper2.find(Dialog)).toHaveLength(0);
});
it('should render recipient as name', () => {
const wrapper2 = mountWithRouter(
<Provider store={store}>
<ConfirmPageContainer.WrappedComponent {...props} />,
</Provider>,
store,
);
const recipientWithAddress = wrapper2.find(
'.sender-to-recipient__party--recipient-with-address',
);
expect(recipientWithAddress).toHaveLength(1);
expect(wrapper.find('.sender-to-recipient__name')).toHaveLength(2);
});
it('should simulate click reject button', () => {
expect(wrapper.find('button.page-container__footer-button')).toHaveLength(
2,
);
wrapper
.find('button.page-container__footer-button')
.first()
.simulate('click');
expect(props.onCancel.calledOnce).toStrictEqual(true);
});
it('should simulate click submit button', () => {
expect(wrapper.find('button.page-container__footer-button')).toHaveLength(
2,
);
wrapper
.find('button.page-container__footer-button')
.at(1)
.simulate('click');
expect(props.onSubmit.calledOnce).toStrictEqual(true);
});
});