Read only connection of gas price chart to redux

1 files changed, 42 insertions, 3 deletions

diff --git a/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js b/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
index 1a0f6760e..ae98659cc 100644
--- a/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
+++ b/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js
@@ -1,18 +1,57 @@
 import React from 'react'
 import assert from 'assert'
+import proxyquire from 'proxyquire'
+import sinon from 'sinon'
 import shallow from '../../../../../lib/shallow-with-context'
-import GasPriceChart from '../gas-price-chart.component.js'
+import * as d3 from 'd3'
+
+const mockSelectReturn = {
+  ...d3.select('div'),
+  node: () => ({
+    getBoundingClientRect: () => ({ x: 123, y: 321, width: 400 }),
+  }),
+  select: d3.select,
+  attr: sinon.spy(),
+  on: sinon.spy(),
+}
+
+const GasPriceChart = proxyquire('../gas-price-chart.component.js', {
+  'c3': {
+    generate: function () {
+      return {
+        internal: {
+          showTooltip: () => {},
+          showXGridFocus: () => {},
+        },
+      }
+    },
+  },
+  'd3': {
+    ...d3,
+    select: function (...args) {
+      const result = d3.select(...args)
+      return result.empty()
+        ? mockSelectReturn
+        : result
+    },
+  },
+}).default
 
 describe('GasPriceChart Component', function () {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(<GasPriceChart />)
+    wrapper = shallow(<GasPriceChart
+      priceAndTimeEstimates={[
+        { gasprice: 1, expectedTime: 10 },
+        { gasprice: 2, expectedTime: 20 },
+        { gasprice: 3, expectedTime: 30 },
+      ]}
+    />)
   })
 
   describe('render()', () => {
     it('should render', () => {
-      console.log('wrapper', wrapper.html())
       assert(wrapper.hasClass('gas-price-chart'))
     })