Continue rm enzyme, unit tests. (#15730)

* Convert Confirm Page Container test to tlr.

Add test ids to associated components.

* Convert Welcome component to tlr.

* Update ui/pages/first-time-flow/welcome/welcome.test.js

Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com>

* Update ui/components/app/confirm-page-container/confirm-page-container-container.test.js

Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com>

* Remove unsused, commented out, lines

Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com>

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 { fireEvent, screen } from '@testing-library/react';
-import SenderToRecipient from '../../ui/sender-to-recipient';
+import mockState from '../../../../test/data/mock-state.json';
-import { mountWithRouter } from '../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
-import Dialog from '../../ui/dialog';
+import { shortenAddress } from '../../../helpers/utils/util';
-import ConfirmPageContainer, {
+import ConfirmPageContainer from '.';
-  ConfirmPageContainerHeader,
-  ConfirmPageContainerNavigation,
-} 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: {},
+    currentTransaction: {
-    contact: undefined,
+      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', () => {
-  beforeAll(() => {
+    const store = configureMockStore()(mockState);
-    wrapper = mountWithRouter(
+    beforeEach(() => {
-      <Provider store={store}>
+      renderWithProvider(<ConfirmPageContainer {...props} />, store);
-        <ConfirmPageContainer.WrappedComponent {...props} />,
-      </Provider>,
-      store,
-    );
     });
 
     it('should render a confirm page container component', () => {
-    const pageContainer = wrapper.find('.page-container');
+      const pageContainer = screen.queryByTestId('page-container');
-    expect(pageContainer).toHaveLength(1);
+      expect(pageContainer).toBeInTheDocument();
-    expect(pageContainer.getElements()[0].props.className).toStrictEqual(
-      'page-container',
-    );
     });
 
     it('should render navigation', () => {
-    expect(wrapper.find(ConfirmPageContainerNavigation)).toHaveLength(1);
+      const navigationContainer = screen.queryByTestId('navigation-container');
+      expect(navigationContainer).toBeInTheDocument();
     });
 
     it('should render header', () => {
-    expect(wrapper.find(ConfirmPageContainerHeader)).toHaveLength(1);
+      const headerContainer = screen.queryByTestId('header-container');
-    expect(
+      expect(headerContainer).toBeInTheDocument();
-      wrapper.find(ConfirmPageContainerHeader).getElements()[0].props
+
-        .accountAddress,
+      const shortenedFromAddress = shortenAddress(props.fromAddress);
-    ).toStrictEqual('0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5');
+      const headerAddress = screen.queryByTestId('header-address');
+      expect(headerAddress).toHaveTextContent(shortenedFromAddress);
     });
 
     it('should render sender to recipient in header', () => {
-    expect(wrapper.find(SenderToRecipient)).toHaveLength(1);
+      const senderRecipient = screen.queryByTestId('sender-to-recipient');
-    expect(
+      expect(senderRecipient).toBeInTheDocument();
-      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(
+      const recipientName = screen.queryByText(shortenAddress(props.toAddress));
-      '.sender-to-recipient__party--recipient-with-address',
+      expect(recipientName).toBeInTheDocument();
-    );
-    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);
+      const newAccountDetectDialog = screen.queryByText(
-    expect(wrapper.find(Dialog).getElements()[0].props.children).toStrictEqual(
+        /New address detected!/u,
-      'newAccountDetectedDialogMessage',
       );
-  });
+      expect(newAccountDetectDialog).toBeInTheDocument();
-
-  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(
-      <Provider store={store}>
-        <ConfirmPageContainer.WrappedComponent {...props} />,
-      </Provider>,
-      store,
-    );
-
-    expect(wrapper2.find(Dialog)).toHaveLength(0);
-  });
-
-  it('should render recipient as name', () => {
-    const wrapper2 = mountWithRouter(
-      <Provider store={store}>
-        <ConfirmPageContainer.WrappedComponent {...props} />,
-      </Provider>,
-      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(
+      const rejectButton = screen.getByTestId('page-container-footer-cancel');
-      2,
+      fireEvent.click(rejectButton);
-    );
-    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(
+      const confirmButton = screen.getByTestId('page-container-footer-next');
-      2,
+      fireEvent.click(confirmButton);
-    );
-    wrapper
-      .find('button.page-container__footer-button')
-      .at(1)
-      .simulate('click');
       expect(props.onSubmit.calledOnce).toStrictEqual(true);
     });
+  });
+
+  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,
+          },
+        },
+      };
+
+      mockState.metamask.addressBook = addressBook;
+
+      const store = configureMockStore()(mockState);
+
+      renderWithProvider(<ConfirmPageContainer {...props} />, store);
+
+      // Does not display new address dialog banner
+      const newAccountDetectDialog = screen.queryByText(
+        /New address detected!/u,
+      );
+      expect(newAccountDetectDialog).not.toBeInTheDocument();
+
+      // Shows contact/addressbook name
+      const contactName = screen.queryByText(addressBookName);
+      expect(contactName).toBeInTheDocument();
+    });
+  });
 });

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 (
-    <div className="confirm-page-container-header">
+    <div
+      className="confirm-page-container-header"
+      data-testid="header-container"
+    >
       <div className="confirm-page-container-header__row">
         {showAccountInHeader ? (
           <div className="confirm-page-container-header__address-container">
             <div className="confirm-page-container-header__address-identicon">
               <Identicon address={accountAddress} diameter={24} />
             </div>
-            <div className="confirm-page-container-header__address">
+            <div
+              className="confirm-page-container-header__address"
+              data-testid="header-address"
+            >
               {shortenAddress(accountAddress)}
             </div>
             <AccountMismatchWarning address={accountAddress} />

ui/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js

@@ -24,6 +24,7 @@ const ConfirmPageContainerNavigation = (props) => {
     >
       <div
         className="confirm-page-container-navigation__container"
+        data-testid="navigation-container"
         style={{
           visibility: prevTxId ? 'initial' : 'hidden',
         }}

ui/components/app/confirm-page-container/confirm-page-container.component.js

@@ -177,7 +177,7 @@ export default class ConfirmPageContainer extends Component {
 
     return (
       <GasFeeContextProvider transaction={currentTransaction}>
-        <div className="page-container">
+        <div className="page-container" data-testid="page-container">
           <ConfirmPageContainerNavigation
             totalTx={totalTx}
             positionOfCurrentTx={positionOfCurrentTx}

ui/components/ui/sender-to-recipient/sender-to-recipient.component.js

@@ -187,7 +187,10 @@ export default function SenderToRecipient({
   const checksummedRecipientAddress = toChecksumHexAddress(recipientAddress);
 
   return (
-    <div className={classnames('sender-to-recipient', variantHash[variant])}>
+    <div
+      className={classnames('sender-to-recipient', variantHash[variant])}
+      data-testid="sender-to-recipient"
+    >
       <SenderAddress
         checksummedSenderAddress={checksummedSenderAddress}
         addressOnly={addressOnly}

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

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 { fireEvent, screen } from '@testing-library/react';
-import { mountWithRouter } from '../../../../test/lib/render-helpers';
+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(
+    renderWithProvider(<Welcome.WrappedComponent {...props} />);
-      <Welcome.WrappedComponent {...props} />,
+
-      store,
+    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(
+    renderWithProvider(<Welcome.WrappedComponent {...props} />);
-      <Welcome.WrappedComponent {...props} />,
-      store,
-    );
 
-    const getStartedButton = wrapper.find(
+    const getStartedButton = screen.getByTestId('first-time-flow__button');
-      '.btn-primary.first-time-flow__button',
+
-    );
+    fireEvent.click(getStartedButton);
-    getStartedButton.simulate('click');
     expect(props.history.push.getCall(0).args[0]).toStrictEqual(
       '/initialize/select-action',
     );