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

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 (
-      <div className="end-of-flow">
+      <div className="end-of-flow" data-testid="end-of-flow">
         <MetaFoxLogo />
         <div className="end-of-flow__emoji">🎉</div>
         <div className="first-time-flow__header">{t('congratulations')}</div>
@@ -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')}
         </Button>

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(<EndOfFlowScreen.WrappedComponent {...props} />);
+    renderWithProvider(<EndOfFlowScreen.WrappedComponent {...props} />);
   });
 
-  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();
 

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(
-      <MetaMetricsOptIn.WrappedComponent {...props} />,
-      store,
-    );
-    const noThanksButton = wrapper.find(
-      '.btn-secondary.page-container__footer-button',
-    );
-    noThanksButton.simulate('click');
+    renderWithProvider(<MetaMetricsOptIn.WrappedComponent {...props} />);
 
+    const noThanksButton = screen.getByTestId('page-container-footer-cancel');
+    fireEvent.click(noThanksButton);
     expect(
       props.setParticipateInMetaMetrics.calledOnceWithExactly(false),
     ).toStrictEqual(true);
-    props.setParticipateInMetaMetrics.resetHistory();
   });
 });

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')}
                 </Button>
@@ -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')}
                 </Button>

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(<SelectAction.WrappedComponent {...props} />);
+    renderWithProvider(<SelectAction.WrappedComponent {...props} />);
   });
 
   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(