From b95eb30ec60e4d169a61d987ad86fe333aa49523 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Thu, 20 Sep 2018 13:36:23 -0230 Subject: Adds redesign for the customize gas advanced tab. --- .../tests/gas-price-chart.component.test.js | 25 ++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js (limited to 'ui/app/components/gas-customization/gas-price-chart/tests') 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 new file mode 100644 index 000000000..474b7b7b6 --- /dev/null +++ b/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js @@ -0,0 +1,25 @@ +import React from 'react' +import assert from 'assert' +import shallow from '../../../../../lib/shallow-with-context' +import GasPriceChart from '../gas-price-chart.component.js' + +describe('GasPriceChart Component', function () { + let wrapper + + beforeEach(() => { + wrapper = shallow() + }) + + describe('render()', () => { + it('should render', () => { + console.log('wrapper', wrapper.html()) + assert(wrapper.hasClass('gas-price-chart')) + }) + + it('should render the chart div', () => { + assert(wrapper.childAt(0).hasClass('gas-price-chart__container')) + assert.equal(wrapper.childAt(0).props().id, 'chart') + }) + }) + +}) -- cgit From 0ba6f7d9bb5c2183d8a370fd0955e18d45616207 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Thu, 20 Sep 2018 13:36:23 -0230 Subject: Adds not yet functional gas price chart. --- .../gas-price-chart/tests/gas-price-chart.component.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/gas-customization/gas-price-chart/tests') 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 474b7b7b6..1a0f6760e 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 @@ -17,7 +17,7 @@ describe('GasPriceChart Component', function () { }) it('should render the chart div', () => { - assert(wrapper.childAt(0).hasClass('gas-price-chart__container')) + assert(wrapper.childAt(0).hasClass('gas-price-chart__root')) assert.equal(wrapper.childAt(0).props().id, 'chart') }) }) -- cgit From a2bbf504b891a63f32070961118ec1ae6fa5fdd8 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Tue, 9 Oct 2018 14:05:54 -0230 Subject: Read only connection of gas price chart to redux --- .../tests/gas-price-chart.component.test.js | 45 ++++++++++++++++++++-- 1 file changed, 42 insertions(+), 3 deletions(-) (limited to 'ui/app/components/gas-customization/gas-price-chart/tests') 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() + wrapper = shallow() }) describe('render()', () => { it('should render', () => { - console.log('wrapper', wrapper.html()) assert(wrapper.hasClass('gas-price-chart')) }) -- cgit From cd32c58fb4bcd731d8a83d354c9b01a38c8df219 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Wed, 10 Oct 2018 13:36:38 -0230 Subject: Complete integration of gas chart with redux. --- .../gas-price-chart/tests/gas-price-chart.component.test.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'ui/app/components/gas-customization/gas-price-chart/tests') 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 ae98659cc..48b8a6525 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 @@ -10,6 +10,9 @@ const mockSelectReturn = { node: () => ({ getBoundingClientRect: () => ({ x: 123, y: 321, width: 400 }), }), + empty: sinon.spy(), + remove: sinon.spy(), + style: sinon.spy(), select: d3.select, attr: sinon.spy(), on: sinon.spy(), @@ -17,11 +20,17 @@ const mockSelectReturn = { const GasPriceChart = proxyquire('../gas-price-chart.component.js', { 'c3': { - generate: function () { + generate: function ({ data: { columns } }) { return { internal: { showTooltip: () => {}, showXGridFocus: () => {}, + hideXGridFocus: () => {}, + data: { + xs: { + [columns[1][0]]: columns[1].slice(1), + }, + }, }, } }, -- cgit From d0619b024fb092182e77e16c6742e157c89b2dc9 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Tue, 23 Oct 2018 20:06:36 -0230 Subject: Update tests, plus some lint fixes, for gas-price-chart --- .../tests/gas-price-chart.component.test.js | 201 ++++++++++++++++++--- 1 file changed, 173 insertions(+), 28 deletions(-) (limited to 'ui/app/components/gas-customization/gas-price-chart/tests') 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 48b8a6525..158813edb 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 @@ -5,36 +5,59 @@ import sinon from 'sinon' import shallow from '../../../../../lib/shallow-with-context' import * as d3 from 'd3' -const mockSelectReturn = { - ...d3.select('div'), - node: () => ({ - getBoundingClientRect: () => ({ x: 123, y: 321, width: 400 }), - }), +function timeout (time) { + return new Promise((resolve, reject) => { + setTimeout(resolve, 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', { - 'c3': { - generate: function ({ data: { columns } }) { - return { - internal: { - showTooltip: () => {}, - showXGridFocus: () => {}, - hideXGridFocus: () => {}, - data: { - xs: { - [columns[1][0]]: columns[1].slice(1), - }, - }, - }, - } - }, - }, + './gas-price-chart.utils.js': gasPriceChartUtilsSpies, 'd3': { ...d3, select: function (...args) { @@ -43,20 +66,19 @@ const GasPriceChart = proxyquire('../gas-price-chart.component.js', { ? mockSelectReturn : result }, + event: { + clientX: 'mockClientX', + }, }, }).default +sinon.spy(GasPriceChart.prototype, 'renderChart') + describe('GasPriceChart Component', function () { let wrapper beforeEach(() => { - wrapper = shallow() + wrapper = shallow() }) describe('render()', () => { @@ -70,4 +92,127 @@ describe('GasPriceChart Component', function () { }) }) + describe('componentDidMount', () => { + it('should call this.renderChart with the components props', () => { + assert(GasPriceChart.prototype.renderChart.callCount, 1) + wrapper.instance().componentDidMount() + assert(GasPriceChart.prototype.renderChart.callCount, 2) + assert.deepEqual(GasPriceChart.prototype.renderChart.getCall(1).args, [{...testProps}]) + }) + }) + + describe('componentDidUpdate', () => { + it('should call handleChartUpdate if props.currentPrice has changed', () => { + gasPriceChartUtilsSpies.handleChartUpdate.resetHistory() + wrapper.instance().componentDidUpdate({ currentPrice: 7 }) + assert.equal(gasPriceChartUtilsSpies.handleChartUpdate.callCount, 1) + }) + + it('should call handleChartUpdate with the correct props', () => { + gasPriceChartUtilsSpies.handleChartUpdate.resetHistory() + wrapper.instance().componentDidUpdate({ currentPrice: 7 }) + assert.deepEqual(gasPriceChartUtilsSpies.handleChartUpdate.getCall(0).args, [{ + chart: { mockChart: true }, + gasPrices: [1.5, 2.5, 4, 8], + newPrice: 6, + cssId: '#set-circle', + }]) + }) + + it('should not call handleChartUpdate if props.currentPrice has not changed', () => { + gasPriceChartUtilsSpies.handleChartUpdate.resetHistory() + wrapper.instance().componentDidUpdate({ currentPrice: 6 }) + assert.equal(gasPriceChartUtilsSpies.handleChartUpdate.callCount, 0) + }) + }) + + describe('renderChart', () => { + it('should call setTickPosition 4 times, with the expected props', async () => { + await timeout(0) + gasPriceChartUtilsSpies.setTickPosition.resetHistory() + assert.equal(gasPriceChartUtilsSpies.setTickPosition.callCount, 0) + wrapper.instance().renderChart(testProps) + await timeout(0) + assert.equal(gasPriceChartUtilsSpies.setTickPosition.callCount, 4) + assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(0).args, ['y', 0, -5, 8]) + assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(1).args, ['y', 1, -3, -5]) + assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(2).args, ['x', 0, 3, 15]) + assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(3).args, ['x', 1, 3, -8]) + }) + + it('should call handleChartUpdate with the correct props', async () => { + await timeout(0) + gasPriceChartUtilsSpies.handleChartUpdate.resetHistory() + wrapper.instance().renderChart(testProps) + await timeout(0) + assert.deepEqual(gasPriceChartUtilsSpies.handleChartUpdate.getCall(0).args, [{ + chart: { mockChart: true }, + gasPrices: [1.5, 2.5, 4, 8], + newPrice: 6, + cssId: '#set-circle', + }]) + }) + + it('should add three events to the chart', async () => { + await timeout(0) + selectReturnSpies.on.resetHistory() + assert.equal(selectReturnSpies.on.callCount, 0) + wrapper.instance().renderChart(testProps) + await timeout(0) + assert.equal(selectReturnSpies.on.callCount, 3) + + const firstOnEventArgs = selectReturnSpies.on.getCall(0).args + assert.equal(firstOnEventArgs[0], 'mouseout') + const secondOnEventArgs = selectReturnSpies.on.getCall(1).args + assert.equal(secondOnEventArgs[0], 'click') + const thirdOnEventArgs = selectReturnSpies.on.getCall(2).args + assert.equal(thirdOnEventArgs[0], 'mousemove') + }) + + it('should hide the data UI on mouseout', async () => { + await timeout(0) + selectReturnSpies.on.resetHistory() + wrapper.instance().renderChart(testProps) + gasPriceChartUtilsSpies.hideDataUI.resetHistory() + await timeout(0) + const mouseoutEventArgs = selectReturnSpies.on.getCall(0).args + assert.equal(gasPriceChartUtilsSpies.hideDataUI.callCount, 0) + mouseoutEventArgs[1]() + assert.equal(gasPriceChartUtilsSpies.hideDataUI.callCount, 1) + assert.deepEqual(gasPriceChartUtilsSpies.hideDataUI.getCall(0).args, [{ mockChart: true }, '#overlayed-circle']) + }) + + it('should updateCustomGasPrice on click', async () => { + await timeout(0) + selectReturnSpies.on.resetHistory() + wrapper.instance().renderChart(testProps) + propsMethodSpies.updateCustomGasPrice.resetHistory() + await timeout(0) + const mouseoutEventArgs = selectReturnSpies.on.getCall(1).args + assert.equal(propsMethodSpies.updateCustomGasPrice.callCount, 0) + mouseoutEventArgs[1]() + assert.equal(propsMethodSpies.updateCustomGasPrice.callCount, 1) + assert.equal(propsMethodSpies.updateCustomGasPrice.getCall(0).args[0], 'mockX') + }) + + it('should handle mousemove', async () => { + await timeout(0) + selectReturnSpies.on.resetHistory() + wrapper.instance().renderChart(testProps) + gasPriceChartUtilsSpies.handleMouseMove.resetHistory() + await timeout(0) + const mouseoutEventArgs = selectReturnSpies.on.getCall(2).args + assert.equal(gasPriceChartUtilsSpies.handleMouseMove.callCount, 0) + mouseoutEventArgs[1]() + assert.equal(gasPriceChartUtilsSpies.handleMouseMove.callCount, 1) + assert.deepEqual(gasPriceChartUtilsSpies.handleMouseMove.getCall(0).args, [{ + xMousePos: 'mockClientX', + chartXStart: 'mockCoordinateX', + chartWidth: 'mockWidth', + gasPrices: testProps.gasPrices, + estimatedTimes: testProps.estimatedTimes, + chart: { mockChart: true }, + }]) + }) + }) }) -- cgit From b70886a99b466366e84d24271adbb890aebf6460 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Mon, 5 Nov 2018 13:31:46 -0330 Subject: Fixes for components that break e2e gas customization tests, plus unit test updates. --- .../gas-price-chart/tests/gas-price-chart.component.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/gas-customization/gas-price-chart/tests') 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 158813edb..46341195b 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 @@ -51,7 +51,7 @@ const testProps = { gasPrices: [1.5, 2.5, 4, 8], estimatedTimes: [100, 80, 40, 10], gasPricesMax: 9, - estimatedTimesMax: 100, + estimatedTimesMax: '100', currentPrice: 6, updateCustomGasPrice: propsMethodSpies.updateCustomGasPrice, } -- cgit From f8ffdaedc9a8fac631deafbc1d377430c980af94 Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Tue, 13 Nov 2018 14:06:35 -0330 Subject: Modify results of API data to better fit gas chart: remove outliers, pad data --- .../gas-price-chart/tests/gas-price-chart.component.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/gas-customization/gas-price-chart/tests') 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 46341195b..74eddae42 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 @@ -136,7 +136,7 @@ describe('GasPriceChart Component', function () { assert.equal(gasPriceChartUtilsSpies.setTickPosition.callCount, 4) assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(0).args, ['y', 0, -5, 8]) assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(1).args, ['y', 1, -3, -5]) - assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(2).args, ['x', 0, 3, 15]) + assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(2).args, ['x', 0, 3]) assert.deepEqual(gasPriceChartUtilsSpies.setTickPosition.getCall(3).args, ['x', 1, 3, -8]) }) -- cgit