From 2929e6238c30687a5201e91044b68a7d891ee322 Mon Sep 17 00:00:00 2001 From: "Akintayo A. Olusegun" Date: Thu, 16 Sep 2021 23:28:02 +0400 Subject: [PATCH] Revisit #12019 : Show save dialog when calling a smart contract method and use the saved contact is already saved (#12090) * Revisit showing add new address dialog. Should not show if Address is own adddress send to recipient header is not shown * Mock tests for the Confirm Page Container Container. * Removed react-test-renderer dev-dependency * Ran yarn setup to update lock file and remove ununsed packages. Signed-off-by: Akintayo A. Olusegun --- .../confirm-page-container-container.test.js | 172 ++++++++++++++++++ .../confirm-page-container.component.js | 4 +- .../confirm-page-container.container.js | 7 +- 3 files changed, 180 insertions(+), 3 deletions(-) create mode 100644 ui/components/app/confirm-page-container/confirm-page-container-container.test.js diff --git a/ui/components/app/confirm-page-container/confirm-page-container-container.test.js b/ui/components/app/confirm-page-container/confirm-page-container-container.test.js new file mode 100644 index 000000000..9ddf77de8 --- /dev/null +++ b/ui/components/app/confirm-page-container/confirm-page-container-container.test.js @@ -0,0 +1,172 @@ +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 '.'; + +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', + }, + }; + + 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: {}, + showAddToAddressBookModal: sinon.spy(), + contact: undefined, + isOwnedAccount: false, + }; + + beforeAll(() => { + wrapper = mountWithRouter( + + , + , + 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 simulate click on Dialog', () => { + const DialogWrapper = wrapper.find(Dialog); + DialogWrapper.first().simulate('click'); + expect(props.showAddToAddressBookModal.calledOnce).toStrictEqual(true); + }); + + 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( + + , + , + store, + ); + + expect(wrapper2.find(Dialog)).toHaveLength(0); + }); + + it('should render recipient as name', () => { + const wrapper2 = mountWithRouter( + + , + , + 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); + }); +}); diff --git a/ui/components/app/confirm-page-container/confirm-page-container.component.js b/ui/components/app/confirm-page-container/confirm-page-container.component.js index 5de2a4fd1..491235122 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container.component.js @@ -68,6 +68,7 @@ export default class ConfirmPageContainer extends Component { currentTransaction: PropTypes.object.isRequired, showAddToAddressBookModal: PropTypes.func, contact: PropTypes.object, + isOwnedAccount: PropTypes.bool, }; render() { @@ -117,10 +118,11 @@ export default class ConfirmPageContainer extends Component { currentTransaction, showAddToAddressBookModal, contact = {}, + isOwnedAccount, } = this.props; const showAddToAddressDialog = - contact.name === undefined && toAddress !== undefined; + !contact.name && toAddress && !isOwnedAccount && !hideSenderToRecipient; return (
diff --git a/ui/components/app/confirm-page-container/confirm-page-container.container.js b/ui/components/app/confirm-page-container/confirm-page-container.container.js index d75091391..c5bc0396c 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container.container.js +++ b/ui/components/app/confirm-page-container/confirm-page-container.container.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { getAddressBookEntry } from '../../../selectors'; +import { getAccountsWithLabels, getAddressBookEntry } from '../../../selectors'; import * as actions from '../../../store/actions'; import ConfirmPageContainer from './confirm-page-container.component'; @@ -9,7 +9,10 @@ function mapStateToProps(state, ownProps) { const contact = getAddressBookEntry(state, to); return { contact, - toName: contact?.name || ownProps.name, + toName: contact?.name || ownProps.toName, + isOwnedAccount: getAccountsWithLabels(state) + .map((accountWithLabel) => accountWithLabel.address) + .includes(to), to, }; }