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

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

@@ -111,6 +111,7 @@ const AssetListItem = ({
       title={
         <button
           className="asset-list-item__token-button"
+          data-testid="token-button"
           onClick={onClick}
           title={`${primary} ${tokenSymbol}`}
         >

ui/components/app/modals/reject-transactions/__snapshots__/reject-transactions.test.js.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Reject Transactions Model should match snapshot 1`] = `
+<div>
+  <div
+    class="modal-container"
+  >
+    <div
+      class="modal-container__header"
+    >
+      <div
+        class="modal-container__header-text"
+      >
+        [rejectTxsN]
+      </div>
+      <div
+        class="modal-container__header-close"
+        data-testid="modal-header-close"
+      />
+    </div>
+    <div
+      class="modal-container__content"
+    >
+      <div>
+        <div
+          class="reject-transactions__description"
+        >
+          [rejectTxsDescription]
+        </div>
+      </div>
+    </div>
+    <div
+      class="modal-container__footer"
+    >
+      <button
+        class="button btn--rounded btn-secondary modal-container__footer-button"
+        role="button"
+        tabindex="0"
+      >
+        [cancel]
+      </button>
+      <button
+        class="button btn--rounded btn-primary modal-container__footer-button"
+        role="button"
+        tabindex="0"
+      >
+        [rejectAll]
+      </button>
+    </div>
+  </div>
+</div>
+`;

ui/components/app/modals/reject-transactions/reject-transactions.test.js

@@ -1,45 +1,44 @@
 import React from 'react';
-import sinon from 'sinon';
-import { mount } from 'enzyme';
-import RejectTransactionsModal from './reject-transactions.container';
+import { fireEvent, waitFor } from '@testing-library/react';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import RejectTransactionsModal from '.';
 
 describe('Reject Transactions Model', () => {
-  let wrapper;
-
   const props = {
-    onSubmit: sinon.spy(),
-    hideModal: sinon.spy(),
+    onSubmit: jest.fn(),
+    hideModal: jest.fn(),
     unapprovedTxCount: 2,
   };
 
-  beforeEach(() => {
-    wrapper = mount(<RejectTransactionsModal.WrappedComponent {...props} />, {
-      context: {
-        t: (str) => str,
-      },
-    });
-  });
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(
+      <RejectTransactionsModal.WrappedComponent {...props} />,
+    );
 
-  afterEach(() => {
-    props.hideModal.resetHistory();
+    expect(container).toMatchSnapshot();
   });
 
   it('hides modal when cancel button is clicked', () => {
-    const cancelButton = wrapper.find(
-      '.btn-secondary.modal-container__footer-button',
+    const { queryByText } = renderWithProvider(
+      <RejectTransactionsModal.WrappedComponent {...props} />,
     );
-    cancelButton.simulate('click');
 
-    expect(props.hideModal.calledOnce).toStrictEqual(true);
+    fireEvent.click(queryByText('[cancel]'));
+
+    expect(props.onSubmit).not.toHaveBeenCalled();
+    expect(props.hideModal).toHaveBeenCalled();
   });
 
   it('onSubmit is called and hides modal when reject all clicked', async () => {
-    const rejectAllButton = wrapper.find(
-      '.btn-primary.modal-container__footer-button',
+    const { queryByText } = renderWithProvider(
+      <RejectTransactionsModal.WrappedComponent {...props} />,
     );
-    rejectAllButton.simulate('click');
 
-    expect(await props.onSubmit.calledOnce).toStrictEqual(true);
-    expect(props.hideModal.calledOnce).toStrictEqual(true);
+    fireEvent.click(queryByText('[rejectAll]'));
+
+    await waitFor(() => {
+      expect(props.onSubmit).toHaveBeenCalled();
+      expect(props.hideModal).toHaveBeenCalled();
+    });
   });
 });

ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Transaction Confirmed should match snapshot 1`] = `
+<div>
+  <div
+    class="modal-container"
+  >
+    <div
+      class="modal-container__content"
+    >
+      <div
+        class="transaction-confirmed__content"
+      >
+        <i
+          class="fa fa-check-circle fa-3x"
+        />
+        <div
+          class="transaction-confirmed__title"
+        >
+          [confirmed]!
+        </div>
+        <div
+          class="transaction-confirmed__description"
+        >
+          [initialTransactionConfirmed]
+        </div>
+      </div>
+    </div>
+    <div
+      class="modal-container__footer"
+    >
+      <button
+        class="button btn--rounded btn-primary modal-container__footer-button"
+        role="button"
+        tabindex="0"
+      >
+        [ok]
+      </button>
+    </div>
+  </div>
+</div>
+`;

ui/components/app/modals/transaction-confirmed/transaction-confirmed.test.js

@@ -1,26 +1,30 @@
 import React from 'react';
-import sinon from 'sinon';
-import { mount } from 'enzyme';
-import TransactionConfirmed from './transaction-confirmed.container';
+import { fireEvent } from '@testing-library/react';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import TransactionConfirmed from '.';
 
 describe('Transaction Confirmed', () => {
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(
+      <TransactionConfirmed.WrappedComponent />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
   it('clicks ok to submit and hide modal', () => {
     const props = {
-      onSubmit: sinon.spy(),
-      hideModal: sinon.spy(),
+      onSubmit: jest.fn(),
+      hideModal: jest.fn(),
     };
-    const wrapper = mount(
+
+    const { queryByText } = renderWithProvider(
       <TransactionConfirmed.WrappedComponent {...props} />,
-      {
-        context: {
-          t: (str) => str,
-        },
-      },
     );
-    const submit = wrapper.find('.btn-primary.modal-container__footer-button');
-    submit.simulate('click');
 
-    expect(props.onSubmit.calledOnce).toStrictEqual(true);
-    expect(props.hideModal.calledOnce).toStrictEqual(true);
+    fireEvent.click(queryByText('[ok]'));
+
+    expect(props.onSubmit).toHaveBeenCalled();
+    expect(props.hideModal).toHaveBeenCalled();
   });
 });

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

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectedAccount Component should match snapshot 1`] = `
+<div>
+  <div
+    class="selected-account"
+  >
+    <div
+      class="selected-account__tooltip-wrapper"
+    >
+      <div
+        aria-describedby="tippy-tooltip-1"
+        class=""
+        data-original-title="Copy to clipboard"
+        data-tooltipped=""
+        style="display: inline;"
+        tabindex="0"
+      >
+        <button
+          class="selected-account__clickable"
+          data-testid="selected-account-click"
+        >
+          <div
+            class="selected-account__name"
+          >
+            Test Account
+          </div>
+          <div
+            class="selected-account__address"
+          >
+            0x0DC...E7bc
+            <div
+              class="selected-account__copy"
+            >
+              <svg
+                fill="none"
+                height="11"
+                viewBox="0 0 11 11"
+                width="11"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M0 0H1H9V1H1V9H0V0ZM2 2H11V11H2V2ZM3 3H10V10H3V3Z"
+                  fill="var(--color-icon-alternative)"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </div>
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;

ui/components/app/selected-account/selected-account-component.test.js

@@ -1,24 +1,32 @@
 import React from 'react';
-import { render } from 'enzyme';
-import SelectedAccount from './selected-account.component';
+import configureMockStore from 'redux-mock-store';
+import copyToClipboard from 'copy-to-clipboard';
+import { fireEvent } from '@testing-library/react';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import mockState from '../../../../test/data/mock-state.json';
+import SelectedAccount from '.';
+
+jest.mock('copy-to-clipboard');
 
 describe('SelectedAccount Component', () => {
-  it('should render checksummed address', () => {
-    const wrapper = render(
-      <SelectedAccount
-        selectedIdentity={{
-          name: 'testName',
-          address: '0x1b82543566f41a7db9a9a75fc933c340ffb55c9d',
-        }}
-      />,
-      { context: { t: () => undefined } },
-    );
-    // Checksummed version of address is displayed
-    expect(wrapper.find('.selected-account__address').text()).toStrictEqual(
-      '0x1B8...5C9D',
+  const mockStore = configureMockStore()(mockState);
+
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(<SelectedAccount />, mockStore);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should copy checksum address to clipboard when button is clicked', () => {
+    const { queryByTestId } = renderWithProvider(
+      <SelectedAccount />,
+      mockStore,
     );
-    expect(wrapper.find('.selected-account__name').text()).toStrictEqual(
-      'testName',
+
+    fireEvent.click(queryByTestId('selected-account-click'));
+
+    expect(copyToClipboard).toHaveBeenCalledWith(
+      '0x0DCD5D886577d5081B0c52e242Ef29E70Be3E7bc',
     );
   });
 });

ui/components/app/selected-account/selected-account.component.js

@@ -48,6 +48,7 @@ class SelectedAccount extends Component {
         >
           <button
             className="selected-account__clickable"
+            data-testid="selected-account-click"
             onClick={() => {
               this.setState({ copied: true });
               this.copyTimeout = setTimeout(