From ca3aa7b08d4ddbd76cd2cabeab55232ab7f67093 Mon Sep 17 00:00:00 2001 From: Elliot Winkler Date: Wed, 10 Nov 2021 12:24:29 -0700 Subject: [PATCH] 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 + .../advanced-gas-input-component.test.js | 122 ------------------ .../advanced-gas-inputs.component.js | 4 + .../advanced-gas-inputs.test.js | 119 +++++++++++++++++ 4 files changed, 124 insertions(+), 122 deletions(-) delete mode 100644 ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-input-component.test.js create mode 100644 ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.test.js diff --git a/test/jest/index.js b/test/jest/index.js index 098877489..9e6510ca8 100644 --- a/test/jest/index.js +++ b/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'; diff --git a/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-input-component.test.js b/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-input-component.test.js deleted file mode 100644 index 29b0e6702..000000000 --- a/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-input-component.test.js +++ /dev/null @@ -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(, { - 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'); - }); -}); diff --git a/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js b/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js index 21a76c41a..b631e1449 100644 --- a/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js +++ b/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} />
{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, diff --git a/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.test.js b/ui/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.test.js new file mode 100644 index 000000000..181ef3809 --- /dev/null +++ b/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( + , + 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( + , + 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( + , + 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( + , + 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( + , + store, + ); + + expect(getAllByText('Insufficient balance.')).toHaveLength(2); + }); + + it('errors zero gas price / speed up', () => { + const { queryByText } = renderWithProvider( + , + 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( + , + store, + ); + + expect(queryByText('Gas Price Extremely Low')).toBeInTheDocument(); + }); + + it('errors when custom gas price is too excessive', () => { + const { queryByText } = renderWithProvider( + , + store, + ); + + expect(queryByText('Gas Price Is Excessive')).toBeInTheDocument(); + }); +});