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', () => {
+  it('should match snapshot', () => {
-    const wrapper = shallow(
+    const props = {
-      <TransactionBreakdownRow title="test" className="test-class">
+      title: 'test',
-        Test
+      className: 'test-class',
-      </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 render components properly', () => {
+    const { container } = renderWithProvider(
-    const wrapper = shallow(
+      <TransactionBreakdownRow {...props}>
-      <TransactionBreakdownRow title="test" className="test-class">
         <Button onClick={() => undefined}>Button</Button>
       </TransactionBreakdownRow>,
-      { context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } },
     );
 
-    expect(wrapper.hasClass('transaction-breakdown-row')).toStrictEqual(true);
+    expect(container).toMatchSnapshot();
-    expect(
-      wrapper.find('.transaction-breakdown-row__title').text(),
-    ).toStrictEqual('test');
-    expect(
-      wrapper.find('.transaction-breakdown-row__value').find(Button),
-    ).toHaveLength(1);
   });
 });

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

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.component.test.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-import CurrencyDisplay from '../../ui/currency-display';
-import * as currencyHook from '../../../hooks/useCurrencyDisplay';
-import * as currencyPrefHook from '../../../hooks/useUserPreferencedCurrency';
-import UserPreferencedCurrencyDisplay from '.';
-
-describe('UserPreferencedCurrencyDisplay Component', () => {
-  describe('rendering', () => {
-    beforeEach(() => {
-      sinon.stub(currencyHook, 'useCurrencyDisplay').returns(['1', {}]);
-      sinon
-        .stub(currencyPrefHook, 'useUserPreferencedCurrency')
-        .returns({ currency: 'ETH', decimals: 6 });
-    });
-
-    afterEach(() => {
-      sinon.restore();
-    });
-
-    it('should render properly', () => {
-      const wrapper = shallow(<UserPreferencedCurrencyDisplay />);
-
-      expect(wrapper).toHaveLength(1);
-      expect(wrapper.find(CurrencyDisplay)).toHaveLength(1);
-    });
-
-    it('should pass all props to the CurrencyDisplay child component', () => {
-      const wrapper = shallow(
-        <UserPreferencedCurrencyDisplay prop1 prop2="test" prop3={1} />,
-      );
-
-      expect(wrapper).toHaveLength(1);
-      expect(wrapper.find(CurrencyDisplay)).toHaveLength(1);
-      expect(wrapper.find(CurrencyDisplay).props().prop1).toStrictEqual(true);
-      expect(wrapper.find(CurrencyDisplay).props().prop2).toStrictEqual('test');
-      expect(wrapper.find(CurrencyDisplay).props().prop3).toStrictEqual(1);
-    });
-  });
-});

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>
+`;

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import CurrencyInput from '../currency-input';
-import UserPreferencedCurrencyInput from './user-preferenced-currency-input.component';
-
-describe('UserPreferencedCurrencyInput Component', () => {
-  describe('rendering', () => {
-    it('should render properly', () => {
-      const wrapper = shallow(<UserPreferencedCurrencyInput />);
-
-      expect(wrapper).toHaveLength(1);
-      expect(wrapper.find(CurrencyInput)).toHaveLength(1);
-    });
-
-    it('should render featureSecondary for CurrencyInput based on preferences.useNativeCurrencyAsPrimaryCurrency', () => {
-      const wrapper = shallow(
-        <UserPreferencedCurrencyInput useNativeCurrencyAsPrimaryCurrency />,
-      );
-
-      expect(wrapper).toHaveLength(1);
-      expect(wrapper.find(CurrencyInput)).toHaveLength(1);
-      expect(
-        wrapper.find(CurrencyInput).props().featureSecondary,
-      ).toStrictEqual(false);
-      wrapper.setProps({ useNativeCurrencyAsPrimaryCurrency: false });
-      expect(
-        wrapper.find(CurrencyInput).props().featureSecondary,
-      ).toStrictEqual(true);
-    });
-  });
-});

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

@@ -1,32 +0,0 @@
-/* eslint-disable import/unambiguous */
-let mapStateToProps;
-
-jest.mock('react-redux', () => ({
-  connect: (ms) => {
-    mapStateToProps = ms;
-    return () => ({});
-  },
-}));
-
-require('./user-preferenced-currency-input.container');
-
-describe('UserPreferencedCurrencyInput container', () => {
-  describe('mapStateToProps()', () => {
-    it('should return the correct props', () => {
-      const mockState = {
-        metamask: {
-          preferences: {
-            useNativeCurrencyAsPrimaryCurrency: true,
-          },
-        },
-        appState: {
-          sendInputCurrencySwitched: false,
-        },
-      };
-      expect(mapStateToProps(mockState)).toStrictEqual({
-        useNativeCurrencyAsPrimaryCurrency: true,
-        sendInputCurrencySwitched: false,
-      });
-    });
-  });
-});

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import mockState from '../../../../test/data/mock-state.json';
+import UserPreferencedCurrencyInput from '.';
+
+describe('UserPreferencedCurrencyInput Component', () => {
+  describe('rendering', () => {
+    it('should match snapshot', () => {
+      const mockStore = configureMockStore()(mockState);
+
+      const { container } = renderWithProvider(
+        <UserPreferencedCurrencyInput />,
+        mockStore,
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

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

@@ -0,0 +1,31 @@
+// 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"
+          dir="ltr"
+          placeholder="0"
+          style="width: 1.5ch;"
+          type="number"
+          value="0"
+        />
+      </div>
+      <div
+        class="currency-input__conversion-component"
+      >
+        No conversion rate available
+      </div>
+    </div>
+  </div>
+</div>
+`;

ui/components/app/user-preferenced-token-input/user-preferenced-token-input.component.test.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import TokenInput from '../../ui/token-input';
-import UserPreferencedTokenInput from './user-preferenced-token-input.component';
-
-describe('UserPreferencedCurrencyInput Component', () => {
-  describe('rendering', () => {
-    it('should render properly', () => {
-      const wrapper = shallow(
-        <UserPreferencedTokenInput token={{ address: '0x0' }} />,
-      );
-
-      expect(wrapper).toHaveLength(1);
-      expect(wrapper.find(TokenInput)).toHaveLength(1);
-    });
-
-    it('should render showFiat for TokenInput based on preferences.useNativeCurrencyAsPrimaryCurrency', () => {
-      const wrapper = shallow(
-        <UserPreferencedTokenInput
-          token={{ address: '0x0' }}
-          useNativeCurrencyAsPrimaryCurrency
-        />,
-      );
-
-      expect(wrapper).toHaveLength(1);
-      expect(wrapper.find(TokenInput)).toHaveLength(1);
-      expect(wrapper.find(TokenInput).props().showFiat).toStrictEqual(false);
-      wrapper.setProps({ useNativeCurrencyAsPrimaryCurrency: false });
-      expect(wrapper.find(TokenInput).props().showFiat).toStrictEqual(true);
-    });
-  });
-});

ui/components/app/user-preferenced-token-input/user-preferenced-token-input.container.test.js

@@ -1,29 +0,0 @@
-// eslint-disable-next-line import/unambiguous
-let mapStateToProps;
-
-jest.mock('react-redux', () => ({
-  connect: (ms) => {
-    mapStateToProps = ms;
-    return () => ({});
-  },
-}));
-
-require('./user-preferenced-token-input.container');
-
-describe('UserPreferencedTokenInput container', () => {
-  describe('mapStateToProps()', () => {
-    it('should return the correct props', () => {
-      const mockState = {
-        metamask: {
-          preferences: {
-            useNativeCurrencyAsPrimaryCurrency: true,
-          },
-        },
-      };
-
-      expect(mapStateToProps(mockState)).toStrictEqual({
-        useNativeCurrencyAsPrimaryCurrency: true,
-      });
-    });
-  });
-});

ui/components/app/user-preferenced-token-input/user-preferenced-token-input.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import mockState from '../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import UserPreferencedTokenInput from '.';
+
+describe('UserPreferencedCurrencyInput Component', () => {
+  describe('rendering', () => {
+    const mockStore = configureMockStore()(mockState);
+
+    const props = {
+      token: {
+        address: '0xd8f6a2ffb0fc5952d16c9768b71cfd35b6399aa5',
+      },
+    };
+
+    it('should match snapshot', () => {
+      const { container } = renderWithProvider(
+        <UserPreferencedTokenInput {...props} />,
+        mockStore,
+      );
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});