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

Refactor tests for AdvancedGasInputs (#12445)

Browse Source 
* Upgrade style from Enzyme to React Testing Library
* Use real i18n provider instead of a fake one so that we can look for
  English text instead of just i18n strings, improving readability
This commit is contained in:
Elliot Winkler 2021-11-10 12:24:29 -07:00 committed by GitHub
parent a41e3b1925
commit ca3aa7b08d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 124 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
test/jest/index.js
View File

@ -1,3 +1,4 @@
export { screen, fireEvent } from '@testing-library/react';
export { createSwapsMockStore } from './mock-store';
export { renderWithProvider } from './rendering';
export { setBackgroundConnection } from './background';

122
ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-input-component.test.js
View File

@ -1,122 +0,0 @@
import React from 'react';
import sinon from 'sinon';
import { mount } from 'enzyme';
import AdvancedTabContent from './advanced-gas-inputs.container';
describe('Advanced Gas Inputs', () => {
let wrapper, clock;
const props = {
updateCustomGasPrice: sinon.spy(),
updateCustomGasLimit: sinon.spy(),
showGasPriceInfoModal: sinon.spy(),
showGasLimitInfoModal: sinon.spy(),
customGasPrice: 0,
customGasLimit: 0,
insufficientBalance: false,
customPriceIsSafe: true,
isSpeedUp: false,
minimumGasLimit: 21000,
};
beforeEach(() => {
clock = sinon.useFakeTimers();
wrapper = mount(<AdvancedTabContent.WrappedComponent {...props} />, {
context: {
t: (str) => str,
},
});
});
afterEach(() => {
clock.restore();
});
it('wont update gasPrice in props before debounce', () => {
const event = { target: { value: 1 } };
wrapper.find('input').at(0).simulate('change', event);
clock.tick(499);
expect(props.updateCustomGasPrice.callCount).toStrictEqual(0);
});
it('simulates onChange on gas price after debounce', () => {
const event = { target: { value: 1 } };
wrapper.find('input').at(0).simulate('change', event);
clock.tick(500);
expect(props.updateCustomGasPrice.calledOnce).toStrictEqual(true);
expect(props.updateCustomGasPrice.calledWith(1)).toStrictEqual(true);
});
it('wont update gasLimit in props before debounce', () => {
const event = { target: { value: 21000 } };
wrapper.find('input').at(1).simulate('change', event);
clock.tick(499);
expect(props.updateCustomGasLimit.callCount).toStrictEqual(0);
});
it('simulates onChange on gas limit after debounce', () => {
const event = { target: { value: 21000 } };
wrapper.find('input').at(1).simulate('change', event);
clock.tick(500);
expect(props.updateCustomGasLimit.calledOnce).toStrictEqual(true);
expect(props.updateCustomGasLimit.calledWith(21000)).toStrictEqual(true);
});
it('errors when insufficientBalance under gas price and gas limit', () => {
wrapper.setProps({ insufficientBalance: true });
const renderError = wrapper.find(
'.advanced-gas-inputs__gas-edit-row__error-text',
);
expect(renderError).toHaveLength(2);
expect(renderError.at(0).text()).toStrictEqual('insufficientBalance');
expect(renderError.at(1).text()).toStrictEqual('insufficientBalance');
});
it('errors zero gas price / speed up', () => {
wrapper.setProps({ isSpeedUp: true });
const renderError = wrapper.find(
'.advanced-gas-inputs__gas-edit-row__error-text',
);
expect(renderError).toHaveLength(2);
expect(renderError.at(0).text()).toStrictEqual(
'zeroGasPriceOnSpeedUpError',
);
expect(renderError.at(1).text()).toStrictEqual(
'gasLimitTooLowWithDynamicFee',
);
});
it('warns when custom gas price is too low', () => {
wrapper.setProps({ customPriceIsSafe: false });
const renderWarning = wrapper.find(
'.advanced-gas-inputs__gas-edit-row__warning-text',
);
expect(renderWarning).toHaveLength(1);
expect(renderWarning.text()).toStrictEqual('gasPriceExtremelyLow');
});
it('errors when custom gas price is too excessive', () => {
wrapper.setProps({ customPriceIsExcessive: true });
const renderError = wrapper.find(
'.advanced-gas-inputs__gas-edit-row__error-text',
);
expect(renderError).toHaveLength(2);
expect(renderError.at(0).text()).toStrictEqual('gasPriceExcessiveInput');
});
});

4
ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
View File

@ -128,6 +128,7 @@ export default class AdvancedGasInputs extends Component {
errorComponent,
errorType,
label,
testId,
customMessageComponent,
tooltipTitle,
}) {
@ -151,6 +152,7 @@ export default class AdvancedGasInputs extends Component {
min="0"
value={value}
onChange={onChange}
data-testid={testId}
/>
<div
className={classnames(
@ -235,6 +237,7 @@ export default class AdvancedGasInputs extends Component {
<div className="advanced-gas-inputs__gas-edit-rows">
{this.renderGasInput({
label: this.context.t('gasPrice'),
testId: 'gas-price',
tooltipTitle: this.context.t('gasPriceInfoTooltipContent'),
value: this.state.gasPrice,
onChange: this.onChangeGasPrice,
@ -243,6 +246,7 @@ export default class AdvancedGasInputs extends Component {
})}
{this.renderGasInput({
label: this.context.t('gasLimit'),
testId: 'gas-limit',
tooltipTitle: this.context.t('gasLimitInfoTooltipContent'),
value: this.state.gasLimit,
onChange: this.onChangeGasLimit,

119
ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.test.js Normal file
View File

@ -0,0 +1,119 @@
import React from 'react';
import sinon from 'sinon';
import { renderWithProvider, fireEvent } from '../../../../../test/jest';
import configureStore from '../../../../store/store';
import AdvancedGasInputs from '.';
describe('AdvancedGasInputs', () => {
let clock;
const props = {
updateCustomGasPrice: jest.fn(),
updateCustomGasLimit: jest.fn(),
showGasPriceInfoModal: jest.fn(),
showGasLimitInfoModal: jest.fn(),
customGasPrice: 0,
customGasLimit: 0,
insufficientBalance: false,
customPriceIsSafe: true,
isSpeedUp: false,
minimumGasLimit: 21000,
};
const store = configureStore({});
beforeEach(() => {
clock = sinon.useFakeTimers();
});
afterEach(() => {
clock.restore();
});
it("won't update gasPrice in props before debounce", () => {
const { getByTestId } = renderWithProvider(
<AdvancedGasInputs {...props} />,
store,
);
fireEvent.change(getByTestId('gas-price'), { target: { value: '10' } });
clock.tick(499);
expect(props.updateCustomGasPrice).toHaveBeenCalledTimes(0);
});
it('simulates onChange on gas price after debounce', () => {
const { getByTestId } = renderWithProvider(
<AdvancedGasInputs {...props} />,
store,
);
fireEvent.change(getByTestId('gas-price'), { target: { value: '10' } });
clock.tick(500);
expect(props.updateCustomGasPrice).toHaveBeenCalledTimes(1);
expect(props.updateCustomGasPrice).toHaveBeenCalledWith('2540be400');
});
it('wont update gasLimit in props before debounce', () => {
const { getByTestId } = renderWithProvider(
<AdvancedGasInputs {...props} />,
store,
);
fireEvent.change(getByTestId('gas-limit'), { target: { value: '21000' } });
clock.tick(499);
expect(props.updateCustomGasLimit).toHaveBeenCalledTimes(0);
});
it('simulates onChange on gas limit after debounce', () => {
const { getByTestId } = renderWithProvider(
<AdvancedGasInputs {...props} />,
store,
);
fireEvent.change(getByTestId('gas-limit'), { target: { value: '21000' } });
clock.tick(500);
expect(props.updateCustomGasLimit).toHaveBeenCalledTimes(1);
expect(props.updateCustomGasLimit).toHaveBeenCalledWith('5208');
});
it('errors when insufficientBalance under gas price and gas limit', () => {
const { getAllByText } = renderWithProvider(
<AdvancedGasInputs {...props} insufficientBalance />,
store,
);
expect(getAllByText('Insufficient balance.')).toHaveLength(2);
});
it('errors zero gas price / speed up', () => {
const { queryByText } = renderWithProvider(
<AdvancedGasInputs {...props} isSpeedUp />,
store,
);
expect(queryByText('Zero gas price on speed up')).toBeInTheDocument();
expect(queryByText('Gas limit must be at least 21000')).toBeInTheDocument();
});
it('warns when custom gas price is too low', () => {
const { queryByText } = renderWithProvider(
<AdvancedGasInputs {...props} customPriceIsSafe={false} />,
store,
);
expect(queryByText('Gas Price Extremely Low')).toBeInTheDocument();
});
it('errors when custom gas price is too excessive', () => {
const { queryByText } = renderWithProvider(
<AdvancedGasInputs {...props} customPriceIsExcessive />,
store,
);
expect(queryByText('Gas Price Is Excessive')).toBeInTheDocument();
});
});