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

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

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

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