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

* Add transaction activity log component

* Remove duplicate tx activity log snapshot.

* Convert tx breakdown row to tlr.

* Convert tx status component to tlr.

* Convert User Preferenced Currency Display test to tlr.

* Consolidate and convert user-preferenced-currency-input.test.js to tlr.

* Consolidate and convert user-preferenced-token-input test to tlr.

ui/components/app/transaction-breakdown/transaction-breakdown-row/__snapshots__/transaction-breakdown-row.component.test.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TransactionBreakdownRow Component should match snapshot 1`] = `
+<div>
+  <div
+    class="transaction-breakdown-row test-class"
+    data-testid="transaction-breakdown-row"
+  >
+    <div
+      class="transaction-breakdown-row__title"
+      data-testid="transaction-breakdown-row-title"
+    >
+      test
+    </div>
+    <div
+      class="transaction-breakdown-row__value"
+      data-testid="transaction-breakdown-row-value"
+    >
+      <button
+        class="button btn--rounded btn-default"
+        role="button"
+        tabindex="0"
+      >
+        Button
+      </button>
+    </div>
+  </div>
+</div>
+`;

ui/components/app/transaction-breakdown/transaction-breakdown-row/transaction-breakdown-row.component.test.js

@@ -1,40 +1,21 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers';
 import Button from '../../../ui/button';
-import TransactionBreakdownRow from './transaction-breakdown-row.component';
+import TransactionBreakdownRow from '.';
 
 describe('TransactionBreakdownRow Component', () => {
-  it('should render text properly', () => {
-    const wrapper = shallow(
-      <TransactionBreakdownRow title="test" className="test-class">
-        Test
-      </TransactionBreakdownRow>,
-      { context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } },
-    );
-
-    expect(wrapper.hasClass('transaction-breakdown-row')).toStrictEqual(true);
-    expect(
-      wrapper.find('.transaction-breakdown-row__title').text(),
-    ).toStrictEqual('test');
-    expect(
-      wrapper.find('.transaction-breakdown-row__value').text(),
-    ).toStrictEqual('Test');
-  });
+  it('should match snapshot', () => {
+    const props = {
+      title: 'test',
+      className: 'test-class',
+    };
 
-  it('should render components properly', () => {
-    const wrapper = shallow(
-      <TransactionBreakdownRow title="test" className="test-class">
+    const { container } = renderWithProvider(
+      <TransactionBreakdownRow {...props}>
         <Button onClick={() => undefined}>Button</Button>
       </TransactionBreakdownRow>,
-      { context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } },
     );
 
-    expect(wrapper.hasClass('transaction-breakdown-row')).toStrictEqual(true);
-    expect(
-      wrapper.find('.transaction-breakdown-row__title').text(),
-    ).toStrictEqual('test');
-    expect(
-      wrapper.find('.transaction-breakdown-row__value').find(Button),
-    ).toHaveLength(1);
+    expect(container).toMatchSnapshot();
   });
 });

ui/components/app/transaction-status/__snapshots__/transaction-status.component.test.js.snap

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TransactionStatus Component should render CONFIRMED properly 1`] = `
+<div>
+  <div
+    class="transaction-status transaction-status--confirmed"
+  >
+    June 1
+  </div>
+</div>
+`;
+
+exports[`TransactionStatus Component should render PENDING properly 1`] = `
+<div>
+  <div
+    class="transaction-status transaction-status--pending transaction-status--pending"
+  >
+    [pending]
+  </div>
+</div>
+`;
+
+exports[`TransactionStatus Component should render PENDING properly when status is APPROVED 1`] = `
+<div>
+  <div
+    class="transaction-status transaction-status--pending transaction-status--pending"
+  >
+    <div
+      aria-describedby="tippy-tooltip-1"
+      class=""
+      data-original-title="test-title"
+      data-tooltipped=""
+      style="display: inline;"
+      tabindex="0"
+    >
+      [pending]
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TransactionStatus Component should render QUEUED properly 1`] = `
+<div>
+  <div
+    class="transaction-status transaction-status--queued transaction-status--queued"
+  >
+    [queued]
+  </div>
+</div>
+`;
+
+exports[`TransactionStatus Component should render UNAPPROVED properly 1`] = `
+<div>
+  <div
+    class="transaction-status transaction-status--unapproved transaction-status--unapproved"
+  >
+    [unapproved]
+  </div>
+</div>
+`;

ui/components/app/transaction-status/transaction-status.component.test.js

@@ -1,63 +1,62 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import sinon from 'sinon';
-import * as i18nHook from '../../../hooks/useI18nContext';
-import Tooltip from '../../ui/tooltip';
-import TransactionStatus from './transaction-status.component';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import TransactionStatus from '.';
 
 describe('TransactionStatus Component', () => {
-  beforeAll(() => {
-    sinon.stub(i18nHook, 'useI18nContext').returns((str) => str.toUpperCase());
-  });
-
-  afterAll(() => {
-    sinon.restore();
-  });
-
   it('should render CONFIRMED properly', () => {
-    const wrapper = mount(
-      <TransactionStatus status="confirmed" date="June 1" />,
+    const confirmedProps = {
+      status: 'confirmed',
+      date: 'June 1',
+    };
+
+    const { container } = renderWithProvider(
+      <TransactionStatus {...confirmedProps} />,
     );
 
-    expect(wrapper.find(TransactionStatus)).toHaveLength(1);
-    expect(wrapper.text()).toStrictEqual('June 1');
+    expect(container).toMatchSnapshot();
   });
 
   it('should render PENDING properly when status is APPROVED', () => {
-    const wrapper = mount(
-      <TransactionStatus
-        status="approved"
-        isEarliestNonce
-        error={{ message: 'test-title' }}
-      />,
-    );
+    const props = {
+      status: 'approved',
+      isEarliestNonce: true,
+      error: { message: 'test-title' },
+    };
 
-    expect(wrapper.text()).toStrictEqual('PENDING');
-    expect(wrapper.find(Tooltip).props().title).toStrictEqual('test-title');
+    const { container } = renderWithProvider(<TransactionStatus {...props} />);
+
+    expect(container).toMatchSnapshot();
   });
 
   it('should render PENDING properly', () => {
-    const wrapper = mount(
-      <TransactionStatus date="June 1" status="submitted" isEarliestNonce />,
-    );
+    const props = {
+      date: 'June 1',
+      status: 'submitted',
+      isEarliestNonce: true,
+    };
+
+    const { container } = renderWithProvider(<TransactionStatus {...props} />);
 
-    expect(wrapper.find(TransactionStatus)).toHaveLength(1);
-    expect(wrapper.text()).toStrictEqual('PENDING');
+    expect(container).toMatchSnapshot();
   });
 
   it('should render QUEUED properly', () => {
-    const wrapper = mount(<TransactionStatus status="queued" />);
+    const props = {
+      status: 'queued',
+    };
 
-    expect(wrapper.find(TransactionStatus)).toHaveLength(1);
-    expect(wrapper.find('.transaction-status--queued')).toHaveLength(1);
-    expect(wrapper.text()).toStrictEqual('QUEUED');
+    const { container } = renderWithProvider(<TransactionStatus {...props} />);
+
+    expect(container).toMatchSnapshot();
   });
 
   it('should render UNAPPROVED properly', () => {
-    const wrapper = mount(<TransactionStatus status="unapproved" />);
+    const props = {
+      status: 'unapproved',
+    };
+
+    const { container } = renderWithProvider(<TransactionStatus {...props} />);
 
-    expect(wrapper.find(TransactionStatus)).toHaveLength(1);
-    expect(wrapper.find('.transaction-status--unapproved')).toHaveLength(1);
-    expect(wrapper.text()).toStrictEqual('UNAPPROVED');
+    expect(container).toMatchSnapshot();
   });
 });

ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserPreferencedCurrencyDisplay Component rendering should match snapshot 1`] = `
+<div>
+  <div
+    class="currency-display-component"
+    title="0 ETH"
+  >
+    <span
+      class="currency-display-component__prefix"
+    />
+    <span
+      class="currency-display-component__text"
+    >
+      0
+    </span>
+    <span
+      class="currency-display-component__suffix"
+    >
+      ETH
+    </span>
+  </div>
+</div>
+`;

ui/components/app/user-preferenced-currency-display/user-preferenced-currency-display.test.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import UserPreferencedCurrencyDisplay from '.';
+
+describe('UserPreferencedCurrencyDisplay Component', () => {
+  describe('rendering', () => {
+    const mockState = {
+      metamask: {
+        provider: {
+          chainId: '0x99',
+        },
+        preferences: {
+          useNativeCurrencyAsPrimaryCurrency: true,
+        },
+      },
+    };
+    const mockStore = configureMockStore()(mockState);
+
+    it('should match snapshot', () => {
+      const { container } = renderWithProvider(
+        <UserPreferencedCurrencyDisplay />,
+        mockStore,
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

ui/components/app/user-preferenced-currency-input/__snapshots__/user-preferenced-currency-input.test.js.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserPreferencedCurrencyInput Component rendering should match snapshot 1`] = `
+<div>
+  <div
+    class="unit-input"
+  >
+    <div
+      class="unit-input__inputs"
+    >
+      <div
+        class="unit-input__input-container"
+      >
+        <input
+          class="unit-input__input"
+          data-testid="currency-input"
+          dir="ltr"
+          placeholder="0"
+          style="width: 1.5ch;"
+          type="number"
+          value="0"
+        />
+        <div
+          class="unit-input__suffix"
+        >
+          ETH
+        </div>
+      </div>
+      <div
+        class="currency-input__conversion-component"
+      >
+        No conversion rate available
+      </div>
+    </div>
+    <button
+      class="currency-input__swap-component"
+      data-testid="currency-swap"
+    >
+      <i
+        class="fa fa-retweet fa-lg"
+      />
+    </button>
+  </div>
+</div>
+`;