From 06450a4056edcaab841bcd093689c45d8c46f79b Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Tue, 9 Aug 2022 08:37:29 -0700 Subject: [PATCH] Various test files converting to @testing-library/react. (#15504) * Convert End of Flow test to tlr. * Convert Select Action test to tlr * Convert Metametrics opt in test to tlr --- .../end-of-flow/end-of-flow.component.js | 3 ++- .../end-of-flow/end-of-flow.test.js | 18 +++++++-------- .../metametrics-opt-in.test.js | 22 +++++++------------ .../select-action/select-action.component.js | 2 ++ .../select-action/select-action.test.js | 19 ++++++---------- 5 files changed, 27 insertions(+), 37 deletions(-) diff --git a/ui/pages/first-time-flow/end-of-flow/end-of-flow.component.js b/ui/pages/first-time-flow/end-of-flow/end-of-flow.component.js index 11a95ccdf..54eaf6d4c 100644 --- a/ui/pages/first-time-flow/end-of-flow/end-of-flow.component.js +++ b/ui/pages/first-time-flow/end-of-flow/end-of-flow.component.js @@ -69,7 +69,7 @@ export default class EndOfFlowScreen extends PureComponent { const { onboardingInitiator } = this.props; return ( -
+
🎉
{t('congratulations')}
@@ -122,6 +122,7 @@ export default class EndOfFlowScreen extends PureComponent { type="primary" className="first-time-flow__button" onClick={this.onComplete} + data-testid="EOF-complete-button" > {t('endOfFlowMessage10')} diff --git a/ui/pages/first-time-flow/end-of-flow/end-of-flow.test.js b/ui/pages/first-time-flow/end-of-flow/end-of-flow.test.js index e3f04eaa5..4f645e149 100644 --- a/ui/pages/first-time-flow/end-of-flow/end-of-flow.test.js +++ b/ui/pages/first-time-flow/end-of-flow/end-of-flow.test.js @@ -1,13 +1,12 @@ import React from 'react'; import sinon from 'sinon'; +import { fireEvent, screen } from '@testing-library/react'; import { tick } from '../../../../test/lib/tick'; -import { mountWithRouter } from '../../../../test/lib/render-helpers'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'; import EndOfFlowScreen from './end-of-flow.container'; describe('End of Flow Screen', () => { - let wrapper; - const props = { history: { push: sinon.stub(), @@ -16,18 +15,17 @@ describe('End of Flow Screen', () => { }; beforeEach(() => { - wrapper = mountWithRouter(); + renderWithProvider(); }); - it('renders', () => { - expect(wrapper).toHaveLength(1); + it('should render', () => { + const endOfFlow = screen.queryByTestId('end-of-flow'); + expect(endOfFlow).toBeInTheDocument(); }); it('should navigate to the default route on click', async () => { - const endOfFlowButton = wrapper.find( - '.btn-primary.first-time-flow__button', - ); - endOfFlowButton.simulate('click'); + const endOfFlowButton = screen.getByTestId('EOF-complete-button'); + fireEvent.click(endOfFlowButton); await tick(); diff --git a/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.test.js b/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.test.js index 5f60c8d37..a88e44926 100644 --- a/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.test.js +++ b/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.test.js @@ -1,11 +1,14 @@ 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 MetaMetricsOptIn from './metametrics-opt-in.container'; describe('MetaMetricsOptIn', () => { it('opt out of MetaMetrics', () => { + afterEach(() => { + sinon.resetHistory(); + }); const props = { history: { push: sinon.spy(), @@ -13,21 +16,12 @@ describe('MetaMetricsOptIn', () => { setParticipateInMetaMetrics: sinon.stub().resolves(), participateInMetaMetrics: false, }; - const store = configureMockStore()({ - metamask: {}, - }); - const wrapper = mountWithRouter( - , - store, - ); - const noThanksButton = wrapper.find( - '.btn-secondary.page-container__footer-button', - ); - noThanksButton.simulate('click'); + renderWithProvider(); + const noThanksButton = screen.getByTestId('page-container-footer-cancel'); + fireEvent.click(noThanksButton); expect( props.setParticipateInMetaMetrics.calledOnceWithExactly(false), ).toStrictEqual(true); - props.setParticipateInMetaMetrics.resetHistory(); }); }); diff --git a/ui/pages/first-time-flow/select-action/select-action.component.js b/ui/pages/first-time-flow/select-action/select-action.component.js index 51d2876d7..332b88251 100644 --- a/ui/pages/first-time-flow/select-action/select-action.component.js +++ b/ui/pages/first-time-flow/select-action/select-action.component.js @@ -66,6 +66,7 @@ export default class SelectAction extends PureComponent { type="primary" className="first-time-flow__button" onClick={this.handleImport} + data-testid="import-wallet-button" > {t('importWallet')} @@ -86,6 +87,7 @@ export default class SelectAction extends PureComponent { type="primary" className="first-time-flow__button" onClick={this.handleCreate} + data-testid="create-wallet-button" > {t('createAWallet')} diff --git a/ui/pages/first-time-flow/select-action/select-action.test.js b/ui/pages/first-time-flow/select-action/select-action.test.js index e0b79c789..2b57c718a 100644 --- a/ui/pages/first-time-flow/select-action/select-action.test.js +++ b/ui/pages/first-time-flow/select-action/select-action.test.js @@ -1,11 +1,10 @@ import React from 'react'; import sinon from 'sinon'; -import { mountWithRouter } from '../../../../test/lib/render-helpers'; +import { fireEvent, screen } from '@testing-library/react'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; import SelectAction from './select-action.container'; describe('Selection Action', () => { - let wrapper; - const props = { isInitialized: false, setFirstTimeFlowType: sinon.spy(), @@ -15,7 +14,7 @@ describe('Selection Action', () => { }; beforeEach(() => { - wrapper = mountWithRouter(); + renderWithProvider(); }); afterEach(() => { @@ -24,10 +23,8 @@ describe('Selection Action', () => { }); it('clicks import wallet to route to import FTF', () => { - const importWalletButton = wrapper - .find('.btn-primary.first-time-flow__button') - .at(0); - importWalletButton.simulate('click'); + const importButton = screen.getByTestId('import-wallet-button'); + fireEvent.click(importButton); expect(props.setFirstTimeFlowType.calledOnce).toStrictEqual(true); expect(props.setFirstTimeFlowType.getCall(0).args[0]).toStrictEqual( @@ -37,10 +34,8 @@ describe('Selection Action', () => { }); it('clicks create wallet to route to create FTF', () => { - const createWalletButton = wrapper - .find('.btn-primary.first-time-flow__button') - .at(1); - createWalletButton.simulate('click'); + const importButton = screen.getByTestId('create-wallet-button'); + fireEvent.click(importButton); expect(props.setFirstTimeFlowType.calledOnce).toStrictEqual(true); expect(props.setFirstTimeFlowType.getCall(0).args[0]).toStrictEqual(