Continue converting tests from enzyme to @testing-library/react (#16401)
Thomas Huang
2 years ago
committed by
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(); |
||||
|
||||
beforeEach(() => { |
||||
wrapper = shallow( |
||||
<PageFooter |
||||
onCancel={onCancel} |
||||
onSubmit={onSubmit} |
||||
cancelText="Cancel" |
||||
submitText="Submit" |
||||
disabled={false} |
||||
submitButtonType="Test Type" |
||||
/>, |
||||
); |
||||
}); |
||||
|
||||
it('renders page container footer', () => { |
||||
expect(wrapper.find('.page-container__footer')).toHaveLength(1); |
||||
const props = { |
||||
onCancel: jest.fn(), |
||||
onSubmit: jest.fn(), |
||||
cancelText: 'Cancel', |
||||
submitText: 'Submit', |
||||
disabled: false, |
||||
submitButtonType: 'Test Type', |
||||
}; |
||||
|
||||
it('should match snapshot', () => { |
||||
const { container } = renderWithProvider(<PageFooter {...props} />); |
||||
|
||||
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('should call cancel when click is simulated', () => { |
||||
const { queryByTestId } = renderWithProvider(<PageFooter {...props} />); |
||||
|
||||
it('has children text of Cancel', () => { |
||||
expect( |
||||
wrapper.find('.page-container__footer-button').first().prop('children'), |
||||
).toStrictEqual('Cancel'); |
||||
}); |
||||
const cancelButton = queryByTestId('page-container-footer-cancel'); |
||||
|
||||
it('should call cancel when click is simulated', () => { |
||||
wrapper.find('.page-container__footer-button').first().prop('onClick')(); |
||||
expect(onCancel.callCount).toStrictEqual(1); |
||||
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('should call submit when click is simulated', () => { |
||||
const { queryByTestId } = renderWithProvider(<PageFooter {...props} />); |
||||
|
||||
it('has disabled prop', () => { |
||||
expect( |
||||
wrapper.find('.page-container__footer-button').last().prop('disabled'), |
||||
).toStrictEqual(false); |
||||
}); |
||||
const submitButton = queryByTestId('page-container-footer-next'); |
||||
|
||||
it('has children text when submitText prop exists', () => { |
||||
expect( |
||||
wrapper.find('.page-container__footer-button').last().prop('children'), |
||||
).toStrictEqual('Submit'); |
||||
}); |
||||
fireEvent.click(submitButton); |
||||
|
||||
it('should call submit when click is simulated', () => { |
||||
wrapper.find('.page-container__footer-button').last().prop('onClick')(); |
||||
expect(onSubmit.callCount).toStrictEqual(1); |
||||
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,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 autoTimeout = component.find('.settings-page__content-row').at(9); |
||||
const textField = autoTimeout.find(TextField); |
||||
|
||||
textField.props().onChange({ target: { value: 1440 } }); |
||||
expect(component.state().autoLockTimeLimit).toStrictEqual(1440); |
||||
|
||||
autoTimeout.find('.settings-tab__rpc-save-button').simulate('click'); |
||||
expect(setAutoLockTimeLimitSpy.args[0][0]).toStrictEqual(1440); |
||||
const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore); |
||||
const autoLockoutTime = queryByTestId('auto-lockout-time'); |
||||
const autoLockoutButton = queryByTestId('auto-lockout-button'); |
||||
|
||||
fireEvent.change(autoLockoutTime, { target: { value: 1440 } }); |
||||
|
||||
expect(autoLockoutTime).toHaveValue(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> |
||||
`; |
||||
Loading…
Reference in new issue