diff --git a/ui/components/app/asset-list-item/asset-list-item.js b/ui/components/app/asset-list-item/asset-list-item.js index bc19aff87..f05992bb4 100644 --- a/ui/components/app/asset-list-item/asset-list-item.js +++ b/ui/components/app/asset-list-item/asset-list-item.js @@ -111,6 +111,7 @@ const AssetListItem = ({ title={ + + + + +`; diff --git a/ui/components/app/modals/reject-transactions/reject-transactions.test.js b/ui/components/app/modals/reject-transactions/reject-transactions.test.js index e8ec7a7b5..ce61a0c04 100644 --- a/ui/components/app/modals/reject-transactions/reject-transactions.test.js +++ b/ui/components/app/modals/reject-transactions/reject-transactions.test.js @@ -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(, { - context: { - t: (str) => str, - }, - }); - }); + it('should match snapshot', () => { + const { container } = renderWithProvider( + , + ); - 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( + , ); - 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( + , ); - 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(); + }); }); }); diff --git a/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap b/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap new file mode 100644 index 000000000..becdc38e4 --- /dev/null +++ b/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap @@ -0,0 +1,42 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Transaction Confirmed should match snapshot 1`] = ` +
+
+
+
+ +
+ [confirmed]! +
+
+ [initialTransactionConfirmed] +
+
+
+
+ +
+
+
+`; diff --git a/ui/components/app/modals/transaction-confirmed/transaction-confirmed.test.js b/ui/components/app/modals/transaction-confirmed/transaction-confirmed.test.js index 0e1658242..411324f4b 100644 --- a/ui/components/app/modals/transaction-confirmed/transaction-confirmed.test.js +++ b/ui/components/app/modals/transaction-confirmed/transaction-confirmed.test.js @@ -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( + , + ); + + 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( - , - { - 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); + const { queryByText } = renderWithProvider( + , + ); + + fireEvent.click(queryByText('[ok]')); + + expect(props.onSubmit).toHaveBeenCalled(); + expect(props.hideModal).toHaveBeenCalled(); }); }); diff --git a/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap b/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap new file mode 100644 index 000000000..30f4376f7 --- /dev/null +++ b/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SelectedAccount Component should match snapshot 1`] = ` +
+ +
+`; diff --git a/ui/components/app/selected-account/selected-account-component.test.js b/ui/components/app/selected-account/selected-account-component.test.js index bc55c7e7e..d2bd5197d 100644 --- a/ui/components/app/selected-account/selected-account-component.test.js +++ b/ui/components/app/selected-account/selected-account-component.test.js @@ -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( - , - { context: { t: () => undefined } }, + const mockStore = configureMockStore()(mockState); + + it('should match snapshot', () => { + const { container } = renderWithProvider(, mockStore); + + expect(container).toMatchSnapshot(); + }); + + it('should copy checksum address to clipboard when button is clicked', () => { + const { queryByTestId } = renderWithProvider( + , + mockStore, ); - // Checksummed version of address is displayed - expect(wrapper.find('.selected-account__address').text()).toStrictEqual( - '0x1B8...5C9D', - ); - expect(wrapper.find('.selected-account__name').text()).toStrictEqual( - 'testName', + + fireEvent.click(queryByTestId('selected-account-click')); + + expect(copyToClipboard).toHaveBeenCalledWith( + '0x0DCD5D886577d5081B0c52e242Ef29E70Be3E7bc', ); }); }); diff --git a/ui/components/app/selected-account/selected-account.component.js b/ui/components/app/selected-account/selected-account.component.js index 06609b54f..df7b07e18 100644 --- a/ui/components/app/selected-account/selected-account.component.js +++ b/ui/components/app/selected-account/selected-account.component.js @@ -48,6 +48,7 @@ class SelectedAccount extends Component { > + +
+

+ $0.52 USD +

+
+
+ + + Send TEST + +
+ + +`; diff --git a/ui/components/app/token-cell/token-cell.test.js b/ui/components/app/token-cell/token-cell.test.js index e7fe6069b..8179047e8 100644 --- a/ui/components/app/token-cell/token-cell.test.js +++ b/ui/components/app/token-cell/token-cell.test.js @@ -1,18 +1,12 @@ import React from 'react'; import thunk from 'redux-thunk'; -import { Provider } from 'react-redux'; import configureMockStore from 'redux-mock-store'; -import { mount } from 'enzyme'; -import sinon from 'sinon'; -import { MemoryRouter } from 'react-router-dom'; - -import Identicon from '../../ui/identicon'; +import { fireEvent } from '@testing-library/react'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; import TokenCell from '.'; describe('Token Cell', () => { - let wrapper; - - const state = { + const mockState = { metamask: { currentCurrency: 'usd', selectedAddress: '0xAddress', @@ -29,60 +23,33 @@ describe('Token Cell', () => { }, }; - const middlewares = [thunk]; - const mockStore = configureMockStore(middlewares); - const store = mockStore(state); + const mockStore = configureMockStore([thunk])(mockState); - let onClick; + const props = { + address: '0xAnotherToken', + symbol: 'TEST', + string: '5.000', + currentCurrency: 'usd', + onClick: jest.fn(), + }; - beforeEach(() => { - onClick = sinon.stub(); - wrapper = mount( - - - - - , + it('should match snapshot', () => { + const { container } = renderWithProvider( + , + mockStore, ); - }); - afterEach(() => { - sinon.restore(); - }); - - it('renders Identicon with props from token cell', () => { - expect(wrapper.find(Identicon).prop('address')).toStrictEqual( - '0xAnotherToken', - ); - }); - - it('renders token balance', () => { - expect(wrapper.find('.asset-list-item__token-value').text()).toStrictEqual( - '5.000', - ); - }); - - it('renders token symbol', () => { - expect(wrapper.find('.asset-list-item__token-symbol').text()).toStrictEqual( - 'TEST', - ); - }); - - it('renders converted fiat amount', () => { - expect(wrapper.find('.list-item__subheading').text()).toStrictEqual( - '$0.52 USD', - ); + expect(container).toMatchSnapshot(); }); it('calls onClick when clicked', () => { - expect(!onClick.called).toStrictEqual(true); - wrapper.simulate('click'); - expect(onClick.called).toStrictEqual(true); + const { queryByTestId } = renderWithProvider( + , + mockStore, + ); + + fireEvent.click(queryByTestId('token-button')); + + expect(props.onClick).toHaveBeenCalled(); }); }); diff --git a/ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap b/ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap new file mode 100644 index 000000000..cc5eeea68 --- /dev/null +++ b/ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap @@ -0,0 +1,103 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TransactionActivityLog Component should match snapshot 1`] = ` +
+
+
+ [activityLog] +
+
+
+
+ +
+
+
+ [transactionCreated] +
+
+
+
+
+ +
+
+
+ [transactionSubmitted] +
+
+
+
+
+ +
+
+
+ [transactionResubmitted] +
+
+
+
+
+ +
+
+
+ [transactionConfirmed] +
+
+
+
+
+
+`; diff --git a/ui/components/app/transaction-activity-log/transaction-activity-log.component.test.js b/ui/components/app/transaction-activity-log/transaction-activity-log.component.test.js index 1c80d9fa9..3308136d1 100644 --- a/ui/components/app/transaction-activity-log/transaction-activity-log.component.test.js +++ b/ui/components/app/transaction-activity-log/transaction-activity-log.component.test.js @@ -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 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( - undefined} - onRetry={() => undefined} - primaryTransactionStatus="confirmed" - />, - { context: { t: (str1, str2) => (str2 ? str1 + str2 : str1) } }, + 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( + , ); - 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( - 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( - 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(); }); }); diff --git a/ui/components/ui/alert/__snapshots__/index.test.js.snap b/ui/components/ui/alert/__snapshots__/index.test.js.snap new file mode 100644 index 000000000..f048d7991 --- /dev/null +++ b/ui/components/ui/alert/__snapshots__/index.test.js.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Alert renders nothing with no visible boolean in state 1`] = `
`; + +exports[`Alert renders with visible boolean in state 1`] = ` + +`; diff --git a/ui/components/ui/alert/index.test.js b/ui/components/ui/alert/index.test.js index 7689d6d83..7c5900f81 100644 --- a/ui/components/ui/alert/index.test.js +++ b/ui/components/ui/alert/index.test.js @@ -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, + }; - beforeEach(() => { - wrapper = shallow(); + const { container } = renderWithProvider(); + + 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(); + + expect(container).toMatchSnapshot(); }); }); diff --git a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap new file mode 100644 index 000000000..7006aa579 --- /dev/null +++ b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap @@ -0,0 +1,92 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Reveal Seed Page should match snapshot 1`] = ` +
+
+
+
+ Secret Recovery Phrase +
+
+ 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. +
+
+
+
+ +
+
+ DO NOT share this phrase with anyone! +
+
+ These words can be used to steal all your accounts. +
+
+
+
+
+ +
+ +
+
+
+
+
+
+ + +
+
+
+
+`; diff --git a/ui/pages/keychains/reveal-seed.js b/ui/pages/keychains/reveal-seed.js index 44bf74e18..a57611f26 100644 --- a/ui/pages/keychains/reveal-seed.js +++ b/ui/pages/keychains/reveal-seed.js @@ -85,6 +85,7 @@ class RevealSeedPage extends Component {
({ + 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(, { - context: { - t: (str) => str, - }, + }, + }; + const mockStore = configureMockStore([thunk])(mockState); + + it('should match snapshot', () => { + const { container } = renderWithProvider(, mockStore); + + expect(container).toMatchSnapshot(); + }); + + it('form submit', () => { + const { queryByTestId, queryByText } = renderWithProvider( + , + 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(); }); }); diff --git a/ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap b/ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap new file mode 100644 index 000000000..a8ed6e41e --- /dev/null +++ b/ui/pages/unlock-page/__snapshots__/unlock-page.test.js.snap @@ -0,0 +1,101 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Unlock Page should match snapshot 1`] = ` + +`; diff --git a/ui/pages/unlock-page/unlock-page.component.js b/ui/pages/unlock-page/unlock-page.component.js index 690124793..33a3aff83 100644 --- a/ui/pages/unlock-page/unlock-page.component.js +++ b/ui/pages/unlock-page/unlock-page.component.js @@ -150,6 +150,7 @@ export default class UnlockPage extends Component { return (