m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Fixing jest component test output errors (#11139)

Browse Source 
* Adding missing required props to component tests

* Removing unused IntroPopup component

* Mocking useLayoutEffect as useEffect in confirm-page-container-header.component.test.js
This commit is contained in:
ryanml 2021-05-20 11:28:25 -07:00 committed by GitHub
parent 2972e78444
commit 6640973858
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 42 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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', () => {

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

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

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

@ -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
/>,
);

19
ui/components/app/menu-bar/menu-bar.test.js
View File

@ -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');
await waitFor(() => {
accountDetailsMenu.prop('onClose')();
wrapper.update();
expect(!wrapper.exists('AccountOptionsMenu')).toStrictEqual(true);
});
});
});

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

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

7
ui/pages/send/send-content/send-content.component.test.js
View File

@ -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` },
});
});

8
ui/pages/settings/advanced-tab/advanced-tab.component.test.js
View File

@ -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: {

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

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

1
ui/pages/swaps/intro-popup/index.js
View File

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

71
ui/pages/swaps/intro-popup/index.scss
View File

@ -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;
}
}
}

108
ui/pages/swaps/intro-popup/intro-popup.js
View File

@ -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,
};

24
ui/pages/swaps/intro-popup/intro-popup.test.js
View File

@ -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();
});
});