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

* Add transaction activity log component * Remove duplicate tx activity log snapshot. * Convert Identicon test to tlr. * Convert Metafoxlogo test to tlr. * Convert Reveal Seed Phrase test to tlr. * Consolidate and convert Send Footer test to tlr. * Convert Settings test to tlr. * Consolidate and convert security tab test to tlr. * Convert null selectedOption to empty string, and add test id to Dropdown component. * Add Send state to mock-state * Lint mock-state.json
MetaMask · Nov 4, 2022 · 646dbaa · 646dbaa
1 parent 83ec64d
commit 646dbaa
Show file tree

Hide file tree

Showing 19 changed files with 908 additions and 506 deletions.
diff --git a/test/data/mock-state.json b/test/data/mock-state.json
@@ -12,12 +12,15 @@
       "previousModalState": {
         "name": null
       }
-    }
+    },
+    "warning": null
   },
   "history": {
-    "mostRecentOverviewPage": "/"
+    "mostRecentOverviewPage": "/mostRecentOverviewPage"
   },
   "metamask": {
+    "usePhishDetect": true,
+    "participateInMetaMetrics": false,
     "gasEstimateType": "fee-market",
     "gasFeeEstimates": {
       "low": {
@@ -46,6 +49,7 @@
       "priorityFeeTrend": "down",
       "networkCongestion": 0.90625
     },
+    "snaps": [{}],
     "preferences": {
       "hideZeroBalanceTokens": false,
       "showFiatInTestnets": false,
@@ -241,20 +245,6 @@
     "unapprovedEncryptionPublicKeyMsgCount": 0,
     "unapprovedTypedMessages": {},
     "unapprovedTypedMessagesCount": 0,
-    "send": {
-      "gasLimit": "0x5208",
-      "gasPrice": "0xee6b2800",
-      "gasTotal": "0x4c65c6294000",
-      "tokenBalance": null,
-      "from": "0xc42edfcc21ed14dda456aa0756c153f7985d8813",
-      "to": "",
-      "amount": "1bc16d674ec80000",
-      "memo": "",
-      "errors": {},
-      "maxModeOn": false,
-      "editingTransactionId": null,
-      "toNickname": ""
-    },
     "useTokenDetection": true,
     "advancedGasFee": {
       "maxBaseFee": "75",
@@ -1284,5 +1274,24 @@
         "origin": "tmashuang.github.io"
       }
     ]
+  },
+  "send": {
+    "amountMode": "INPUT",
+    "currentTransactionUUID": null,
+    "draftTransactions": {},
+    "eip1559support": false,
+    "gasEstimateIsLoading": true,
+    "gasEstimatePollToken": null,
+    "gasIsSetInModal": false,
+    "gasPriceEstimate": "0x0",
+    "gasLimitMinimum": "0x5208",
+    "gasTotalForLayer1": "0x0",
+    "recipientMode": "CONTACT_LIST",
+    "recipientInput": "",
+    "selectedAccount": {
+      "address": "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc",
+      "balance": "0x0"
+    },
+    "stage": "INACTIVE"
   }
 }
diff --git a/ui/components/ui/dropdown/dropdown.js b/ui/components/ui/dropdown/dropdown.js
@@ -8,9 +8,10 @@ const Dropdown = ({
   disabled = false,
   onChange,
   options,
-  selectedOption = null,
+  selectedOption = '',
   style,
   title,
+  'data-testid': dataTestId,
 }) => {
   const _onChange = useCallback(
     (event) => {
@@ -25,6 +26,7 @@ const Dropdown = ({
     <div className={classnames('dropdown', className)}>
       <select
         className="dropdown__select"
+        data-testid={dataTestId}
         disabled={disabled}
         title={title}
         onChange={_onChange}
@@ -78,6 +80,10 @@ Dropdown.propTypes = {
    * Add inline style for the component
    */
   style: PropTypes.object,
+  /**
+   * Unit testing test id
+   */
+  'data-testid': PropTypes.string,
 };
 
 export default Dropdown;
diff --git a/ui/components/ui/identicon/__snapshots__/identicon.component.test.js.snap b/ui/components/ui/identicon/__snapshots__/identicon.component.test.js.snap
@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Identicon should match snapshot with address prop div 1`] = `
+<div>
+  <div
+    class=""
+  >
+    <div
+      class="identicon test-address"
+      style="height: 46px; width: 46px; border-radius: 23px;"
+    >
+      <div
+        style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 46px; height: 46px; display: inline-block; background: rgb(24, 151, 242);"
+      >
+        <svg
+          height="46"
+          width="46"
+          x="0"
+          y="0"
+        >
+          <rect
+            fill="#2362E1"
+            height="46"
+            transform="translate(5.159662140639244 -7.668071520898189) rotate(458.4 23 23)"
+            width="46"
+            x="0"
+            y="0"
+          />
+          <rect
+            fill="#F94301"
+            height="46"
+            transform="translate(-22.084972728872177 11.489005476012034) rotate(268.8 23 23)"
+            width="46"
+            x="0"
+            y="0"
+          />
+          <rect
+            fill="#FA7900"
+            height="46"
+            transform="translate(-13.047115238995795 42.377522828482356) rotate(117.3 23 23)"
+            width="46"
+            x="0"
+            y="0"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Identicon should match snapshot with custom image and className props 1`] = `
+<div>
+  <img
+    alt=""
+    class="identicon test-image"
+    src="test-image"
+    style="height: 46px; width: 46px; border-radius: 23px;"
+  />
+</div>
+`;
+
+exports[`Identicon should match snapshot with default props 1`] = `
+<div>
+  <div
+    class="identicon__image-border"
+    style="height: 46px; width: 46px; border-radius: 23px;"
+  />
+</div>
+`;
diff --git a/ui/components/ui/identicon/identicon.component.test.js b/ui/components/ui/identicon/identicon.component.test.js
@@ -1,52 +1,51 @@
 import React from 'react';
-import thunk from 'redux-thunk';
 import configureMockStore from 'redux-mock-store';
-import { mount } from 'enzyme';
-import Identicon from './identicon.component';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import Identicon from '.';
 
 describe('Identicon', () => {
-  const state = {
+  const mockState = {
     metamask: {
+      provider: {
+        chainId: '0x99',
+      },
       useBlockie: false,
     },
   };
 
-  const middlewares = [thunk];
-  const mockStore = configureMockStore(middlewares);
-  const store = mockStore(state);
+  const mockStore = configureMockStore()(mockState);
 
-  it('renders empty identicon with no props', () => {
-    const wrapper = mount(<Identicon store={store} />);
+  it('should match snapshot with default props', () => {
+    const { container } = renderWithProvider(<Identicon />, mockStore);
 
-    expect(wrapper.find('div').prop('className')).toStrictEqual(
-      'identicon__image-border',
-    );
+    expect(container).toMatchSnapshot();
   });
 
-  it('renders custom image and add className props', () => {
-    const wrapper = mount(
-      <Identicon store={store} className="test-image" image="test-image" />,
-    );
+  it('should match snapshot with custom image and className props', () => {
+    const props = {
+      className: 'test-image',
+      image: 'test-image',
+    };
 
-    expect(wrapper.find('img.test-image').prop('className')).toStrictEqual(
-      'identicon test-image',
-    );
-    expect(wrapper.find('img.test-image').prop('src')).toStrictEqual(
-      'test-image',
+    const { container } = renderWithProvider(
+      <Identicon {...props} />,
+      mockStore,
     );
+
+    expect(container).toMatchSnapshot();
   });
 
-  it('renders div with address prop', () => {
-    const wrapper = mount(
-      <Identicon
-        store={store}
-        className="test-address"
-        address="0x0000000000000000000000000000000000000000"
-      />,
-    );
+  it('should match snapshot with address prop div', () => {
+    const props = {
+      className: 'test-address',
+      address: '0x0000000000000000000000000000000000000000',
+    };
 
-    expect(wrapper.find('div.test-address').prop('className')).toStrictEqual(
-      'identicon test-address',
+    const { container } = renderWithProvider(
+      <Identicon {...props} />,
+      mockStore,
     );
+
+    expect(container).toMatchSnapshot();
   });
 });
diff --git a/ui/components/ui/metafox-logo/__snapshots__/metafox-logo.component.test.js.snap b/ui/components/ui/metafox-logo/__snapshots__/metafox-logo.component.test.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MetaFoxLogo does not set icon height and width when unsetIconHeight is true 1`] = `
+<div>
+  <div
+    class="app-header__logo-container"
+    data-testid="app-header-logo"
+  >
+    <div />
+    <img
+      alt=""
+      class="app-header__metafox-logo--icon"
+      src="./images/logo/metamask-fox.svg"
+    />
+  </div>
+</div>
+`;
+
+exports[`MetaFoxLogo should match snapshot with img width and height default set to 42 1`] = `
+<div>
+  <div
+    class="app-header__logo-container"
+    data-testid="app-header-logo"
+  >
+    <div />
+    <img
+      alt=""
+      class="app-header__metafox-logo--icon"
+      height="42"
+      src="./images/logo/metamask-fox.svg"
+      width="42"
+    />
+  </div>
+</div>
+`;
diff --git a/ui/components/ui/metafox-logo/metafox-logo.component.test.js b/ui/components/ui/metafox-logo/metafox-logo.component.test.js
@@ -1,27 +1,22 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import MetaFoxLogo from '.';
 
+// eslint-disable-next-line react/display-name
+jest.mock('./horizontal-logo.js', () => () => {
+  return <div></div>;
+});
+
 describe('MetaFoxLogo', () => {
-  it('sets icon height and width to 42 by default', () => {
-    const wrapper = mount(<MetaFoxLogo />);
+  it('should match snapshot with img width and height default set to 42', () => {
+    const { container } = renderWithProvider(<MetaFoxLogo />);
 
-    expect(
-      wrapper.find('img.app-header__metafox-logo--icon').prop('width'),
-    ).toStrictEqual(42);
-    expect(
-      wrapper.find('img.app-header__metafox-logo--icon').prop('height'),
-    ).toStrictEqual(42);
+    expect(container).toMatchSnapshot();
   });
 
   it('does not set icon height and width when unsetIconHeight is true', () => {
-    const wrapper = mount(<MetaFoxLogo unsetIconHeight />);
+    const { container } = renderWithProvider(<MetaFoxLogo unsetIconHeight />);
 
-    expect(
-      wrapper.find('img.app-header__metafox-logo--icon').prop('width'),
-    ).toBeUndefined();
-    expect(
-      wrapper.find('img.app-header__metafox-logo--icon').prop('height'),
-    ).toBeUndefined();
+    expect(container).toMatchSnapshot();
   });
 });