mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Continue converting tests from enzyme to @testing-library/react (#15996)
This commit is contained in:
Thomas Huang
GitHub
parent
18ca016cf0
commit
19a88f7aee
@ -0,0 +1,101 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`CancelTransaction Component should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="modal-container"
|
||||
>
|
||||
<div
|
||||
class="modal-container__header"
|
||||
>
|
||||
<div
|
||||
class="modal-container__header-text"
|
||||
>
|
||||
Attempt to cancel?
|
||||
</div>
|
||||
<div
|
||||
class="modal-container__header-close"
|
||||
data-testid="modal-header-close"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="modal-container__content"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="cancel-transaction__title"
|
||||
>
|
||||
Cancellation gas fee
|
||||
</div>
|
||||
<div
|
||||
class="cancel-transaction__cancel-transaction-gas-fee-container"
|
||||
>
|
||||
<div
|
||||
class="cancel-transaction-gas-fee"
|
||||
>
|
||||
<div
|
||||
class="currency-display-component cancel-transaction-gas-fee__eth"
|
||||
title="0.000021 ETH"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
0.000021
|
||||
</span>
|
||||
<span
|
||||
class="currency-display-component__suffix"
|
||||
>
|
||||
ETH
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="currency-display-component cancel-transaction-gas-fee__fiat"
|
||||
title="0.000021 ETH"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
0.000021
|
||||
</span>
|
||||
<span
|
||||
class="currency-display-component__suffix"
|
||||
>
|
||||
ETH
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="cancel-transaction__description"
|
||||
>
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="modal-container__footer"
|
||||
>
|
||||
<button
|
||||
class="button btn--rounded btn-secondary modal-container__footer-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Nevermind
|
||||
</button>
|
||||
<button
|
||||
class="button btn--rounded btn-primary modal-container__footer-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Yes, let's try
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -0,0 +1,46 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`CancelTransactionGasFee Component should render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="cancel-transaction-gas-fee"
|
||||
>
|
||||
<div
|
||||
class="currency-display-component cancel-transaction-gas-fee__eth"
|
||||
title="0 ETH"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
<span
|
||||
class="currency-display-component__suffix"
|
||||
>
|
||||
ETH
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="currency-display-component cancel-transaction-gas-fee__fiat"
|
||||
title="0 ETH"
|
||||
>
|
||||
<span
|
||||
class="currency-display-component__prefix"
|
||||
/>
|
||||
<span
|
||||
class="currency-display-component__text"
|
||||
>
|
||||
0
|
||||
</span>
|
||||
<span
|
||||
class="currency-display-component__suffix"
|
||||
>
|
||||
ETH
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -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(<CancelTransactionGasFee value="0x3b9aca00" />);
|
||||
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(
|
||||
<CancelTransactionGasFee {...props} />,
|
||||
mockStore,
|
||||
);
|
||||
|
||||
expect(fiatDisplay.props().value).toStrictEqual('0x3b9aca00');
|
||||
expect(fiatDisplay.props().className).toStrictEqual(
|
||||
'cancel-transaction-gas-fee__fiat',
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -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(<CancelTransaction newGasFee="0x1319718a5000" />, {
|
||||
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(
|
||||
<CancelTransaction
|
||||
defaultNewGasPrice="0x3b9aca00"
|
||||
createCancelTransaction={createCancelTransactionSpy}
|
||||
hideModal={hideModalSpy}
|
||||
showTransactionConfirmedModal={() => undefined}
|
||||
/>,
|
||||
{ context: { t } },
|
||||
it('should match snapshot', () => {
|
||||
const mockStore = configureMockStore()(mockState);
|
||||
|
||||
const { container } = renderWithProvider(
|
||||
<CancelTransaction {...props} />,
|
||||
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(
|
||||
<CancelTransaction />,
|
||||
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(
|
||||
<CancelTransaction />,
|
||||
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(
|
||||
<CancelTransaction {...props} />,
|
||||
mockStore,
|
||||
);
|
||||
|
||||
fireEvent.click(queryByTestId('modal-header-close'));
|
||||
|
||||
expect(mockCreateCancelTransaction).not.toHaveBeenCalled();
|
||||
expect(mockHideModal).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,46 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Confirm Delete Network should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="modal-container"
|
||||
>
|
||||
<div
|
||||
class="modal-container__content"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-content__title"
|
||||
>
|
||||
Delete network?
|
||||
</div>
|
||||
<div
|
||||
class="modal-content__description"
|
||||
>
|
||||
Are you sure you want to delete this network?
|
||||
</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-danger-primary modal-container__footer-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -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(<ConfirmDeleteNetwork.WrappedComponent {...props} />, {
|
||||
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(
|
||||
<ConfirmDeleteNetwork {...props} />,
|
||||
mockStore,
|
||||
);
|
||||
cancelButton.simulate('click');
|
||||
|
||||
expect(props.hideModal.calledOnce).toStrictEqual(true);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('clicks cancel to hide modal', async () => {
|
||||
const { queryByText } = renderWithProvider(
|
||||
<ConfirmDeleteNetwork.WrappedComponent {...props} />,
|
||||
);
|
||||
|
||||
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(
|
||||
<ConfirmDeleteNetwork.WrappedComponent {...props} />,
|
||||
);
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,154 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Confirm Remove Account should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="modal-container"
|
||||
>
|
||||
<div
|
||||
class="modal-container__header"
|
||||
>
|
||||
<div
|
||||
class="modal-container__header-text"
|
||||
>
|
||||
Remove account?
|
||||
</div>
|
||||
<div
|
||||
class="modal-container__header-close"
|
||||
data-testid="modal-header-close"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="modal-container__content"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="confirm-remove-account__account"
|
||||
>
|
||||
<div
|
||||
class="confirm-remove-account__account__identicon"
|
||||
>
|
||||
<div
|
||||
class=""
|
||||
>
|
||||
<div
|
||||
class="identicon"
|
||||
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(24, 151, 242);"
|
||||
>
|
||||
<svg
|
||||
height="32"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
>
|
||||
<rect
|
||||
fill="#2362E1"
|
||||
height="32"
|
||||
transform="translate(3.589330184792517 -5.334310623233522) rotate(458.4 16 16)"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="#F94301"
|
||||
height="32"
|
||||
transform="translate(-15.363459289650208 7.992351635486631) rotate(268.8 16 16)"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
<rect
|
||||
fill="#FA7900"
|
||||
height="32"
|
||||
transform="translate(-9.076254079301423 29.480015880683375) rotate(117.3 16 16)"
|
||||
width="32"
|
||||
x="0"
|
||||
y="0"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="confirm-remove-account__account__name"
|
||||
>
|
||||
<span
|
||||
class="confirm-remove-account__account__label"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="account_value"
|
||||
>
|
||||
Account 1
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="confirm-remove-account__account__address"
|
||||
>
|
||||
<span
|
||||
class="confirm-remove-account__account__label"
|
||||
>
|
||||
Public address
|
||||
</span>
|
||||
<span
|
||||
class="account_value"
|
||||
>
|
||||
0x0...0
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="confirm-remove-account__account__link"
|
||||
>
|
||||
<a
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title="View account on Etherscan"
|
||||
>
|
||||
<i
|
||||
class="fa fa-share-square"
|
||||
title="View account on Etherscan"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="confirm-remove-account__description"
|
||||
>
|
||||
This account will be removed from your wallet. Please make sure you have the original Secret Recovery Phrase or private key for this imported account before continuing. You can import or create accounts again from the account drop-down.
|
||||
<a
|
||||
class="confirm-remove-account__link"
|
||||
href="https://metamask.zendesk.com/hc/en-us/articles/360015289932"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
learn more
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="modal-container__footer"
|
||||
>
|
||||
<button
|
||||
class="button btn--rounded btn-secondary modal-container__footer-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Nevermind
|
||||
</button>
|
||||
<button
|
||||
class="button btn--rounded btn-primary modal-container__footer-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -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(
|
||||
<Provider store={store}>
|
||||
<ConfirmRemoveAccount.WrappedComponent {...props} />
|
||||
</Provider>,
|
||||
{
|
||||
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(
|
||||
<ConfirmRemoveAccount.WrappedComponent {...props} />,
|
||||
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(
|
||||
<ConfirmRemoveAccount.WrappedComponent {...props} />,
|
||||
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(
|
||||
<ConfirmRemoveAccount.WrappedComponent {...props} />,
|
||||
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(
|
||||
<ConfirmRemoveAccount.WrappedComponent {...props} />,
|
||||
mockStore,
|
||||
);
|
||||
|
||||
fireEvent.click(queryByTestId('modal-header-close'));
|
||||
|
||||
expect(props.hideModal).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,46 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Confirm Reset Account should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="modal-container"
|
||||
>
|
||||
<div
|
||||
class="modal-container__content"
|
||||
>
|
||||
<div
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
class="modal-content__title"
|
||||
>
|
||||
[resetAccount]?
|
||||
</div>
|
||||
<div
|
||||
class="modal-content__description"
|
||||
>
|
||||
[resetAccountDescription]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="modal-container__footer"
|
||||
>
|
||||
<button
|
||||
class="button btn--rounded btn-secondary modal-container__footer-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
[nevermind]
|
||||
</button>
|
||||
<button
|
||||
class="button btn--rounded btn-danger-primary modal-container__footer-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
[reset]
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -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(<ConfirmResetAccount.WrappedComponent {...props} />, {
|
||||
context: {
|
||||
t: (str) => str,
|
||||
},
|
||||
});
|
||||
});
|
||||
it('should match snapshot', () => {
|
||||
const { container } = renderWithProvider(
|
||||
<ConfirmResetAccount.WrappedComponent {...props} />,
|
||||
);
|
||||
|
||||
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(
|
||||
<ConfirmResetAccount.WrappedComponent {...props} />,
|
||||
);
|
||||
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(
|
||||
<ConfirmResetAccount.WrappedComponent {...props} />,
|
||||
);
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
@ -0,0 +1,334 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`MetaMetrics Opt In should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="metametrics-opt-in metametrics-opt-in-modal"
|
||||
>
|
||||
<div
|
||||
class="metametrics-opt-in__main"
|
||||
>
|
||||
<div
|
||||
class="metametrics-opt-in__content"
|
||||
>
|
||||
<div
|
||||
class="app-header__logo-container"
|
||||
data-testid="app-header-logo"
|
||||
>
|
||||
<svg
|
||||
class="app-header__metafox-logo--horizontal"
|
||||
height="30"
|
||||
viewBox="0 0 1311 242"
|
||||
width="162"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
>
|
||||
<g
|
||||
fill="var(--color-text-default)"
|
||||
transform="translate(361 61)"
|
||||
>
|
||||
<path
|
||||
d="m796.7 60.9c-6.8-4.5-14.3-7.7-21.4-11.7-4.6-2.6-9.5-4.9-13.5-8.2-6.8-5.6-5.4-16.6 1.7-21.4 10.2-6.8 27.1-3 28.9 10.9 0 .3.3.5.6.5h15.4c.4 0 .7-.3.6-.7-.8-9.6-4.5-17.6-11.3-22.7-6.5-4.9-13.9-7.5-21.8-7.5-40.7 0-44.4 43.1-22.5 56.7 2.5 1.6 24 12.4 31.6 17.1s10 13.3 6.7 20.1c-3 6.2-10.8 10.5-18.6 10-8.5-.5-15.1-5.1-17.4-12.3-.4-1.3-.6-3.8-.6-4.9 0-.3-.3-.6-.6-.6h-16.7c-.3 0-.6.3-.6.6 0 12.1 3 18.8 11.2 24.9 7.7 5.8 16.1 8.2 24.8 8.2 22.8 0 34.6-12.9 37-26.3 2.1-13.1-1.8-24.9-13.5-32.7z"
|
||||
/>
|
||||
<path
|
||||
d="m71.6 2.3h-7.4-8.1c-.3 0-.5.2-.6.4l-13.7 45.2c-.2.6-1 .6-1.2 0l-13.7-45.2c-.1-.3-.3-.4-.6-.4h-8.1-7.4-10c-.3 0-.6.3-.6.6v115.4c0 .3.3.6.6.6h16.7c.3 0 .6-.3.6-.6v-87.7c0-.7 1-.8 1.2-.2l13.8 45.5 1 3.2c.1.3.3.4.6.4h12.8c.3 0 .5-.2.6-.4l1-3.2 13.8-45.5c.2-.7 1.2-.5 1.2.2v87.7c0 .3.3.6.6.6h16.7c.3 0 .6-.3.6-.6v-115.4c0-.3-.3-.6-.6-.6z"
|
||||
/>
|
||||
<path
|
||||
d="m541 2.3c-.3 0-.5.2-.6.4l-13.7 45.2c-.2.6-1 .6-1.2 0l-13.7-45.2c-.1-.3-.3-.4-.6-.4h-25.4c-.3 0-.6.3-.6.6v115.4c0 .3.3.6.6.6h16.7c.3 0 .6-.3.6-.6v-87.7c0-.7 1-.8 1.2-.2l13.8 45.5 1 3.2c.1.3.3.4.6.4h12.8c.3 0 .5-.2.6-.4l1-3.2 13.8-45.5c.2-.7 1.2-.5 1.2.2v87.7c0 .3.3.6.6.6h16.7c.3 0 .6-.3.6-.6v-115.4c0-.3-.3-.6-.6-.6z"
|
||||
/>
|
||||
<path
|
||||
d="m325.6 2.3h-31.1-16.7-31.1c-.3 0-.6.3-.6.6v14.4c0 .3.3.6.6.6h30.5v100.4c0 .3.3.6.6.6h16.7c.3 0 .6-.3.6-.6v-100.4h30.5c.3 0 .6-.3.6-.6v-14.4c0-.3-.2-.6-.6-.6z"
|
||||
/>
|
||||
<path
|
||||
d="m424.1 118.9h15.2c.4 0 .7-.4.6-.8l-31.4-115.8c-.1-.3-.3-.4-.6-.4h-5.8-10.2-5.8c-.3 0-.5.2-.6.4l-31.4 115.8c-.1.4.2.8.6.8h15.2c.3 0 .5-.2.6-.4l9.1-33.7c.1-.3.3-.4.6-.4h33.6c.3 0 .5.2.6.4l9.1 33.7c.1.2.4.4.6.4zm-39.9-51 12.2-45.1c.2-.6 1-.6 1.2 0l12.2 45.1c.1.4-.2.8-.6.8h-24.4c-.4 0-.7-.4-.6-.8z"
|
||||
/>
|
||||
<path
|
||||
d="m683.3 118.9h15.2c.4 0 .7-.4.6-.8l-31.4-115.8c-.1-.3-.3-.4-.6-.4h-5.8-10.2-5.8c-.3 0-.5.2-.6.4l-31.4 115.8c-.1.4.2.8.6.8h15.2c.3 0 .5-.2.6-.4l9.1-33.7c.1-.3.3-.4.6-.4h33.6c.3 0 .5.2.6.4l9.1 33.7c.1.2.3.4.6.4zm-39.9-51 12.2-45.1c.2-.6 1-.6 1.2 0l12.2 45.1c.1.4-.2.8-.6.8h-24.4c-.4 0-.7-.4-.6-.8z"
|
||||
/>
|
||||
<path
|
||||
d="m149.8 101.8v-35.8c0-.3.3-.6.6-.6h44.5c.3 0 .6-.3.6-.6v-14.4c0-.3-.3-.6-.6-.6h-44.5c-.3 0-.6-.3-.6-.6v-30.6c0-.3.3-.6.6-.6h50.6c.3 0 .6-.3.6-.6v-14.4c0-.3-.3-.6-.6-.6h-51.2-17.3c-.3 0-.6.3-.6.6v15 31.9 15.6 37 15.8c0 .3.3.6.6.6h17.3 53.3c.3 0 .6-.3.6-.6v-15.2c0-.3-.3-.6-.6-.6h-52.8c-.3-.1-.5-.3-.5-.7z"
|
||||
/>
|
||||
<path
|
||||
d="m949.3 117.9-57.8-59.7c-.2-.2-.2-.6 0-.8l52-54c.4-.4.1-1-.4-1h-21.3c-.2 0-.3.1-.4.2l-44.1 45.8c-.4.4-1 .1-1-.4v-45c0-.3-.3-.6-.6-.6h-16.7c-.3 0-.6.3-.6.6v115.4c0 .3.3.6.6.6h16.7c.3 0 .6-.3.6-.6v-50.8c0-.5.7-.8 1-.4l50 51.6c.1.1.3.2.4.2h21.3c.4-.1.7-.8.3-1.1z"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
transform="translate(1 1)"
|
||||
>
|
||||
<path
|
||||
d="m246.1.2-101.1 75 18.8-44.2z"
|
||||
fill="#e17726"
|
||||
stroke="#e17726"
|
||||
/>
|
||||
<g
|
||||
fill="#e27625"
|
||||
stroke="#e27625"
|
||||
transform="translate(2)"
|
||||
>
|
||||
<path
|
||||
d="m10.9.2 100.2 75.7-17.9-44.9z"
|
||||
/>
|
||||
<path
|
||||
d="m207.7 174.1-26.9 41.2 57.6 15.9 16.5-56.2z"
|
||||
/>
|
||||
<path
|
||||
d="m.2 175 16.4 56.2 57.5-15.9-26.8-41.2z"
|
||||
/>
|
||||
<path
|
||||
d="m71 104.5-16 24.2 57 2.6-1.9-61.5z"
|
||||
/>
|
||||
<path
|
||||
d="m184 104.5-39.7-35.4-1.3 62.2 57-2.6z"
|
||||
/>
|
||||
<path
|
||||
d="m74.1 215.3 34.5-16.7-29.7-23.2z"
|
||||
/>
|
||||
<path
|
||||
d="m146.4 198.6 34.4 16.7-4.7-39.9z"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
fill="#d5bfb2"
|
||||
stroke="#d5bfb2"
|
||||
transform="translate(76 198)"
|
||||
>
|
||||
<path
|
||||
d="m106.8 17.3-34.4-16.7 2.8 22.4-.3 9.5z"
|
||||
/>
|
||||
<path
|
||||
d="m.1 17.3 32 15.2-.2-9.5 2.7-22.4z"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="m108.7 160.6-28.6-8.4 20.2-9.3z"
|
||||
fill="#233447"
|
||||
stroke="#233447"
|
||||
/>
|
||||
<path
|
||||
d="m150.3 160.6 8.4-17.7 20.3 9.3z"
|
||||
fill="#233447"
|
||||
stroke="#233447"
|
||||
/>
|
||||
<g
|
||||
fill="#cc6228"
|
||||
stroke="#cc6228"
|
||||
transform="translate(49 128)"
|
||||
>
|
||||
<path
|
||||
d="m27.1 87.3 5-41.2-31.8.9z"
|
||||
/>
|
||||
<path
|
||||
d="m128.9 46.1 4.9 41.2 26.9-40.3z"
|
||||
/>
|
||||
<path
|
||||
d="m153 .7-57 2.6 5.3 29.3 8.4-17.7 20.3 9.3z"
|
||||
/>
|
||||
<path
|
||||
d="m31.1 24.2 20.2-9.3 8.4 17.7 5.3-29.3-57-2.6z"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
fill="#e27525"
|
||||
stroke="#e27525"
|
||||
transform="translate(57 128)"
|
||||
>
|
||||
<path
|
||||
d="m0 .7 23.9 46.7-.8-23.2z"
|
||||
/>
|
||||
<path
|
||||
d="m122 24.2-.9 23.2 23.9-46.7z"
|
||||
/>
|
||||
<path
|
||||
d="m57 3.3-5.3 29.3 6.7 34.6 1.5-45.6z"
|
||||
/>
|
||||
<path
|
||||
d="m88 3.3-2.8 18.2 1.4 45.7 6.7-34.6z"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
d="m150.3 160.6-6.7 34.6 4.8 3.4 29.7-23.2.9-23.2z"
|
||||
fill="#f5841f"
|
||||
stroke="#f5841f"
|
||||
/>
|
||||
<path
|
||||
d="m80.1 152.2.8 23.2 29.7 23.2 4.8-3.4-6.7-34.6z"
|
||||
fill="#f5841f"
|
||||
stroke="#f5841f"
|
||||
/>
|
||||
<path
|
||||
d="m150.9 230.5.3-9.5-2.6-2.2h-38.2l-2.5 2.2.2 9.5-32-15.2 11.2 9.2 22.7 15.7h38.9l22.8-15.7 11.1-9.2z"
|
||||
fill="#c0ac9d"
|
||||
stroke="#c0ac9d"
|
||||
/>
|
||||
<path
|
||||
d="m148.4 198.6-4.8-3.4h-28.2l-4.8 3.4-2.7 22.4 2.5-2.2h38.2l2.6 2.2z"
|
||||
fill="#161616"
|
||||
stroke="#161616"
|
||||
/>
|
||||
<g
|
||||
fill="#763e1a"
|
||||
stroke="#763e1a"
|
||||
>
|
||||
<path
|
||||
d="m250.4 80.1 8.5-41.4-12.8-38.5-97.7 72.5 37.6 31.8 53.1 15.5 11.7-13.7-5.1-3.7 8.1-7.4-6.2-4.8 8.1-6.2z"
|
||||
/>
|
||||
<path
|
||||
d="m.1 38.7 8.6 41.4-5.5 4.1 8.2 6.2-6.2 4.8 8.1 7.4-5.1 3.7 11.7 13.7 53.1-15.5 37.6-31.8-97.7-72.5z"
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
fill="#f5841f"
|
||||
stroke="#f5841f"
|
||||
>
|
||||
<path
|
||||
d="m239.1 120-53.1-15.5 16 24.2-23.9 46.7 31.6-.4h47.2z"
|
||||
/>
|
||||
<path
|
||||
d="m73 104.5-53.1 15.5-17.7 55h47.1l31.6.4-23.9-46.7z"
|
||||
/>
|
||||
<path
|
||||
d="m145 131.3 3.4-58.6 15.4-41.7h-68.6l15.4 41.7 3.4 58.6 1.3 18.4.1 45.5h28.2l.1-45.5z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<img
|
||||
alt=""
|
||||
class="app-header__metafox-logo--icon"
|
||||
height="42"
|
||||
src="./images/logo/metamask-fox.svg"
|
||||
width="42"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="metametrics-opt-in__body-graphic"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
src="images/metrics-chart.svg"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="metametrics-opt-in__title"
|
||||
>
|
||||
[metametricsHelpImproveMetaMask]
|
||||
</div>
|
||||
<div
|
||||
class="metametrics-opt-in__body"
|
||||
>
|
||||
<div
|
||||
class="metametrics-opt-in__description"
|
||||
>
|
||||
[metametricsOptInDescription]
|
||||
</div>
|
||||
<div
|
||||
class="metametrics-opt-in__description"
|
||||
>
|
||||
[metametricsCommitmentsIntro]
|
||||
</div>
|
||||
<div
|
||||
class="metametrics-opt-in__committments"
|
||||
>
|
||||
<div
|
||||
class="metametrics-opt-in__row"
|
||||
>
|
||||
<i
|
||||
class="fa fa-check"
|
||||
/>
|
||||
<div
|
||||
class="metametrics-opt-in__row-description"
|
||||
>
|
||||
[metametricsCommitmentsAllowOptOut]
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="metametrics-opt-in__row"
|
||||
>
|
||||
<i
|
||||
class="fa fa-check"
|
||||
/>
|
||||
<div
|
||||
class="metametrics-opt-in__row-description"
|
||||
>
|
||||
[metametricsCommitmentsSendAnonymizedEvents]
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="metametrics-opt-in__row metametrics-opt-in__break-row"
|
||||
>
|
||||
<i
|
||||
class="fa fa-times"
|
||||
/>
|
||||
<div
|
||||
class="metametrics-opt-in__row-description"
|
||||
>
|
||||
[metametricsCommitmentsNeverCollectKeysEtc]
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="metametrics-opt-in__row"
|
||||
>
|
||||
<i
|
||||
class="fa fa-times"
|
||||
/>
|
||||
<div
|
||||
class="metametrics-opt-in__row-description"
|
||||
>
|
||||
[metametricsCommitmentsNeverCollectIP]
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="metametrics-opt-in__row"
|
||||
>
|
||||
<i
|
||||
class="fa fa-times"
|
||||
/>
|
||||
<div
|
||||
class="metametrics-opt-in__row-description"
|
||||
>
|
||||
[metametricsCommitmentsNeverSellDataForProfit]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="metametrics-opt-in__bottom-text"
|
||||
>
|
||||
[gdprMessage]
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="metametrics-opt-in__footer"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
[noThanks]
|
||||
</button>
|
||||
<button
|
||||
class="button btn--rounded btn-primary page-container__footer-button"
|
||||
data-testid="page-container-footer-next"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
[affirmAgree]
|
||||
</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -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(<MetaMetricsOptIn.WrappedComponent {...props} />, {
|
||||
context: {
|
||||
trackEvent: () => undefined,
|
||||
t: (key) => messages[key].message,
|
||||
},
|
||||
});
|
||||
});
|
||||
it('should match snapshot', () => {
|
||||
const { container } = renderWithProvider(
|
||||
<MetaMetricsOptIn.WrappedComponent />,
|
||||
);
|
||||
|
||||
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(
|
||||
<MetaMetricsOptIn.WrappedComponent {...props} />,
|
||||
);
|
||||
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(
|
||||
<MetaMetricsOptIn.WrappedComponent {...props} />,
|
||||
);
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user