mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-21 17:37:01 +01:00
Continue converting tests from enzyme to @testing-library/react (#16401)
This commit is contained in:
Thomas Huang
GitHub
parent
f05acf8133
commit
25bb6ef861
@ -0,0 +1,30 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ButtonGroup Component should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="someClassName"
|
||||
style="color: red;"
|
||||
>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="button-group__button"
|
||||
data-testid="button-group__button0"
|
||||
>
|
||||
<div
|
||||
class="mockClass"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
aria-checked="true"
|
||||
class="button-group__button button-group__button--active"
|
||||
data-testid="button-group__button1"
|
||||
/>
|
||||
<button
|
||||
aria-checked="false"
|
||||
class="button-group__button"
|
||||
data-testid="button-group__button2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,130 +1,30 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
import ButtonGroup from './button-group.component';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import ButtonGroup from '.';
|
||||
|
||||
describe('ButtonGroup Component', () => {
|
||||
let wrapper;
|
||||
|
||||
const childButtonSpies = {
|
||||
onClick: sinon.spy(),
|
||||
const props = {
|
||||
defaultActiveButtonIndex: 1,
|
||||
disabled: false,
|
||||
className: 'someClassName',
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
};
|
||||
|
||||
const mockButtons = [
|
||||
<button onClick={childButtonSpies.onClick} key="a">
|
||||
<button key="a">
|
||||
<div className="mockClass" />
|
||||
</button>,
|
||||
<button onClick={childButtonSpies.onClick} key="b"></button>,
|
||||
<button onClick={childButtonSpies.onClick} key="c"></button>,
|
||||
<button key="b"></button>,
|
||||
<button key="c"></button>,
|
||||
];
|
||||
|
||||
beforeAll(() => {
|
||||
sinon.spy(ButtonGroup.prototype, 'handleButtonClick');
|
||||
sinon.spy(ButtonGroup.prototype, 'renderButtons');
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
<ButtonGroup
|
||||
defaultActiveButtonIndex={1}
|
||||
disabled={false}
|
||||
className="someClassName"
|
||||
style={{ color: 'red' }}
|
||||
>
|
||||
{mockButtons}
|
||||
</ButtonGroup>,
|
||||
it('should match snapshot', () => {
|
||||
const { container } = renderWithProvider(
|
||||
<ButtonGroup {...props}>{mockButtons}</ButtonGroup>,
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
childButtonSpies.onClick.resetHistory();
|
||||
ButtonGroup.prototype.handleButtonClick.resetHistory();
|
||||
ButtonGroup.prototype.renderButtons.resetHistory();
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
sinon.restore();
|
||||
});
|
||||
|
||||
describe('componentDidUpdate', () => {
|
||||
it('should set the activeButtonIndex to the updated newActiveButtonIndex', () => {
|
||||
expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
|
||||
wrapper.setProps({ newActiveButtonIndex: 2 });
|
||||
expect(wrapper.state('activeButtonIndex')).toStrictEqual(2);
|
||||
});
|
||||
|
||||
it('should not set the activeButtonIndex to an updated newActiveButtonIndex that is not a number', () => {
|
||||
expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
|
||||
wrapper.setProps({ newActiveButtonIndex: null });
|
||||
expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('handleButtonClick', () => {
|
||||
it('should set the activeButtonIndex', () => {
|
||||
expect(wrapper.state('activeButtonIndex')).toStrictEqual(1);
|
||||
wrapper.instance().handleButtonClick(2);
|
||||
expect(wrapper.state('activeButtonIndex')).toStrictEqual(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('renderButtons', () => {
|
||||
it('should render a button for each child', () => {
|
||||
const childButtons = wrapper.find('.button-group__button');
|
||||
expect(childButtons).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('should render the correct button with an active state', () => {
|
||||
const childButtons = wrapper.find('.button-group__button');
|
||||
const activeChildButton = wrapper.find('.button-group__button--active');
|
||||
expect(childButtons.get(1)).toStrictEqual(activeChildButton.get(0));
|
||||
});
|
||||
|
||||
it("should call handleButtonClick and the respective button's onClick method when a button is clicked", () => {
|
||||
expect(ButtonGroup.prototype.handleButtonClick.callCount).toStrictEqual(
|
||||
0,
|
||||
);
|
||||
expect(childButtonSpies.onClick.callCount).toStrictEqual(0);
|
||||
const childButtons = wrapper.find('.button-group__button');
|
||||
childButtons.at(0).props().onClick();
|
||||
childButtons.at(1).props().onClick();
|
||||
childButtons.at(2).props().onClick();
|
||||
expect(ButtonGroup.prototype.handleButtonClick.callCount).toStrictEqual(
|
||||
3,
|
||||
);
|
||||
expect(childButtonSpies.onClick.callCount).toStrictEqual(3);
|
||||
});
|
||||
|
||||
it('should render all child buttons as disabled if props.disabled is true', () => {
|
||||
const childButtons = wrapper.find('.button-group__button');
|
||||
childButtons.forEach((button) => {
|
||||
expect(button.props().disabled).toBeUndefined();
|
||||
});
|
||||
wrapper.setProps({ disabled: true });
|
||||
const disabledChildButtons = wrapper.find('[disabled=true]');
|
||||
expect(disabledChildButtons).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('should render the children of the button', () => {
|
||||
const mockClass = wrapper.find('.mockClass');
|
||||
expect(mockClass).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('render', () => {
|
||||
it('should render a div with the expected class and style', () => {
|
||||
expect(wrapper.find('div').at(0).props().className).toStrictEqual(
|
||||
'someClassName',
|
||||
);
|
||||
expect(wrapper.find('div').at(0).props().style).toStrictEqual({
|
||||
color: 'red',
|
||||
});
|
||||
});
|
||||
|
||||
it('should call renderButtons when rendering', () => {
|
||||
expect(ButtonGroup.prototype.renderButtons.callCount).toStrictEqual(1);
|
||||
wrapper.instance().render();
|
||||
expect(ButtonGroup.prototype.renderButtons.callCount).toStrictEqual(2);
|
||||
});
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,62 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Page Footer 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-default page-container__footer-button"
|
||||
data-testid="page-container-footer-next"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Page Footer should render a secondary footer inside page-container__footer when given children 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
|
||||
class="page-container__footer-secondary"
|
||||
>
|
||||
<div>
|
||||
Works
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,87 +1,55 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
import Button from '../../button';
|
||||
import PageFooter from './page-container-footer.component';
|
||||
import { fireEvent } from '@testing-library/react';
|
||||
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
|
||||
import PageFooter from '.';
|
||||
|
||||
describe('Page Footer', () => {
|
||||
let wrapper;
|
||||
const onCancel = sinon.spy();
|
||||
const onSubmit = sinon.spy();
|
||||
const props = {
|
||||
onCancel: jest.fn(),
|
||||
onSubmit: jest.fn(),
|
||||
cancelText: 'Cancel',
|
||||
submitText: 'Submit',
|
||||
disabled: false,
|
||||
submitButtonType: 'Test Type',
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
<PageFooter
|
||||
onCancel={onCancel}
|
||||
onSubmit={onSubmit}
|
||||
cancelText="Cancel"
|
||||
submitText="Submit"
|
||||
disabled={false}
|
||||
submitButtonType="Test Type"
|
||||
/>,
|
||||
);
|
||||
});
|
||||
it('should match snapshot', () => {
|
||||
const { container } = renderWithProvider(<PageFooter {...props} />);
|
||||
|
||||
it('renders page container footer', () => {
|
||||
expect(wrapper.find('.page-container__footer')).toHaveLength(1);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render a secondary footer inside page-container__footer when given children', () => {
|
||||
wrapper = shallow(
|
||||
const { container } = renderWithProvider(
|
||||
<PageFooter>
|
||||
<div>Works</div>
|
||||
</PageFooter>,
|
||||
{ context: { t: sinon.spy((k) => `[${k}]`) } },
|
||||
);
|
||||
|
||||
expect(wrapper.find('.page-container__footer-secondary')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('renders two button components', () => {
|
||||
expect(wrapper.find(Button)).toHaveLength(2);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe('Cancel Button', () => {
|
||||
it('has button type of default', () => {
|
||||
expect(
|
||||
wrapper.find('.page-container__footer-button').first().prop('type'),
|
||||
).toStrictEqual('secondary');
|
||||
});
|
||||
|
||||
it('has children text of Cancel', () => {
|
||||
expect(
|
||||
wrapper.find('.page-container__footer-button').first().prop('children'),
|
||||
).toStrictEqual('Cancel');
|
||||
});
|
||||
|
||||
it('should call cancel when click is simulated', () => {
|
||||
wrapper.find('.page-container__footer-button').first().prop('onClick')();
|
||||
expect(onCancel.callCount).toStrictEqual(1);
|
||||
const { queryByTestId } = renderWithProvider(<PageFooter {...props} />);
|
||||
|
||||
const cancelButton = queryByTestId('page-container-footer-cancel');
|
||||
|
||||
fireEvent.click(cancelButton);
|
||||
|
||||
expect(props.onCancel).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Submit Button', () => {
|
||||
it('assigns button type based on props', () => {
|
||||
expect(
|
||||
wrapper.find('.page-container__footer-button').last().prop('type'),
|
||||
).toStrictEqual('Test Type');
|
||||
});
|
||||
|
||||
it('has disabled prop', () => {
|
||||
expect(
|
||||
wrapper.find('.page-container__footer-button').last().prop('disabled'),
|
||||
).toStrictEqual(false);
|
||||
});
|
||||
|
||||
it('has children text when submitText prop exists', () => {
|
||||
expect(
|
||||
wrapper.find('.page-container__footer-button').last().prop('children'),
|
||||
).toStrictEqual('Submit');
|
||||
});
|
||||
|
||||
it('should call submit when click is simulated', () => {
|
||||
wrapper.find('.page-container__footer-button').last().prop('onClick')();
|
||||
expect(onSubmit.callCount).toStrictEqual(1);
|
||||
const { queryByTestId } = renderWithProvider(<PageFooter {...props} />);
|
||||
|
||||
const submitButton = queryByTestId('page-container-footer-next');
|
||||
|
||||
fireEvent.click(submitButton);
|
||||
|
||||
expect(props.onSubmit).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SiteOrigin renders number and hyphen prefixed domains correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="site-origin"
|
||||
>
|
||||
<bdi
|
||||
dir="ltr"
|
||||
>
|
||||
0-example.com
|
||||
</bdi>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import SiteOrigin from './site-origin';
|
||||
|
||||
describe('SiteOrigin', () => {
|
||||
@ -14,11 +14,10 @@ describe('SiteOrigin', () => {
|
||||
|
||||
it('renders number and hyphen prefixed domains correctly', () => {
|
||||
const numberHyphenPrefixOrigin = '0-example.com';
|
||||
const wrapper = shallow(
|
||||
const { container } = renderWithProvider(
|
||||
<SiteOrigin {...defaultProps} siteOrigin={numberHyphenPrefixOrigin} />,
|
||||
);
|
||||
const bdiElement = wrapper.find('bdi');
|
||||
|
||||
expect(bdiElement.text()).toBe('0-example.com');
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -205,6 +205,7 @@ export default class AdvancedTab extends PureComponent {
|
||||
</label>
|
||||
<input
|
||||
id="restore-file"
|
||||
data-testid="restore-file"
|
||||
style={{ visibility: 'hidden' }}
|
||||
type="file"
|
||||
accept=".json"
|
||||
@ -260,6 +261,7 @@ export default class AdvancedTab extends PureComponent {
|
||||
<div className="settings-page__content-item">
|
||||
<div className="settings-page__content-item-col">
|
||||
<Button
|
||||
data-testid="backup-button"
|
||||
type="secondary"
|
||||
large
|
||||
onClick={() => this.backupUserData()}
|
||||
@ -544,6 +546,7 @@ export default class AdvancedTab extends PureComponent {
|
||||
<TextField
|
||||
type="number"
|
||||
id="autoTimeout"
|
||||
data-testid="auto-lockout-time"
|
||||
placeholder="5"
|
||||
value={this.state.autoLockTimeLimit}
|
||||
onChange={(e) => this.handleLockChange(e.target.value)}
|
||||
@ -554,6 +557,7 @@ export default class AdvancedTab extends PureComponent {
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
data-testid="auto-lockout-button"
|
||||
className="settings-tab__rpc-save-button"
|
||||
disabled={lockTimeError !== ''}
|
||||
onClick={() => {
|
||||
|
||||
@ -1,180 +1,69 @@
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
import { shallow } from 'enzyme';
|
||||
import TextField from '../../../components/ui/text-field';
|
||||
import { LEDGER_TRANSPORT_TYPES } from '../../../../shared/constants/hardware-wallets';
|
||||
import ToggleButton from '../../../components/ui/toggle-button';
|
||||
import AdvancedTab from './advanced-tab.component';
|
||||
import { fireEvent } from '@testing-library/react';
|
||||
import configureMockStore from 'redux-mock-store';
|
||||
import thunk from 'redux-thunk';
|
||||
import mockState from '../../../../test/data/mock-state.json';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import AdvancedTab from '.';
|
||||
|
||||
const mockSetAutoLockTimeLimit = jest.fn();
|
||||
const mockSetShowTestNetworks = jest.fn();
|
||||
const mockSetUseTokenDetection = jest.fn();
|
||||
|
||||
jest.mock('../../../store/actions.js', () => {
|
||||
return {
|
||||
setAutoLockTimeLimit: () => mockSetAutoLockTimeLimit,
|
||||
setShowTestNetworks: () => mockSetShowTestNetworks,
|
||||
setUseTokenDetection: () => mockSetUseTokenDetection,
|
||||
};
|
||||
});
|
||||
|
||||
describe('AdvancedTab Component', () => {
|
||||
let component;
|
||||
let setAutoLockTimeLimitSpy = sinon.spy();
|
||||
const toggleTestnet = sinon.spy();
|
||||
const toggleTokenDetection = sinon.spy();
|
||||
|
||||
beforeAll(() => {
|
||||
component = shallow(
|
||||
<AdvancedTab
|
||||
ipfsGateway=""
|
||||
setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
|
||||
setIpfsGateway={() => undefined}
|
||||
setShowFiatConversionOnTestnetsPreference={() => undefined}
|
||||
setShowTestNetworks={toggleTestnet}
|
||||
showTestNetworks={false}
|
||||
ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
|
||||
setLedgerTransportPreference={() => undefined}
|
||||
setDismissSeedBackUpReminder={() => undefined}
|
||||
dismissSeedBackUpReminder={false}
|
||||
useTokenDetection
|
||||
setUseTokenDetection={toggleTokenDetection}
|
||||
userHasALedgerAccount
|
||||
backupUserData={() => undefined}
|
||||
restoreUserData={() => undefined}
|
||||
/>,
|
||||
{
|
||||
context: {
|
||||
t: (s) => `_${s}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
});
|
||||
const mockStore = configureMockStore([thunk])(mockState);
|
||||
|
||||
it('should render backup button', () => {
|
||||
expect(component.find('.settings-page__content-row')).toHaveLength(15);
|
||||
|
||||
expect(
|
||||
component
|
||||
.find('.settings-page__content-row')
|
||||
.at(10)
|
||||
.find('.settings-page__content-item'),
|
||||
).toHaveLength(2);
|
||||
|
||||
expect(
|
||||
component
|
||||
.find('.settings-page__content-row')
|
||||
.at(10)
|
||||
.find('.settings-page__content-item')
|
||||
.at(0)
|
||||
.find('.settings-page__content-description')
|
||||
.props().children,
|
||||
).toStrictEqual('_backupUserDataDescription');
|
||||
|
||||
expect(
|
||||
component
|
||||
.find('.settings-page__content-row')
|
||||
.at(10)
|
||||
.find('.settings-page__content-item')
|
||||
.at(1)
|
||||
.find('Button')
|
||||
.props().children,
|
||||
).toStrictEqual('_backup');
|
||||
const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
|
||||
const backupButton = queryByTestId('backup-button');
|
||||
expect(backupButton).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render restore button', () => {
|
||||
expect(component.find('.settings-page__content-row')).toHaveLength(15);
|
||||
|
||||
expect(
|
||||
component
|
||||
.find('.settings-page__content-row')
|
||||
.at(11)
|
||||
.find('.settings-page__content-item'),
|
||||
).toHaveLength(2);
|
||||
|
||||
expect(
|
||||
component
|
||||
.find('.settings-page__content-row')
|
||||
.at(11)
|
||||
.find('.settings-page__content-item')
|
||||
.at(0)
|
||||
.find('.settings-page__content-description')
|
||||
.props().children,
|
||||
).toStrictEqual('_restoreUserDataDescription');
|
||||
|
||||
expect(
|
||||
component
|
||||
.find('.settings-page__content-row')
|
||||
.at(11)
|
||||
.find('.settings-page__content-item')
|
||||
.at(1)
|
||||
.find('label')
|
||||
.props().children,
|
||||
).toStrictEqual('_restore');
|
||||
const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
|
||||
const restoreFile = queryByTestId('restore-file');
|
||||
expect(restoreFile).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should update autoLockTimeLimit', () => {
|
||||
setAutoLockTimeLimitSpy = sinon.spy();
|
||||
component = shallow(
|
||||
<AdvancedTab
|
||||
ipfsGateway=""
|
||||
setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
|
||||
setIpfsGateway={() => undefined}
|
||||
setShowFiatConversionOnTestnetsPreference={() => undefined}
|
||||
ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
|
||||
setLedgerTransportPreference={() => undefined}
|
||||
setDismissSeedBackUpReminder={() => undefined}
|
||||
dismissSeedBackUpReminder={false}
|
||||
setShowTestNetworks={toggleTestnet}
|
||||
useTokenDetection
|
||||
setUseTokenDetection={toggleTokenDetection}
|
||||
userHasALedgerAccount
|
||||
backupUserData={() => undefined}
|
||||
restoreUserData={() => undefined}
|
||||
/>,
|
||||
{
|
||||
context: {
|
||||
t: (s) => `_${s}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
|
||||
const autoLockoutTime = queryByTestId('auto-lockout-time');
|
||||
const autoLockoutButton = queryByTestId('auto-lockout-button');
|
||||
|
||||
const autoTimeout = component.find('.settings-page__content-row').at(9);
|
||||
const textField = autoTimeout.find(TextField);
|
||||
fireEvent.change(autoLockoutTime, { target: { value: 1440 } });
|
||||
|
||||
textField.props().onChange({ target: { value: 1440 } });
|
||||
expect(component.state().autoLockTimeLimit).toStrictEqual(1440);
|
||||
expect(autoLockoutTime).toHaveValue(1440);
|
||||
|
||||
autoTimeout.find('.settings-tab__rpc-save-button').simulate('click');
|
||||
expect(setAutoLockTimeLimitSpy.args[0][0]).toStrictEqual(1440);
|
||||
fireEvent.click(autoLockoutButton);
|
||||
|
||||
expect(mockSetAutoLockTimeLimit).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should toggle show test networks', () => {
|
||||
const testNetworks = component.find('.settings-page__content-row').at(7);
|
||||
const toggleButton = testNetworks.find(ToggleButton);
|
||||
toggleButton.first().simulate('toggle');
|
||||
expect(toggleTestnet.calledOnce).toStrictEqual(true);
|
||||
const { queryAllByRole } = renderWithProvider(<AdvancedTab />, mockStore);
|
||||
|
||||
const testNetworkToggle = queryAllByRole('checkbox')[4];
|
||||
|
||||
fireEvent.click(testNetworkToggle);
|
||||
|
||||
expect(mockSetShowTestNetworks).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should toggle token detection', () => {
|
||||
component = shallow(
|
||||
<AdvancedTab
|
||||
ipfsGateway=""
|
||||
setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
|
||||
setIpfsGateway={() => undefined}
|
||||
setShowFiatConversionOnTestnetsPreference={() => undefined}
|
||||
setShowTestNetworks={toggleTestnet}
|
||||
showTestNetworks={false}
|
||||
ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
|
||||
setLedgerTransportPreference={() => undefined}
|
||||
setDismissSeedBackUpReminder={() => undefined}
|
||||
dismissSeedBackUpReminder={false}
|
||||
useTokenDetection
|
||||
setUseTokenDetection={toggleTokenDetection}
|
||||
userHasALedgerAccount
|
||||
backupUserData={() => undefined}
|
||||
restoreUserData={() => undefined}
|
||||
/>,
|
||||
{
|
||||
context: {
|
||||
trackEvent: () => undefined,
|
||||
t: (s) => `_${s}`,
|
||||
},
|
||||
},
|
||||
);
|
||||
const useTokenDetection = component
|
||||
.find('.settings-page__content-row')
|
||||
.at(4);
|
||||
const toggleButton = useTokenDetection.find(ToggleButton);
|
||||
toggleButton.first().simulate('toggle');
|
||||
expect(toggleTokenDetection.calledOnce).toStrictEqual(true);
|
||||
const { queryAllByRole } = renderWithProvider(<AdvancedTab />, mockStore);
|
||||
|
||||
const tokenDetectionToggle = queryAllByRole('checkbox')[1];
|
||||
|
||||
fireEvent.click(tokenDetectionToggle);
|
||||
|
||||
expect(mockSetUseTokenDetection).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,229 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`View Price Quote Difference displays a fiat error when calculationError is present 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-wrapper high"
|
||||
>
|
||||
<div
|
||||
class="actionable-message"
|
||||
>
|
||||
|
||||
<div
|
||||
class="actionable-message__message"
|
||||
>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents"
|
||||
>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents-text"
|
||||
>
|
||||
<div
|
||||
class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
|
||||
>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents-title"
|
||||
>
|
||||
Check your rate before proceeding
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
aria-describedby="tippy-tooltip-4"
|
||||
class=""
|
||||
data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
|
||||
data-tooltipped=""
|
||||
style="display: inline;"
|
||||
tabindex="0"
|
||||
>
|
||||
<i
|
||||
class="fa fa-info-circle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Price impact could not be determined due to lack of market price data. Please confirm that you are comfortable with the amount of tokens you are about to receive before swapping.
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents-actions"
|
||||
>
|
||||
<button>
|
||||
I understand
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`View Price Quote Difference displays an error when in high bucket 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-wrapper high"
|
||||
>
|
||||
<div
|
||||
class="actionable-message"
|
||||
>
|
||||
|
||||
<div
|
||||
class="actionable-message__message"
|
||||
>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents"
|
||||
>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents-text"
|
||||
>
|
||||
<div
|
||||
class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
|
||||
>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents-title"
|
||||
>
|
||||
Price difference of ~%
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
aria-describedby="tippy-tooltip-3"
|
||||
class=""
|
||||
data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
|
||||
data-tooltipped=""
|
||||
style="display: inline;"
|
||||
tabindex="0"
|
||||
>
|
||||
<i
|
||||
class="fa fa-info-circle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
You are about to swap 1 ETH (~) for 42.947749 LINK (~).
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents-actions"
|
||||
>
|
||||
<button>
|
||||
I understand
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`View Price Quote Difference displays an error when in medium bucket 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-wrapper medium"
|
||||
>
|
||||
<div
|
||||
class="actionable-message"
|
||||
>
|
||||
|
||||
<div
|
||||
class="actionable-message__message"
|
||||
>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents"
|
||||
>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents-text"
|
||||
>
|
||||
<div
|
||||
class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
|
||||
>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents-title"
|
||||
>
|
||||
Price difference of ~%
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
aria-describedby="tippy-tooltip-2"
|
||||
class=""
|
||||
data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
|
||||
data-tooltipped=""
|
||||
style="display: inline;"
|
||||
tabindex="0"
|
||||
>
|
||||
<i
|
||||
class="fa fa-info-circle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
You are about to swap 1 ETH (~) for 42.947749 LINK (~).
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents-actions"
|
||||
>
|
||||
<button>
|
||||
I understand
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`View Price Quote Difference should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-wrapper low"
|
||||
>
|
||||
<div
|
||||
class="actionable-message"
|
||||
>
|
||||
|
||||
<div
|
||||
class="actionable-message__message"
|
||||
>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents"
|
||||
>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents-text"
|
||||
>
|
||||
<div
|
||||
class="box box--padding-bottom-2 box--display-flex box--flex-direction-row box--justify-content-space-between"
|
||||
>
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents-title"
|
||||
>
|
||||
Price difference of ~%
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
aria-describedby="tippy-tooltip-1"
|
||||
class=""
|
||||
data-original-title="Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool."
|
||||
data-tooltipped=""
|
||||
style="display: inline;"
|
||||
tabindex="0"
|
||||
>
|
||||
<i
|
||||
class="fa fa-info-circle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
You are about to swap 1 ETH (~) for 42.947749 LINK (~).
|
||||
<div
|
||||
class="view-quote__price-difference-warning-contents-actions"
|
||||
>
|
||||
<button>
|
||||
I understand
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,15 +1,12 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import { Provider } from 'react-redux';
|
||||
import configureMockStore from 'redux-mock-store';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import { NETWORK_TYPES } from '../../../../shared/constants/network';
|
||||
import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas';
|
||||
import ViewQuotePriceDifference from './view-quote-price-difference';
|
||||
|
||||
describe('View Price Quote Difference', () => {
|
||||
const t = (key) => `translate ${key}`;
|
||||
|
||||
const state = {
|
||||
const mockState = {
|
||||
metamask: {
|
||||
tokens: [],
|
||||
provider: { type: NETWORK_TYPES.RPC, nickname: '', rpcUrl: '' },
|
||||
@ -19,7 +16,7 @@ describe('View Price Quote Difference', () => {
|
||||
},
|
||||
};
|
||||
|
||||
const store = configureMockStore()(state);
|
||||
const mockStore = configureMockStore()(mockState);
|
||||
|
||||
// Sample transaction is 1 $ETH to ~42.880915 $LINK
|
||||
const DEFAULT_PROPS = {
|
||||
@ -85,57 +82,37 @@ describe('View Price Quote Difference', () => {
|
||||
destinationTokenValue: '42.947749',
|
||||
};
|
||||
|
||||
let component;
|
||||
function renderComponent(props) {
|
||||
component = shallow(
|
||||
<Provider store={store}>
|
||||
<ViewQuotePriceDifference {...props} />
|
||||
</Provider>,
|
||||
{
|
||||
context: { t },
|
||||
},
|
||||
it('should match snapshot', () => {
|
||||
const { container } = renderWithProvider(
|
||||
<ViewQuotePriceDifference {...DEFAULT_PROPS} />,
|
||||
mockStore,
|
||||
);
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
component.unmount();
|
||||
});
|
||||
|
||||
it('does not render when there is no quote', () => {
|
||||
const props = { ...DEFAULT_PROPS, usedQuote: null };
|
||||
renderComponent(props);
|
||||
|
||||
const wrappingDiv = component.find(
|
||||
'.view-quote__price-difference-warning-wrapper',
|
||||
);
|
||||
expect(wrappingDiv).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('does not render when the item is in the low bucket', () => {
|
||||
const props = { ...DEFAULT_PROPS };
|
||||
props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.LOW;
|
||||
|
||||
renderComponent(props);
|
||||
const wrappingDiv = component.find(
|
||||
'.view-quote__price-difference-warning-wrapper',
|
||||
);
|
||||
expect(wrappingDiv).toHaveLength(0);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('displays an error when in medium bucket', () => {
|
||||
const props = { ...DEFAULT_PROPS };
|
||||
props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.MEDIUM;
|
||||
|
||||
renderComponent(props);
|
||||
expect(component.html()).toContain(GAS_RECOMMENDATIONS.MEDIUM);
|
||||
const { container } = renderWithProvider(
|
||||
<ViewQuotePriceDifference {...props} />,
|
||||
mockStore,
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('displays an error when in high bucket', () => {
|
||||
const props = { ...DEFAULT_PROPS };
|
||||
props.usedQuote.priceSlippage.bucket = GAS_RECOMMENDATIONS.HIGH;
|
||||
|
||||
renderComponent(props);
|
||||
expect(component.html()).toContain(GAS_RECOMMENDATIONS.HIGH);
|
||||
const { container } = renderWithProvider(
|
||||
<ViewQuotePriceDifference {...props} />,
|
||||
mockStore,
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('displays a fiat error when calculationError is present', () => {
|
||||
@ -143,7 +120,11 @@ describe('View Price Quote Difference', () => {
|
||||
props.usedQuote.priceSlippage.calculationError =
|
||||
'Could not determine price.';
|
||||
|
||||
renderComponent(props);
|
||||
expect(component.html()).toContain(GAS_RECOMMENDATIONS.HIGH);
|
||||
const { container } = renderWithProvider(
|
||||
<ViewQuotePriceDifference {...props} />,
|
||||
mockStore,
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user