mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 09:57:02 +01:00
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
This commit is contained in:
Thomas Huang
GitHub
parent
83ec64ddd2
commit
646dbaaff2
@ -12,12 +12,15 @@
|
|||||||
"previousModalState": {
|
"previousModalState": {
|
||||||
"name": null
|
"name": null
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
"warning": null
|
||||||
},
|
},
|
||||||
"history": {
|
"history": {
|
||||||
"mostRecentOverviewPage": "/"
|
"mostRecentOverviewPage": "/mostRecentOverviewPage"
|
||||||
},
|
},
|
||||||
"metamask": {
|
"metamask": {
|
||||||
|
"usePhishDetect": true,
|
||||||
|
"participateInMetaMetrics": false,
|
||||||
"gasEstimateType": "fee-market",
|
"gasEstimateType": "fee-market",
|
||||||
"gasFeeEstimates": {
|
"gasFeeEstimates": {
|
||||||
"low": {
|
"low": {
|
||||||
@ -46,6 +49,7 @@
|
|||||||
"priorityFeeTrend": "down",
|
"priorityFeeTrend": "down",
|
||||||
"networkCongestion": 0.90625
|
"networkCongestion": 0.90625
|
||||||
},
|
},
|
||||||
|
"snaps": [{}],
|
||||||
"preferences": {
|
"preferences": {
|
||||||
"hideZeroBalanceTokens": false,
|
"hideZeroBalanceTokens": false,
|
||||||
"showFiatInTestnets": false,
|
"showFiatInTestnets": false,
|
||||||
@ -241,20 +245,6 @@
|
|||||||
"unapprovedEncryptionPublicKeyMsgCount": 0,
|
"unapprovedEncryptionPublicKeyMsgCount": 0,
|
||||||
"unapprovedTypedMessages": {},
|
"unapprovedTypedMessages": {},
|
||||||
"unapprovedTypedMessagesCount": 0,
|
"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,
|
"useTokenDetection": true,
|
||||||
"advancedGasFee": {
|
"advancedGasFee": {
|
||||||
"maxBaseFee": "75",
|
"maxBaseFee": "75",
|
||||||
@ -1284,5 +1274,24 @@
|
|||||||
"origin": "tmashuang.github.io"
|
"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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,9 +8,10 @@ const Dropdown = ({
|
|||||||
disabled = false,
|
disabled = false,
|
||||||
onChange,
|
onChange,
|
||||||
options,
|
options,
|
||||||
selectedOption = null,
|
selectedOption = '',
|
||||||
style,
|
style,
|
||||||
title,
|
title,
|
||||||
|
'data-testid': dataTestId,
|
||||||
}) => {
|
}) => {
|
||||||
const _onChange = useCallback(
|
const _onChange = useCallback(
|
||||||
(event) => {
|
(event) => {
|
||||||
@ -25,6 +26,7 @@ const Dropdown = ({
|
|||||||
<div className={classnames('dropdown', className)}>
|
<div className={classnames('dropdown', className)}>
|
||||||
<select
|
<select
|
||||||
className="dropdown__select"
|
className="dropdown__select"
|
||||||
|
data-testid={dataTestId}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
title={title}
|
title={title}
|
||||||
onChange={_onChange}
|
onChange={_onChange}
|
||||||
@ -78,6 +80,10 @@ Dropdown.propTypes = {
|
|||||||
* Add inline style for the component
|
* Add inline style for the component
|
||||||
*/
|
*/
|
||||||
style: PropTypes.object,
|
style: PropTypes.object,
|
||||||
|
/**
|
||||||
|
* Unit testing test id
|
||||||
|
*/
|
||||||
|
'data-testid': PropTypes.string,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Dropdown;
|
export default Dropdown;
|
||||||
|
|||||||
@ -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>
|
||||||
|
`;
|
||||||
@ -1,52 +1,51 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import thunk from 'redux-thunk';
|
|
||||||
import configureMockStore from 'redux-mock-store';
|
import configureMockStore from 'redux-mock-store';
|
||||||
import { mount } from 'enzyme';
|
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||||
import Identicon from './identicon.component';
|
import Identicon from '.';
|
||||||
|
|
||||||
describe('Identicon', () => {
|
describe('Identicon', () => {
|
||||||
const state = {
|
const mockState = {
|
||||||
metamask: {
|
metamask: {
|
||||||
|
provider: {
|
||||||
|
chainId: '0x99',
|
||||||
|
},
|
||||||
useBlockie: false,
|
useBlockie: false,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const middlewares = [thunk];
|
const mockStore = configureMockStore()(mockState);
|
||||||
const mockStore = configureMockStore(middlewares);
|
|
||||||
const store = mockStore(state);
|
|
||||||
|
|
||||||
it('renders empty identicon with no props', () => {
|
it('should match snapshot with default props', () => {
|
||||||
const wrapper = mount(<Identicon store={store} />);
|
const { container } = renderWithProvider(<Identicon />, mockStore);
|
||||||
|
|
||||||
expect(wrapper.find('div').prop('className')).toStrictEqual(
|
expect(container).toMatchSnapshot();
|
||||||
'identicon__image-border',
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders custom image and add className props', () => {
|
it('should match snapshot with custom image and className props', () => {
|
||||||
const wrapper = mount(
|
const props = {
|
||||||
<Identicon store={store} className="test-image" image="test-image" />,
|
className: 'test-image',
|
||||||
|
image: 'test-image',
|
||||||
|
};
|
||||||
|
|
||||||
|
const { container } = renderWithProvider(
|
||||||
|
<Identicon {...props} />,
|
||||||
|
mockStore,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(wrapper.find('img.test-image').prop('className')).toStrictEqual(
|
expect(container).toMatchSnapshot();
|
||||||
'identicon test-image',
|
|
||||||
);
|
|
||||||
expect(wrapper.find('img.test-image').prop('src')).toStrictEqual(
|
|
||||||
'test-image',
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders div with address prop', () => {
|
it('should match snapshot with address prop div', () => {
|
||||||
const wrapper = mount(
|
const props = {
|
||||||
<Identicon
|
className: 'test-address',
|
||||||
store={store}
|
address: '0x0000000000000000000000000000000000000000',
|
||||||
className="test-address"
|
};
|
||||||
address="0x0000000000000000000000000000000000000000"
|
|
||||||
/>,
|
const { container } = renderWithProvider(
|
||||||
|
<Identicon {...props} />,
|
||||||
|
mockStore,
|
||||||
);
|
);
|
||||||
|
|
||||||
expect(wrapper.find('div.test-address').prop('className')).toStrictEqual(
|
expect(container).toMatchSnapshot();
|
||||||
'identicon test-address',
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -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>
|
||||||
|
`;
|
||||||
@ -1,27 +1,22 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { mount } from 'enzyme';
|
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||||
import MetaFoxLogo from '.';
|
import MetaFoxLogo from '.';
|
||||||
|
|
||||||
describe('MetaFoxLogo', () => {
|
// eslint-disable-next-line react/display-name
|
||||||
it('sets icon height and width to 42 by default', () => {
|
jest.mock('./horizontal-logo.js', () => () => {
|
||||||
const wrapper = mount(<MetaFoxLogo />);
|
return <div></div>;
|
||||||
|
});
|
||||||
|
|
||||||
expect(
|
describe('MetaFoxLogo', () => {
|
||||||
wrapper.find('img.app-header__metafox-logo--icon').prop('width'),
|
it('should match snapshot with img width and height default set to 42', () => {
|
||||||
).toStrictEqual(42);
|
const { container } = renderWithProvider(<MetaFoxLogo />);
|
||||||
expect(
|
|
||||||
wrapper.find('img.app-header__metafox-logo--icon').prop('height'),
|
expect(container).toMatchSnapshot();
|
||||||
).toStrictEqual(42);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('does not set icon height and width when unsetIconHeight is true', () => {
|
it('does not set icon height and width when unsetIconHeight is true', () => {
|
||||||
const wrapper = mount(<MetaFoxLogo unsetIconHeight />);
|
const { container } = renderWithProvider(<MetaFoxLogo unsetIconHeight />);
|
||||||
|
|
||||||
expect(
|
expect(container).toMatchSnapshot();
|
||||||
wrapper.find('img.app-header__metafox-logo--icon').prop('width'),
|
|
||||||
).toBeUndefined();
|
|
||||||
expect(
|
|
||||||
wrapper.find('img.app-header__metafox-logo--icon').prop('height'),
|
|
||||||
).toBeUndefined();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -0,0 +1,135 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Reveal Secret Recovery Phrase should match snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="reveal-seed-phrase"
|
||||||
|
data-testid="reveal-seed-phrase"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="seed-phrase__sections"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="seed-phrase__main"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="box box--margin-bottom-4 box--flex-direction-row"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
>
|
||||||
|
< Back
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="first-time-flow__header"
|
||||||
|
>
|
||||||
|
Secret Recovery Phrase
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="first-time-flow__text-block"
|
||||||
|
>
|
||||||
|
Your Secret Recovery Phrase makes it easy to back up and restore your account.
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="first-time-flow__text-block"
|
||||||
|
>
|
||||||
|
WARNING: Never disclose your Secret Recovery Phrase. Anyone with this phrase can take your Ether forever.
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="reveal-seed-phrase__secret"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="reveal-seed-phrase__secret-words notranslate reveal-seed-phrase__secret-words--hidden"
|
||||||
|
data-testid="hidden-seed-phrase"
|
||||||
|
>
|
||||||
|
debris dizzy just program just float decrease vacant alarm reduce speak stadium
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="reveal-seed-phrase__secret-blocker"
|
||||||
|
data-testid="reveal-seed-blocker"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="var(--color-overlay-inverse)"
|
||||||
|
height="35px"
|
||||||
|
id="Capa_1"
|
||||||
|
style="enable-background: new 0 0 401.998 401.998;"
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 401.998 401.998"
|
||||||
|
width="28px"
|
||||||
|
x="0px"
|
||||||
|
xml:space="preserve"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
y="0px"
|
||||||
|
>
|
||||||
|
<g>
|
||||||
|
<path
|
||||||
|
d="M357.45,190.721c-5.331-5.33-11.8-7.993-19.417-7.993h-9.131v-54.821c0-35.022-12.559-65.093-37.685-90.218 C266.093,12.563,236.025,0,200.998,0c-35.026,0-65.1,12.563-90.222,37.688C85.65,62.814,73.091,92.884,73.091,127.907v54.821 h-9.135c-7.611,0-14.084,2.663-19.414,7.993c-5.33,5.326-7.994,11.799-7.994,19.417V374.59c0,7.611,2.665,14.086,7.994,19.417 c5.33,5.325,11.803,7.991,19.414,7.991H338.04c7.617,0,14.085-2.663,19.417-7.991c5.325-5.331,7.994-11.806,7.994-19.417V210.135 C365.455,202.523,362.782,196.051,357.45,190.721z M274.087,182.728H127.909v-54.821c0-20.175,7.139-37.402,21.414-51.675 c14.277-14.275,31.501-21.411,51.678-21.411c20.179,0,37.399,7.135,51.677,21.411c14.271,14.272,21.409,31.5,21.409,51.675V182.728 z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<div
|
||||||
|
class="reveal-seed-phrase__reveal-button"
|
||||||
|
>
|
||||||
|
Click here to reveal secret words
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="seed-phrase__side"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="first-time-flow__text-block"
|
||||||
|
>
|
||||||
|
Tips:
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="first-time-flow__text-block"
|
||||||
|
>
|
||||||
|
Store this phrase in a password manager like 1Password.
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="first-time-flow__text-block"
|
||||||
|
>
|
||||||
|
Write this phrase on a piece of paper and store in a secure location. If you want even more security, write it down on multiple pieces of paper and store each in 2 - 3 different locations.
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="first-time-flow__text-block"
|
||||||
|
>
|
||||||
|
Memorize this phrase.
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="first-time-flow__text-block"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
class="reveal-seed-phrase__export-text"
|
||||||
|
>
|
||||||
|
Download this Secret Recovery Phrase and keep it stored safely on an external encrypted hard drive or storage medium.
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="reveal-seed-phrase__buttons"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="button btn--rounded btn-secondary first-time-flow__button"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Remind me later
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="button btn--rounded btn-primary first-time-flow__button"
|
||||||
|
disabled=""
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -112,12 +112,16 @@ export default class RevealSeedPhrase extends PureComponent {
|
|||||||
'reveal-seed-phrase__secret-words--hidden': !isShowingSeedPhrase,
|
'reveal-seed-phrase__secret-words--hidden': !isShowingSeedPhrase,
|
||||||
},
|
},
|
||||||
)}
|
)}
|
||||||
|
data-testid={
|
||||||
|
isShowingSeedPhrase ? 'showing-seed-phrase' : 'hidden-seed-phrase'
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{seedPhrase}
|
{seedPhrase}
|
||||||
</div>
|
</div>
|
||||||
{!isShowingSeedPhrase && (
|
{!isShowingSeedPhrase && (
|
||||||
<div
|
<div
|
||||||
className="reveal-seed-phrase__secret-blocker"
|
className="reveal-seed-phrase__secret-blocker"
|
||||||
|
data-testid="reveal-seed-blocker"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
this.context.trackEvent({
|
this.context.trackEvent({
|
||||||
category: EVENT.CATEGORIES.ONBOARDING,
|
category: EVENT.CATEGORIES.ONBOARDING,
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import sinon from 'sinon';
|
import sinon from 'sinon';
|
||||||
import { mount } from 'enzyme';
|
import { fireEvent } from '@testing-library/react';
|
||||||
import RevealSeedPhrase from './reveal-seed-phrase.container';
|
import configureMockStore from 'redux-mock-store';
|
||||||
|
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
|
||||||
|
import RevealSeedPhrase from '.';
|
||||||
|
|
||||||
describe('Reveal Secret Recovery Phrase', () => {
|
describe('Reveal Secret Recovery Phrase', () => {
|
||||||
let wrapper;
|
|
||||||
|
|
||||||
const TEST_SEED =
|
const TEST_SEED =
|
||||||
'debris dizzy just program just float decrease vacant alarm reduce speak stadium';
|
'debris dizzy just program just float decrease vacant alarm reduce speak stadium';
|
||||||
|
|
||||||
@ -18,31 +18,29 @@ describe('Reveal Secret Recovery Phrase', () => {
|
|||||||
setCompletedOnboarding: sinon.spy(),
|
setCompletedOnboarding: sinon.spy(),
|
||||||
};
|
};
|
||||||
|
|
||||||
beforeEach(() => {
|
const mockState = {
|
||||||
wrapper = mount(<RevealSeedPhrase.WrappedComponent {...props} />, {
|
metamask: {},
|
||||||
context: {
|
};
|
||||||
t: (str) => str,
|
|
||||||
trackEvent: () => undefined,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('secret recovery phrase', () => {
|
const mockStore = configureMockStore()(mockState);
|
||||||
const seedPhrase = wrapper.find(
|
|
||||||
'.reveal-seed-phrase__secret-words--hidden',
|
it('should match snapshot', () => {
|
||||||
|
const { container } = renderWithProvider(
|
||||||
|
<RevealSeedPhrase {...props} />,
|
||||||
|
mockStore,
|
||||||
);
|
);
|
||||||
expect(seedPhrase).toHaveLength(1);
|
|
||||||
expect(seedPhrase.text()).toStrictEqual(TEST_SEED);
|
expect(container).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('clicks to reveal', () => {
|
it('clicks to reveal shows seed phrase', () => {
|
||||||
const reveal = wrapper.find('.reveal-seed-phrase__secret-blocker');
|
const { queryByTestId } = renderWithProvider(
|
||||||
|
<RevealSeedPhrase {...props} />,
|
||||||
|
mockStore,
|
||||||
|
);
|
||||||
|
|
||||||
expect(wrapper.state().isShowingSeedPhrase).toStrictEqual(false);
|
fireEvent.click(queryByTestId('reveal-seed-blocker'));
|
||||||
reveal.simulate('click');
|
|
||||||
expect(wrapper.state().isShowingSeedPhrase).toStrictEqual(true);
|
|
||||||
|
|
||||||
const showSeed = wrapper.find('.reveal-seed-phrase__secret-words');
|
expect(queryByTestId('showing-seed-phrase')).toBeInTheDocument();
|
||||||
expect(showSeed).toHaveLength(1);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@ -0,0 +1,55 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`SendFooter Component Component Update should match snapshot when component updated with errors 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="page-container__footer"
|
||||||
|
>
|
||||||
|
<footer>
|
||||||
|
<button
|
||||||
|
class="button btn--rounded btn-secondary page-container__footer-button"
|
||||||
|
data-testid="page-container-footer-cancel"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
[cancel]
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="button btn--rounded btn-primary page-container__footer-button"
|
||||||
|
data-testid="page-container-footer-next"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
[next]
|
||||||
|
</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`SendFooter Component should match snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="page-container__footer"
|
||||||
|
>
|
||||||
|
<footer>
|
||||||
|
<button
|
||||||
|
class="button btn--rounded btn-secondary page-container__footer-button"
|
||||||
|
data-testid="page-container-footer-cancel"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="button btn--rounded btn-primary page-container__footer-button"
|
||||||
|
data-testid="page-container-footer-next"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,207 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { shallow } from 'enzyme';
|
|
||||||
import sinon from 'sinon';
|
|
||||||
import {
|
|
||||||
CONFIRM_TRANSACTION_ROUTE,
|
|
||||||
DEFAULT_ROUTE,
|
|
||||||
} from '../../../helpers/constants/routes';
|
|
||||||
import PageContainerFooter from '../../../components/ui/page-container/page-container-footer';
|
|
||||||
import { renderWithProvider } from '../../../../test/jest';
|
|
||||||
import SendFooter from './send-footer.component';
|
|
||||||
|
|
||||||
describe('SendFooter Component', () => {
|
|
||||||
let wrapper;
|
|
||||||
|
|
||||||
const propsMethodSpies = {
|
|
||||||
addToAddressBookIfNew: sinon.spy(),
|
|
||||||
cancelTx: sinon.spy(),
|
|
||||||
resetSendState: sinon.spy(),
|
|
||||||
sign: sinon.spy(),
|
|
||||||
update: sinon.spy(),
|
|
||||||
mostRecentOverviewPage: '/',
|
|
||||||
};
|
|
||||||
const historySpies = {
|
|
||||||
push: sinon.spy(),
|
|
||||||
};
|
|
||||||
const MOCK_EVENT = { preventDefault: () => undefined };
|
|
||||||
|
|
||||||
const renderShallow = (props) => {
|
|
||||||
return shallow(
|
|
||||||
<SendFooter
|
|
||||||
addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
|
|
||||||
resetSendState={propsMethodSpies.resetSendState}
|
|
||||||
cancelTx={propsMethodSpies.cancelTx}
|
|
||||||
disabled
|
|
||||||
draftTransactionID="ID"
|
|
||||||
history={historySpies}
|
|
||||||
sign={propsMethodSpies.sign}
|
|
||||||
to="mockTo"
|
|
||||||
toAccounts={['mockAccount']}
|
|
||||||
sendErrors={{}}
|
|
||||||
sendStage="DRAFT"
|
|
||||||
gasEstimateType="BASIC"
|
|
||||||
mostRecentOverviewPage="mostRecentOverviewPage"
|
|
||||||
{...props}
|
|
||||||
/>,
|
|
||||||
{ context: { t: (str) => str, trackEvent: () => ({}) } },
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
beforeAll(() => {
|
|
||||||
sinon.spy(SendFooter.prototype, 'onCancel');
|
|
||||||
sinon.spy(SendFooter.prototype, 'onSubmit');
|
|
||||||
});
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
wrapper = renderShallow();
|
|
||||||
});
|
|
||||||
|
|
||||||
afterEach(() => {
|
|
||||||
propsMethodSpies.resetSendState.resetHistory();
|
|
||||||
propsMethodSpies.cancelTx.resetHistory();
|
|
||||||
propsMethodSpies.addToAddressBookIfNew.resetHistory();
|
|
||||||
propsMethodSpies.resetSendState.resetHistory();
|
|
||||||
propsMethodSpies.sign.resetHistory();
|
|
||||||
propsMethodSpies.update.resetHistory();
|
|
||||||
historySpies.push.resetHistory();
|
|
||||||
SendFooter.prototype.onCancel.resetHistory();
|
|
||||||
SendFooter.prototype.onSubmit.resetHistory();
|
|
||||||
});
|
|
||||||
|
|
||||||
afterAll(() => {
|
|
||||||
sinon.restore();
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('onCancel', () => {
|
|
||||||
it('should call resetSendState', () => {
|
|
||||||
expect(propsMethodSpies.resetSendState.callCount).toStrictEqual(0);
|
|
||||||
wrapper.instance().onCancel();
|
|
||||||
expect(propsMethodSpies.resetSendState.callCount).toStrictEqual(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should call cancelTx', () => {
|
|
||||||
expect(propsMethodSpies.cancelTx.callCount).toStrictEqual(0);
|
|
||||||
wrapper.instance().onCancel();
|
|
||||||
expect(propsMethodSpies.cancelTx.callCount).toStrictEqual(1);
|
|
||||||
expect(propsMethodSpies.cancelTx.getCall(0).args[0]?.id).toStrictEqual(
|
|
||||||
'ID',
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should call history.push', () => {
|
|
||||||
expect(historySpies.push.callCount).toStrictEqual(0);
|
|
||||||
wrapper.instance().onCancel();
|
|
||||||
expect(historySpies.push.callCount).toStrictEqual(1);
|
|
||||||
expect(historySpies.push.getCall(0).args[0]).toStrictEqual(
|
|
||||||
'mostRecentOverviewPage',
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should call history.push with DEFAULT_ROUTE in edit stage', () => {
|
|
||||||
wrapper = renderShallow({ sendStage: 'EDIT' });
|
|
||||||
expect(historySpies.push.callCount).toStrictEqual(0);
|
|
||||||
wrapper.instance().onCancel();
|
|
||||||
expect(historySpies.push.callCount).toStrictEqual(1);
|
|
||||||
expect(historySpies.push.getCall(0).args[0]).toStrictEqual(DEFAULT_ROUTE);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('onSubmit', () => {
|
|
||||||
it('should call addToAddressBookIfNew with the correct params', () => {
|
|
||||||
wrapper.instance().onSubmit(MOCK_EVENT);
|
|
||||||
expect(propsMethodSpies.addToAddressBookIfNew.calledOnce).toStrictEqual(
|
|
||||||
true,
|
|
||||||
);
|
|
||||||
expect(
|
|
||||||
propsMethodSpies.addToAddressBookIfNew.getCall(0).args,
|
|
||||||
).toStrictEqual(['mockTo', ['mockAccount']]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should call props.sign whe submitting', async () => {
|
|
||||||
await wrapper.instance().onSubmit(MOCK_EVENT);
|
|
||||||
expect(propsMethodSpies.sign.calledOnce).toStrictEqual(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should call history.push', async () => {
|
|
||||||
await wrapper.instance().onSubmit(MOCK_EVENT);
|
|
||||||
expect(historySpies.push.callCount).toStrictEqual(1);
|
|
||||||
expect(historySpies.push.getCall(0).args[0]).toStrictEqual(
|
|
||||||
CONFIRM_TRANSACTION_ROUTE,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('render', () => {
|
|
||||||
beforeEach(() => {
|
|
||||||
wrapper = shallow(
|
|
||||||
<SendFooter
|
|
||||||
addToAddressBookIfNew={propsMethodSpies.addToAddressBookIfNew}
|
|
||||||
amount="mockAmount"
|
|
||||||
resetSendState={propsMethodSpies.resetSendState}
|
|
||||||
cancelTx={propsMethodSpies.cancelTx}
|
|
||||||
disabled
|
|
||||||
draftTransactionID="ID"
|
|
||||||
editingTransactionId="mockEditingTransactionId"
|
|
||||||
errors={{}}
|
|
||||||
from={{ address: 'mockAddress', balance: 'mockBalance' }}
|
|
||||||
gasLimit="mockGasLimit"
|
|
||||||
gasPrice="mockGasPrice"
|
|
||||||
gasTotal="mockGasTotal"
|
|
||||||
history={historySpies}
|
|
||||||
sendToken={{ mockProp: 'mockSendTokenProp' }}
|
|
||||||
sign={propsMethodSpies.sign}
|
|
||||||
to="mockTo"
|
|
||||||
toAccounts={['mockAccount']}
|
|
||||||
tokenBalance="mockTokenBalance"
|
|
||||||
unapprovedTxs={{}}
|
|
||||||
update={propsMethodSpies.update}
|
|
||||||
mostRecentOverviewPage="mostRecentOverviewPage"
|
|
||||||
/>,
|
|
||||||
{ context: { t: (str) => str, trackEvent: () => ({}) } },
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render a PageContainerFooter component', () => {
|
|
||||||
expect(wrapper.find(PageContainerFooter)).toHaveLength(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should pass the correct props to PageContainerFooter', () => {
|
|
||||||
const { onCancel, onSubmit, disabled } = wrapper
|
|
||||||
.find(PageContainerFooter)
|
|
||||||
.props();
|
|
||||||
expect(disabled).toStrictEqual(true);
|
|
||||||
|
|
||||||
expect(SendFooter.prototype.onSubmit.callCount).toStrictEqual(0);
|
|
||||||
onSubmit(MOCK_EVENT);
|
|
||||||
expect(SendFooter.prototype.onSubmit.callCount).toStrictEqual(1);
|
|
||||||
|
|
||||||
expect(SendFooter.prototype.onCancel.callCount).toStrictEqual(0);
|
|
||||||
onCancel();
|
|
||||||
expect(SendFooter.prototype.onCancel.callCount).toStrictEqual(1);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('Cancel Button', () => {
|
|
||||||
const renderFooter = (props) =>
|
|
||||||
renderWithProvider(
|
|
||||||
<SendFooter
|
|
||||||
disabled
|
|
||||||
mostRecentOverviewPage="mostRecentOverviewPage"
|
|
||||||
draftTransactionID="ID"
|
|
||||||
sendErrors={{}}
|
|
||||||
sendStage="DRAFT"
|
|
||||||
{...props}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
it('has a cancel button in footer', () => {
|
|
||||||
const { getByText } = renderFooter();
|
|
||||||
expect(getByText('Cancel')).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('has label changed to Reject in editing stage', () => {
|
|
||||||
const { getByText } = renderFooter({ sendStage: 'EDIT' });
|
|
||||||
expect(getByText('Reject')).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,87 +0,0 @@
|
|||||||
import sinon from 'sinon';
|
|
||||||
|
|
||||||
import { addToAddressBook, cancelTx } from '../../../store/actions';
|
|
||||||
import { resetSendState, signTransaction } from '../../../ducks/send';
|
|
||||||
|
|
||||||
let mapDispatchToProps;
|
|
||||||
|
|
||||||
jest.mock('react-redux', () => ({
|
|
||||||
connect: (_, md) => {
|
|
||||||
mapDispatchToProps = md;
|
|
||||||
return () => ({});
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
jest.mock('../../../store/actions', () => ({
|
|
||||||
addToAddressBook: jest.fn(),
|
|
||||||
cancelTx: jest.fn(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
jest.mock('../../../ducks/metamask/metamask', () => ({
|
|
||||||
getSendToAccounts: (s) => [`mockToAccounts:${s}`],
|
|
||||||
}));
|
|
||||||
|
|
||||||
jest.mock('../../../ducks/send', () => ({
|
|
||||||
getGasPrice: (s) => `mockGasPrice:${s}`,
|
|
||||||
getSendTo: (s) => `mockTo:${s}`,
|
|
||||||
getSendErrors: (s) => `mockSendErrors:${s}`,
|
|
||||||
getSendStage: (s) => `mockStage:${s}`,
|
|
||||||
getDraftTransaction: (s) => ({ id: `draftTransaction:${s}` }),
|
|
||||||
resetSendState: jest.fn(),
|
|
||||||
signTransaction: jest.fn(),
|
|
||||||
}));
|
|
||||||
|
|
||||||
require('./send-footer.container');
|
|
||||||
|
|
||||||
describe('send-footer container', () => {
|
|
||||||
describe('mapDispatchToProps()', () => {
|
|
||||||
let dispatchSpy;
|
|
||||||
let mapDispatchToPropsObject;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
dispatchSpy = sinon.spy();
|
|
||||||
mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy);
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('resetSendState()', () => {
|
|
||||||
it('should dispatch an action', () => {
|
|
||||||
mapDispatchToPropsObject.resetSendState();
|
|
||||||
expect(dispatchSpy.calledOnce).toStrictEqual(true);
|
|
||||||
expect(resetSendState).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('cancelTx()', () => {
|
|
||||||
it('should dispatch an action', () => {
|
|
||||||
const draftTansaction = { id: 'ID' };
|
|
||||||
mapDispatchToPropsObject.cancelTx(draftTansaction);
|
|
||||||
expect(dispatchSpy.calledOnce).toStrictEqual(true);
|
|
||||||
expect(cancelTx).toHaveBeenCalledTimes(1);
|
|
||||||
expect(cancelTx).toHaveBeenCalledWith(draftTansaction);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('sign()', () => {
|
|
||||||
it('should dispatch a signTransaction action', () => {
|
|
||||||
mapDispatchToPropsObject.sign();
|
|
||||||
expect(dispatchSpy.calledOnce).toStrictEqual(true);
|
|
||||||
expect(signTransaction).toHaveBeenCalledTimes(1);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('addToAddressBookIfNew()', () => {
|
|
||||||
it('should dispatch an action', () => {
|
|
||||||
mapDispatchToPropsObject.addToAddressBookIfNew(
|
|
||||||
'mockNewAddress',
|
|
||||||
[{ address: 'mockToAccounts' }],
|
|
||||||
'mockNickname',
|
|
||||||
);
|
|
||||||
expect(dispatchSpy.calledOnce).toStrictEqual(true);
|
|
||||||
expect(addToAddressBook).toHaveBeenCalledWith(
|
|
||||||
'0xmockNewAddress',
|
|
||||||
'mockNickname',
|
|
||||||
);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
136
ui/pages/send/send-footer/send-footer.test.js
Normal file
136
ui/pages/send/send-footer/send-footer.test.js
Normal file
@ -0,0 +1,136 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import configureMockStore from 'redux-mock-store';
|
||||||
|
import { fireEvent, waitFor } from '@testing-library/react';
|
||||||
|
import thunk from 'redux-thunk';
|
||||||
|
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||||
|
import mockState from '../../../../test/data/mock-state.json';
|
||||||
|
import {
|
||||||
|
CONFIRM_TRANSACTION_ROUTE,
|
||||||
|
DEFAULT_ROUTE,
|
||||||
|
} from '../../../helpers/constants/routes';
|
||||||
|
import { SEND_STAGES } from '../../../ducks/send';
|
||||||
|
import SendFooter from '.';
|
||||||
|
|
||||||
|
const mockResetSendState = jest.fn();
|
||||||
|
const mockSendTransaction = jest.fn();
|
||||||
|
const mockAddtoAddressBook = jest.fn();
|
||||||
|
const mockCancelTx = jest.fn();
|
||||||
|
|
||||||
|
jest.mock('../../../ducks/send/index.js', () => ({
|
||||||
|
...jest.requireActual('../../../ducks/send/index.js'),
|
||||||
|
signTransaction: () => mockSendTransaction,
|
||||||
|
resetSendState: () => mockResetSendState,
|
||||||
|
}));
|
||||||
|
|
||||||
|
jest.mock('../../../store/actions.js', () => ({
|
||||||
|
addToAddressBook: () => mockAddtoAddressBook,
|
||||||
|
cancelTx: () => mockCancelTx,
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe('SendFooter Component', () => {
|
||||||
|
const props = {
|
||||||
|
history: {
|
||||||
|
push: jest.fn(),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
props.history.push.mockReset();
|
||||||
|
});
|
||||||
|
|
||||||
|
const mockStore = configureMockStore([thunk])(mockState);
|
||||||
|
|
||||||
|
it('should match snapshot', () => {
|
||||||
|
const { container } = renderWithProvider(
|
||||||
|
<SendFooter {...props} />,
|
||||||
|
mockStore,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('onCancel', () => {
|
||||||
|
it('should call reset send state and route to recent page without cancelling tx', () => {
|
||||||
|
const { queryByText } = renderWithProvider(
|
||||||
|
<SendFooter {...props} />,
|
||||||
|
mockStore,
|
||||||
|
);
|
||||||
|
|
||||||
|
const cancelText = queryByText('Cancel');
|
||||||
|
fireEvent.click(cancelText);
|
||||||
|
|
||||||
|
expect(mockResetSendState).toHaveBeenCalled();
|
||||||
|
expect(mockCancelTx).not.toHaveBeenCalled();
|
||||||
|
expect(props.history.push).toHaveBeenCalledWith(
|
||||||
|
'/mostRecentOverviewPage',
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should reject/cancel tx when coming from tx editing and route to index', () => {
|
||||||
|
const sendDataState = {
|
||||||
|
...mockState,
|
||||||
|
send: {
|
||||||
|
currentTransactionUUID: '01',
|
||||||
|
draftTransactions: {
|
||||||
|
'01': {
|
||||||
|
id: '99',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
stage: SEND_STAGES.EDIT,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendStateStore = configureMockStore([thunk])(sendDataState);
|
||||||
|
|
||||||
|
const { queryByText } = renderWithProvider(
|
||||||
|
<SendFooter {...props} />,
|
||||||
|
sendStateStore,
|
||||||
|
);
|
||||||
|
|
||||||
|
const rejectText = queryByText('Reject');
|
||||||
|
fireEvent.click(rejectText);
|
||||||
|
|
||||||
|
expect(mockResetSendState).toHaveBeenCalled();
|
||||||
|
expect(mockCancelTx).toHaveBeenCalled();
|
||||||
|
expect(props.history.push).toHaveBeenCalledWith(DEFAULT_ROUTE);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('onSubmit', () => {
|
||||||
|
it('should', async () => {
|
||||||
|
const { queryByText } = renderWithProvider(
|
||||||
|
<SendFooter {...props} />,
|
||||||
|
mockStore,
|
||||||
|
);
|
||||||
|
|
||||||
|
const nextText = queryByText('Next');
|
||||||
|
fireEvent.click(nextText);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(mockAddtoAddressBook).toHaveBeenCalled();
|
||||||
|
expect(mockSendTransaction).toHaveBeenCalled();
|
||||||
|
expect(props.history.push).toHaveBeenCalledWith(
|
||||||
|
CONFIRM_TRANSACTION_ROUTE,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Component Update', () => {
|
||||||
|
it('should match snapshot when component updated with errors', () => {
|
||||||
|
const { container, rerender } = renderWithProvider(
|
||||||
|
<SendFooter.WrappedComponent />,
|
||||||
|
);
|
||||||
|
|
||||||
|
const sendErrorProps = {
|
||||||
|
sendErrors: {
|
||||||
|
gasFee: 'gas fee error',
|
||||||
|
amount: 'amount error',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
rerender(<SendFooter.WrappedComponent {...sendErrorProps} />);
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,246 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`Security Tab should match snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="settings-page__body"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-row"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-item"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Reveal Secret Recovery Phrase
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-item-col"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="button btn--rounded btn-danger btn--large"
|
||||||
|
data-testid="reveal-seed-words"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
Reveal Secret Recovery Phrase
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-row"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-item"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Show incoming transactions
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-description"
|
||||||
|
>
|
||||||
|
Select this to use Etherscan to show incoming transactions in the transactions list
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-item-col"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="toggle-button toggle-button--on"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||||||
|
type="checkbox"
|
||||||
|
value="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="toggle-button__status"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="toggle-button__label-off"
|
||||||
|
>
|
||||||
|
Off
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="toggle-button__label-on"
|
||||||
|
>
|
||||||
|
On
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-row"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-item"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Use phishing detection
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-description"
|
||||||
|
>
|
||||||
|
Display a warning for phishing domains targeting Ethereum users
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-item-col"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="toggle-button toggle-button--on"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||||||
|
type="checkbox"
|
||||||
|
value="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="toggle-button__status"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="toggle-button__label-off"
|
||||||
|
>
|
||||||
|
Off
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="toggle-button__label-on"
|
||||||
|
>
|
||||||
|
On
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-row"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-item"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Participate in MetaMetrics
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-description"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
Participate in MetaMetrics to help us make MetaMask better
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="settings-page__content-item-col"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
class="toggle-button toggle-button--off"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
|
||||||
|
type="checkbox"
|
||||||
|
value="false"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="toggle-button__status"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="toggle-button__label-off"
|
||||||
|
>
|
||||||
|
Off
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="toggle-button__label-on"
|
||||||
|
>
|
||||||
|
On
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -59,6 +59,7 @@ export default class SecurityTab extends PureComponent {
|
|||||||
<div className="settings-page__content-item">
|
<div className="settings-page__content-item">
|
||||||
<div className="settings-page__content-item-col">
|
<div className="settings-page__content-item-col">
|
||||||
<Button
|
<Button
|
||||||
|
data-testid="reveal-seed-words"
|
||||||
type="danger"
|
type="danger"
|
||||||
large
|
large
|
||||||
onClick={(event) => {
|
onClick={(event) => {
|
||||||
|
|||||||
@ -1,63 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import sinon from 'sinon';
|
|
||||||
import { mount } from 'enzyme';
|
|
||||||
import SecurityTab from './security-tab.container';
|
|
||||||
|
|
||||||
describe('Security Tab', () => {
|
|
||||||
let wrapper;
|
|
||||||
|
|
||||||
const props = {
|
|
||||||
revealSeedConfirmation: sinon.spy(),
|
|
||||||
showClearApprovalModal: sinon.spy(),
|
|
||||||
setParticipateInMetaMetrics: sinon.spy(),
|
|
||||||
displayWarning: sinon.spy(),
|
|
||||||
showIncomingTransactions: false,
|
|
||||||
setShowIncomingTransactionsFeatureFlag: sinon.spy(),
|
|
||||||
history: {
|
|
||||||
push: sinon.spy(),
|
|
||||||
},
|
|
||||||
privacyMode: true,
|
|
||||||
warning: '',
|
|
||||||
participateInMetaMetrics: false,
|
|
||||||
setUsePhishDetect: sinon.spy(),
|
|
||||||
usePhishDetect: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
wrapper = mount(<SecurityTab.WrappedComponent {...props} />, {
|
|
||||||
context: {
|
|
||||||
t: (str) => str,
|
|
||||||
trackEvent: () => undefined,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('navigates to reveal seed words page', () => {
|
|
||||||
const seedWords = wrapper.find('.button.btn-danger.btn--large');
|
|
||||||
|
|
||||||
seedWords.simulate('click');
|
|
||||||
expect(props.history.push.calledOnce).toStrictEqual(true);
|
|
||||||
expect(props.history.push.getCall(0).args[0]).toStrictEqual('/seed');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('toggles incoming txs', () => {
|
|
||||||
const incomingTxs = wrapper.find({ type: 'checkbox' }).at(0);
|
|
||||||
incomingTxs.simulate('click');
|
|
||||||
expect(
|
|
||||||
props.setShowIncomingTransactionsFeatureFlag.calledOnce,
|
|
||||||
).toStrictEqual(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('toggles phishing detection', () => {
|
|
||||||
const phishDetect = wrapper.find({ type: 'checkbox' }).at(1);
|
|
||||||
phishDetect.simulate('click');
|
|
||||||
expect(props.setUsePhishDetect.calledOnce).toStrictEqual(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('toggles metaMetrics', () => {
|
|
||||||
const metaMetrics = wrapper.find({ type: 'checkbox' }).at(2);
|
|
||||||
|
|
||||||
metaMetrics.simulate('click');
|
|
||||||
expect(props.setParticipateInMetaMetrics.calledOnce).toStrictEqual(true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
86
ui/pages/settings/security-tab/security-tab.test.js
Normal file
86
ui/pages/settings/security-tab/security-tab.test.js
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { fireEvent } from '@testing-library/react';
|
||||||
|
import configureMockStore from 'redux-mock-store';
|
||||||
|
import mockState from '../../../../test/data/mock-state.json';
|
||||||
|
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||||
|
import SecurityTab from './security-tab.container';
|
||||||
|
|
||||||
|
const mockSetFeatureFlag = jest.fn();
|
||||||
|
const mockSetParticipateInMetaMetrics = jest.fn();
|
||||||
|
const mockSetUsePhishDetect = jest.fn();
|
||||||
|
|
||||||
|
jest.mock('../../../store/actions.js', () => {
|
||||||
|
return {
|
||||||
|
setFeatureFlag: () => mockSetFeatureFlag,
|
||||||
|
setParticipateInMetaMetrics: () => mockSetParticipateInMetaMetrics,
|
||||||
|
setUsePhishDetect: () => mockSetUsePhishDetect,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Security Tab', () => {
|
||||||
|
const mockStore = configureMockStore()(mockState);
|
||||||
|
|
||||||
|
it('should match snapshot', () => {
|
||||||
|
const { container } = renderWithProvider(<SecurityTab />, mockStore);
|
||||||
|
|
||||||
|
expect(container).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('navigates to reveal seed words page', () => {
|
||||||
|
const { queryByTestId, history } = renderWithProvider(
|
||||||
|
<SecurityTab />,
|
||||||
|
mockStore,
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(history.location.pathname).toStrictEqual('/');
|
||||||
|
|
||||||
|
fireEvent.click(queryByTestId('reveal-seed-words'));
|
||||||
|
|
||||||
|
expect(history.location.pathname).toStrictEqual('/seed');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('toggles incoming txs', () => {
|
||||||
|
const { queryAllByRole } = renderWithProvider(<SecurityTab />, mockStore);
|
||||||
|
|
||||||
|
const checkboxes = queryAllByRole('checkbox');
|
||||||
|
const showIncomingCheckbox = checkboxes[0];
|
||||||
|
|
||||||
|
expect(showIncomingCheckbox).toHaveAttribute('value', 'true');
|
||||||
|
|
||||||
|
fireEvent.change(showIncomingCheckbox, {
|
||||||
|
target: { value: false },
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(showIncomingCheckbox).toHaveAttribute('value', 'false');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('toggles phishing detection', () => {
|
||||||
|
const { queryAllByRole } = renderWithProvider(<SecurityTab />, mockStore);
|
||||||
|
|
||||||
|
const checkboxes = queryAllByRole('checkbox');
|
||||||
|
const showIncomingCheckbox = checkboxes[1];
|
||||||
|
|
||||||
|
expect(showIncomingCheckbox).toHaveAttribute('value', 'true');
|
||||||
|
|
||||||
|
fireEvent.change(showIncomingCheckbox, {
|
||||||
|
target: { value: false },
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(showIncomingCheckbox).toHaveAttribute('value', 'false');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('toggles metaMetrics', () => {
|
||||||
|
const { queryAllByRole } = renderWithProvider(<SecurityTab />, mockStore);
|
||||||
|
|
||||||
|
const checkboxes = queryAllByRole('checkbox');
|
||||||
|
const showIncomingCheckbox = checkboxes[2];
|
||||||
|
|
||||||
|
expect(showIncomingCheckbox).toHaveAttribute('value', 'false');
|
||||||
|
|
||||||
|
fireEvent.change(showIncomingCheckbox, {
|
||||||
|
target: { value: true },
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(showIncomingCheckbox).toHaveAttribute('value', 'true');
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -1,61 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { mount, shallow } from 'enzyme';
|
|
||||||
import { Provider } from 'react-redux';
|
|
||||||
import TextField from '../../components/ui/text-field';
|
|
||||||
import configureStore from '../../store/store';
|
|
||||||
import Settings from './settings.container';
|
|
||||||
import SettingsSearch from './settings-search';
|
|
||||||
|
|
||||||
describe('SettingsPage', () => {
|
|
||||||
let wrapper;
|
|
||||||
|
|
||||||
const props = {
|
|
||||||
addNewNetwork: false,
|
|
||||||
addressName: '',
|
|
||||||
backRoute: '/',
|
|
||||||
conversionDate: Date.now(),
|
|
||||||
currentPath: '/settings',
|
|
||||||
initialBreadCrumbKey: undefined,
|
|
||||||
initialBreadCrumbRoute: undefined,
|
|
||||||
isAddressEntryPage: false,
|
|
||||||
isPopup: false,
|
|
||||||
location: '/settings',
|
|
||||||
mostRecentOverviewPage: '',
|
|
||||||
pathnameI18nKey: undefined,
|
|
||||||
};
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
wrapper = shallow(<Settings.WrappedComponent {...props} />, {
|
|
||||||
context: {
|
|
||||||
t: (str) => str,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render title correctly', () => {
|
|
||||||
expect(
|
|
||||||
wrapper.find('.settings-page__header__title-container__title').text(),
|
|
||||||
).toStrictEqual('settings');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should render search correctly', () => {
|
|
||||||
const store = configureStore({
|
|
||||||
metamask: {
|
|
||||||
snaps: {},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
wrapper = mount(
|
|
||||||
<Provider store={store}>
|
|
||||||
<SettingsSearch onSearch={() => undefined} settingsRoutesList={[]} />
|
|
||||||
</Provider>,
|
|
||||||
{
|
|
||||||
context: {
|
|
||||||
t: (s) => `${s}`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(wrapper.find(TextField).props().id).toStrictEqual('search-settings');
|
|
||||||
expect(wrapper.find(TextField).props().value).toStrictEqual('');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
45
ui/pages/settings/settings.test.js
Normal file
45
ui/pages/settings/settings.test.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
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 Settings from '.';
|
||||||
|
import 'jest-canvas-mock';
|
||||||
|
|
||||||
|
describe('SettingsPage', () => {
|
||||||
|
const props = {
|
||||||
|
addNewNetwork: false,
|
||||||
|
addressName: '',
|
||||||
|
backRoute: '/',
|
||||||
|
breadCrumbTextKey: '',
|
||||||
|
conversionDate: Date.now(),
|
||||||
|
initialBreadCrumbKey: '',
|
||||||
|
initialBreadCrumbRoute: '',
|
||||||
|
isAddressEntryPage: false,
|
||||||
|
isPopup: false,
|
||||||
|
isSnapViewPage: false,
|
||||||
|
mostRecentOverviewPage: '/',
|
||||||
|
pathnameI18nKey: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
const mockStore = configureMockStore()(mockState);
|
||||||
|
|
||||||
|
it('should render correctly', () => {
|
||||||
|
const { queryByText } = renderWithProvider(
|
||||||
|
<Settings {...props} />,
|
||||||
|
mockStore,
|
||||||
|
'/settings',
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByText('Settings')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render search correctly', () => {
|
||||||
|
const { queryByPlaceholderText } = renderWithProvider(
|
||||||
|
<Settings {...props} />,
|
||||||
|
mockStore,
|
||||||
|
'/settings',
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(queryByPlaceholderText('Search in Settings')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user