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>
2024-12-23 09:52:26 +01:00 · 2022-09-08 10:05:15 -07:00 · 2022-09-08 10:05:15 -07:00 · c2218ad941
commit c2218ad941
parent f94bc074b8
7 changed files with 140 additions and 168 deletions
--- 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,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,
-    );
+  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 = wrapper.find('.page-container');
-    expect(pageContainer).toHaveLength(1);
-    expect(pageContainer.getElements()[0].props.className).toStrictEqual(
-      'page-container',
-    );
+      const pageContainer = screen.queryByTestId('page-container');
+      expect(pageContainer).toBeInTheDocument();
    });

    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);
-    expect(
-      wrapper.find(ConfirmPageContainerHeader).getElements()[0].props
-        .accountAddress,
-    ).toStrictEqual('0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5');
+      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', () => {
-    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');
+      const senderRecipient = screen.queryByTestId('sender-to-recipient');
+      expect(senderRecipient).toBeInTheDocument();
    });
-
    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);
+      const recipientName = screen.queryByText(shortenAddress(props.toAddress));
+      expect(recipientName).toBeInTheDocument();
    });

    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',
+      const newAccountDetectDialog = screen.queryByText(
+        /New address detected!/u,
      );
-  });
-
-  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);
+      expect(newAccountDetectDialog).toBeInTheDocument();
    });

    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');
+      const rejectButton = screen.getByTestId('page-container-footer-cancel');
+      fireEvent.click(rejectButton);
      expect(props.onCancel.calledOnce).toStrictEqual(true);
    });

    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');
+      const confirmButton = screen.getByTestId('page-container-footer-next');
+      fireEvent.click(confirmButton);
      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();
+    });
+  });
+});
--- 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 (
-    <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} />
--- 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) => {
    >
      <div
        className="confirm-page-container-navigation__container"
+        data-testid="navigation-container"
        style={{
          visibility: prevTxId ? 'initial' : 'hidden',
        }}
--- a/ui/components/app/confirm-page-container/confirm-page-container.component.js
+++ b/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}
--- a/ui/components/ui/sender-to-recipient/sender-to-recipient.component.js
+++ b/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}
--- 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')}
          </Button>
--- 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,12 @@ describe('Welcome', () => {
      },
    };

-    const wrapper = mountWithRouter(
-      <Welcome.WrappedComponent {...props} />,
-      store,
-    );
+    renderWithProvider(<Welcome.WrappedComponent {...props} />);
+
+    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(
-      <Welcome.WrappedComponent {...props} />,
-      store,
-    );
+    renderWithProvider(<Welcome.WrappedComponent {...props} />);

-    const getStartedButton = wrapper.find(
-      '.btn-primary.first-time-flow__button',
-    );
-    getStartedButton.simulate('click');
+    const getStartedButton = screen.getByTestId('first-time-flow__button');
+
+    fireEvent.click(getStartedButton);
    expect(props.history.push.getCall(0).args[0]).toStrictEqual(
      '/initialize/select-action',
    );