Continue rm enzyme, unit tests.

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',
   };
-
-  beforeAll(() => {
-    wrapper = mountWithRouter(
-      <Provider store={store}>
-        <ConfirmPageContainer.WrappedComponent {...props} />,
-      </Provider>,
-      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(<ConfirmPageContainer {...props} />, 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 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(
-      <Provider store={store}>
-        <ConfirmPageContainer.WrappedComponent {...props} />,
-      </Provider>,
-      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(
-      <Provider store={store}>
-        <ConfirmPageContainer.WrappedComponent {...props} />,
-      </Provider>,
-      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(<ConfirmPageContainer {...props} />, 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();
+    });
   });
 });

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>