mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
Continue converting tests from enzyme to @testing-library/react (#16458)
* Add transaction activity log component * Remove duplicate tx activity log snapshot. * Convert Advanced Tab to tlr. * Lint fix * Convert Settings Tab test to tlr. * Convert Send Amount Row test to tlr. * Convert Send Row Error Message test to tlr. * Add Mock Send State json file. * Lint fix * Use proper testid for jazz icon for settings e2e * Update Send Amount Row snapshot
This commit is contained in:
Thomas Huang
GitHub
parent
33b09c94df
commit
119219b5d2
1338
test/data/mock-send-state.json
Normal file
1338
test/data/mock-send-state.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -31,7 +31,7 @@ describe('Settings', function () {
|
||||
|
||||
// finds the jazzicon toggle turned on
|
||||
await driver.findElement(
|
||||
'[data-test-id="jazz_icon"] .settings-page__content-item__identicon__item__icon--active',
|
||||
'[data-testid="jazz_icon"] .settings-page__content-item__identicon__item__icon--active',
|
||||
);
|
||||
|
||||
const jazziconText = await driver.findElement({
|
||||
|
||||
@ -0,0 +1,217 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SendAmountRow Component render Collectible Asset Type should match snapshot for token collectible type 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="send-v2__form-row"
|
||||
>
|
||||
<div
|
||||
class="send-v2__form-label"
|
||||
>
|
||||
Amount:
|
||||
<button
|
||||
class="send-v2__amount-max"
|
||||
>
|
||||
<input
|
||||
readonly=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<div
|
||||
class="send-v2__amount-max__button"
|
||||
>
|
||||
Max
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="send-v2__form-field-container"
|
||||
>
|
||||
<div
|
||||
class="send-v2__form-field"
|
||||
>
|
||||
<div
|
||||
class="unit-input"
|
||||
>
|
||||
<div
|
||||
class="unit-input__inputs"
|
||||
>
|
||||
<div
|
||||
class="unit-input__input-container"
|
||||
>
|
||||
<input
|
||||
class="unit-input__input"
|
||||
data-testid="currency-input"
|
||||
dir="ltr"
|
||||
placeholder="0"
|
||||
style="width: 1.5ch;"
|
||||
type="number"
|
||||
value="0"
|
||||
/>
|
||||
<div
|
||||
class="unit-input__suffix"
|
||||
>
|
||||
ETH
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="currency-input__conversion-component"
|
||||
>
|
||||
No conversion rate available
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="currency-input__swap-component"
|
||||
data-testid="currency-swap"
|
||||
>
|
||||
<i
|
||||
class="fa fa-retweet fa-lg"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`SendAmountRow Component render Native Asset Type should match snapshot for native asset type 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="send-v2__form-row"
|
||||
>
|
||||
<div
|
||||
class="send-v2__form-label"
|
||||
>
|
||||
Amount:
|
||||
<button
|
||||
class="send-v2__amount-max"
|
||||
>
|
||||
<input
|
||||
readonly=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<div
|
||||
class="send-v2__amount-max__button"
|
||||
>
|
||||
Max
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="send-v2__form-field-container"
|
||||
>
|
||||
<div
|
||||
class="send-v2__form-field"
|
||||
>
|
||||
<div
|
||||
class="unit-input"
|
||||
>
|
||||
<div
|
||||
class="unit-input__inputs"
|
||||
>
|
||||
<div
|
||||
class="unit-input__input-container"
|
||||
>
|
||||
<input
|
||||
class="unit-input__input"
|
||||
data-testid="currency-input"
|
||||
dir="ltr"
|
||||
placeholder="0"
|
||||
style="width: 1.5ch;"
|
||||
type="number"
|
||||
value="1"
|
||||
/>
|
||||
<div
|
||||
class="unit-input__suffix"
|
||||
>
|
||||
ETH
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="currency-input__conversion-component"
|
||||
>
|
||||
No conversion rate available
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="currency-input__swap-component"
|
||||
data-testid="currency-swap"
|
||||
>
|
||||
<i
|
||||
class="fa fa-retweet fa-lg"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`SendAmountRow Component render Token Asset Type should match snapshot for token asset type 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="send-v2__form-row"
|
||||
>
|
||||
<div
|
||||
class="send-v2__form-label"
|
||||
>
|
||||
Amount:
|
||||
<button
|
||||
class="send-v2__amount-max"
|
||||
>
|
||||
<input
|
||||
readonly=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<div
|
||||
class="send-v2__amount-max__button"
|
||||
>
|
||||
Max
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="send-v2__form-field-container"
|
||||
>
|
||||
<div
|
||||
class="send-v2__form-field"
|
||||
>
|
||||
<div
|
||||
class="unit-input"
|
||||
>
|
||||
<div
|
||||
class="unit-input__inputs"
|
||||
>
|
||||
<div
|
||||
class="unit-input__input-container"
|
||||
>
|
||||
<input
|
||||
class="unit-input__input"
|
||||
dir="ltr"
|
||||
placeholder="0"
|
||||
style="width: 1.5ch;"
|
||||
type="number"
|
||||
value="0"
|
||||
/>
|
||||
<div
|
||||
class="unit-input__suffix"
|
||||
>
|
||||
META
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="currency-input__conversion-component"
|
||||
>
|
||||
No conversion rate available
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,102 +0,0 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import sinon from 'sinon';
|
||||
import SendRowWrapper from '../send-row-wrapper/send-row-wrapper.component';
|
||||
import UserPreferencedTokenInput from '../../../../components/app/user-preferenced-token-input';
|
||||
import { ASSET_TYPES } from '../../../../../shared/constants/transaction';
|
||||
import SendAmountRow from './send-amount-row.component';
|
||||
|
||||
import AmountMaxButton from './amount-max-button/amount-max-button';
|
||||
|
||||
describe('SendAmountRow Component', () => {
|
||||
describe('updateAmount', () => {
|
||||
it('should call updateSendAmount', () => {
|
||||
const {
|
||||
instance,
|
||||
propsMethodSpies: { updateSendAmount },
|
||||
} = shallowRenderSendAmountRow();
|
||||
|
||||
expect(updateSendAmount.callCount).toStrictEqual(0);
|
||||
|
||||
instance.handleChange('someAmount');
|
||||
|
||||
expect(
|
||||
updateSendAmount.calledOnceWithExactly('someAmount'),
|
||||
).toStrictEqual(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('render', () => {
|
||||
it('should render a SendRowWrapper component', () => {
|
||||
const { wrapper } = shallowRenderSendAmountRow();
|
||||
|
||||
expect(wrapper.find(SendRowWrapper)).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should pass the correct props to SendRowWrapper', () => {
|
||||
const { wrapper } = shallowRenderSendAmountRow();
|
||||
const { errorType, label, showError } = wrapper
|
||||
.find(SendRowWrapper)
|
||||
.props();
|
||||
|
||||
expect(errorType).toStrictEqual('amount');
|
||||
expect(label).toStrictEqual('amount_t:');
|
||||
expect(showError).toStrictEqual(false);
|
||||
});
|
||||
|
||||
it('should render an AmountMaxButton as the first child of the SendRowWrapper', () => {
|
||||
const { wrapper } = shallowRenderSendAmountRow();
|
||||
|
||||
expect(
|
||||
wrapper.find(SendRowWrapper).childAt(0).is(AmountMaxButton),
|
||||
).toStrictEqual(true);
|
||||
});
|
||||
|
||||
it('should render a UserPreferencedTokenInput as the second child of the SendRowWrapper', () => {
|
||||
const { wrapper } = shallowRenderSendAmountRow();
|
||||
|
||||
expect(
|
||||
wrapper.find(SendRowWrapper).childAt(1).is(UserPreferencedTokenInput),
|
||||
).toStrictEqual(true);
|
||||
});
|
||||
|
||||
it('should render the UserPreferencedTokenInput with the correct props', () => {
|
||||
const { wrapper } = shallowRenderSendAmountRow();
|
||||
const { onChange, error, value } = wrapper
|
||||
.find(SendRowWrapper)
|
||||
.childAt(1)
|
||||
.props();
|
||||
|
||||
expect(error).toStrictEqual(false);
|
||||
expect(value).toStrictEqual('mockAmount');
|
||||
|
||||
onChange('mockNewAmount');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function shallowRenderSendAmountRow() {
|
||||
const updateSendAmount = sinon.spy();
|
||||
const wrapper = shallow(
|
||||
<SendAmountRow
|
||||
amount="mockAmount"
|
||||
inError={false}
|
||||
asset={{
|
||||
type: ASSET_TYPES.TOKEN,
|
||||
balance: 'mockTokenBalance',
|
||||
details: { address: 'mockTokenAddress' },
|
||||
}}
|
||||
updateSendAmount={updateSendAmount}
|
||||
/>,
|
||||
{ context: { t: (str) => `${str}_t` } },
|
||||
);
|
||||
const instance = wrapper.instance();
|
||||
|
||||
return {
|
||||
instance,
|
||||
wrapper,
|
||||
propsMethodSpies: {
|
||||
updateSendAmount,
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
import sinon from 'sinon';
|
||||
|
||||
import { updateSendAmount } from '../../../../ducks/send';
|
||||
|
||||
let mapDispatchToProps;
|
||||
|
||||
jest.mock('react-redux', () => ({
|
||||
connect: (_, md) => {
|
||||
mapDispatchToProps = md;
|
||||
return () => ({});
|
||||
},
|
||||
}));
|
||||
|
||||
jest.mock('../../../../ducks/send', () => ({
|
||||
updateSendAmount: jest.fn(),
|
||||
}));
|
||||
|
||||
require('./send-amount-row.container');
|
||||
|
||||
describe('send-amount-row container', () => {
|
||||
describe('mapDispatchToProps()', () => {
|
||||
let dispatchSpy;
|
||||
let mapDispatchToPropsObject;
|
||||
|
||||
beforeEach(() => {
|
||||
dispatchSpy = sinon.spy();
|
||||
mapDispatchToPropsObject = mapDispatchToProps(dispatchSpy);
|
||||
});
|
||||
|
||||
describe('updateSendAmount()', () => {
|
||||
it('should dispatch an action', () => {
|
||||
mapDispatchToPropsObject.updateSendAmount('mockAmount');
|
||||
expect(dispatchSpy.calledOnce).toStrictEqual(true);
|
||||
expect(updateSendAmount).toHaveBeenCalled();
|
||||
expect(updateSendAmount).toHaveBeenCalledWith('mockAmount');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,110 @@
|
||||
import React from 'react';
|
||||
import { fireEvent } from '@testing-library/react';
|
||||
import configureMockStore from 'redux-mock-store';
|
||||
import thunk from 'redux-thunk';
|
||||
import mockSendState from '../../../../../test/data/mock-send-state.json';
|
||||
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
|
||||
import { ASSET_TYPES } from '../../../../../shared/constants/transaction';
|
||||
import SendAmountRow from '.';
|
||||
|
||||
const mockUpdateSendAmount = jest.fn();
|
||||
|
||||
jest.mock('../../../../ducks/send', () => ({
|
||||
...jest.requireActual('../../../../ducks/send'),
|
||||
updateSendAmount: () => mockUpdateSendAmount,
|
||||
}));
|
||||
|
||||
describe('SendAmountRow Component', () => {
|
||||
describe('render', () => {
|
||||
describe('Native Asset Type', () => {
|
||||
const mockStore = configureMockStore([thunk])(mockSendState);
|
||||
|
||||
it('should match snapshot for native asset type', () => {
|
||||
const { container } = renderWithProvider(<SendAmountRow />, mockStore);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Token Asset Type', () => {
|
||||
const tokenState = {
|
||||
...mockSendState,
|
||||
send: {
|
||||
currentTransactionUUID: '1-tx',
|
||||
draftTransactions: {
|
||||
'1-tx': {
|
||||
asset: {
|
||||
balance: '0x1158e460913d00000', // 20000000000000000000
|
||||
details: {
|
||||
address: '0x617b3f8050a0BD94b6b1da02B4384eE5B4DF13F4',
|
||||
symbol: 'META',
|
||||
balance: '1000000000000000000',
|
||||
decimals: 18,
|
||||
string: '1',
|
||||
balanceError: null,
|
||||
isERC721: false,
|
||||
image: '',
|
||||
standard: 'ERC20',
|
||||
},
|
||||
error: null,
|
||||
type: ASSET_TYPES.TOKEN,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
const mockStore = configureMockStore([thunk])(tokenState);
|
||||
|
||||
it('should match snapshot for token asset type', () => {
|
||||
const { container } = renderWithProvider(<SendAmountRow />, mockStore);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Collectible Asset Type', () => {
|
||||
it('should match snapshot for token collectible type', () => {
|
||||
const collectibleState = {
|
||||
...mockSendState,
|
||||
send: {
|
||||
currentTransactionUUID: '1-tx',
|
||||
draftTransactions: {
|
||||
'1-tx': {
|
||||
asset: {
|
||||
balance: '',
|
||||
details: null,
|
||||
error: null,
|
||||
type: ASSET_TYPES.COLLECTIBLE,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const mockStore = configureMockStore([thunk])(collectibleState);
|
||||
|
||||
const { container } = renderWithProvider(<SendAmountRow />, mockStore);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('updateAmount', () => {
|
||||
const mockStore = configureMockStore([thunk])(mockSendState);
|
||||
|
||||
it('should call updateSendAmount', () => {
|
||||
const { queryByTestId } = renderWithProvider(
|
||||
<SendAmountRow />,
|
||||
mockStore,
|
||||
);
|
||||
queryByTestId('currency-input');
|
||||
|
||||
fireEvent.change(queryByTestId('currency-input'), {
|
||||
target: { value: 0.5 },
|
||||
});
|
||||
|
||||
expect(mockUpdateSendAmount).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,13 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SendRowErrorMessage Component render should match snapshot with no error 1`] = `<div />`;
|
||||
|
||||
exports[`SendRowErrorMessage Component render should render an error message if the passed errors contain an error of errorType 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="send-v2__error send-v2__error-amount"
|
||||
>
|
||||
Insufficient funds.
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,32 +0,0 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import SendRowErrorMessage from './send-row-error-message.component';
|
||||
|
||||
describe('SendRowErrorMessage Component', () => {
|
||||
let wrapper;
|
||||
|
||||
describe('render', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = shallow(
|
||||
<SendRowErrorMessage
|
||||
errors={{ error1: 'abc', error2: 'def' }}
|
||||
errorType="error3"
|
||||
/>,
|
||||
{ context: { t: (str) => `${str}_t` } },
|
||||
);
|
||||
});
|
||||
|
||||
it('should render null if the passed errors do not contain an error of errorType', () => {
|
||||
expect(wrapper.find('.send-v2__error')).toHaveLength(0);
|
||||
expect(wrapper.html()).toBeNull();
|
||||
});
|
||||
|
||||
it('should render an error message if the passed errors contain an error of errorType', () => {
|
||||
wrapper.setProps({
|
||||
errors: { error1: 'abc', error2: 'def', error3: 'xyz' },
|
||||
});
|
||||
expect(wrapper.find('.send-v2__error')).toHaveLength(1);
|
||||
expect(wrapper.find('.send-v2__error').text()).toStrictEqual('xyz_t');
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,28 +0,0 @@
|
||||
/* eslint-disable import/unambiguous */
|
||||
let mapStateToProps;
|
||||
|
||||
jest.mock('react-redux', () => ({
|
||||
connect: (ms) => {
|
||||
mapStateToProps = ms;
|
||||
return () => ({});
|
||||
},
|
||||
}));
|
||||
|
||||
jest.mock('../../../../../ducks/send', () => ({
|
||||
getSendErrors: (s) => `mockErrors:${s}`,
|
||||
}));
|
||||
|
||||
require('./send-row-error-message.container');
|
||||
|
||||
describe('send-row-error-message container', () => {
|
||||
describe('mapStateToProps()', () => {
|
||||
it('should map the correct properties to props', () => {
|
||||
expect(
|
||||
mapStateToProps('mockState', { errorType: 'someType' }),
|
||||
).toStrictEqual({
|
||||
errors: 'mockErrors:mockState',
|
||||
errorType: 'someType',
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import configureMockStore from 'redux-mock-store';
|
||||
import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../../../helpers/constants/error-keys';
|
||||
import { renderWithProvider } from '../../../../../../test/lib/render-helpers';
|
||||
import SendRowErrorMessage from '.';
|
||||
|
||||
describe('SendRowErrorMessage Component', () => {
|
||||
describe('render', () => {
|
||||
it('should match snapshot with no error', () => {
|
||||
const mockState = {
|
||||
send: {
|
||||
draftTransactions: {},
|
||||
},
|
||||
};
|
||||
|
||||
const mockStore = configureMockStore()(mockState);
|
||||
const { container } = renderWithProvider(
|
||||
<SendRowErrorMessage />,
|
||||
mockStore,
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render an error message if the passed errors contain an error of errorType', () => {
|
||||
const props = {
|
||||
errorType: 'amount',
|
||||
};
|
||||
|
||||
const sendErrorState = {
|
||||
send: {
|
||||
currentTransactionUUID: '1-tx',
|
||||
draftTransactions: {
|
||||
'1-tx': {
|
||||
gas: {
|
||||
error: INSUFFICIENT_FUNDS_ERROR_KEY,
|
||||
},
|
||||
amount: {
|
||||
error: INSUFFICIENT_FUNDS_ERROR_KEY,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
const mockStore = configureMockStore()(sendErrorState);
|
||||
|
||||
const { container } = renderWithProvider(
|
||||
<SendRowErrorMessage {...props} />,
|
||||
mockStore,
|
||||
);
|
||||
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -100,6 +100,7 @@ export default class SettingsTab extends PureComponent {
|
||||
<div className="settings-page__content-item">
|
||||
<div className="settings-page__content-item-col">
|
||||
<Dropdown
|
||||
data-testid="currency-select"
|
||||
id="select-currency"
|
||||
options={currencyOptions}
|
||||
selectedOption={currentCurrency}
|
||||
@ -132,6 +133,7 @@ export default class SettingsTab extends PureComponent {
|
||||
<div className="settings-page__content-item">
|
||||
<div className="settings-page__content-item-col">
|
||||
<Dropdown
|
||||
data-testid="locale-select"
|
||||
id="select-locale"
|
||||
options={localeOptions}
|
||||
selectedOption={currentLocale}
|
||||
@ -150,6 +152,7 @@ export default class SettingsTab extends PureComponent {
|
||||
return (
|
||||
<div
|
||||
ref={this.settingsRefs[5]}
|
||||
data-testid="hide-zero-balance-tokens"
|
||||
className="settings-page__content-row"
|
||||
id="toggle-zero-balance"
|
||||
>
|
||||
@ -197,7 +200,7 @@ export default class SettingsTab extends PureComponent {
|
||||
</span>
|
||||
<div className="settings-page__content-item__identicon">
|
||||
<button
|
||||
data-test-id="jazz_icon"
|
||||
data-testid="jazz_icon"
|
||||
onClick={() => setUseBlockie(false)}
|
||||
className="settings-page__content-item__identicon__item"
|
||||
>
|
||||
@ -230,7 +233,7 @@ export default class SettingsTab extends PureComponent {
|
||||
</Typography>
|
||||
</button>
|
||||
<button
|
||||
data-test-id="blockie_icon"
|
||||
data-testid="blockie_icon"
|
||||
onClick={() => setUseBlockie(true)}
|
||||
className="settings-page__content-item__identicon__item"
|
||||
>
|
||||
@ -274,7 +277,6 @@ export default class SettingsTab extends PureComponent {
|
||||
setUseNativeCurrencyAsPrimaryCurrencyPreference,
|
||||
useNativeCurrencyAsPrimaryCurrency,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div ref={this.settingsRefs[1]} className="settings-page__content-row">
|
||||
<div className="settings-page__content-item">
|
||||
@ -289,6 +291,7 @@ export default class SettingsTab extends PureComponent {
|
||||
<div className="settings-tab__radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
data-testid="toggle-native-currency"
|
||||
id="native-primary-currency"
|
||||
onChange={() =>
|
||||
setUseNativeCurrencyAsPrimaryCurrencyPreference(true)
|
||||
@ -305,6 +308,7 @@ export default class SettingsTab extends PureComponent {
|
||||
<div className="settings-tab__radio-button">
|
||||
<input
|
||||
type="radio"
|
||||
data-testid="toggle-fiat-currency"
|
||||
id="fiat-primary-currency"
|
||||
onChange={() =>
|
||||
setUseNativeCurrencyAsPrimaryCurrencyPreference(false)
|
||||
|
||||
@ -1,142 +0,0 @@
|
||||
import React from 'react';
|
||||
import sinon from 'sinon';
|
||||
import { mount } from 'enzyme';
|
||||
import SettingsTab from './settings-tab.container';
|
||||
import 'jest-canvas-mock';
|
||||
|
||||
describe('Settings Tab', () => {
|
||||
let wrapper;
|
||||
|
||||
const props = {
|
||||
setCurrentCurrency: sinon.spy(),
|
||||
displayWarning: sinon.spy(),
|
||||
setUseBlockie: sinon.spy(),
|
||||
updateCurrentLocale: sinon.spy(),
|
||||
setUseNativeCurrencyAsPrimaryCurrencyPreference: sinon.spy(),
|
||||
setHideZeroBalanceTokens: sinon.spy(),
|
||||
warning: '',
|
||||
currentLocale: 'en',
|
||||
useBlockie: false,
|
||||
currentCurrency: 'usd',
|
||||
conversionDate: 1,
|
||||
nativeCurrency: 'eth',
|
||||
useNativeCurrencyAsPrimaryCurrency: true,
|
||||
selectedAddress: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
|
||||
tokenList: {
|
||||
'0x6b175474e89094c44da98b954eedeac495271d0f': {
|
||||
address: '0x6b175474e89094c44da98b954eedeac495271d0f',
|
||||
symbol: 'META',
|
||||
decimals: 18,
|
||||
image: 'metamark.svg',
|
||||
unlisted: false,
|
||||
},
|
||||
'0xB8c77482e45F1F44dE1745F52C74426C631bDD52': {
|
||||
address: '0xB8c77482e45F1F44dE1745F52C74426C631bDD52',
|
||||
symbol: '0X',
|
||||
decimals: 18,
|
||||
image: '0x.svg',
|
||||
unlisted: false,
|
||||
},
|
||||
'0x1f9840a85d5af5bf1d1762f925bdaddc4201f984': {
|
||||
address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
|
||||
symbol: 'AST',
|
||||
decimals: 18,
|
||||
image: 'ast.png',
|
||||
unlisted: false,
|
||||
},
|
||||
'0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2': {
|
||||
address: '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2',
|
||||
symbol: 'BAT',
|
||||
decimals: 18,
|
||||
image: 'BAT_icon.svg',
|
||||
unlisted: false,
|
||||
},
|
||||
'0xe83cccfabd4ed148903bf36d4283ee7c8b3494d1': {
|
||||
address: '0xe83cccfabd4ed148903bf36d4283ee7c8b3494d1',
|
||||
symbol: 'CVL',
|
||||
decimals: 18,
|
||||
image: 'CVL_token.svg',
|
||||
unlisted: false,
|
||||
},
|
||||
'0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e': {
|
||||
address: '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e',
|
||||
symbol: 'GLA',
|
||||
decimals: 18,
|
||||
image: 'gladius.svg',
|
||||
unlisted: false,
|
||||
},
|
||||
'0x467Bccd9d29f223BcE8043b84E8C8B282827790F': {
|
||||
address: '0x467Bccd9d29f223BcE8043b84E8C8B282827790F',
|
||||
symbol: 'GNO',
|
||||
decimals: 18,
|
||||
image: 'gnosis.svg',
|
||||
unlisted: false,
|
||||
},
|
||||
'0xff20817765cb7f73d4bde2e66e067e58d11095c2': {
|
||||
address: '0xff20817765cb7f73d4bde2e66e067e58d11095c2',
|
||||
symbol: 'OMG',
|
||||
decimals: 18,
|
||||
image: 'omg.jpg',
|
||||
unlisted: false,
|
||||
},
|
||||
'0x8e870d67f660d95d5be530380d0ec0bd388289e1': {
|
||||
address: '0x8e870d67f660d95d5be530380d0ec0bd388289e1',
|
||||
symbol: 'WED',
|
||||
decimals: 18,
|
||||
image: 'wed.png',
|
||||
unlisted: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
beforeEach(() => {
|
||||
wrapper = mount(<SettingsTab.WrappedComponent {...props} />, {
|
||||
context: {
|
||||
t: (str) => str,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
it('selects currency', async () => {
|
||||
const selectCurrency = wrapper.find('#select-currency');
|
||||
|
||||
selectCurrency.props().onChange('eur');
|
||||
expect(props.setCurrentCurrency.calledOnce).toStrictEqual(true);
|
||||
});
|
||||
|
||||
it('selects locale', async () => {
|
||||
const selectLocale = wrapper.find('#select-locale');
|
||||
|
||||
await selectLocale.props().onChange('ja');
|
||||
expect(props.updateCurrentLocale.calledOnce).toStrictEqual(true);
|
||||
});
|
||||
|
||||
it('sets fiat primary currency', () => {
|
||||
const selectFiat = wrapper.find('#fiat-primary-currency');
|
||||
|
||||
selectFiat.simulate('change');
|
||||
expect(
|
||||
props.setUseNativeCurrencyAsPrimaryCurrencyPreference.calledOnce,
|
||||
).toStrictEqual(true);
|
||||
});
|
||||
|
||||
it('clicks jazzicon', () => {
|
||||
const toggleBlockies = wrapper.find('#jazzicon');
|
||||
|
||||
toggleBlockies.simulate('click');
|
||||
expect(props.setUseBlockie.calledOnce).toStrictEqual(true);
|
||||
});
|
||||
|
||||
it('clicks blockies icon', () => {
|
||||
const toggleBlockies = wrapper.find('#blockies');
|
||||
|
||||
toggleBlockies.simulate('click');
|
||||
expect(props.setUseBlockie.calledOnce).toStrictEqual(false);
|
||||
});
|
||||
|
||||
it('toggles hiding zero balance', () => {
|
||||
const toggleBlockies = wrapper.find('#toggle-zero-balance input');
|
||||
|
||||
toggleBlockies.simulate('click');
|
||||
expect(props.setHideZeroBalanceTokens.calledOnce).toStrictEqual(true);
|
||||
});
|
||||
});
|
||||
95
ui/pages/settings/settings-tab/settings-tab.test.js
Normal file
95
ui/pages/settings/settings-tab/settings-tab.test.js
Normal file
@ -0,0 +1,95 @@
|
||||
import React from 'react';
|
||||
import { fireEvent } from '@testing-library/react';
|
||||
import configureMockStore from 'redux-mock-store';
|
||||
import thunk from 'redux-thunk';
|
||||
import { renderWithProvider } from '../../../../test/lib/render-helpers';
|
||||
import mockState from '../../../../test/data/mock-state.json';
|
||||
import SettingsTab from '.';
|
||||
import 'jest-canvas-mock';
|
||||
|
||||
const mockSetCurrentCurrency = jest.fn();
|
||||
const mockUpdateCurrentLocale = jest.fn();
|
||||
const mockSetUseNativeCurrencyAsPrimaryCurrencyPreference = jest.fn();
|
||||
const mockSetUseBlockie = jest.fn();
|
||||
const mockSetHideZeroBalanceTokens = jest.fn();
|
||||
|
||||
jest.mock('../../../store/actions.js', () => ({
|
||||
setCurrentCurrency: () => mockSetCurrentCurrency,
|
||||
updateCurrentLocale: () => mockUpdateCurrentLocale,
|
||||
setUseNativeCurrencyAsPrimaryCurrencyPreference: () =>
|
||||
mockSetUseNativeCurrencyAsPrimaryCurrencyPreference,
|
||||
setUseBlockie: () => mockSetUseBlockie,
|
||||
setHideZeroBalanceTokens: () => mockSetHideZeroBalanceTokens,
|
||||
}));
|
||||
|
||||
describe('Settings Tab', () => {
|
||||
const mockStore = configureMockStore([thunk])(mockState);
|
||||
|
||||
afterEach(() => {
|
||||
mockSetCurrentCurrency.mockReset();
|
||||
mockUpdateCurrentLocale.mockReset();
|
||||
mockSetUseNativeCurrencyAsPrimaryCurrencyPreference.mockReset();
|
||||
});
|
||||
|
||||
it('selects currency', async () => {
|
||||
const { queryByTestId } = renderWithProvider(<SettingsTab />, mockStore);
|
||||
|
||||
fireEvent.change(queryByTestId('currency-select'), {
|
||||
target: { value: 'eur' },
|
||||
});
|
||||
|
||||
expect(mockSetCurrentCurrency).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('selects locale', async () => {
|
||||
const { queryByTestId } = renderWithProvider(<SettingsTab />, mockStore);
|
||||
|
||||
fireEvent.change(queryByTestId('locale-select'), {
|
||||
target: { value: 'ja' },
|
||||
});
|
||||
|
||||
expect(mockUpdateCurrentLocale).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('sets fiat primary currency', async () => {
|
||||
const { queryByTestId } = renderWithProvider(<SettingsTab />, mockStore);
|
||||
|
||||
const fiatCurrencyToggle = queryByTestId('toggle-fiat-currency');
|
||||
|
||||
fireEvent.click(fiatCurrencyToggle);
|
||||
|
||||
expect(
|
||||
mockSetUseNativeCurrencyAsPrimaryCurrencyPreference,
|
||||
).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('clicks jazzicon', () => {
|
||||
const { queryByTestId } = renderWithProvider(<SettingsTab />, mockStore);
|
||||
|
||||
const jazziconToggle = queryByTestId('jazz_icon');
|
||||
|
||||
fireEvent.click(jazziconToggle);
|
||||
|
||||
expect(mockSetUseBlockie).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('clicks blockies icon', () => {
|
||||
const { queryByTestId } = renderWithProvider(<SettingsTab />, mockStore);
|
||||
|
||||
const blockieToggle = queryByTestId('blockie_icon');
|
||||
|
||||
fireEvent.click(blockieToggle);
|
||||
|
||||
expect(mockSetUseBlockie).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('toggles hiding zero balance', () => {
|
||||
const { getByRole } = renderWithProvider(<SettingsTab />, mockStore);
|
||||
|
||||
const hideZerBalanceTokens = getByRole('checkbox');
|
||||
|
||||
fireEvent.click(hideZerBalanceTokens);
|
||||
|
||||
expect(mockSetHideZeroBalanceTokens).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user