m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Continue converting tests from enzyme to @testing-library/react (#16458)

Browse Source 
* 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 2022-11-29 07:42:59 -08:00 committed by GitHub
parent 33b09c94df
commit 119219b5d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 1836 additions and 347 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1338
test/data/mock-send-state.json Normal file
View File

File diff suppressed because it is too large Load Diff

2
test/e2e/tests/settings-general.spec.js
View File

@ -31,7 +31,7 @@ describe('Settings', function () {
// finds the jazzicon toggle turned on // finds the jazzicon toggle turned on
await driver.findElement( 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({ const jazziconText = await driver.findElement({

217
ui/pages/send/send-content/send-amount-row/__snapshots__/send-amount-row.test.js.snap Normal file
View File

@ -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>
`;

102
ui/pages/send/send-content/send-amount-row/send-amount-row.component.test.js
View File

@ -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,
},
};
}

39
ui/pages/send/send-content/send-amount-row/send-amount-row.container.test.js
View File

@ -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');
});
});
});
});

110
ui/pages/send/send-content/send-amount-row/send-amount-row.test.js Normal file
View File

@ -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();
});
});
});

13
ui/pages/send/send-content/send-row-wrapper/send-row-error-message/__snapshots__/send-row-error-message.test.js.snap Normal file
View File

@ -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>
`;

32
ui/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.component.test.js
View File

@ -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');
});
});
});

28
ui/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.container.test.js
View File

@ -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',
});
});
});
});

55
ui/pages/send/send-content/send-row-wrapper/send-row-error-message/send-row-error-message.test.js Normal file
View File

@ -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();
});
});
});

10
ui/pages/settings/settings-tab/settings-tab.component.js
View File

@ -100,6 +100,7 @@ export default class SettingsTab extends PureComponent {
<div className="settings-page__content-item"> <div className="settings-page__content-item">
<div className="settings-page__content-item-col"> <div className="settings-page__content-item-col">
<Dropdown <Dropdown
data-testid="currency-select"
id="select-currency" id="select-currency"
options={currencyOptions} options={currencyOptions}
selectedOption={currentCurrency} selectedOption={currentCurrency}
@ -132,6 +133,7 @@ export default class SettingsTab extends PureComponent {
<div className="settings-page__content-item"> <div className="settings-page__content-item">
<div className="settings-page__content-item-col"> <div className="settings-page__content-item-col">
<Dropdown <Dropdown
data-testid="locale-select"
id="select-locale" id="select-locale"
options={localeOptions} options={localeOptions}
selectedOption={currentLocale} selectedOption={currentLocale}
@ -150,6 +152,7 @@ export default class SettingsTab extends PureComponent {
return ( return (
<div <div
ref={this.settingsRefs[5]} ref={this.settingsRefs[5]}
data-testid="hide-zero-balance-tokens"
className="settings-page__content-row" className="settings-page__content-row"
id="toggle-zero-balance" id="toggle-zero-balance"
> >
@ -197,7 +200,7 @@ export default class SettingsTab extends PureComponent {
</span> </span>
<div className="settings-page__content-item__identicon"> <div className="settings-page__content-item__identicon">
<button <button
data-test-id="jazz_icon" data-testid="jazz_icon"
onClick={() => setUseBlockie(false)} onClick={() => setUseBlockie(false)}
className="settings-page__content-item__identicon__item" className="settings-page__content-item__identicon__item"
> >
@ -230,7 +233,7 @@ export default class SettingsTab extends PureComponent {
</Typography> </Typography>
</button> </button>
<button <button
data-test-id="blockie_icon" data-testid="blockie_icon"
onClick={() => setUseBlockie(true)} onClick={() => setUseBlockie(true)}
className="settings-page__content-item__identicon__item" className="settings-page__content-item__identicon__item"
> >
@ -274,7 +277,6 @@ export default class SettingsTab extends PureComponent {
setUseNativeCurrencyAsPrimaryCurrencyPreference, setUseNativeCurrencyAsPrimaryCurrencyPreference,
useNativeCurrencyAsPrimaryCurrency, useNativeCurrencyAsPrimaryCurrency,
} = this.props; } = this.props;
return ( return (
<div ref={this.settingsRefs[1]} className="settings-page__content-row"> <div ref={this.settingsRefs[1]} className="settings-page__content-row">
<div className="settings-page__content-item"> <div className="settings-page__content-item">
@ -289,6 +291,7 @@ export default class SettingsTab extends PureComponent {
<div className="settings-tab__radio-button"> <div className="settings-tab__radio-button">
<input <input
type="radio" type="radio"
data-testid="toggle-native-currency"
id="native-primary-currency" id="native-primary-currency"
onChange={() => onChange={() =>
setUseNativeCurrencyAsPrimaryCurrencyPreference(true) setUseNativeCurrencyAsPrimaryCurrencyPreference(true)
@ -305,6 +308,7 @@ export default class SettingsTab extends PureComponent {
<div className="settings-tab__radio-button"> <div className="settings-tab__radio-button">
<input <input
type="radio" type="radio"
data-testid="toggle-fiat-currency"
id="fiat-primary-currency" id="fiat-primary-currency"
onChange={() => onChange={() =>
setUseNativeCurrencyAsPrimaryCurrencyPreference(false) setUseNativeCurrencyAsPrimaryCurrencyPreference(false)

142
ui/pages/settings/settings-tab/settings-tab.component.test.js
View File

@ -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
View 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();
});
});