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 index 6ca95a83b..32a8a46ca 100644 --- 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 @@ -1,14 +1,11 @@ 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 '.'; +import { fireEvent, screen } from '@testing-library/react'; +import mockState from '../../../../test/data/mock-state.json'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; +import { shortenAddress } from '../../../helpers/utils/util'; +import ConfirmPageContainer from '.'; jest.mock('../../../store/actions', () => ({ disconnectGasFeeEstimatePoller: jest.fn(), @@ -19,35 +16,6 @@ jest.mock('../../../store/actions', () => ({ })); 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: {}, - enableEIP1559V2NoticeDismissed: true, - tokenList: {}, - }, - }; - - const store = configureMockStore()(mockStore); - const props = { title: 'Title', fromAddress: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5', @@ -60,119 +28,125 @@ describe('Confirm Page Container Container Test', () => { onSubmit: sinon.spy(), handleCloseEditGas: sinon.spy(), // Gas Popover - currentTransaction: {}, - contact: undefined, + currentTransaction: { + id: 8783053010106567, + time: 1656448479005, + status: 'unapproved', + metamaskNetworkId: '4', + originalGasEstimate: '0x5208', + userEditedGasLimit: false, + loadingDefaults: false, + dappSuggestedGasFees: null, + sendFlowHistory: [], + txParams: { + from: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5', + to: '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8', + value: '0x0', + gas: '0x5208', + maxFeePerGas: '0x59682f0d', + maxPriorityFeePerGas: '0x59682f00', + }, + origin: 'testOrigin', + type: 'simpleSend', + userFeeLevel: 'medium', + defaultGasEstimates: { + estimateType: 'medium', + gas: '0x5208', + maxFeePerGas: '59682f0d', + maxPriorityFeePerGas: '59682f00', + }, + }, isOwnedAccount: false, + showAccountInHeader: true, + showEdit: true, + hideSenderToRecipient: false, + toName: '0x7a1...E4E8', }; + describe('Render and simulate button clicks', () => { + const store = configureMockStore()(mockState); + beforeEach(() => { + renderWithProvider(, store); + }); - beforeAll(() => { - wrapper = mountWithRouter( - - , - , - store, - ); + it('should render a confirm page container component', () => { + const pageContainer = screen.queryByTestId('page-container'); + expect(pageContainer).toBeInTheDocument(); + }); + + it('should render navigation', () => { + const navigationContainer = screen.queryByTestId('navigation-container'); + expect(navigationContainer).toBeInTheDocument(); + }); + + it('should render header', () => { + const headerContainer = screen.queryByTestId('header-container'); + expect(headerContainer).toBeInTheDocument(); + + const shortenedFromAddress = shortenAddress(props.fromAddress); + const headerAddress = screen.queryByTestId('header-address'); + expect(headerAddress).toHaveTextContent(shortenedFromAddress); + }); + + it('should render sender to recipient in header', () => { + const senderRecipient = screen.queryByTestId('sender-to-recipient'); + expect(senderRecipient).toBeInTheDocument(); + }); + it('should render recipient as address', () => { + const recipientName = screen.queryByText(shortenAddress(props.toAddress)); + expect(recipientName).toBeInTheDocument(); + }); + + it('should render add address to address book dialog', () => { + const newAccountDetectDialog = screen.queryByText( + /New address detected!/u, + ); + expect(newAccountDetectDialog).toBeInTheDocument(); + }); + + it('should simulate click reject button', () => { + const rejectButton = screen.getByTestId('page-container-footer-cancel'); + fireEvent.click(rejectButton); + expect(props.onCancel.calledOnce).toStrictEqual(true); + }); + + it('should simulate click submit button', () => { + const confirmButton = screen.getByTestId('page-container-footer-next'); + fireEvent.click(confirmButton); + expect(props.onSubmit.calledOnce).toStrictEqual(true); + }); }); - 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', - ); - }); + describe('Contact/AddressBook name should appear in recipient header', () => { + it('should not show add to address dialog if recipient is in contact list and should display contact name', () => { + const addressBookName = 'test save name'; - it('should render navigation', () => { - expect(wrapper.find(ConfirmPageContainerNavigation)).toHaveLength(1); - }); + const addressBook = { + '0x4': { + '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8': { + address: '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8', + chainId: '0x4', + isEns: false, + memo: '', + name: addressBookName, + }, + }, + }; - it('should render header', () => { - expect(wrapper.find(ConfirmPageContainerHeader)).toHaveLength(1); - expect( - wrapper.find(ConfirmPageContainerHeader).getElements()[0].props - .accountAddress, - ).toStrictEqual('0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5'); - }); + mockState.metamask.addressBook = addressBook; - 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'); - }); + const store = configureMockStore()(mockState); - it('should render recipient as address', () => { - const recipientWithAddress = wrapper.find( - '.sender-to-recipient__party--recipient-with-address', - ); - expect(recipientWithAddress).toHaveLength(1); + renderWithProvider(, store); - expect(wrapper.find('.sender-to-recipient__name')).toHaveLength(2); - }); + // Does not display new address dialog banner + const newAccountDetectDialog = screen.queryByText( + /New address detected!/u, + ); + expect(newAccountDetectDialog).not.toBeInTheDocument(); - 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( - - , - , - 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); + // Shows contact/addressbook name + const contactName = screen.queryByText(addressBookName); + expect(contactName).toBeInTheDocument(); + }); }); }); diff --git a/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js b/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js index eb33888e1..1477e309b 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js @@ -29,14 +29,20 @@ export default function ConfirmPageContainerHeader({ return children; } return ( -
+
{showAccountInHeader ? (
-
+
{shortenAddress(accountAddress)}
diff --git a/ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js b/ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js index 6c7bb981b..06b944a6e 100755 --- a/ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js +++ b/ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js @@ -24,6 +24,7 @@ const ConfirmPageContainerNavigation = (props) => { >
-
+
+
{t('getStarted')} diff --git a/ui/pages/first-time-flow/welcome/welcome.test.js b/ui/pages/first-time-flow/welcome/welcome.test.js index 2c0f79106..c76bb42d1 100644 --- a/ui/pages/first-time-flow/welcome/welcome.test.js +++ b/ui/pages/first-time-flow/welcome/welcome.test.js @@ -1,16 +1,10 @@ import React from 'react'; import sinon from 'sinon'; -import configureMockStore from 'redux-mock-store'; -import { mountWithRouter } from '../../../../test/lib/render-helpers'; +import { fireEvent, screen } from '@testing-library/react'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; import Welcome from './welcome.container'; describe('Welcome', () => { - const mockStore = { - metamask: {}, - }; - - const store = configureMockStore()(mockStore); - afterAll(() => { sinon.restore(); }); @@ -22,15 +16,12 @@ describe('Welcome', () => { }, }; - const wrapper = mountWithRouter( - , - store, - ); + renderWithProvider(); + + const getStartedButton = screen.getByTestId('first-time-flow__button'); + + fireEvent.click(getStartedButton); - const getStartedButton = wrapper.find( - '.btn-primary.first-time-flow__button', - ); - getStartedButton.simulate('click'); expect(props.history.push.getCall(0).args[0]).toStrictEqual( '/initialize/metametrics-opt-in', ); @@ -45,15 +36,11 @@ describe('Welcome', () => { }, }; - const wrapper = mountWithRouter( - , - store, - ); + renderWithProvider(); - const getStartedButton = wrapper.find( - '.btn-primary.first-time-flow__button', - ); - getStartedButton.simulate('click'); + const getStartedButton = screen.getByTestId('first-time-flow__button'); + + fireEvent.click(getStartedButton); expect(props.history.push.getCall(0).args[0]).toStrictEqual( '/initialize/select-action', );