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.

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 () {

ui/app/components/app/gas-customization/gas-price-button-group/tests/gas-price-button-group-component.test.js

@@ -6,7 +6,13 @@ import GasPriceButtonGroup from '../gas-price-button-group.component'
 
 import ButtonGroup from '../../../../ui/button-group'
 
-const mockGasPriceButtonGroupProps = {
+describe('GasPriceButtonGroup Component', function () {
+  let mockButtonPropsAndFlags
+  let mockGasPriceButtonGroupProps
+  let wrapper
+
+  beforeEach(function () {
+    mockGasPriceButtonGroupProps = {
       buttonDataLoading: false,
       className: 'gas-price-button-group',
       gasButtonInfo: [
@@ -35,7 +41,7 @@ const mockGasPriceButtonGroupProps = {
       showCheck: true,
     }
 
-const mockButtonPropsAndFlags = Object.assign({}, {
+    mockButtonPropsAndFlags = Object.assign({}, {
       className: mockGasPriceButtonGroupProps.className,
       handleGasPriceSelection: mockGasPriceButtonGroupProps.handleGasPriceSelection,
       showCheck: mockGasPriceButtonGroupProps.showCheck,
@@ -44,10 +50,6 @@ const mockButtonPropsAndFlags = Object.assign({}, {
     sinon.spy(GasPriceButtonGroup.prototype, 'renderButton')
     sinon.spy(GasPriceButtonGroup.prototype, 'renderButtonContent')
 
-describe('GasPriceButtonGroup Component', function () {
-  let wrapper
-
-  beforeEach(function () {
     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 () {

ui/app/components/app/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js

@@ -11,11 +11,20 @@ function timeout (time) {
   })
 }
 
-const propsMethodSpies = {
+describe('GasPriceChart Component', function () {
+  let GasPriceChart
+  let gasPriceChartUtilsSpies
+  let propsMethodSpies
+  let selectReturnSpies
+  let testProps
+  let wrapper
+
+  beforeEach(function () {
+    propsMethodSpies = {
       updateCustomGasPrice: sinon.spy(),
     }
 
-const selectReturnSpies = {
+    selectReturnSpies = {
       empty: sinon.spy(),
       remove: sinon.spy(),
       style: sinon.spy(),
@@ -33,7 +42,7 @@ const mockSelectReturn = {
       ...selectReturnSpies,
     }
 
-const gasPriceChartUtilsSpies = {
+    gasPriceChartUtilsSpies = {
       appendOrUpdateCircle: sinon.spy(),
       generateChart: sinon.stub().returns({ mockChart: true }),
       generateDataUIObj: sinon.spy(),
@@ -47,7 +56,7 @@ const gasPriceChartUtilsSpies = {
       handleMouseMove: sinon.spy(),
     }
 
-const testProps = {
+    testProps = {
       gasPrices: [1.5, 2.5, 4, 8],
       estimatedTimes: [100, 80, 40, 10],
       gasPricesMax: 9,
@@ -56,7 +65,7 @@ const testProps = {
       updateCustomGasPrice: propsMethodSpies.updateCustomGasPrice,
     }
 
-const GasPriceChart = proxyquire('../gas-price-chart.component.js', {
+    GasPriceChart = proxyquire('../gas-price-chart.component.js', {
       './gas-price-chart.utils.js': gasPriceChartUtilsSpies,
       'd3': {
         ...d3,
@@ -71,16 +80,15 @@ const GasPriceChart = proxyquire('../gas-price-chart.component.js', {
         },
       },
     }).default
-
     sinon.spy(GasPriceChart.prototype, 'renderChart')
 
-describe('GasPriceChart Component', function () {
-  let wrapper
-
-  beforeEach(function () {
     wrapper = shallow(<GasPriceChart {...testProps} />)
   })
 
+  afterEach(function () {
+    sinon.restore()
+  })
+
   describe('render()', function () {
     it('should render', function () {
       assert(wrapper.hasClass('gas-price-chart'))