Fix unit tests using shared test doubles (#8235)

These tests broke when `sinon.restore()` was called in a separate test because they setup stubs/spies using `sinon` in the module context. These were constructed then restored before the tests even ran. Instead the test doubles are now setup in the `beforeEach` hook, which in addition to fixing this problem also ensures each unit test is isolated from the others.
2024-12-23 09:52:26 +01:00 · 2020-03-25 14:45:23 -03:00 · 2020-03-25 14:45:23 -03:00 · 1e93340c16
commit 1e93340c16
parent 2e9d41e013
3 changed files with 119 additions and 114 deletions
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
@ -7,17 +7,16 @@ import AdvancedTabContent from '../advanced-tab-content.component.js'
 import GasPriceChart from '../../../gas-price-chart'
 import Loading from '../../../../../ui/loading-screen'

-const propsMethodSpies = {
-  updateCustomGasPrice: sinon.spy(),
-  updateCustomGasLimit: sinon.spy(),
-}
-
-sinon.spy(AdvancedTabContent.prototype, 'renderDataSummary')
-
 describe('AdvancedTabContent Component', function () {
  let wrapper

  beforeEach(function () {
+    const propsMethodSpies = {
+      updateCustomGasPrice: sinon.spy(),
+      updateCustomGasLimit: sinon.spy(),
+    }
+    sinon.spy(AdvancedTabContent.prototype, 'renderDataSummary')
+
    wrapper = shallow((
      <AdvancedTabContent
        updateCustomGasPrice={propsMethodSpies.updateCustomGasPrice}
@ -35,9 +34,7 @@ describe('AdvancedTabContent Component', function () {
  })

  afterEach(function () {
-    propsMethodSpies.updateCustomGasPrice.resetHistory()
-    propsMethodSpies.updateCustomGasLimit.resetHistory()
-    AdvancedTabContent.prototype.renderDataSummary.resetHistory()
+    sinon.restore()
  })

  describe('render()', function () {
--- a/ui/app/components/app/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js
+++ b/ui/app/components/app/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js
@ -6,48 +6,50 @@ import GasPriceButtonGroup from '../gas-price-button-group.component'

 import ButtonGroup from '../../../../ui/button-group'

-const mockGasPriceButtonGroupProps = {
-  buttonDataLoading: false,
-  className: 'gas-price-button-group',
-  gasButtonInfo: [
-    {
-      feeInPrimaryCurrency: '$0.52',
-      feeInSecondaryCurrency: '0.0048 ETH',
-      timeEstimate: '~ 1 min 0 sec',
-      priceInHexWei: '0xa1b2c3f',
-    },
-    {
-      feeInPrimaryCurrency: '$0.39',
-      feeInSecondaryCurrency: '0.004 ETH',
-      timeEstimate: '~ 1 min 30 sec',
-      priceInHexWei: '0xa1b2c39',
-    },
-    {
-      feeInPrimaryCurrency: '$0.30',
-      feeInSecondaryCurrency: '0.00354 ETH',
-      timeEstimate: '~ 2 min 1 sec',
-      priceInHexWei: '0xa1b2c30',
-    },
-  ],
-  handleGasPriceSelection: sinon.spy(),
-  noButtonActiveByDefault: true,
-  defaultActiveButtonIndex: 2,
-  showCheck: true,
-}
-
-const mockButtonPropsAndFlags = Object.assign({}, {
-  className: mockGasPriceButtonGroupProps.className,
-  handleGasPriceSelection: mockGasPriceButtonGroupProps.handleGasPriceSelection,
-  showCheck: mockGasPriceButtonGroupProps.showCheck,
-})
-
-sinon.spy(GasPriceButtonGroup.prototype, 'renderButton')
-sinon.spy(GasPriceButtonGroup.prototype, 'renderButtonContent')
-
 describe('GasPriceButtonGroup Component', function () {
+  let mockButtonPropsAndFlags
+  let mockGasPriceButtonGroupProps
  let wrapper

  beforeEach(function () {
+    mockGasPriceButtonGroupProps = {
+      buttonDataLoading: false,
+      className: 'gas-price-button-group',
+      gasButtonInfo: [
+        {
+          feeInPrimaryCurrency: '$0.52',
+          feeInSecondaryCurrency: '0.0048 ETH',
+          timeEstimate: '~ 1 min 0 sec',
+          priceInHexWei: '0xa1b2c3f',
+        },
+        {
+          feeInPrimaryCurrency: '$0.39',
+          feeInSecondaryCurrency: '0.004 ETH',
+          timeEstimate: '~ 1 min 30 sec',
+          priceInHexWei: '0xa1b2c39',
+        },
+        {
+          feeInPrimaryCurrency: '$0.30',
+          feeInSecondaryCurrency: '0.00354 ETH',
+          timeEstimate: '~ 2 min 1 sec',
+          priceInHexWei: '0xa1b2c30',
+        },
+      ],
+      handleGasPriceSelection: sinon.spy(),
+      noButtonActiveByDefault: true,
+      defaultActiveButtonIndex: 2,
+      showCheck: true,
+    }
+
+    mockButtonPropsAndFlags = Object.assign({}, {
+      className: mockGasPriceButtonGroupProps.className,
+      handleGasPriceSelection: mockGasPriceButtonGroupProps.handleGasPriceSelection,
+      showCheck: mockGasPriceButtonGroupProps.showCheck,
+    })
+
+    sinon.spy(GasPriceButtonGroup.prototype, 'renderButton')
+    sinon.spy(GasPriceButtonGroup.prototype, 'renderButtonContent')
+
    wrapper = shallow((
      <GasPriceButtonGroup
        {...mockGasPriceButtonGroupProps}
@ -56,9 +58,7 @@ describe('GasPriceButtonGroup Component', function () {
  })

  afterEach(function () {
-    GasPriceButtonGroup.prototype.renderButton.resetHistory()
-    GasPriceButtonGroup.prototype.renderButtonContent.resetHistory()
-    mockGasPriceButtonGroupProps.handleGasPriceSelection.resetHistory()
+    sinon.restore()
  })

  describe('render', function () {
--- a/ui/app/components/app/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
+++ b/ui/app/components/app/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
@ -11,76 +11,84 @@ function timeout (time) {
  })
 }

-const propsMethodSpies = {
-  updateCustomGasPrice: sinon.spy(),
-}
-
-const selectReturnSpies = {
-  empty: sinon.spy(),
-  remove: sinon.spy(),
-  style: sinon.spy(),
-  select: d3.select,
-  attr: sinon.spy(),
-  on: sinon.spy(),
-  datum: sinon.stub().returns({ x: 'mockX' }),
-}
-
-const mockSelectReturn = {
-  ...d3.select('div'),
-  node: () => ({
-    getBoundingClientRect: () => ({ x: 123, y: 321, width: 400 }),
-  }),
-  ...selectReturnSpies,
-}
-
-const gasPriceChartUtilsSpies = {
-  appendOrUpdateCircle: sinon.spy(),
-  generateChart: sinon.stub().returns({ mockChart: true }),
-  generateDataUIObj: sinon.spy(),
-  getAdjacentGasPrices: sinon.spy(),
-  getCoordinateData: sinon.stub().returns({ x: 'mockCoordinateX', width: 'mockWidth' }),
-  getNewXandTimeEstimate: sinon.spy(),
-  handleChartUpdate: sinon.spy(),
-  hideDataUI: sinon.spy(),
-  setSelectedCircle: sinon.spy(),
-  setTickPosition: sinon.spy(),
-  handleMouseMove: sinon.spy(),
-}
-
-const testProps = {
-  gasPrices: [1.5, 2.5, 4, 8],
-  estimatedTimes: [100, 80, 40, 10],
-  gasPricesMax: 9,
-  estimatedTimesMax: 100,
-  currentPrice: 6,
-  updateCustomGasPrice: propsMethodSpies.updateCustomGasPrice,
-}
-
-const GasPriceChart = proxyquire('../gas-price-chart.component.js', {
-  './gas-price-chart.utils.js': gasPriceChartUtilsSpies,
-  'd3': {
-    ...d3,
-    select: function (...args) {
-      const result = d3.select(...args)
-      return result.empty()
-        ? mockSelectReturn
-        : result
-    },
-    event: {
-      clientX: 'mockClientX',
-    },
-  },
-}).default
-
-sinon.spy(GasPriceChart.prototype, 'renderChart')
-
 describe('GasPriceChart Component', function () {
+  let GasPriceChart
+  let gasPriceChartUtilsSpies
+  let propsMethodSpies
+  let selectReturnSpies
+  let testProps
  let wrapper

  beforeEach(function () {
+    propsMethodSpies = {
+      updateCustomGasPrice: sinon.spy(),
+    }
+
+    selectReturnSpies = {
+      empty: sinon.spy(),
+      remove: sinon.spy(),
+      style: sinon.spy(),
+      select: d3.select,
+      attr: sinon.spy(),
+      on: sinon.spy(),
+      datum: sinon.stub().returns({ x: 'mockX' }),
+    }
+
+    const mockSelectReturn = {
+      ...d3.select('div'),
+      node: () => ({
+        getBoundingClientRect: () => ({ x: 123, y: 321, width: 400 }),
+      }),
+      ...selectReturnSpies,
+    }
+
+    gasPriceChartUtilsSpies = {
+      appendOrUpdateCircle: sinon.spy(),
+      generateChart: sinon.stub().returns({ mockChart: true }),
+      generateDataUIObj: sinon.spy(),
+      getAdjacentGasPrices: sinon.spy(),
+      getCoordinateData: sinon.stub().returns({ x: 'mockCoordinateX', width: 'mockWidth' }),
+      getNewXandTimeEstimate: sinon.spy(),
+      handleChartUpdate: sinon.spy(),
+      hideDataUI: sinon.spy(),
+      setSelectedCircle: sinon.spy(),
+      setTickPosition: sinon.spy(),
+      handleMouseMove: sinon.spy(),
+    }
+
+    testProps = {
+      gasPrices: [1.5, 2.5, 4, 8],
+      estimatedTimes: [100, 80, 40, 10],
+      gasPricesMax: 9,
+      estimatedTimesMax: 100,
+      currentPrice: 6,
+      updateCustomGasPrice: propsMethodSpies.updateCustomGasPrice,
+    }
+
+    GasPriceChart = proxyquire('../gas-price-chart.component.js', {
+      './gas-price-chart.utils.js': gasPriceChartUtilsSpies,
+      'd3': {
+        ...d3,
+        select: function (...args) {
+          const result = d3.select(...args)
+          return result.empty()
+            ? mockSelectReturn
+            : result
+        },
+        event: {
+          clientX: 'mockClientX',
+        },
+      },
+    }).default
+    sinon.spy(GasPriceChart.prototype, 'renderChart')
+
    wrapper = shallow(<GasPriceChart {...testProps} />)
  })

+  afterEach(function () {
+    sinon.restore()
+  })
+
  describe('render()', function () {
    it('should render', function () {
      assert(wrapper.hasClass('gas-price-chart'))