From d0c1dc74f118eacbed77300f4ee9a6df785e5df5 Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Wed, 31 Aug 2022 15:19:40 -0700 Subject: [PATCH 1/5] Convert Confirm Page Container test to tlr. Add test ids to associated components. --- .../confirm-page-container-container.test.js | 260 ++++++++---------- ...confirm-page-container-header.component.js | 10 +- ...irm-page-container-navigation.component.js | 1 + .../confirm-page-container.component.js | 2 +- .../sender-to-recipient.component.js | 5 +- 5 files changed, 132 insertions(+), 146 deletions(-) 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 6ca95a83b7ae..4fdf88edf44f 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,127 @@ 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, + // chainId: '0x4', + 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', }; - - 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', - ); + describe('Render and simulate button clicks', () => { + const store = configureMockStore()(mockState); + beforeEach(() => { + renderWithProvider(, 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(); + // expect(wrapper.find(ConfirmPageContainerNavigation)).toHaveLength(1); + }); + + 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 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( - - , - , - store, - ); - - expect(wrapper2.find(Dialog)).toHaveLength(0); - }); + 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'; + + const addressBook = { + '0x4': { + '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8': { + address: '0x7a1A4Ad9cc746a70ee58568466f7996dD0aCE4E8', + chainId: '0x4', + isEns: false, + memo: '', + name: addressBookName, + }, + }, + }; - it('should render recipient as name', () => { - const wrapper2 = mountWithRouter( - - , - , - store, - ); + mockState.metamask.addressBook = addressBook; - const recipientWithAddress = wrapper2.find( - '.sender-to-recipient__party--recipient-with-address', - ); - expect(recipientWithAddress).toHaveLength(1); + const store = configureMockStore()(mockState); - expect(wrapper.find('.sender-to-recipient__name')).toHaveLength(2); - }); + renderWithProvider(, store); - 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); - }); + // Does not display new address dialog banner + const newAccountDetectDialog = screen.queryByText( + /New address detected!/u, + ); + expect(newAccountDetectDialog).not.toBeInTheDocument(); - 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 eb33888e1444..1477e309bee8 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 6c7bb981b6be..06b944a6e710 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) => { >
-
+
+
Date: Wed, 31 Aug 2022 15:20:09 -0700 Subject: [PATCH 2/5] Convert Welcome component to tlr. --- .../welcome/welcome.component.js | 1 + .../first-time-flow/welcome/welcome.test.js | 37 +++++++------------ 2 files changed, 14 insertions(+), 24 deletions(-) diff --git a/ui/pages/first-time-flow/welcome/welcome.component.js b/ui/pages/first-time-flow/welcome/welcome.component.js index 46bf36d226a8..d5636a73fbb9 100644 --- a/ui/pages/first-time-flow/welcome/welcome.component.js +++ b/ui/pages/first-time-flow/welcome/welcome.component.js @@ -71,6 +71,7 @@ export default class Welcome extends PureComponent { type="primary" className="first-time-flow__button" onClick={this.handleContinue} + data-testid="first-time-flow__button" > {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 2c0f79106694..aae326a8fb94 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,13 @@ 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); + + // getStartedButton.simulate('click'); expect(props.history.push.getCall(0).args[0]).toStrictEqual( '/initialize/metametrics-opt-in', ); @@ -45,15 +37,12 @@ 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'); + + // getStartedButton.simulate('click'); + fireEvent.click(getStartedButton); expect(props.history.push.getCall(0).args[0]).toStrictEqual( '/initialize/select-action', ); From 9624b17d190c68f9ef77cff0ac97cce8c6e6198e Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Mon, 5 Sep 2022 13:36:38 -0700 Subject: [PATCH 3/5] Update ui/pages/first-time-flow/welcome/welcome.test.js Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com> --- ui/pages/first-time-flow/welcome/welcome.test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/pages/first-time-flow/welcome/welcome.test.js b/ui/pages/first-time-flow/welcome/welcome.test.js index aae326a8fb94..8a2ce7936491 100644 --- a/ui/pages/first-time-flow/welcome/welcome.test.js +++ b/ui/pages/first-time-flow/welcome/welcome.test.js @@ -22,7 +22,6 @@ describe('Welcome', () => { fireEvent.click(getStartedButton); - // getStartedButton.simulate('click'); expect(props.history.push.getCall(0).args[0]).toStrictEqual( '/initialize/metametrics-opt-in', ); From 852c9375821814c1ddfd701575d24cc7c60507ea Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Wed, 7 Sep 2022 11:35:35 -0700 Subject: [PATCH 4/5] Update ui/components/app/confirm-page-container/confirm-page-container-container.test.js Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com> --- .../confirm-page-container-container.test.js | 1 - 1 file changed, 1 deletion(-) 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 4fdf88edf44f..456f19d9faec 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 @@ -77,7 +77,6 @@ describe('Confirm Page Container Container Test', () => { it('should render navigation', () => { const navigationContainer = screen.queryByTestId('navigation-container'); expect(navigationContainer).toBeInTheDocument(); - // expect(wrapper.find(ConfirmPageContainerNavigation)).toHaveLength(1); }); it('should render header', () => { From 3191a206659c76f1e93e1398d804374af76f3de3 Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Wed, 7 Sep 2022 11:40:05 -0700 Subject: [PATCH 5/5] Remove unsused, commented out, lines --- .../confirm-page-container-container.test.js | 1 - ui/pages/first-time-flow/welcome/welcome.test.js | 1 - 2 files changed, 2 deletions(-) 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 456f19d9faec..32a8a46ca050 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 @@ -35,7 +35,6 @@ describe('Confirm Page Container Container Test', () => { metamaskNetworkId: '4', originalGasEstimate: '0x5208', userEditedGasLimit: false, - // chainId: '0x4', loadingDefaults: false, dappSuggestedGasFees: null, sendFlowHistory: [], diff --git a/ui/pages/first-time-flow/welcome/welcome.test.js b/ui/pages/first-time-flow/welcome/welcome.test.js index 8a2ce7936491..c76bb42d1656 100644 --- a/ui/pages/first-time-flow/welcome/welcome.test.js +++ b/ui/pages/first-time-flow/welcome/welcome.test.js @@ -40,7 +40,6 @@ describe('Welcome', () => { const getStartedButton = screen.getByTestId('first-time-flow__button'); - // getStartedButton.simulate('click'); fireEvent.click(getStartedButton); expect(props.history.push.getCall(0).args[0]).toStrictEqual( '/initialize/select-action',