Continue converting tests from enzyme to @testing-library/react (#16032)
Thomas Huang
2 years ago
committed by
GitHub
parent
33522a7b46
commit
7149da8d3d
@ -0,0 +1,52 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`Reject Transactions Model should match snapshot 1`] = ` |
||||
<div> |
||||
<div |
||||
class="modal-container" |
||||
> |
||||
<div |
||||
class="modal-container__header" |
||||
> |
||||
<div |
||||
class="modal-container__header-text" |
||||
> |
||||
[rejectTxsN] |
||||
</div> |
||||
<div |
||||
class="modal-container__header-close" |
||||
data-testid="modal-header-close" |
||||
/> |
||||
</div> |
||||
<div |
||||
class="modal-container__content" |
||||
> |
||||
<div> |
||||
<div |
||||
class="reject-transactions__description" |
||||
> |
||||
[rejectTxsDescription] |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="modal-container__footer" |
||||
> |
||||
<button |
||||
class="button btn--rounded btn-secondary modal-container__footer-button" |
||||
role="button" |
||||
tabindex="0" |
||||
> |
||||
[cancel] |
||||
</button> |
||||
<button |
||||
class="button btn--rounded btn-primary modal-container__footer-button" |
||||
role="button" |
||||
tabindex="0" |
||||
> |
||||
[rejectAll] |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
`; |
||||
@ -1,45 +1,44 @@ |
||||
import React from 'react'; |
||||
import sinon from 'sinon'; |
||||
import { mount } from 'enzyme'; |
||||
import RejectTransactionsModal from './reject-transactions.container'; |
||||
import { fireEvent, waitFor } from '@testing-library/react'; |
||||
import { renderWithProvider } from '../../../../../test/lib/render-helpers'; |
||||
import RejectTransactionsModal from '.'; |
||||
|
||||
describe('Reject Transactions Model', () => { |
||||
let wrapper; |
||||
|
||||
const props = { |
||||
onSubmit: sinon.spy(), |
||||
hideModal: sinon.spy(), |
||||
onSubmit: jest.fn(), |
||||
hideModal: jest.fn(), |
||||
unapprovedTxCount: 2, |
||||
}; |
||||
|
||||
beforeEach(() => { |
||||
wrapper = mount(<RejectTransactionsModal.WrappedComponent {...props} />, { |
||||
context: { |
||||
t: (str) => str, |
||||
}, |
||||
}); |
||||
}); |
||||
it('should match snapshot', () => { |
||||
const { container } = renderWithProvider( |
||||
<RejectTransactionsModal.WrappedComponent {...props} />, |
||||
); |
||||
|
||||
afterEach(() => { |
||||
props.hideModal.resetHistory(); |
||||
expect(container).toMatchSnapshot(); |
||||
}); |
||||
|
||||
it('hides modal when cancel button is clicked', () => { |
||||
const cancelButton = wrapper.find( |
||||
'.btn-secondary.modal-container__footer-button', |
||||
const { queryByText } = renderWithProvider( |
||||
<RejectTransactionsModal.WrappedComponent {...props} />, |
||||
); |
||||
cancelButton.simulate('click'); |
||||
|
||||
expect(props.hideModal.calledOnce).toStrictEqual(true); |
||||
fireEvent.click(queryByText('[cancel]')); |
||||
|
||||
expect(props.onSubmit).not.toHaveBeenCalled(); |
||||
expect(props.hideModal).toHaveBeenCalled(); |
||||
}); |
||||
|
||||
it('onSubmit is called and hides modal when reject all clicked', async () => { |
||||
const rejectAllButton = wrapper.find( |
||||
'.btn-primary.modal-container__footer-button', |
||||
const { queryByText } = renderWithProvider( |
||||
<RejectTransactionsModal.WrappedComponent {...props} />, |
||||
); |
||||
rejectAllButton.simulate('click'); |
||||
|
||||
expect(await props.onSubmit.calledOnce).toStrictEqual(true); |
||||
expect(props.hideModal.calledOnce).toStrictEqual(true); |
||||
fireEvent.click(queryByText('[rejectAll]')); |
||||
|
||||
await waitFor(() => { |
||||
expect(props.onSubmit).toHaveBeenCalled(); |
||||
expect(props.hideModal).toHaveBeenCalled(); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
@ -0,0 +1,42 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`Transaction Confirmed should match snapshot 1`] = ` |
||||
<div> |
||||
<div |
||||
class="modal-container" |
||||
> |
||||
<div |
||||
class="modal-container__content" |
||||
> |
||||
<div |
||||
class="transaction-confirmed__content" |
||||
> |
||||
<i |
||||
class="fa fa-check-circle fa-3x" |
||||
/> |
||||
<div |
||||
class="transaction-confirmed__title" |
||||
> |
||||
[confirmed]! |
||||
</div> |
||||
<div |
||||
class="transaction-confirmed__description" |
||||
> |
||||
[initialTransactionConfirmed] |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="modal-container__footer" |
||||
> |
||||
<button |
||||
class="button btn--rounded btn-primary modal-container__footer-button" |
||||
role="button" |
||||
tabindex="0" |
||||
> |
||||
[ok] |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
`; |
||||
@ -1,26 +1,30 @@ |
||||
import React from 'react'; |
||||
import sinon from 'sinon'; |
||||
import { mount } from 'enzyme'; |
||||
import TransactionConfirmed from './transaction-confirmed.container'; |
||||
import { fireEvent } from '@testing-library/react'; |
||||
import { renderWithProvider } from '../../../../../test/lib/render-helpers'; |
||||
import TransactionConfirmed from '.'; |
||||
|
||||
describe('Transaction Confirmed', () => { |
||||
it('should match snapshot', () => { |
||||
const { container } = renderWithProvider( |
||||
<TransactionConfirmed.WrappedComponent />, |
||||
); |
||||
|
||||
expect(container).toMatchSnapshot(); |
||||
}); |
||||
|
||||
it('clicks ok to submit and hide modal', () => { |
||||
const props = { |
||||
onSubmit: sinon.spy(), |
||||
hideModal: sinon.spy(), |
||||
onSubmit: jest.fn(), |
||||
hideModal: jest.fn(), |
||||
}; |
||||
const wrapper = mount( |
||||
|
||||
const { queryByText } = renderWithProvider( |
||||
<TransactionConfirmed.WrappedComponent {...props} />, |
||||
{ |
||||
context: { |
||||
t: (str) => str, |
||||
}, |
||||
}, |
||||
); |
||||
const submit = wrapper.find('.btn-primary.modal-container__footer-button'); |
||||
submit.simulate('click'); |
||||
|
||||
expect(props.onSubmit.calledOnce).toStrictEqual(true); |
||||
expect(props.hideModal.calledOnce).toStrictEqual(true); |
||||
fireEvent.click(queryByText('[ok]')); |
||||
|
||||
expect(props.onSubmit).toHaveBeenCalled(); |
||||
expect(props.hideModal).toHaveBeenCalled(); |
||||
}); |
||||
}); |
||||
|
||||
@ -0,0 +1,56 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`SelectedAccount Component should match snapshot 1`] = ` |
||||
<div> |
||||
<div |
||||
class="selected-account" |
||||
> |
||||
<div |
||||
class="selected-account__tooltip-wrapper" |
||||
> |
||||
<div |
||||
aria-describedby="tippy-tooltip-1" |
||||
class="" |
||||
data-original-title="Copy to clipboard" |
||||
data-tooltipped="" |
||||
style="display: inline;" |
||||
tabindex="0" |
||||
> |
||||
<button |
||||
class="selected-account__clickable" |
||||
data-testid="selected-account-click" |
||||
> |
||||
<div |
||||
class="selected-account__name" |
||||
> |
||||
Test Account |
||||
</div> |
||||
<div |
||||
class="selected-account__address" |
||||
> |
||||
0x0DC...E7bc |
||||
<div |
||||
class="selected-account__copy" |
||||
> |
||||
<svg |
||||
fill="none" |
||||
height="11" |
||||
viewBox="0 0 11 11" |
||||
width="11" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
> |
||||
<path |
||||
clip-rule="evenodd" |
||||
d="M0 0H1H9V1H1V9H0V0ZM2 2H11V11H2V2ZM3 3H10V10H3V3Z" |
||||
fill="var(--color-icon-alternative)" |
||||
fill-rule="evenodd" |
||||
/> |
||||
</svg> |
||||
</div> |
||||
</div> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
`; |
||||
@ -1,24 +1,32 @@ |
||||
import React from 'react'; |
||||
import { render } from 'enzyme'; |
||||
import SelectedAccount from './selected-account.component'; |
||||
import configureMockStore from 'redux-mock-store'; |
||||
import copyToClipboard from 'copy-to-clipboard'; |
||||
import { fireEvent } from '@testing-library/react'; |
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers'; |
||||
import mockState from '../../../../test/data/mock-state.json'; |
||||
import SelectedAccount from '.'; |
||||
|
||||
jest.mock('copy-to-clipboard'); |
||||
|
||||
describe('SelectedAccount Component', () => { |
||||
it('should render checksummed address', () => { |
||||
const wrapper = render( |
||||
<SelectedAccount |
||||
selectedIdentity={{ |
||||
name: 'testName', |
||||
address: '0x1b82543566f41a7db9a9a75fc933c340ffb55c9d', |
||||
}} |
||||
/>, |
||||
{ context: { t: () => undefined } }, |
||||
); |
||||
// Checksummed version of address is displayed
|
||||
expect(wrapper.find('.selected-account__address').text()).toStrictEqual( |
||||
'0x1B8...5C9D', |
||||
const mockStore = configureMockStore()(mockState); |
||||
|
||||
it('should match snapshot', () => { |
||||
const { container } = renderWithProvider(<SelectedAccount />, mockStore); |
||||
|
||||
expect(container).toMatchSnapshot(); |
||||
}); |
||||
|
||||
it('should copy checksum address to clipboard when button is clicked', () => { |
||||
const { queryByTestId } = renderWithProvider( |
||||
<SelectedAccount />, |
||||
mockStore, |
||||
); |
||||
expect(wrapper.find('.selected-account__name').text()).toStrictEqual( |
||||
'testName', |
||||
|
||||
fireEvent.click(queryByTestId('selected-account-click')); |
||||
|
||||
expect(copyToClipboard).toHaveBeenCalledWith( |
||||
'0x0DCD5D886577d5081B0c52e242Ef29E70Be3E7bc', |
||||
); |
||||
}); |
||||
}); |
||||
|
||||
@ -0,0 +1,105 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`Token Cell should match snapshot 1`] = ` |
||||
<div> |
||||
<div |
||||
class="list-item asset-list-item token-cell" |
||||
role="button" |
||||
tabindex="0" |
||||
> |
||||
<div |
||||
class="list-item__icon" |
||||
> |
||||
<div |
||||
class="" |
||||
> |
||||
<div |
||||
class="identicon token-cell__icon" |
||||
style="height: 32px; width: 32px; border-radius: 16px;" |
||||
> |
||||
<div |
||||
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(1, 119, 142);" |
||||
> |
||||
<svg |
||||
height="32" |
||||
width="32" |
||||
x="0" |
||||
y="0" |
||||
> |
||||
<rect |
||||
fill="#234CE1" |
||||
height="32" |
||||
transform="translate(-6.755009921344284 0.22970804166999115) rotate(257.8 16 16)" |
||||
width="32" |
||||
x="0" |
||||
y="0" |
||||
/> |
||||
<rect |
||||
fill="#03445E" |
||||
height="32" |
||||
transform="translate(-16.888022167332927 0.15842627027688103) rotate(219.9 16 16)" |
||||
width="32" |
||||
x="0" |
||||
y="0" |
||||
/> |
||||
<rect |
||||
fill="#F96001" |
||||
height="32" |
||||
transform="translate(-7.464671435864012 -28.483778328962412) rotate(303.1 16 16)" |
||||
width="32" |
||||
x="0" |
||||
y="0" |
||||
/> |
||||
</svg> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="list-item__heading" |
||||
> |
||||
<button |
||||
class="asset-list-item__token-button" |
||||
data-testid="token-button" |
||||
title="5.000 TEST" |
||||
> |
||||
<h2> |
||||
<span |
||||
class="asset-list-item__token-value" |
||||
> |
||||
5.000 |
||||
</span> |
||||
<span |
||||
class="asset-list-item__token-symbol" |
||||
> |
||||
TEST |
||||
</span> |
||||
</h2> |
||||
</button> |
||||
</div> |
||||
<div |
||||
class="list-item__subheading" |
||||
> |
||||
<h3 |
||||
title="$0.52 USD" |
||||
> |
||||
$0.52 USD |
||||
</h3> |
||||
</div> |
||||
<div |
||||
class="list-item__right-content" |
||||
> |
||||
<i |
||||
class="fas fa-chevron-right asset-list-item__chevron-right" |
||||
/> |
||||
<a |
||||
class="button btn-link asset-list-item__send-token-button" |
||||
role="button" |
||||
tabindex="0" |
||||
> |
||||
Send TEST |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
`; |
||||
@ -0,0 +1,103 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`TransactionActivityLog Component should match snapshot 1`] = ` |
||||
<div> |
||||
<div |
||||
class="transaction-activity-log test-class" |
||||
> |
||||
<div |
||||
class="transaction-activity-log__title" |
||||
> |
||||
[activityLog] |
||||
</div> |
||||
<div |
||||
class="transaction-activity-log__activities-container" |
||||
> |
||||
<div |
||||
class="transaction-activity-log__activity" |
||||
> |
||||
<div |
||||
class="transaction-activity-log-icon transaction-activity-log__activity-icon" |
||||
> |
||||
<i |
||||
class="fa transaction-activity-log-icon__icon fa-plus" |
||||
/> |
||||
</div> |
||||
<div |
||||
class="transaction-activity-log__entry-container" |
||||
> |
||||
<div |
||||
class="transaction-activity-log__activity-text" |
||||
title="[transactionCreated]" |
||||
> |
||||
[transactionCreated] |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="transaction-activity-log__activity" |
||||
> |
||||
<div |
||||
class="transaction-activity-log-icon transaction-activity-log__activity-icon" |
||||
> |
||||
<i |
||||
class="fa transaction-activity-log-icon__icon fa-arrow-up" |
||||
/> |
||||
</div> |
||||
<div |
||||
class="transaction-activity-log__entry-container" |
||||
> |
||||
<div |
||||
class="transaction-activity-log__activity-text" |
||||
title="[transactionSubmitted]" |
||||
> |
||||
[transactionSubmitted] |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="transaction-activity-log__activity" |
||||
> |
||||
<div |
||||
class="transaction-activity-log-icon transaction-activity-log__activity-icon" |
||||
> |
||||
<i |
||||
class="fa transaction-activity-log-icon__icon fa-retweet" |
||||
/> |
||||
</div> |
||||
<div |
||||
class="transaction-activity-log__entry-container" |
||||
> |
||||
<div |
||||
class="transaction-activity-log__activity-text" |
||||
title="[transactionResubmitted]" |
||||
> |
||||
[transactionResubmitted] |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="transaction-activity-log__activity" |
||||
> |
||||
<div |
||||
class="transaction-activity-log-icon transaction-activity-log__activity-icon" |
||||
> |
||||
<i |
||||
class="fa transaction-activity-log-icon__icon fa-check" |
||||
/> |
||||
</div> |
||||
<div |
||||
class="transaction-activity-log__entry-container" |
||||
> |
||||
<div |
||||
class="transaction-activity-log__activity-text" |
||||
title="[transactionConfirmed]" |
||||
> |
||||
[transactionConfirmed] |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
`; |
||||
@ -1,163 +1,55 @@ |
||||
import React from 'react'; |
||||
import { shallow } from 'enzyme'; |
||||
import TransactionActivityLog from './transaction-activity-log.component'; |
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers'; |
||||
import TransactionActivityLog from '.'; |
||||
|
||||
describe('TransactionActivityLog Component', () => { |
||||
it('should render properly', () => { |
||||
const activities = [ |
||||
{ |
||||
eventKey: 'transactionCreated', |
||||
hash: '0xe46c7f9b39af2fbf1c53e66f72f80343ab54c2c6dba902d51fb98ada08fe1a63', |
||||
id: 2005383477493174, |
||||
timestamp: 1543957986150, |
||||
value: '0x2386f26fc10000', |
||||
}, |
||||
{ |
||||
eventKey: 'transactionSubmitted', |
||||
hash: '0xe46c7f9b39af2fbf1c53e66f72f80343ab54c2c6dba902d51fb98ada08fe1a63', |
||||
id: 2005383477493174, |
||||
timestamp: 1543957987853, |
||||
value: '0x1319718a5000', |
||||
}, |
||||
{ |
||||
eventKey: 'transactionResubmitted', |
||||
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87', |
||||
id: 2005383477493175, |
||||
timestamp: 1543957991563, |
||||
value: '0x1502634b5800', |
||||
}, |
||||
{ |
||||
eventKey: 'transactionConfirmed', |
||||
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87', |
||||
id: 2005383477493175, |
||||
timestamp: 1543958029960, |
||||
value: '0x1502634b5800', |
||||
}, |
||||
]; |
||||
|
||||
const wrapper = shallow( |
||||
<TransactionActivityLog |
||||
activities={activities} |
||||
className="test-class" |
||||
inlineRetryIndex={-1} |
||||
inlineCancelIndex={-1} |
||||
nativeCurrency="ETH" |
||||
onCancel={() => undefined} |
||||
onRetry={() => undefined} |
||||
primaryTransactionStatus="confirmed" |
||||
/>, |
||||
{ context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } }, |
||||
const activities = [ |
||||
{ |
||||
eventKey: 'transactionCreated', |
||||
hash: '0xe46c7f9b39af2fbf1c53e66f72f80343ab54c2c6dba902d51fb98ada08fe1a63', |
||||
id: 2005383477493174, |
||||
timestamp: 1543957986150, |
||||
value: '0x2386f26fc10000', |
||||
}, |
||||
{ |
||||
eventKey: 'transactionSubmitted', |
||||
hash: '0xe46c7f9b39af2fbf1c53e66f72f80343ab54c2c6dba902d51fb98ada08fe1a63', |
||||
id: 2005383477493174, |
||||
timestamp: 1543957987853, |
||||
value: '0x1319718a5000', |
||||
}, |
||||
{ |
||||
eventKey: 'transactionResubmitted', |
||||
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87', |
||||
id: 2005383477493175, |
||||
timestamp: 1543957991563, |
||||
value: '0x1502634b5800', |
||||
}, |
||||
{ |
||||
eventKey: 'transactionConfirmed', |
||||
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87', |
||||
id: 2005383477493175, |
||||
timestamp: 1543958029960, |
||||
value: '0x1502634b5800', |
||||
}, |
||||
]; |
||||
|
||||
const props = { |
||||
activities, |
||||
className: 'test-class', |
||||
inlineRetryIndex: -1, |
||||
inlineCancelIndex: -1, |
||||
nativeCurrency: 'ETH', |
||||
onCancel: jest.fn(), |
||||
onRetry: jest.fn(), |
||||
primaryTransactionStatus: 'confirmed', |
||||
}; |
||||
|
||||
it('should match snapshot', () => { |
||||
const { container } = renderWithProvider( |
||||
<TransactionActivityLog.WrappedComponent {...props} />, |
||||
); |
||||
|
||||
expect(wrapper.hasClass('transaction-activity-log')).toStrictEqual(true); |
||||
expect(wrapper.hasClass('test-class')).toStrictEqual(true); |
||||
}); |
||||
|
||||
it('should render inline retry and cancel buttons for earliest pending transaction', () => { |
||||
const activities = [ |
||||
{ |
||||
eventKey: 'transactionCreated', |
||||
hash: '0xa', |
||||
id: 1, |
||||
timestamp: 1, |
||||
value: '0x1', |
||||
}, |
||||
{ |
||||
eventKey: 'transactionSubmitted', |
||||
hash: '0xa', |
||||
id: 1, |
||||
timestamp: 2, |
||||
value: '0x1', |
||||
}, |
||||
{ |
||||
eventKey: 'transactionResubmitted', |
||||
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87', |
||||
id: 2, |
||||
timestamp: 3, |
||||
value: '0x1', |
||||
}, |
||||
{ |
||||
eventKey: 'transactionCancelAttempted', |
||||
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87', |
||||
id: 3, |
||||
timestamp: 4, |
||||
value: '0x1', |
||||
}, |
||||
]; |
||||
|
||||
const wrapper = shallow( |
||||
<TransactionActivityLog |
||||
activities={activities} |
||||
className="test-class" |
||||
inlineRetryIndex={2} |
||||
inlineCancelIndex={3} |
||||
nativeCurrency="ETH" |
||||
onCancel={() => undefined} |
||||
onRetry={() => undefined} |
||||
primaryTransactionStatus="pending" |
||||
isEarliestNonce |
||||
/>, |
||||
{ context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } }, |
||||
); |
||||
|
||||
expect(wrapper.hasClass('transaction-activity-log')).toStrictEqual(true); |
||||
expect(wrapper.hasClass('test-class')).toStrictEqual(true); |
||||
expect(wrapper.find('.transaction-activity-log__action-link')).toHaveLength( |
||||
2, |
||||
); |
||||
}); |
||||
|
||||
it('should not render inline retry and cancel buttons for newer pending transactions', () => { |
||||
const activities = [ |
||||
{ |
||||
eventKey: 'transactionCreated', |
||||
hash: '0xa', |
||||
id: 1, |
||||
timestamp: 1, |
||||
value: '0x1', |
||||
}, |
||||
{ |
||||
eventKey: 'transactionSubmitted', |
||||
hash: '0xa', |
||||
id: 1, |
||||
timestamp: 2, |
||||
value: '0x1', |
||||
}, |
||||
{ |
||||
eventKey: 'transactionResubmitted', |
||||
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87', |
||||
id: 2, |
||||
timestamp: 3, |
||||
value: '0x1', |
||||
}, |
||||
{ |
||||
eventKey: 'transactionCancelAttempted', |
||||
hash: '0x7d09d337fc6f5d6fe2dbf3a6988d69532deb0a82b665f9180b5a20db377eea87', |
||||
id: 3, |
||||
timestamp: 4, |
||||
value: '0x1', |
||||
}, |
||||
]; |
||||
|
||||
const wrapper = shallow( |
||||
<TransactionActivityLog |
||||
activities={activities} |
||||
className="test-class" |
||||
inlineRetryIndex={2} |
||||
inlineCancelIndex={3} |
||||
nativeCurrency="ETH" |
||||
onCancel={() => undefined} |
||||
onRetry={() => undefined} |
||||
primaryTransactionStatus="pending" |
||||
isEarliestNonce={false} |
||||
/>, |
||||
{ context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } }, |
||||
); |
||||
|
||||
expect(wrapper.hasClass('transaction-activity-log')).toStrictEqual(true); |
||||
expect(wrapper.hasClass('test-class')).toStrictEqual(true); |
||||
expect(wrapper.find('.transaction-activity-log__action-link')).toHaveLength( |
||||
0, |
||||
); |
||||
expect(container).toMatchSnapshot(); |
||||
}); |
||||
}); |
||||
|
||||
@ -0,0 +1,15 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`Alert renders nothing with no visible boolean in state 1`] = `<div />`; |
||||
|
||||
exports[`Alert renders with visible boolean in state 1`] = ` |
||||
<div> |
||||
<div |
||||
class="global-alert visible" |
||||
> |
||||
<a |
||||
class="msg" |
||||
/> |
||||
</div> |
||||
</div> |
||||
`; |
||||
@ -1,16 +1,25 @@ |
||||
import React from 'react'; |
||||
import { shallow } from 'enzyme'; |
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers'; |
||||
import Alert from '.'; |
||||
|
||||
describe('Alert', () => { |
||||
let wrapper; |
||||
it('renders nothing with no visible boolean in state', () => { |
||||
const props = { |
||||
visible: false, |
||||
}; |
||||
|
||||
const { container } = renderWithProvider(<Alert {...props} />); |
||||
|
||||
beforeEach(() => { |
||||
wrapper = shallow(<Alert visible={false} />); |
||||
expect(container).toMatchSnapshot(); |
||||
}); |
||||
|
||||
it('renders nothing with no visible boolean in state', () => { |
||||
const alert = wrapper.find('.global-alert'); |
||||
expect(alert).toHaveLength(0); |
||||
it('renders with visible boolean in state', () => { |
||||
const props = { |
||||
visible: true, |
||||
}; |
||||
|
||||
const { container } = renderWithProvider(<Alert {...props} />); |
||||
|
||||
expect(container).toMatchSnapshot(); |
||||
}); |
||||
}); |
||||
|
||||
@ -0,0 +1,92 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`Reveal Seed Page should match snapshot 1`] = ` |
||||
<div> |
||||
<div |
||||
class="page-container" |
||||
> |
||||
<div |
||||
class="page-container__header" |
||||
> |
||||
<div |
||||
class="page-container__title" |
||||
> |
||||
Secret Recovery Phrase |
||||
</div> |
||||
<div |
||||
class="page-container__subtitle" |
||||
> |
||||
If you ever change browsers or move computers, you will need this Secret Recovery Phrase to access your accounts. Save them somewhere safe and secret. |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="page-container__content" |
||||
> |
||||
<div |
||||
class="page-container__warning-container" |
||||
> |
||||
<i |
||||
class="fa fa-exclamation-triangle fa-2x page-container__warning-icon" |
||||
/> |
||||
<div |
||||
class="page-container__warning-message" |
||||
> |
||||
<div |
||||
class="page-container__warning-title" |
||||
> |
||||
DO NOT share this phrase with anyone! |
||||
</div> |
||||
<div> |
||||
These words can be used to steal all your accounts. |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="reveal-seed__content" |
||||
> |
||||
<form> |
||||
<label |
||||
class="input-label" |
||||
for="password-box" |
||||
> |
||||
Enter password to continue |
||||
</label> |
||||
<div |
||||
class="input-group" |
||||
> |
||||
<input |
||||
class="form-control" |
||||
data-testid="input-password" |
||||
id="password-box" |
||||
placeholder="Password" |
||||
type="password" |
||||
value="" |
||||
/> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="page-container__footer" |
||||
> |
||||
<footer> |
||||
<button |
||||
class="button btn--rounded btn-secondary btn--large page-container__footer-button" |
||||
role="button" |
||||
tabindex="0" |
||||
> |
||||
Cancel |
||||
</button> |
||||
<button |
||||
class="button btn--rounded btn-primary btn--large page-container__footer-button" |
||||
disabled="" |
||||
role="button" |
||||
tabindex="0" |
||||
> |
||||
Next |
||||
</button> |
||||
</footer> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
`; |
||||
@ -1,24 +1,42 @@ |
||||
import React from 'react'; |
||||
import sinon from 'sinon'; |
||||
import { mount } from 'enzyme'; |
||||
import configureMockStore from 'redux-mock-store'; |
||||
import { fireEvent } from '@testing-library/react'; |
||||
import thunk from 'redux-thunk'; |
||||
import { renderWithProvider } from '../../../test/lib/render-helpers'; |
||||
import RevealSeedPage from './reveal-seed'; |
||||
|
||||
const mockRequestRevealSeedWords = jest.fn().mockResolvedValue(); |
||||
|
||||
jest.mock('../../store/actions.js', () => ({ |
||||
requestRevealSeedWords: () => mockRequestRevealSeedWords, |
||||
})); |
||||
|
||||
describe('Reveal Seed Page', () => { |
||||
it('form submit', () => { |
||||
const props = { |
||||
history: { |
||||
push: sinon.spy(), |
||||
}, |
||||
requestRevealSeedWords: sinon.stub().resolves(), |
||||
const mockState = { |
||||
history: { |
||||
mostRecentOverviewPage: '/', |
||||
}; |
||||
const wrapper = mount(<RevealSeedPage.WrappedComponent {...props} />, { |
||||
context: { |
||||
t: (str) => str, |
||||
}, |
||||
}, |
||||
}; |
||||
const mockStore = configureMockStore([thunk])(mockState); |
||||
|
||||
it('should match snapshot', () => { |
||||
const { container } = renderWithProvider(<RevealSeedPage />, mockStore); |
||||
|
||||
expect(container).toMatchSnapshot(); |
||||
}); |
||||
|
||||
it('form submit', () => { |
||||
const { queryByTestId, queryByText } = renderWithProvider( |
||||
<RevealSeedPage />, |
||||
mockStore, |
||||
); |
||||
|
||||
fireEvent.change(queryByTestId('input-password'), { |
||||
target: { value: 'password' }, |
||||
}); |
||||
|
||||
wrapper.find('form').simulate('submit'); |
||||
expect(props.requestRevealSeedWords.calledOnce).toStrictEqual(true); |
||||
fireEvent.click(queryByText('Next')); |
||||
|
||||
expect(mockRequestRevealSeedWords).toHaveBeenCalled(); |
||||
}); |
||||
}); |
||||
|
||||
@ -0,0 +1,101 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`Unlock Page should match snapshot 1`] = ` |
||||
<div> |
||||
<div |
||||
class="unlock-page__container" |
||||
> |
||||
<div |
||||
class="unlock-page" |
||||
data-testid="unlock-page" |
||||
> |
||||
<div |
||||
class="unlock-page__mascot-container" |
||||
> |
||||
<div |
||||
style="z-index: 0;" |
||||
> |
||||
<svg /> |
||||
</div> |
||||
</div> |
||||
<h1 |
||||
class="unlock-page__title" |
||||
> |
||||
Welcome back! |
||||
</h1> |
||||
<div> |
||||
The decentralized web awaits |
||||
</div> |
||||
<form |
||||
class="unlock-page__form" |
||||
> |
||||
<div |
||||
class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth" |
||||
> |
||||
<label |
||||
class="MuiFormLabel-root MuiInputLabel-root TextField-materialLabel-1 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink Mui-focused Mui-focused TextField-materialFocused-2" |
||||
data-shrink="true" |
||||
for="password" |
||||
id="password-label" |
||||
> |
||||
Password |
||||
</label> |
||||
<div |
||||
class="MuiInputBase-root MuiInput-root MuiInput-underline TextField-materialUnderline-3 MuiInputBase-fullWidth MuiInput-fullWidth Mui-focused Mui-focused MuiInputBase-formControl MuiInput-formControl" |
||||
> |
||||
<input |
||||
aria-invalid="false" |
||||
autocomplete="current-password" |
||||
class="MuiInputBase-input MuiInput-input" |
||||
data-testid="unlock-password" |
||||
dir="auto" |
||||
id="password" |
||||
type="password" |
||||
value="" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</form> |
||||
<button |
||||
class="button btn--rounded btn-default" |
||||
data-testid="unlock-submit" |
||||
disabled="" |
||||
role="button" |
||||
style="margin-top: 20px; height: 60px; font-weight: 400; box-shadow: none; border-radius: 100px;" |
||||
tabindex="0" |
||||
variant="contained" |
||||
> |
||||
Unlock |
||||
</button> |
||||
<div |
||||
class="unlock-page__links" |
||||
> |
||||
<a |
||||
class="button btn-link unlock-page__link" |
||||
role="button" |
||||
tabindex="0" |
||||
> |
||||
Forgot password? |
||||
</a> |
||||
</div> |
||||
<div |
||||
class="unlock-page__support" |
||||
> |
||||
<span> |
||||
|
||||
Need help? Contact |
||||
<a |
||||
href="https://metamask-flask.zendesk.com/hc" |
||||
rel="noopener noreferrer" |
||||
target="_blank" |
||||
> |
||||
MetaMask support |
||||
</a> |
||||
|
||||
|
||||
</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
`; |
||||
@ -1,29 +0,0 @@ |
||||
import React from 'react'; |
||||
import sinon from 'sinon'; |
||||
import configureMockStore from 'redux-mock-store'; |
||||
import { fireEvent } from '@testing-library/react'; |
||||
import { renderWithProvider } from '../../../test/lib/render-helpers'; |
||||
import UnlockPage from './unlock-page.component'; |
||||
|
||||
describe('Unlock Page Component', () => { |
||||
it('clicks imports seed button', () => { |
||||
const props = { |
||||
history: { |
||||
push: sinon.spy(), |
||||
}, |
||||
isUnlocked: false, |
||||
onRestore: sinon.spy(), |
||||
onSubmit: sinon.spy(), |
||||
forceUpdateMetamaskState: sinon.spy(), |
||||
showOptInModal: sinon.spy(), |
||||
}; |
||||
|
||||
const { getByText } = renderWithProvider( |
||||
<UnlockPage {...props} />, |
||||
configureMockStore()({ metamask: { currentLocale: 'en' } }), |
||||
); |
||||
|
||||
fireEvent.click(getByText('Forgot password?')); |
||||
expect(props.onRestore.calledOnce).toStrictEqual(true); |
||||
}); |
||||
}); |
||||
@ -1,48 +0,0 @@ |
||||
import React from 'react'; |
||||
import sinon from 'sinon'; |
||||
import { mount } from 'enzyme'; |
||||
import UnlockPage from './unlock-page.container'; |
||||
|
||||
describe('Unlock Page', () => { |
||||
let wrapper; |
||||
|
||||
const props = { |
||||
history: { |
||||
push: sinon.spy(), |
||||
}, |
||||
isUnlocked: false, |
||||
onRestore: sinon.spy(), |
||||
onSubmit: sinon.spy(), |
||||
forceUpdateMetamaskState: sinon.spy(), |
||||
showOptInModal: sinon.spy(), |
||||
}; |
||||
|
||||
beforeEach(() => { |
||||
wrapper = mount(<UnlockPage.WrappedComponent {...props} />, { |
||||
context: { |
||||
t: (str) => str, |
||||
}, |
||||
}); |
||||
}); |
||||
|
||||
afterAll(() => { |
||||
sinon.restore(); |
||||
}); |
||||
|
||||
it('renders', () => { |
||||
expect(wrapper).toHaveLength(1); |
||||
}); |
||||
|
||||
it('changes password and submits', () => { |
||||
const passwordField = wrapper.find({ type: 'password', id: 'password' }); |
||||
const loginButton = wrapper.find({ type: 'submit' }).last(); |
||||
|
||||
const event = { target: { value: 'password' } }; |
||||
expect(wrapper.instance().state.password).toStrictEqual(''); |
||||
passwordField.last().simulate('change', event); |
||||
expect(wrapper.instance().state.password).toStrictEqual('password'); |
||||
|
||||
loginButton.simulate('click'); |
||||
expect(props.onSubmit.calledOnce).toStrictEqual(true); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,65 @@ |
||||
import React from 'react'; |
||||
import configureMockStore from 'redux-mock-store'; |
||||
import { fireEvent } from '@testing-library/react'; |
||||
import thunk from 'redux-thunk'; |
||||
import { renderWithProvider } from '../../../test/lib/render-helpers'; |
||||
import UnlockPage from '.'; |
||||
|
||||
const mockMarkPasswordForgotten = jest.fn(); |
||||
|
||||
jest.mock('../../store/actions.js', () => ({ |
||||
markPasswordForgotten: () => mockMarkPasswordForgotten, |
||||
})); |
||||
|
||||
const mockElement = document.createElement('svg'); |
||||
|
||||
jest.mock('@metamask/logo', () => () => { |
||||
return { |
||||
container: mockElement, |
||||
setFollowMouse: jest.fn(), |
||||
stopAnimation: jest.fn(), |
||||
lookAt: jest.fn(), |
||||
}; |
||||
}); |
||||
|
||||
describe('Unlock Page', () => { |
||||
const mockState = { |
||||
metamask: {}, |
||||
}; |
||||
const mockStore = configureMockStore([thunk])(mockState); |
||||
|
||||
it('should match snapshot', () => { |
||||
const { container } = renderWithProvider(<UnlockPage />, mockStore); |
||||
|
||||
expect(container).toMatchSnapshot(); |
||||
}); |
||||
|
||||
it('changes password and submits', () => { |
||||
const props = { |
||||
onSubmit: jest.fn(), |
||||
}; |
||||
|
||||
const { queryByTestId } = renderWithProvider( |
||||
<UnlockPage {...props} />, |
||||
mockStore, |
||||
); |
||||
|
||||
const passwordField = queryByTestId('unlock-password'); |
||||
const loginButton = queryByTestId('unlock-submit'); |
||||
|
||||
fireEvent.change(passwordField, { target: { value: 'a-password' } }); |
||||
expect(passwordField).toHaveAttribute('value', 'a-password'); |
||||
|
||||
fireEvent.click(loginButton); |
||||
|
||||
expect(props.onSubmit).toHaveBeenCalled(); |
||||
}); |
||||
|
||||
it('clicks imports seed button', () => { |
||||
const { getByText } = renderWithProvider(<UnlockPage />, mockStore); |
||||
|
||||
fireEvent.click(getByText('Forgot password?')); |
||||
|
||||
expect(mockMarkPasswordForgotten).toHaveBeenCalled(); |
||||
}); |
||||
}); |
||||
Loading…
Reference in new issue