Refactor tests for AdvancedGasInputs (#12445)

* 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

test/jest/index.js

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

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

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

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

@@ -130,6 +130,7 @@ export default class AdvancedGasInputs extends Component {
     errorComponent,
     errorType,
     label,
+    testId,
     customMessageComponent,
     tooltipTitle,
     disabled,
@@ -155,6 +156,7 @@ export default class AdvancedGasInputs extends Component {
             value={value}
             onChange={onChange}
             disabled={disabled}
+            data-testid={testId}
           />
           <div
             className={classnames(
@@ -244,6 +246,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,
@@ -253,6 +256,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,