Continue converting tests from enzyme to @testing-library/react. (#15770)

Co-authored-by: Brad Decker <bhdecker84@gmail.com>

ui/components/app/account-list-item/__snapshots__/account-list-item-component.test.js.snap

@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AccountListItem Component render should match snapshot 1`] = `
+<div>
+  <div
+    class="account-list-item mockClassName"
+    data-testid="account-list-item"
+  >
+    <div
+      class="account-list-item__top-row"
+    >
+      <div
+        class=""
+      >
+        <div
+          class="identicon account-list-item__identicon"
+          style="height: 18px; width: 18px; border-radius: 9px;"
+        >
+          <div
+            style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 18px; height: 18px; display: inline-block; background: rgb(24, 191, 242);"
+          >
+            <svg
+              height="18"
+              width="18"
+              x="0"
+              y="0"
+            >
+              <rect
+                fill="#F59B00"
+                height="18"
+                transform="translate(1.1057728692647846 -1.1284144293741016) rotate(330.0 9 9)"
+                width="18"
+                x="0"
+                y="0"
+              />
+              <rect
+                fill="#F27602"
+                height="18"
+                transform="translate(8.068916496038273 0.7410013085075559) rotate(170.6 9 9)"
+                width="18"
+                x="0"
+                y="0"
+              />
+              <rect
+                fill="#C8146B"
+                height="18"
+                transform="translate(-3.4359831020777025 11.706703966498809) rotate(121.2 9 9)"
+                width="18"
+                x="0"
+                y="0"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div
+        class="account-list-item__account-name"
+      >
+        mockName
+      </div>
+      <div
+        class="account-list-item__icon"
+        data-testid="account-list-item-icon"
+      >
+        <i
+          class="mockIcon"
+        />
+      </div>
+      <div
+        class="account-mismatch-warning__tooltip-wrapper"
+      >
+        <div
+          aria-describedby="tippy-tooltip-1"
+          class="account-mismatch-warning__tooltip-container"
+          data-original-title="null"
+          data-tooltipped=""
+          style="display: inline;"
+          tabindex="0"
+        >
+          <div
+            class="account-mismatch-warning__tooltip-container-icon"
+          >
+            <svg
+              class="info-icon info-icon--warning"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.2 5.6H8.8V4H7.2V5.6ZM8 14.4C4.472 14.4 1.6 11.528 1.6 8C1.6 4.472 4.472 1.6 8 1.6C11.528 1.6 14.4 4.472 14.4 8C14.4 11.528 11.528 14.4 8 14.4ZM8 0C6.94943 0 5.90914 0.206926 4.93853 0.608964C3.96793 1.011 3.08601 1.60028 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.08601 14.3997 3.96793 14.989 4.93853 15.391C5.90914 15.7931 6.94943 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 6.94943 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608964C10.0909 0.206926 9.05058 0 8 0ZM7.2 12H8.8V7.2H7.2V12Z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

ui/components/app/account-list-item/account-list-item-component.test.js

@@ -1,146 +1,107 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import Identicon from '../../ui/identicon';
-import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
+import configureStore from 'redux-mock-store';
+import { fireEvent } from '@testing-library/react';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import mockState from '../../../../test/data/mock-state.json';
 import AccountListItem from './account-list-item';
 
 jest.mock('../../../../shared/modules/hexstring-utils', () => ({
+  ...jest.requireActual('../../../../shared/modules/hexstring-utils'),
   toChecksumHexAddress: jest.fn(() => 'mockCheckSumAddress'),
 }));
 
 describe('AccountListItem Component', () => {
-  let wrapper, propsMethodSpies;
+  const store = configureStore()(mockState);
 
   describe('render', () => {
-    beforeAll(() => {
-      propsMethodSpies = {
-        handleClick: sinon.spy(),
-      };
-    });
-    beforeEach(() => {
-      wrapper = shallow(
-        <AccountListItem
-          account={{
-            address: 'mockAddress',
-            name: 'mockName',
-            balance: 'mockBalance',
-          }}
-          className="mockClassName"
-          displayAddress={false}
-          handleClick={propsMethodSpies.handleClick}
-          icon={<i className="mockIcon" />}
-        />,
-        { context: { t: (str) => `${str}_t` } },
+    const props = {
+      account: {
+        address: 'mockAddress',
+        name: 'mockName',
+        balance: 'mockBalance',
+      },
+      className: 'mockClassName',
+      displayAddress: false,
+      icon: <i className="mockIcon" />,
+      handleClick: jest.fn(),
+    };
+
+    it('should match snapshot', () => {
+      const { container } = renderWithProvider(
+        <AccountListItem {...props} />,
+        store,
       );
-    });
 
-    afterEach(() => {
-      propsMethodSpies.handleClick.resetHistory();
-    });
-
-    afterAll(() => {
-      sinon.restore();
-    });
-
-    it('should render a div with the passed className', () => {
-      expect(wrapper.find('.mockClassName')).toHaveLength(1);
-      expect(wrapper.find('.mockClassName').is('div')).toStrictEqual(true);
-      expect(
-        wrapper.find('.mockClassName').hasClass('account-list-item'),
-      ).toStrictEqual(true);
+      expect(container).toMatchSnapshot();
     });
 
     it('should call handleClick with the expected props when the root div is clicked', () => {
-      const { onClick } = wrapper.find('.mockClassName').props();
-      expect(propsMethodSpies.handleClick.callCount).toStrictEqual(0);
-      onClick();
-      expect(propsMethodSpies.handleClick.callCount).toStrictEqual(1);
-      expect(propsMethodSpies.handleClick.getCall(0).args).toStrictEqual([
-        { address: 'mockAddress', name: 'mockName', balance: 'mockBalance' },
-      ]);
-    });
-
-    it('should have a top row div', () => {
-      expect(
-        wrapper.find('.mockClassName > .account-list-item__top-row'),
-      ).toHaveLength(1);
-      expect(
-        wrapper.find('.mockClassName > .account-list-item__top-row').is('div'),
-      ).toStrictEqual(true);
-    });
-
-    it('should have an identicon, name and icon in the top row', () => {
-      const topRow = wrapper.find(
-        '.mockClassName > .account-list-item__top-row',
+      const { getByTestId } = renderWithProvider(
+        <AccountListItem {...props} />,
+        store,
       );
-      expect(topRow.find(Identicon)).toHaveLength(1);
-      expect(topRow.find('.account-list-item__account-name')).toHaveLength(1);
-      expect(topRow.find('.account-list-item__icon')).toHaveLength(1);
+      const accountListItem = getByTestId('account-list-item');
+      fireEvent.click(accountListItem);
+
+      expect(props.handleClick).toHaveBeenCalledWith({
+        address: 'mockAddress',
+        name: 'mockName',
+        balance: 'mockBalance',
+      });
     });
 
     it('should show the account name if it exists', () => {
-      const topRow = wrapper.find(
-        '.mockClassName > .account-list-item__top-row',
+      const { queryByText } = renderWithProvider(
+        <AccountListItem {...props} />,
+        store,
       );
-      expect(
-        topRow.find('.account-list-item__account-name').text(),
-      ).toStrictEqual('mockName');
+      expect(queryByText('mockName')).toBeInTheDocument();
     });
 
     it('should show the account address if there is no name', () => {
-      wrapper.setProps({ account: { address: 'addressButNoName' } });
-      const topRow = wrapper.find(
-        '.mockClassName > .account-list-item__top-row',
-      );
-      expect(
-        topRow.find('.account-list-item__account-name').text(),
-      ).toStrictEqual('addressButNoName');
-    });
+      const noAccountNameProps = {
+        ...props,
+        account: {
+          address: 'addressButNoName',
+        },
+      };
 
-    it('should render the passed icon', () => {
-      const topRow = wrapper.find(
-        '.mockClassName > .account-list-item__top-row',
+      const { queryByText } = renderWithProvider(
+        <AccountListItem {...noAccountNameProps} />,
+        store,
       );
-      expect(
-        topRow.find('.account-list-item__icon').childAt(0).is('i'),
-      ).toStrictEqual(true);
-      expect(
-        topRow.find('.account-list-item__icon').childAt(0).hasClass('mockIcon'),
-      ).toStrictEqual(true);
+      expect(queryByText('addressButNoName')).toBeInTheDocument();
     });
 
     it('should not render an icon if none is passed', () => {
-      wrapper.setProps({ icon: null });
-      const topRow = wrapper.find(
-        '.mockClassName > .account-list-item__top-row',
+      const noIconProps = {
+        ...props,
+        icon: null,
+      };
+
+      const { queryByTestId } = renderWithProvider(
+        <AccountListItem {...noIconProps} />,
+        store,
       );
-      expect(topRow.find('.account-list-item__icon')).toHaveLength(0);
+      const accountListItemIcon = queryByTestId('account-list-item-icon');
+
+      expect(accountListItemIcon).not.toBeInTheDocument();
     });
 
     it('should render the account address as a checksumAddress if displayAddress is true and name is provided', () => {
-      wrapper.setProps({ displayAddress: true });
-      expect(wrapper.find('.account-list-item__account-address')).toHaveLength(
-        1,
+      const { queryByText, rerender } = renderWithProvider(
+        <AccountListItem {...props} />,
+        store,
       );
-      expect(
-        wrapper.find('.account-list-item__account-address').text(),
-      ).toStrictEqual('mockCheckSumAddress');
-      expect(toChecksumHexAddress).toHaveBeenCalledWith('mockAddress');
-    });
+      expect(queryByText('mockCheckSumAddress')).not.toBeInTheDocument();
 
-    it('should not render the account address as a checksumAddress if displayAddress is false', () => {
-      wrapper.setProps({ displayAddress: false });
-      expect(wrapper.find('.account-list-item__account-address')).toHaveLength(
-        0,
-      );
-    });
+      const displayAddressProps = {
+        ...props,
+        displayAddress: true,
+      };
 
-    it('should not render the account address as a checksumAddress if name is not provided', () => {
-      wrapper.setProps({ account: { address: 'someAddressButNoName' } });
-      expect(wrapper.find('.account-list-item__account-address')).toHaveLength(
-        0,
-      );
+      rerender(<AccountListItem {...displayAddressProps} />);
+      expect(queryByText('mockCheckSumAddress')).toBeInTheDocument();
     });
   });
 });

ui/components/app/account-list-item/account-list-item.js

@@ -16,6 +16,7 @@ export default function AccountListItem({
   return (
     <div
       className={`account-list-item ${className}`}
+      data-testid="account-list-item"
       onClick={() => handleClick?.({ name, address, balance })}
     >
       <div className="account-list-item__top-row">
@@ -25,7 +26,14 @@ export default function AccountListItem({
           diameter={18}
         />
         <div className="account-list-item__account-name">{name || address}</div>
-        {icon ? <div className="account-list-item__icon">{icon}</div> : null}
+        {icon ? (
+          <div
+            className="account-list-item__icon"
+            data-testid="account-list-item-icon"
+          >
+            {icon}
+          </div>
+        ) : null}
         <AccountMismatchWarning address={address} />
       </div>
 

ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Confirm Detail Row Component should match snapshot 1`] = `
+<div>
+  <div
+    class="confirm-detail-row"
+  >
+    <div
+      class="confirm-detail-row__label"
+    />
+    <div
+      class="confirm-detail-row__details"
+    >
+      <div
+        class="currency-display-component confirm-detail-row__primary"
+        title="0"
+      >
+        <span
+          class="currency-display-component__prefix"
+        >
+          <i
+            class="fab fa-ethereum"
+            style="font-size: 18px;"
+          />
+        </span>
+        <span
+          class="currency-display-component__text"
+        >
+          0
+        </span>
+      </div>
+      <div
+        class="currency-display-component confirm-detail-row__secondary"
+        title="0"
+      >
+        <span
+          class="currency-display-component__prefix"
+        >
+          <i
+            class="fab fa-ethereum"
+            style="font-size: 14px;"
+          />
+        </span>
+        <span
+          class="currency-display-component__text"
+        >
+          0
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

ui/components/app/confirm-page-container/confirm-detail-row/confirm-detail-row.component.test.js

@@ -1,89 +1,27 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import ConfirmDetailRow from './confirm-detail-row.component';
+import configureMockStore from 'redux-mock-store';
 
-const propsMethodSpies = {
-  onHeaderClick: sinon.spy(),
-};
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import ConfirmDetailRow from '.';
 
 describe('Confirm Detail Row Component', () => {
-  describe('render', () => {
-    let wrapper;
+  const mockState = {
+    metamask: {
+      provider: {
+        type: 'rpc',
+        chainId: '0x4',
+      },
+      preferences: {
+        useNativeCurrencyAsPrimaryCurrency: true,
+      },
+    },
+  };
 
-    beforeEach(() => {
-      wrapper = shallow(
-        <ConfirmDetailRow
-          errorType="mockErrorType"
-          label="mockLabel"
-          showError={false}
-          primaryText="mockFiatText"
-          secondaryText="mockEthText"
-          primaryValueTextColor="mockColor"
-          onHeaderClick={propsMethodSpies.onHeaderClick}
-          headerText="mockHeaderText"
-          headerTextClassName="mockHeaderClass"
-        />,
-      );
-    });
+  const store = configureMockStore()(mockState);
 
-    it('should render a div with a confirm-detail-row class', () => {
-      expect(wrapper.find('div.confirm-detail-row')).toHaveLength(1);
-    });
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(<ConfirmDetailRow />, store);
 
-    it('should render the label as a child of the confirm-detail-row__label', () => {
-      expect(
-        wrapper
-          .find('.confirm-detail-row > .confirm-detail-row__label')
-          .childAt(0)
-          .text(),
-      ).toStrictEqual('mockLabel');
-    });
-
-    it('should render the headerText as a child of the confirm-detail-row__header-text', () => {
-      expect(
-        wrapper
-          .find(
-            '.confirm-detail-row__details > .confirm-detail-row__header-text',
-          )
-          .childAt(0)
-          .text(),
-      ).toStrictEqual('mockHeaderText');
-    });
-
-    it('should render the primaryText as a child of the confirm-detail-row__primary', () => {
-      expect(
-        wrapper
-          .find('.confirm-detail-row__details > .confirm-detail-row__primary')
-          .childAt(0)
-          .text(),
-      ).toStrictEqual('mockFiatText');
-    });
-
-    it('should render the ethText as a child of the confirm-detail-row__secondary', () => {
-      expect(
-        wrapper
-          .find('.confirm-detail-row__details > .confirm-detail-row__secondary')
-          .childAt(0)
-          .text(),
-      ).toStrictEqual('mockEthText');
-    });
-
-    it('should set the fiatTextColor on confirm-detail-row__primary', () => {
-      expect(
-        wrapper.find('.confirm-detail-row__primary').props().style.color,
-      ).toStrictEqual('mockColor');
-    });
-
-    it('should assure the confirm-detail-row__header-text classname is correct', () => {
-      expect(
-        wrapper.find('.confirm-detail-row__header-text').props().className,
-      ).toStrictEqual('confirm-detail-row__header-text mockHeaderClass');
-    });
-
-    it('should call onHeaderClick when headerText div gets clicked', () => {
-      wrapper.find('.confirm-detail-row__header-text').props().onClick();
-      expect(propsMethodSpies.onHeaderClick.calledOnce).toStrictEqual(true);
-    });
+    expect(container).toMatchSnapshot();
   });
 });

ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap

@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Confirm Detail Row Component should match snapshot 1`] = `
+<div>
+  <div
+    class="confirm-page-container-header"
+    data-testid="header-container"
+  >
+    <div
+      class="confirm-page-container-header__row"
+    >
+      <div
+        class="confirm-page-container-header__back-button-container"
+        style="visibility: hidden;"
+      >
+        <svg
+          fill="currentColor"
+          height="24"
+          viewBox="0 0 512 512"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m335 113c8 8 8 22 0 30l-113 113 113 113c8 8 8 22 0 30-8 8-22 8-30 0l-128-128c-8-8-8-22 0-30l128-128c8-8 22-8 30 0z"
+          />
+        </svg>
+        <span
+          class="confirm-page-container-header__back-button"
+        >
+          Edit
+        </span>
+      </div>
+      <div
+        class="network-display chip chip--with-left-icon chip--border-color-border-muted chip--background-color-undefined chip--max-content"
+        data-testid="network-display"
+      >
+        <div
+          class="chip__left-icon"
+        >
+          <div
+            class="color-indicator color-indicator--filled color-indicator--color-icon-muted color-indicator--size-lg"
+            data-testid="color-icon-icon-muted"
+          >
+            <i
+              class="color-indicator__icon fa fa-question"
+            />
+          </div>
+        </div>
+        <span
+          class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography chip__label typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
+        >
+          Private network
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Confirm Detail Row Component should only render children when fullscreen and showEdit is false & snapshot match 1`] = `
+<div>
+  <div
+    class="nested-test-class"
+  />
+</div>
+`;

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

@@ -1,61 +1,64 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import { Provider } from 'react-redux';
-import configureStore from '../../../../store/store';
-import testData from '../../../../../.storybook/test-data';
-import ConfirmPageContainerHeader from './confirm-page-container-header.component';
+import configureStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import { getEnvironmentType } from '../../../../../app/scripts/lib/util';
+import ConfirmPageContainerHeader from '.';
 
-const util = require('../../../../../app/scripts/lib/util');
-
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useLayoutEffect: jest.requireActual('react').useEffect,
+jest.mock('../../../../../app/scripts/lib/util.js', () => ({
+  ...jest.requireActual('../../../../../app/scripts/lib/util.js'),
+  getEnvironmentType: jest.fn(),
 }));
 
 describe('Confirm Detail Row Component', () => {
-  describe('render', () => {
-    it('should render a div with a confirm-page-container-header class', () => {
-      const stub = sinon
-        .stub(util, 'getEnvironmentType')
-        .callsFake(() => 'popup');
-      const wrapper = shallow(
-        <Provider store={configureStore(testData)}>
-          <ConfirmPageContainerHeader
-            showEdit={false}
-            onEdit={() => {
-              // noop
-            }}
-            showAccountInHeader={false}
-            accountAddress="0xmockAccountAddress"
-          />
-        </Provider>,
-      );
-      expect(wrapper.html()).toContain('confirm-page-container-header');
-      stub.restore();
-    });
+  const mockState = {
+    appState: {
+      isLoading: false,
+    },
+    metamask: {
+      provider: {
+        type: 'rpc',
+        chainId: '0x4',
+      },
+    },
+  };
 
-    it('should only render children when fullscreen and showEdit is false', () => {
-      const stub = sinon
-        .stub(util, 'getEnvironmentType')
-        .callsFake(() => 'fullscreen');
-      const wrapper = shallow(
-        <Provider store={configureStore(testData)}>
-          <ConfirmPageContainerHeader
-            showEdit={false}
-            onEdit={() => {
-              // noop
-            }}
-            showAccountInHeader={false}
-            accountAddress="0xmockAccountAddress"
-          >
-            <div className="nested-test-class" />
-          </ConfirmPageContainerHeader>
-        </Provider>,
-      );
-      expect(wrapper.html()).toContain('nested-test-class');
-      expect(wrapper.html()).not.toContain('confirm-page-container-header');
-      stub.restore();
-    });
+  const store = configureStore()(mockState);
+
+  it('should match snapshot', () => {
+    getEnvironmentType.mockReturnValue('popup');
+
+    const props = {
+      showEdit: false,
+      onEdit: jest.fn(),
+      showAccountInHeader: false,
+      accountAddress: '0xmockAccountAddress',
+    };
+
+    const { container } = renderWithProvider(
+      <ConfirmPageContainerHeader {...props} />,
+      store,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should only render children when fullscreen and showEdit is false & snapshot match', () => {
+    getEnvironmentType.mockReturnValue('fullscreen');
+
+    const props = {
+      showEdit: false,
+      onEdit: jest.fn(),
+      showAccountInHeader: false,
+      accountAddress: '0xmockAccountAddress',
+    };
+
+    const { container } = renderWithProvider(
+      <ConfirmPageContainerHeader {...props}>
+        <div className="nested-test-class" />
+      </ConfirmPageContainerHeader>,
+      store,
+    );
+
+    expect(container).toMatchSnapshot();
   });
 });

ui/components/app/network-display/network-display.js

@@ -38,6 +38,7 @@ export default function NetworkDisplay({
 
   return (
     <Chip
+      dataTestId="network-display"
       borderColor={onClick ? COLORS.BORDER_DEFAULT : COLORS.BORDER_MUTED}
       onClick={onClick}
       leftIcon={

ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap

@@ -43,6 +43,7 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
           >
             <div
               class="account-list-item undefined"
+              data-testid="account-list-item"
             >
               <div
                 class="account-list-item__top-row"

ui/components/ui/metafox-logo/metafox-logo.component.js

@@ -26,6 +26,7 @@ export default class MetaFoxLogo extends PureComponent {
           'onboarding-app-header__logo-container': isOnboarding,
           'app-header__logo-container--clickable': Boolean(onClick),
         })}
+        data-testid="app-header-logo"
       >
         <MetaFoxHorizontalLogo
           className={classnames({

ui/pages/first-time-flow/seed-phrase/__snapshots__/seed-phrase.test.js.snap

@@ -7,6 +7,7 @@ exports[`SeedPhrase Component should match snapshot 1`] = `
   >
     <div
       class="app-header__logo-container"
+      data-testid="app-header-logo"
     >
       <svg
         class="app-header__metafox-logo--horizontal"