TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
feature/default_network_editable
Elliot Winkler 3 years ago 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 all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      test/jest/index.js
  2. 122
      ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-input-component.test.js
  3. 4
      ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
  4. 119
      ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.test.js

1
test/jest/index.js
Unescape 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
Unescape 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
Unescape 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
Unescape 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();
});
});
Write Preview
Loading…
Cancel
Save