From 6640973858af05fca508a45449214044be7d77f4 Mon Sep 17 00:00:00 2001 From: ryanml Date: Thu, 20 May 2021 11:28:25 -0700 Subject: [PATCH] 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 --- ...rm-page-container-header.component.test.js | 5 + .../advanced-tab-content-component.test.js | 1 + ...gas-modal-page-container-component.test.js | 3 + ui/components/app/menu-bar/menu-bar.test.js | 25 ++-- .../confirm-remove-account.test.js | 2 + .../send-content.component.test.js | 7 +- .../advanced-tab.component.test.js | 8 ++ .../__snapshots__/intro-popup.test.js.snap | 9 -- ui/pages/swaps/intro-popup/index.js | 1 - ui/pages/swaps/intro-popup/index.scss | 71 ------------ ui/pages/swaps/intro-popup/intro-popup.js | 108 ------------------ .../swaps/intro-popup/intro-popup.test.js | 24 ---- 12 files changed, 42 insertions(+), 222 deletions(-) delete mode 100644 ui/pages/swaps/intro-popup/__snapshots__/intro-popup.test.js.snap delete mode 100644 ui/pages/swaps/intro-popup/index.js delete mode 100644 ui/pages/swaps/intro-popup/index.scss delete mode 100644 ui/pages/swaps/intro-popup/intro-popup.js delete mode 100644 ui/pages/swaps/intro-popup/intro-popup.test.js diff --git a/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.test.js b/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.test.js index 864979f8dc97..98c1169b2d97 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.test.js +++ b/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', () => { diff --git a/ui/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content-component.test.js b/ui/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content-component.test.js index de8ec3b80c18..4a7f86284a0c 100644 --- a/ui/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content-component.test.js +++ b/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} />, ); }); diff --git a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-component.test.js b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-component.test.js index 2094d4b5400e..d88a3ab98690 100644 --- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container-component.test.js +++ b/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', () => { , { context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } }, ); @@ -202,6 +204,7 @@ describe('GasModalPageContainer Component', () => { customGasLimitInHex="mockCustomGasLimitInHex" insufficientBalance={false} disableSave={false} + customPriceIsExcessive={false} hideBasic />, ); diff --git a/ui/components/app/menu-bar/menu-bar.test.js b/ui/components/app/menu-bar/menu-bar.test.js index 4a625f717e52..89f93371735e 100644 --- a/ui/components/app/menu-bar/menu-bar.test.js +++ b/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( , ); - 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( @@ -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')(); - wrapper.update(); - expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true); + await waitFor(() => { + accountDetailsMenu.prop('onClose')(); + wrapper.update(); + expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true); + }); }); }); diff --git a/ui/components/app/modals/confirm-remove-account/confirm-remove-account.test.js b/ui/components/app/modals/confirm-remove-account/confirm-remove-account.test.js index fd89e96f8530..da59aeffa6d3 100644 --- a/ui/components/app/modals/confirm-remove-account/confirm-remove-account.test.js +++ b/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(); diff --git a/ui/pages/send/send-content/send-content.component.test.js b/ui/pages/send/send-content/send-content.component.test.js index ed4485d76d7f..0e4eb69d81f0 100644 --- a/ui/pages/send/send-content/send-content.component.test.js +++ b/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(, { + wrapper = shallow(, { context: { t: (str) => `${str}_t` }, }); }); diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js b/ui/pages/settings/advanced-tab/advanced-tab.component.test.js index 2cf193f5279e..eb78d3c21b0b 100644 --- a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js +++ b/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: { diff --git a/ui/pages/swaps/intro-popup/__snapshots__/intro-popup.test.js.snap b/ui/pages/swaps/intro-popup/__snapshots__/intro-popup.test.js.snap deleted file mode 100644 index d9d0324df2bc..000000000000 --- a/ui/pages/swaps/intro-popup/__snapshots__/intro-popup.test.js.snap +++ /dev/null @@ -1,9 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`IntroPopup renders the component with initial props 1`] = ` -
-
-
-`; diff --git a/ui/pages/swaps/intro-popup/index.js b/ui/pages/swaps/intro-popup/index.js deleted file mode 100644 index 6460538b9776..000000000000 --- a/ui/pages/swaps/intro-popup/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './intro-popup'; diff --git a/ui/pages/swaps/intro-popup/index.scss b/ui/pages/swaps/intro-popup/index.scss deleted file mode 100644 index 48d79c5f99bd..000000000000 --- a/ui/pages/swaps/intro-popup/index.scss +++ /dev/null @@ -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; - } - } -} diff --git a/ui/pages/swaps/intro-popup/intro-popup.js b/ui/pages/swaps/intro-popup/intro-popup.js deleted file mode 100644 index 658c84bb9aa0..000000000000 --- a/ui/pages/swaps/intro-popup/intro-popup.js +++ /dev/null @@ -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 ( -
- { - productOverviewDismissedEvent(); - onClose(); - }} - footerClassName="intro-popup__footer" - footer={ - - } - > -
-
- {t('swapIntroLiquiditySourcesLabel')} -
-
- -
-
- {t('swapIntroLearnMoreHeader')} -
-
{ - global.platform.openTab({ - url: - 'https://medium.com/metamask/introducing-metamask-swaps-84318c643785', - }); - blogPostVisitedEvent(); - }} - > - {t('swapIntroLearnMoreLink')} -
-
{ - global.platform.openTab({ - url: - 'https://diligence.consensys.net/audits/private/lsjipyllnw2/', - }); - contractAuditVisitedEvent(); - }} - > - {t('swapLearnMoreContractsAuditReview')} -
-
- -
- ); -} - -IntroPopup.propTypes = { - onClose: PropTypes.func.isRequired, -}; diff --git a/ui/pages/swaps/intro-popup/intro-popup.test.js b/ui/pages/swaps/intro-popup/intro-popup.test.js deleted file mode 100644 index 049c73091f01..000000000000 --- a/ui/pages/swaps/intro-popup/intro-popup.test.js +++ /dev/null @@ -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(, store); - expect(container).toMatchSnapshot(); - }); -});