Fixing jest component test output errors (#11139)

* Adding missing required props to component tests

* Removing unused IntroPopup component

* Mocking useLayoutEffect as useEffect in confirm-page-container-header.component.test.js

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

@@ -8,6 +8,11 @@ import ConfirmPageContainerHeader from './confirm-page-container-header.componen
 
 const util = require('../../../../../app/scripts/lib/util');
 
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useLayoutEffect: jest.requireActual('react').useEffect,
+}));
+
 describe('Confirm Detail Row Component', () => {
   describe('render', () => {
     it('should render a div with a confirm-page-container-header class', () => {

ui/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content-component.test.js

@@ -23,6 +23,7 @@ describe('AdvancedTabContent Component', () => {
         insufficientBalance={false}
         customPriceIsSafe
         isSpeedUp={false}
+        customPriceIsExcessive={false}
       />,
     );
   });

ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-component.test.js

@@ -76,6 +76,7 @@ describe('GasModalPageContainer Component', () => {
         customGasLimitInHex="mockCustomGasLimitInHex"
         insufficientBalance={false}
         disableSave={false}
+        customPriceIsExcessive={false}
       />,
     );
   });
@@ -124,6 +125,7 @@ describe('GasModalPageContainer Component', () => {
         <GasModalPageContainer
           fetchBasicGasEstimates={propsMethodSpies.fetchBasicGasEstimates}
           fetchGasEstimates={propsMethodSpies.fetchGasEstimates}
+          customPriceIsExcessive={false}
         />,
         { context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } },
       );
@@ -202,6 +204,7 @@ describe('GasModalPageContainer Component', () => {
           customGasLimitInHex="mockCustomGasLimitInHex"
           insufficientBalance={false}
           disableSave={false}
+          customPriceIsExcessive={false}
           hideBasic
         />,
       );

ui/components/app/menu-bar/menu-bar.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
+import { waitFor } from '@testing-library/react';
 import { mountWithRouter } from '../../../../test/lib/render-helpers';
 import { ROPSTEN_CHAIN_ID } from '../../../../shared/constants/network';
 import MenuBar from './menu-bar';
@@ -30,21 +31,25 @@ const initState = {
 const mockStore = configureStore();
 
 describe('MenuBar', () => {
-  it('opens account detail menu when account options is clicked', () => {
+  it('opens account detail menu when account options is clicked', async () => {
     const store = mockStore(initState);
     const wrapper = mountWithRouter(
       <Provider store={store}>
         <MenuBar />
       </Provider>,
     );
-    expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true);
+    await waitFor(() =>
+      expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true),
+    );
     const accountOptions = wrapper.find('.menu-bar__account-options');
     accountOptions.simulate('click');
     wrapper.update();
-    expect(wrapper.exists('AccountOptionsMenu')).toStrictEqual(true);
+    await waitFor(() =>
+      expect(wrapper.exists('AccountOptionsMenu')).toStrictEqual(true),
+    );
   });
 
-  it('sets accountDetailsMenuOpen to false when closed', () => {
+  it('sets accountDetailsMenuOpen to false when closed', async () => {
     const store = mockStore(initState);
     const wrapper = mountWithRouter(
       <Provider store={store}>
@@ -54,10 +59,14 @@ describe('MenuBar', () => {
     const accountOptions = wrapper.find('.menu-bar__account-options');
     accountOptions.simulate('click');
     wrapper.update();
-    expect(wrapper.exists('AccountOptionsMenu')).toStrictEqual(true);
+    await waitFor(() =>
+      expect(wrapper.exists('AccountOptionsMenu')).toStrictEqual(true),
+    );
     const accountDetailsMenu = wrapper.find('AccountOptionsMenu');
-    accountDetailsMenu.prop('onClose')();
+    await waitFor(() => {
-    wrapper.update();
+      accountDetailsMenu.prop('onClose')();
-    expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true);
+      wrapper.update();
+      expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true);
+    });
   });
 });

ui/components/app/modals/confirm-remove-account/confirm-remove-account.test.js

@@ -21,6 +21,8 @@ describe('Confirm Remove Account', () => {
       address: '0x0',
       name: 'Account 1',
     },
+    chainId: '0x0',
+    rpcPrefs: {},
   };
 
   const mockStore = configureStore();

ui/pages/send/send-content/send-content.component.test.js

@@ -12,8 +12,13 @@ import SendAssetRow from './send-asset-row/send-asset-row.container';
 describe('SendContent Component', () => {
   let wrapper;
 
+  const defaultProps = {
+    showHexData: true,
+    gasIsExcessive: false,
+  };
+
   beforeEach(() => {
-    wrapper = shallow(<SendContent showHexData />, {
+    wrapper = shallow(<SendContent {...defaultProps} />, {
       context: { t: (str) => `${str}_t` },
     });
   });

ui/pages/settings/advanced-tab/advanced-tab.component.test.js

@@ -15,6 +15,10 @@ describe('AdvancedTab Component', () => {
         setThreeBoxSyncingPermission={() => undefined}
         threeBoxDisabled
         threeBoxSyncingAllowed={false}
+        useLedgerLive={false}
+        setLedgerLivePreference={() => undefined}
+        setDismissSeedBackUpReminder={() => undefined}
+        dismissSeedBackUpReminder={false}
       />,
       {
         context: {
@@ -37,6 +41,10 @@ describe('AdvancedTab Component', () => {
         setThreeBoxSyncingPermission={() => undefined}
         threeBoxDisabled
         threeBoxSyncingAllowed={false}
+        useLedgerLive={false}
+        setLedgerLivePreference={() => undefined}
+        setDismissSeedBackUpReminder={() => undefined}
+        dismissSeedBackUpReminder={false}
       />,
       {
         context: {

ui/pages/swaps/intro-popup/__snapshots__/intro-popup.test.js.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`IntroPopup renders the component with initial props 1`] = `
-<div>
-  <div
-    class="intro-popup"
-  />
-</div>
-`;

ui/pages/swaps/intro-popup/index.js

@@ -1 +0,0 @@
-export { default } from './intro-popup';

ui/pages/swaps/intro-popup/index.scss

@@ -1,71 +0,0 @@
-.intro-popup {
-  &__liquidity-sources-label {
-    @include H7;
-
-    font-weight: bold;
-    margin-bottom: 6px;
-    color: $Black-100;
-
-    @media screen and (min-width: 576px) {
-      @include H6;
-    }
-  }
-
-  &__learn-more-header {
-    @include H4;
-
-    font-weight: bold;
-    margin-bottom: 12px;
-    margin-top: 16px;
-  }
-
-  &__learn-more-link {
-    @include H6;
-
-    color: $Blue-500;
-    margin-bottom: 8px;
-    cursor: pointer;
-  }
-
-  &__content {
-    margin-left: 24px;
-
-    > img {
-      width: 96%;
-      margin-left: -9px;
-    }
-  }
-
-  &__footer {
-    border-top: none;
-  }
-
-  &__button {
-    border-radius: 100px;
-    height: 44px;
-  }
-
-  &__source-logo-container {
-    width: 276px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 20px 16px;
-    background: $Grey-000;
-    border-radius: 8px;
-
-    @media screen and (min-width: 576px) {
-      width: 412px;
-
-      img {
-        width: 364px;
-      }
-    }
-  }
-
-  &__popover {
-    @media screen and (min-width: 576px) {
-      width: 460px;
-    }
-  }
-}

ui/pages/swaps/intro-popup/intro-popup.js

@@ -1,108 +0,0 @@
-import React, { useContext } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { setSwapsFromToken } from '../../../ducks/swaps/swaps';
-import { I18nContext } from '../../../contexts/i18n';
-import { BUILD_QUOTE_ROUTE } from '../../../helpers/constants/routes';
-import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
-import { getSwapsDefaultToken } from '../../../selectors';
-import Button from '../../../components/ui/button';
-import Popover from '../../../components/ui/popover';
-
-export default function IntroPopup({ onClose }) {
-  const dispatch = useDispatch(useDispatch);
-  const history = useHistory();
-  const t = useContext(I18nContext);
-
-  const swapsDefaultToken = useSelector(getSwapsDefaultToken);
-  const enteredSwapsEvent = useNewMetricEvent({
-    event: 'Swaps Opened',
-    properties: {
-      source: 'Intro popup',
-      active_currency: swapsDefaultToken.symbol,
-    },
-    category: 'swaps',
-  });
-  const blogPostVisitedEvent = useNewMetricEvent({
-    event: 'Blog Post Visited ',
-    category: 'swaps',
-  });
-  const contractAuditVisitedEvent = useNewMetricEvent({
-    event: 'Contract Audit Visited',
-    category: 'swaps',
-  });
-  const productOverviewDismissedEvent = useNewMetricEvent({
-    event: 'Product Overview Dismissed',
-    category: 'swaps',
-  });
-
-  return (
-    <div className="intro-popup">
-      <Popover
-        className="intro-popup__popover"
-        title={t('swapIntroPopupTitle')}
-        subtitle={t('swapIntroPopupSubTitle')}
-        onClose={() => {
-          productOverviewDismissedEvent();
-          onClose();
-        }}
-        footerClassName="intro-popup__footer"
-        footer={
-          <Button
-            type="confirm"
-            className="intro-popup__button"
-            onClick={() => {
-              onClose();
-              enteredSwapsEvent();
-              dispatch(setSwapsFromToken(swapsDefaultToken));
-              history.push(BUILD_QUOTE_ROUTE);
-            }}
-          >
-            {t('swapStartSwapping')}
-          </Button>
-        }
-      >
-        <div className="intro-popup__content">
-          <div className="intro-popup__liquidity-sources-label">
-            {t('swapIntroLiquiditySourcesLabel')}
-          </div>
-          <div className="intro-popup__source-logo-container">
-            <img src="images/source-logos-all.svg" alt="" />
-          </div>
-          <div className="intro-popup__learn-more-header">
-            {t('swapIntroLearnMoreHeader')}
-          </div>
-          <div
-            className="intro-popup__learn-more-link"
-            onClick={() => {
-              global.platform.openTab({
-                url:
-                  'https://medium.com/metamask/introducing-metamask-swaps-84318c643785',
-              });
-              blogPostVisitedEvent();
-            }}
-          >
-            {t('swapIntroLearnMoreLink')}
-          </div>
-          <div
-            className="intro-popup__learn-more-link"
-            onClick={() => {
-              global.platform.openTab({
-                url:
-                  'https://diligence.consensys.net/audits/private/lsjipyllnw2/',
-              });
-              contractAuditVisitedEvent();
-            }}
-          >
-            {t('swapLearnMoreContractsAuditReview')}
-          </div>
-        </div>
-      </Popover>
-    </div>
-  );
-}
-
-IntroPopup.propTypes = {
-  onClose: PropTypes.func.isRequired,
-};

ui/pages/swaps/intro-popup/intro-popup.test.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import configureMockStore from 'redux-mock-store';
-
-import {
-  renderWithProvider,
-  createSwapsMockStore,
-} from '../../../../test/jest';
-import IntroPopup from '.';
-
-const createProps = (customProps = {}) => {
-  return {
-    onClose: jest.fn(),
-    ...customProps,
-  };
-};
-
-describe('IntroPopup', () => {
-  it('renders the component with initial props', () => {
-    const store = configureMockStore()(createSwapsMockStore());
-    const props = createProps();
-    const { container } = renderWithProvider(<IntroPopup {...props} />, store);
-    expect(container).toMatchSnapshot();
-  });
-});