diff --git a/ui/components/app/modals/cancel-transaction/__snapshots__/cancel-transaction.component.test.js.snap b/ui/components/app/modals/cancel-transaction/__snapshots__/cancel-transaction.component.test.js.snap new file mode 100644 index 000000000..36fa47d54 --- /dev/null +++ b/ui/components/app/modals/cancel-transaction/__snapshots__/cancel-transaction.component.test.js.snap @@ -0,0 +1,101 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CancelTransaction Component should match snapshot 1`] = ` +
+
+
+
+ Attempt to cancel? +
+
+
+
+
+
+ Cancellation gas fee +
+
+
+
+ + + 0.000021 + + + ETH + +
+
+ + + 0.000021 + + + ETH + +
+
+
+
+ Submitting this attempt does not guarantee your original transaction will be cancelled. If the cancellation attempt is successful, you will be charged the transaction fee above. +
+
+
+
+ + +
+
+
+`; diff --git a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap new file mode 100644 index 000000000..c23cca668 --- /dev/null +++ b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap @@ -0,0 +1,46 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CancelTransactionGasFee Component should render 1`] = ` +
+
+
+ + + 0 + + + ETH + +
+
+ + + 0 + + + ETH + +
+
+
+`; diff --git a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.test.js b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.test.js index ca67c9421..bfbf7a61d 100644 --- a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.test.js +++ b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/cancel-transaction-gas-fee.component.test.js @@ -1,25 +1,32 @@ import React from 'react'; -import { shallow } from 'enzyme'; -import UserPreferencedCurrencyDisplay from '../../../user-preferenced-currency-display'; +import configureMockStore from 'redux-mock-store'; +import { renderWithProvider } from '../../../../../../test/lib/render-helpers'; import CancelTransactionGasFee from './cancel-transaction-gas-fee.component'; describe('CancelTransactionGasFee Component', () => { + const mockState = { + metamask: { + provider: { + chainId: '0x4', + }, + preferences: { + useNativeCurrencyAsPrimaryCurrency: false, + }, + }, + }; + + const mockStore = configureMockStore()(mockState); + it('should render', () => { - const wrapper = shallow(); + const props = { + value: '0x3b9aca00', + }; - expect(wrapper.find('.cancel-transaction-gas-fee')).toHaveLength(1); - expect(wrapper.find(UserPreferencedCurrencyDisplay)).toHaveLength(2); - const ethDisplay = wrapper.find(UserPreferencedCurrencyDisplay).at(0); - const fiatDisplay = wrapper.find(UserPreferencedCurrencyDisplay).at(1); - - expect(ethDisplay.props().value).toStrictEqual('0x3b9aca00'); - expect(ethDisplay.props().className).toStrictEqual( - 'cancel-transaction-gas-fee__eth', + const { container } = renderWithProvider( + , + mockStore, ); - expect(fiatDisplay.props().value).toStrictEqual('0x3b9aca00'); - expect(fiatDisplay.props().className).toStrictEqual( - 'cancel-transaction-gas-fee__fiat', - ); + expect(container).toMatchSnapshot(); }); }); diff --git a/ui/components/app/modals/cancel-transaction/cancel-transaction.component.test.js b/ui/components/app/modals/cancel-transaction/cancel-transaction.component.test.js index 424d1e396..41e2fda99 100644 --- a/ui/components/app/modals/cancel-transaction/cancel-transaction.component.test.js +++ b/ui/components/app/modals/cancel-transaction/cancel-transaction.component.test.js @@ -1,60 +1,90 @@ import React from 'react'; -import { shallow } from 'enzyme'; -import sinon from 'sinon'; -import Modal from '../../modal'; -import CancelTransaction from './cancel-transaction.component'; -import CancelTransactionGasFee from './cancel-transaction-gas-fee'; +import configureMockStore from 'redux-mock-store'; +import { fireEvent, waitFor } from '@testing-library/react'; +import thunk from 'redux-thunk'; +import { renderWithProvider } from '../../../../../test/lib/render-helpers'; +import mockState from '../../../../../test/data/mock-state.json'; +import { + yesLetsTry, + nevermind, +} from '../../../../../app/_locales/en/messages.json'; +import CancelTransaction from '.'; + +const mockCreateCancelTransaction = jest.fn(); +const mockShowModal = jest.fn(); +const mockHideModal = jest.fn(); + +jest.mock('../../../../store/actions.js', () => { + return { + createCancelTransaction: () => mockCreateCancelTransaction, + showModal: () => mockShowModal, + hideModal: () => mockHideModal, + }; +}); describe('CancelTransaction Component', () => { - const t = (key) => key; - - it('should render a CancelTransaction modal', () => { - const wrapper = shallow(, { - context: { t }, - }); - - expect(wrapper.find(Modal)).toHaveLength(1); - expect(wrapper.find(CancelTransactionGasFee)).toHaveLength(1); - expect(wrapper.find(CancelTransactionGasFee).props().value).toStrictEqual( - '0x1319718a5000', - ); - expect(wrapper.find('.cancel-transaction__title').text()).toStrictEqual( - 'cancellationGasFee', - ); - expect( - wrapper.find('.cancel-transaction__description').text(), - ).toStrictEqual('attemptToCancelDescription'); + afterEach(() => { + mockCreateCancelTransaction.mockClear(); + mockShowModal.mockClear(); + mockHideModal.mockClear(); }); - it('should pass the correct props to the Modal component', async () => { - const createCancelTransactionSpy = sinon - .stub() - .callsFake(() => Promise.resolve()); - const hideModalSpy = sinon.spy(); + const props = { + newGasFee: '0x1319718a5000', // 21000000000000 + }; - const wrapper = shallow( - undefined} - />, - { context: { t } }, + it('should match snapshot', () => { + const mockStore = configureMockStore()(mockState); + + const { container } = renderWithProvider( + , + mockStore, ); - expect(wrapper.find(Modal)).toHaveLength(1); - const modalProps = wrapper.find(Modal).props(); + expect(container).toMatchSnapshot(); + }); - expect(modalProps.headerText).toStrictEqual('attemptToCancel'); - expect(modalProps.submitText).toStrictEqual('yesLetsTry'); - expect(modalProps.cancelText).toStrictEqual('nevermind'); + it('should call create cancel transaction and hide modal', async () => { + const mockStore = configureMockStore([thunk])(mockState); - expect(createCancelTransactionSpy.callCount).toStrictEqual(0); - expect(hideModalSpy.callCount).toStrictEqual(0); - await modalProps.onSubmit(); - expect(createCancelTransactionSpy.callCount).toStrictEqual(1); - expect(hideModalSpy.callCount).toStrictEqual(1); - modalProps.onCancel(); - expect(hideModalSpy.callCount).toStrictEqual(2); + const { queryByText } = renderWithProvider( + , + mockStore, + ); + + fireEvent.click(queryByText(yesLetsTry.message)); + + await waitFor(() => { + expect(mockCreateCancelTransaction).toHaveBeenCalled(); + expect(mockHideModal).toHaveBeenCalled(); + }); + }); + + it('should hide modal when clicking "Nevermind" button', () => { + const mockStore = configureMockStore([thunk])(mockState); + + const { queryByText } = renderWithProvider( + , + mockStore, + ); + + fireEvent.click(queryByText(nevermind.message)); + + expect(mockCreateCancelTransaction).not.toHaveBeenCalled(); + expect(mockHideModal).toHaveBeenCalled(); + }); + + it('should hide modal when closing from header', () => { + const mockStore = configureMockStore([thunk])(mockState); + + const { queryByTestId } = renderWithProvider( + , + mockStore, + ); + + fireEvent.click(queryByTestId('modal-header-close')); + + expect(mockCreateCancelTransaction).not.toHaveBeenCalled(); + expect(mockHideModal).toHaveBeenCalled(); }); }); diff --git a/ui/components/app/modals/confirm-delete-network/__snapshots__/confirm-delete-network.test.js.snap b/ui/components/app/modals/confirm-delete-network/__snapshots__/confirm-delete-network.test.js.snap new file mode 100644 index 000000000..7d90f75ae --- /dev/null +++ b/ui/components/app/modals/confirm-delete-network/__snapshots__/confirm-delete-network.test.js.snap @@ -0,0 +1,46 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Confirm Delete Network should match snapshot 1`] = ` +
+
+
+
+
+ Delete network? +
+
+ Are you sure you want to delete this network? +
+
+
+
+ + +
+
+
+`; diff --git a/ui/components/app/modals/confirm-delete-network/confirm-delete-network.test.js b/ui/components/app/modals/confirm-delete-network/confirm-delete-network.test.js index 64d6689d5..d6c3ec7cd 100644 --- a/ui/components/app/modals/confirm-delete-network/confirm-delete-network.test.js +++ b/ui/components/app/modals/confirm-delete-network/confirm-delete-network.test.js @@ -1,55 +1,52 @@ import React from 'react'; -import sinon from 'sinon'; -import { mount } from 'enzyme'; -import ConfirmDeleteNetwork from './confirm-delete-network.container'; +import { fireEvent, waitFor } from '@testing-library/react'; +import configureMockStore from 'redux-mock-store'; +import { renderWithProvider } from '../../../../../test/lib/render-helpers'; +import mockState from '../../../../../test/data/mock-state.json'; +import ConfirmDeleteNetwork from '.'; describe('Confirm Delete Network', () => { - let wrapper; - const props = { - hideModal: sinon.spy(), - delRpcTarget: sinon.stub().resolves(), - onConfirm: sinon.spy(), - target: '', + hideModal: jest.fn(), + onConfirm: jest.fn(), + delRpcTarget: jest.fn().mockResolvedValue(), + target: 'target', }; - beforeEach(() => { - wrapper = mount(, { - context: { - t: (str) => str, - }, - }); - }); - - afterEach(() => { - props.hideModal.resetHistory(); - props.delRpcTarget.resetHistory(); - props.onConfirm.resetHistory(); - }); - - it('renders delete network modal title', () => { - const modalTitle = wrapper.find('.modal-content__title'); - expect(modalTitle.text()).toStrictEqual('deleteNetwork'); - }); - - it('clicks cancel to hide modal', () => { - const cancelButton = wrapper.find( - '.button.btn-secondary.modal-container__footer-button', + it('should match snapshot', () => { + const mockStore = configureMockStore()(mockState); + const { container } = renderWithProvider( + , + mockStore, ); - cancelButton.simulate('click'); - expect(props.hideModal.calledOnce).toStrictEqual(true); + expect(container).toMatchSnapshot(); + }); + + it('clicks cancel to hide modal', async () => { + const { queryByText } = renderWithProvider( + , + ); + + fireEvent.click(queryByText('[cancel]')); + + expect(props.delRpcTarget).not.toHaveBeenCalled(); + expect(props.onConfirm).not.toHaveBeenCalled(); + + expect(props.hideModal).toHaveBeenCalled(); }); it('clicks delete to delete the target and hides modal', async () => { - const deleteButton = wrapper.find( - '.button.btn-danger-primary.modal-container__footer-button', + const { queryByText } = renderWithProvider( + , ); - deleteButton.simulate('click'); + fireEvent.click(queryByText('[delete]')); - expect(await props.delRpcTarget.calledOnce).toStrictEqual(true); - expect(props.hideModal.calledOnce).toStrictEqual(true); - expect(props.onConfirm.calledOnce).toStrictEqual(true); + await waitFor(() => { + expect(props.delRpcTarget).toHaveBeenCalled(); + expect(props.onConfirm).toHaveBeenCalled(); + expect(props.hideModal).toHaveBeenCalled(); + }); }); }); diff --git a/ui/components/app/modals/confirm-remove-account/__snapshots__/confirm-remove-account.test.js.snap b/ui/components/app/modals/confirm-remove-account/__snapshots__/confirm-remove-account.test.js.snap new file mode 100644 index 000000000..0585d2b1d --- /dev/null +++ b/ui/components/app/modals/confirm-remove-account/__snapshots__/confirm-remove-account.test.js.snap @@ -0,0 +1,154 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Confirm Remove Account should match snapshot 1`] = ` +
+
+
+
+ Remove account? +
+
+
+
+
+ + +
+
+
+ + +
+
+
+`; diff --git a/ui/components/app/modals/confirm-remove-account/confirm-remove-account.test.js b/ui/components/app/modals/confirm-remove-account/confirm-remove-account.test.js index 3570332b3..444188919 100644 --- a/ui/components/app/modals/confirm-remove-account/confirm-remove-account.test.js +++ b/ui/components/app/modals/confirm-remove-account/confirm-remove-account.test.js @@ -1,82 +1,72 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { Provider } from 'react-redux'; -import sinon from 'sinon'; -import configureStore from 'redux-mock-store'; -import { mount } from 'enzyme'; -import ConfirmRemoveAccount from './confirm-remove-account.container'; +import configureMockStore from 'redux-mock-store'; +import { fireEvent } from '@testing-library/react'; +import { renderWithProvider } from '../../../../../test/lib/render-helpers'; +import ConfirmRemoveAccount from '.'; describe('Confirm Remove Account', () => { - let wrapper; - const state = { metamask: { provider: { - chainId: '0x0', + chainId: '0x99', }, }, }; const props = { - hideModal: sinon.spy(), - removeAccount: sinon.stub().resolves(), - network: '101', + hideModal: jest.fn(), + removeAccount: jest.fn().mockResolvedValue(), identity: { address: '0x0', name: 'Account 1', }, - chainId: '0x0', + chainId: '0x99', rpcPrefs: {}, }; - const mockStore = configureStore(); - const store = mockStore(state); + const mockStore = configureMockStore()(state); - beforeEach(() => { - wrapper = mount( - - - , - { - context: { - t: (str) => str, - store, - }, - childContextTypes: { - t: PropTypes.func, - store: PropTypes.object, - }, - }, - ); - }); - - afterEach(() => { - props.hideModal.resetHistory(); - }); - - it('nevermind', () => { - const nevermind = wrapper.find({ type: 'secondary' }); - nevermind.simulate('click'); - - expect(props.hideModal.calledOnce).toStrictEqual(true); - }); - - it('remove', async () => { - const remove = wrapper.find({ type: 'primary' }); - remove.simulate('click'); - - expect(await props.removeAccount.calledOnce).toStrictEqual(true); - expect(props.removeAccount.getCall(0).args[0]).toStrictEqual( - props.identity.address, + it('should match snapshot', () => { + const { container } = renderWithProvider( + , + mockStore, ); - expect(props.hideModal.calledOnce).toStrictEqual(true); + expect(container).toMatchSnapshot(); }); - it('closes', () => { - const close = wrapper.find('.modal-container__header-close'); - close.simulate('click'); + it('should only hide modal when clicking "Nevermind"', () => { + const { queryByText } = renderWithProvider( + , + mockStore, + ); - expect(props.hideModal.calledOnce).toStrictEqual(true); + fireEvent.click(queryByText('Nevermind')); + + expect(props.removeAccount).not.toHaveBeenCalled(); + expect(props.hideModal).toHaveBeenCalled(); + }); + + it('should call remove account with identity address', async () => { + const { queryByText } = renderWithProvider( + , + mockStore, + ); + + fireEvent.click(queryByText('Remove')); + + expect(props.removeAccount).toHaveBeenCalledWith(props.identity.address); + expect(props.hideModal).toHaveBeenCalled(); + }); + + it('should close modal when clicking close from the header', () => { + const { queryByTestId } = renderWithProvider( + , + mockStore, + ); + + fireEvent.click(queryByTestId('modal-header-close')); + + expect(props.hideModal).toHaveBeenCalled(); }); }); diff --git a/ui/components/app/modals/confirm-reset-account/__snapshots__/confirm-reset-account.test.js.snap b/ui/components/app/modals/confirm-reset-account/__snapshots__/confirm-reset-account.test.js.snap new file mode 100644 index 000000000..12d0a8eb3 --- /dev/null +++ b/ui/components/app/modals/confirm-reset-account/__snapshots__/confirm-reset-account.test.js.snap @@ -0,0 +1,46 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Confirm Reset Account should match snapshot 1`] = ` +
+
+
+
+
+ [resetAccount]? +
+
+ [resetAccountDescription] +
+
+
+
+ + +
+
+
+`; diff --git a/ui/components/app/modals/confirm-reset-account/confirm-reset-account.test.js b/ui/components/app/modals/confirm-reset-account/confirm-reset-account.test.js index eda960772..eed420a45 100644 --- a/ui/components/app/modals/confirm-reset-account/confirm-reset-account.test.js +++ b/ui/components/app/modals/confirm-reset-account/confirm-reset-account.test.js @@ -1,44 +1,41 @@ import React from 'react'; -import sinon from 'sinon'; -import { mount } from 'enzyme'; -import ConfirmResetAccount from './confirm-reset-account.container'; +import { fireEvent } from '@testing-library/react'; +import { renderWithProvider } from '../../../../../test/lib/render-helpers'; +import ConfirmResetAccount from '.'; describe('Confirm Reset Account', () => { - let wrapper; - const props = { - hideModal: sinon.spy(), - resetAccount: sinon.stub().resolves(), + hideModal: jest.fn(), + resetAccount: jest.fn().mockResolvedValue(), }; - 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 nevermind button is clicked', () => { - const nevermind = wrapper.find( - '.btn-secondary.modal-container__footer-button', + const { queryByText } = renderWithProvider( + , ); - nevermind.simulate('click'); - expect(props.hideModal.calledOnce).toStrictEqual(true); + fireEvent.click(queryByText('[nevermind]')); + + expect(props.resetAccount).not.toHaveBeenCalled(); + expect(props.hideModal).toHaveBeenCalled(); }); it('resets account and hides modal when reset button is clicked', async () => { - const reset = wrapper.find( - '.btn-danger-primary.modal-container__footer-button', + const { queryByText } = renderWithProvider( + , ); - reset.simulate('click'); - expect(await props.resetAccount.calledOnce).toStrictEqual(true); - expect(props.hideModal.calledOnce).toStrictEqual(true); + fireEvent.click(queryByText('[reset]')); + + expect(props.resetAccount).toHaveBeenCalled(); + expect(props.hideModal).toHaveBeenCalled(); }); }); diff --git a/ui/components/app/modals/metametrics-opt-in-modal/__snapshots__/metametrics-opt-in-modal.test.js.snap b/ui/components/app/modals/metametrics-opt-in-modal/__snapshots__/metametrics-opt-in-modal.test.js.snap new file mode 100644 index 000000000..fa8d0b9d9 --- /dev/null +++ b/ui/components/app/modals/metametrics-opt-in-modal/__snapshots__/metametrics-opt-in-modal.test.js.snap @@ -0,0 +1,334 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MetaMetrics Opt In should match snapshot 1`] = ` +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ [metametricsHelpImproveMetaMask] +
+
+
+ [metametricsOptInDescription] +
+
+ [metametricsCommitmentsIntro] +
+
+
+ +
+ [metametricsCommitmentsAllowOptOut] +
+
+
+ +
+ [metametricsCommitmentsSendAnonymizedEvents] +
+
+
+ +
+ [metametricsCommitmentsNeverCollectKeysEtc] +
+
+
+ +
+ [metametricsCommitmentsNeverCollectIP] +
+
+
+ +
+ [metametricsCommitmentsNeverSellDataForProfit] +
+
+
+
+
+ [gdprMessage] +
+
+
+
+
+ + +
+
+
+
+
+
+`; diff --git a/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.test.js b/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.test.js index 3af10b36b..0324212aa 100644 --- a/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.test.js +++ b/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.test.js @@ -1,59 +1,46 @@ import React from 'react'; -import sinon from 'sinon'; -import { mount } from 'enzyme'; -import messages from '../../../../../app/_locales/en/messages.json'; -import MetaMetricsOptIn from './metametrics-opt-in-modal.container'; +import { fireEvent, waitFor } from '@testing-library/react'; +import { renderWithProvider } from '../../../../../test/lib/render-helpers'; +import MetaMetricsOptIn from '.'; describe('MetaMetrics Opt In', () => { - let wrapper; - const props = { - setParticipateInMetaMetrics: sinon.stub().resolves(), - hideModal: sinon.spy(), + setParticipateInMetaMetrics: jest.fn().mockResolvedValue(), + hideModal: jest.fn(), participateInMetaMetrics: null, }; - beforeEach(() => { - wrapper = mount(, { - context: { - trackEvent: () => undefined, - t: (key) => messages[key].message, - }, - }); - }); + it('should match snapshot', () => { + const { container } = renderWithProvider( + , + ); - afterEach(() => { - props.setParticipateInMetaMetrics.resetHistory(); - props.hideModal.resetHistory(); + expect(container).toMatchSnapshot(); }); it('passes false to setParticipateInMetaMetrics and hides modal', async () => { - const noThanks = wrapper.find( - '.btn-secondary.page-container__footer-button', + const { queryByText } = renderWithProvider( + , ); - noThanks.simulate('click'); - expect(await props.setParticipateInMetaMetrics.calledOnce).toStrictEqual( - true, - ); - expect(props.setParticipateInMetaMetrics.getCall(0).args[0]).toStrictEqual( - false, - ); - expect(props.hideModal.calledOnce).toStrictEqual(true); + fireEvent.click(queryByText('[noThanks]')); + + await waitFor(() => { + expect(props.setParticipateInMetaMetrics).toHaveBeenCalledWith(false); + expect(props.hideModal).toHaveBeenCalled(); + }); }); it('passes true to setParticipateInMetaMetrics and hides modal', async () => { - const affirmAgree = wrapper.find( - '.btn-primary.page-container__footer-button', + const { queryByText } = renderWithProvider( + , ); - affirmAgree.simulate('click'); - expect(await props.setParticipateInMetaMetrics.calledOnce).toStrictEqual( - true, - ); - expect(props.setParticipateInMetaMetrics.getCall(0).args[0]).toStrictEqual( - true, - ); - expect(props.hideModal.calledOnce).toStrictEqual(true); + fireEvent.click(queryByText('[affirmAgree]')); + + await waitFor(() => { + expect(props.setParticipateInMetaMetrics).toHaveBeenCalledWith(true); + expect(props.hideModal).toHaveBeenCalled(); + }); }); });