From 31175625b446cb5d18b17db23018bca8b14d280c Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 21 Mar 2019 16:03:30 -0700 Subject: Folder restructure (#6304) * Remove ui/app/keychains/ * Remove ui/app/img/ (unused images) * Move conversion-util to helpers/utils/ * Move token-util to helpers/utils/ * Move /helpers/*.js inside /helpers/utils/ * Move util tests inside /helpers/utils/ * Renameand move confirm-transaction/util.js to helpers/utils/ * Move higher-order-components to helpers/higher-order-components/ * Move infura-conversion.json to helpers/constants/ * Move all utility functions to helpers/utils/ * Move pages directory to top-level * Move all constants to helpers/constants/ * Move metametrics inside helpers/ * Move app and root inside pages/ * Move routes inside helpers/ * Re-organize ducks/ * Move reducers to ducks/ * Move selectors inside selectors/ * Move test out of test folder * Move action, reducer, store inside store/ * Move ui components inside ui/ * Move UI components inside ui/ * Move connected components inside components/app/ * Move i18n-helper inside helpers/ * Fix unit tests * Fix unit test * Move pages components * Rename routes component * Move reducers to ducks/index * Fix bad path in unit test --- .../gas-price-chart/gas-price-chart.component.js | 108 ------- .../gas-price-chart/gas-price-chart.utils.js | 354 --------------------- .../gas-customization/gas-price-chart/index.js | 1 - .../gas-customization/gas-price-chart/index.scss | 132 -------- .../tests/gas-price-chart.component.test.js | 218 ------------- 5 files changed, 813 deletions(-) delete mode 100644 ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js delete mode 100644 ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js delete mode 100644 ui/app/components/gas-customization/gas-price-chart/index.js delete mode 100644 ui/app/components/gas-customization/gas-price-chart/index.scss delete 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') diff --git a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js deleted file mode 100644 index c0eaf4852..000000000 --- a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.component.js +++ /dev/null @@ -1,108 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import * as d3 from 'd3' -import { - generateChart, - getCoordinateData, - handleChartUpdate, - hideDataUI, - setTickPosition, - handleMouseMove, -} from './gas-price-chart.utils.js' - -export default class GasPriceChart extends Component { - static contextTypes = { - t: PropTypes.func, - } - - static propTypes = { - gasPrices: PropTypes.array, - estimatedTimes: PropTypes.array, - gasPricesMax: PropTypes.number, - estimatedTimesMax: PropTypes.number, - currentPrice: PropTypes.number, - updateCustomGasPrice: PropTypes.func, - } - - renderChart ({ - currentPrice, - gasPrices, - estimatedTimes, - gasPricesMax, - estimatedTimesMax, - updateCustomGasPrice, - }) { - const chart = generateChart(gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax, this.context.t) - setTimeout(function () { - setTickPosition('y', 0, -5, 8) - setTickPosition('y', 1, -3, -5) - setTickPosition('x', 0, 3) - setTickPosition('x', 1, 3, -8) - - const { x: domainX } = getCoordinateData('.domain') - const { x: yAxisX } = getCoordinateData('.c3-axis-y-label') - const { x: tickX } = getCoordinateData('.c3-axis-x .tick') - - d3.select('.c3-axis-x .tick').attr('transform', 'translate(' + (domainX - tickX) / 2 + ', 0)') - d3.select('.c3-axis-x-label').attr('transform', 'translate(0,-15)') - d3.select('.c3-axis-y-label').attr('transform', 'translate(' + (domainX - yAxisX - 12) + ', 2) rotate(-90)') - d3.select('.c3-xgrid-focus line').attr('y2', 98) - - d3.select('.c3-chart').on('mouseout', () => { - hideDataUI(chart, '#overlayed-circle') - }) - - d3.select('.c3-chart').on('click', () => { - const { x: newGasPrice } = d3.select('#overlayed-circle').datum() - updateCustomGasPrice(newGasPrice) - }) - - const { x: chartXStart, width: chartWidth } = getCoordinateData('.c3-areas-data1') - - handleChartUpdate({ - chart, - gasPrices, - newPrice: currentPrice, - cssId: '#set-circle', - }) - - d3.select('.c3-chart').on('mousemove', function () { - handleMouseMove({ - xMousePos: d3.event.clientX, - chartXStart, - chartWidth, - gasPrices, - estimatedTimes, - chart, - }) - }) - }, 0) - - this.chart = chart - } - - componentDidUpdate (prevProps) { - const { gasPrices, currentPrice: newPrice } = this.props - - if (prevProps.currentPrice !== newPrice) { - handleChartUpdate({ - chart: this.chart, - gasPrices, - newPrice, - cssId: '#set-circle', - }) - } - } - - componentDidMount () { - this.renderChart(this.props) - } - - render () { - return ( -
-
-
- ) - } -} diff --git a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js b/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js deleted file mode 100644 index f19dafcc1..000000000 --- a/ui/app/components/gas-customization/gas-price-chart/gas-price-chart.utils.js +++ /dev/null @@ -1,354 +0,0 @@ -import * as d3 from 'd3' -import c3 from 'c3' -import BigNumber from 'bignumber.js' - -const newBigSigDig = n => (new BigNumber(n.toPrecision(15))) -const createOp = (a, b, op) => (newBigSigDig(a))[op](newBigSigDig(b)) -const bigNumMinus = (a = 0, b = 0) => createOp(a, b, 'minus') -const bigNumDiv = (a = 0, b = 1) => createOp(a, b, 'div') - -export function handleMouseMove ({ xMousePos, chartXStart, chartWidth, gasPrices, estimatedTimes, chart }) { - const { currentPosValue, newTimeEstimate } = getNewXandTimeEstimate({ - xMousePos, - chartXStart, - chartWidth, - gasPrices, - estimatedTimes, - }) - - if (currentPosValue === null && newTimeEstimate === null) { - hideDataUI(chart, '#overlayed-circle') - return - } - - const indexOfNewCircle = estimatedTimes.length + 1 - const dataUIObj = generateDataUIObj(currentPosValue, indexOfNewCircle, newTimeEstimate) - - chart.internal.overlayPoint(dataUIObj, indexOfNewCircle) - chart.internal.showTooltip([dataUIObj], d3.select('.c3-areas-data1')._groups[0]) - chart.internal.showXGridFocus([dataUIObj]) -} - -export function getCoordinateData (selector) { - const node = d3.select(selector).node() - return node ? node.getBoundingClientRect() : {} -} - -export function generateDataUIObj (x, index, value) { - return { - x, - value, - index, - id: 'data1', - name: 'data1', - } -} - -export function handleChartUpdate ({ chart, gasPrices, newPrice, cssId }) { - const { - closestLowerValueIndex, - closestLowerValue, - closestHigherValueIndex, - closestHigherValue, - } = getAdjacentGasPrices({ gasPrices, priceToPosition: newPrice }) - - if (closestLowerValue && closestHigherValue) { - setSelectedCircle({ - chart, - newPrice, - closestLowerValueIndex, - closestLowerValue, - closestHigherValueIndex, - closestHigherValue, - }) - } else { - hideDataUI(chart, cssId) - } -} - -export function getAdjacentGasPrices ({ gasPrices, priceToPosition }) { - const closestLowerValueIndex = gasPrices.findIndex((e, i, a) => e <= priceToPosition && a[i + 1] >= priceToPosition) - const closestHigherValueIndex = gasPrices.findIndex((e, i, a) => e > priceToPosition) - return { - closestLowerValueIndex, - closestHigherValueIndex, - closestHigherValue: gasPrices[closestHigherValueIndex], - closestLowerValue: gasPrices[closestLowerValueIndex], - } -} - -export function extrapolateY ({ higherY = 0, lowerY = 0, higherX = 0, lowerX = 0, xForExtrapolation = 0 }) { - const slope = bigNumMinus(higherY, lowerY).div(bigNumMinus(higherX, lowerX)) - const newTimeEstimate = slope.times(bigNumMinus(higherX, xForExtrapolation)).minus(newBigSigDig(higherY)).negated() - - return newTimeEstimate.toNumber() -} - - -export function getNewXandTimeEstimate ({ xMousePos, chartXStart, chartWidth, gasPrices, estimatedTimes }) { - const chartMouseXPos = bigNumMinus(xMousePos, chartXStart) - const posPercentile = bigNumDiv(chartMouseXPos, chartWidth) - - const currentPosValue = (bigNumMinus(gasPrices[gasPrices.length - 1], gasPrices[0])) - .times(newBigSigDig(posPercentile)) - .plus(newBigSigDig(gasPrices[0])) - .toNumber() - - const { - closestLowerValueIndex, - closestLowerValue, - closestHigherValueIndex, - closestHigherValue, - } = getAdjacentGasPrices({ gasPrices, priceToPosition: currentPosValue }) - - return !closestHigherValue || !closestLowerValue - ? { - currentPosValue: null, - newTimeEstimate: null, - } - : { - currentPosValue, - newTimeEstimate: extrapolateY({ - higherY: estimatedTimes[closestHigherValueIndex], - lowerY: estimatedTimes[closestLowerValueIndex], - higherX: closestHigherValue, - lowerX: closestLowerValue, - xForExtrapolation: currentPosValue, - }), - } -} - -export function hideDataUI (chart, dataNodeId) { - const overLayedCircle = d3.select(dataNodeId) - if (!overLayedCircle.empty()) { - overLayedCircle.remove() - } - d3.select('.c3-tooltip-container').style('display', 'none !important') - chart.internal.hideXGridFocus() -} - -export function setTickPosition (axis, n, newPosition, secondNewPosition) { - const positionToShift = axis === 'y' ? 'x' : 'y' - const secondPositionToShift = axis === 'y' ? 'y' : 'x' - d3.select('#chart') - .select(`.c3-axis-${axis}`) - .selectAll('.tick') - .filter((d, i) => i === n) - .select('text') - .attr(positionToShift, 0) - .select('tspan') - .attr(positionToShift, newPosition) - .attr(secondPositionToShift, secondNewPosition || 0) - .style('visibility', 'visible') -} - -export function appendOrUpdateCircle ({ data, itemIndex, cx, cy, cssId, appendOnly }) { - const circle = this.main - .select('.c3-selected-circles' + this.getTargetSelectorSuffix(data.id)) - .selectAll(`.c3-selected-circle-${itemIndex}`) - - if (appendOnly || circle.empty()) { - circle.data([data]) - .enter().append('circle') - .attr('class', () => this.generateClass('c3-selected-circle', itemIndex)) - .attr('id', cssId) - .attr('cx', cx) - .attr('cy', cy) - .attr('stroke', () => this.color(data)) - .attr('r', 6) - } else { - circle.data([data]) - .attr('cx', cx) - .attr('cy', cy) - } -} - -export function setSelectedCircle ({ - chart, - newPrice, - closestLowerValueIndex, - closestLowerValue, - closestHigherValueIndex, - closestHigherValue, -}) { - const numberOfValues = chart.internal.data.xs.data1.length - - const { x: lowerX, y: lowerY } = getCoordinateData(`.c3-circle-${closestLowerValueIndex}`) - let { x: higherX, y: higherY } = getCoordinateData(`.c3-circle-${closestHigherValueIndex}`) - let count = closestHigherValueIndex + 1 - - if (lowerX && higherX) { - while (lowerX === higherX) { - higherX = getCoordinateData(`.c3-circle-${count}`).x - higherY = getCoordinateData(`.c3-circle-${count}`).y - count++ - } - } - - const currentX = bigNumMinus(higherX, lowerX) - .times(bigNumMinus(newPrice, closestLowerValue)) - .div(bigNumMinus(closestHigherValue, closestLowerValue)) - .plus(newBigSigDig(lowerX)) - - const newTimeEstimate = extrapolateY({ higherY, lowerY, higherX, lowerX, xForExtrapolation: currentX }) - - chart.internal.selectPoint( - generateDataUIObj(currentX.toNumber(), numberOfValues, newTimeEstimate), - numberOfValues - ) -} - - -export function generateChart (gasPrices, estimatedTimes, gasPricesMax, estimatedTimesMax) { - const gasPricesMaxPadded = gasPricesMax + 1 - const chart = c3.generate({ - size: { - height: 165, - }, - transition: { - duration: 0, - }, - padding: {left: 20, right: 15, top: 6, bottom: 10}, - data: { - x: 'x', - columns: [ - ['x', ...gasPrices], - ['data1', ...estimatedTimes], - ], - types: { - data1: 'area', - }, - selection: { - enabled: false, - }, - }, - color: { - data1: '#259de5', - }, - axis: { - x: { - min: gasPrices[0], - max: gasPricesMax, - tick: { - values: [Math.floor(gasPrices[0]), Math.ceil(gasPricesMax)], - outer: false, - format: function (val) { return val + ' GWEI' }, - }, - padding: {left: gasPricesMax / 50, right: gasPricesMax / 50}, - label: { - text: 'Gas Price ($)', - position: 'outer-center', - }, - }, - y: { - padding: {top: 7, bottom: 7}, - tick: { - values: [Math.floor(estimatedTimesMax * 0.05), Math.ceil(estimatedTimesMax * 0.97)], - outer: false, - }, - label: { - text: 'Confirmation time (sec)', - position: 'outer-middle', - }, - min: 0, - }, - }, - legend: { - show: false, - }, - grid: { - x: {}, - lines: { - front: false, - }, - }, - point: { - focus: { - expand: { - enabled: false, - r: 3.5, - }, - }, - }, - tooltip: { - format: { - title: (v) => v.toPrecision(4), - }, - contents: function (d) { - const titleFormat = this.config.tooltip_format_title - let text - d.forEach(el => { - if (el && (el.value || el.value === 0) && !text) { - text = "" + "' - } - }) - return text + '
" + titleFormat(el.x) + '
' + "
" - }, - position: function (data) { - if (d3.select('#overlayed-circle').empty()) { - return { top: -100, left: -100 } - } - - const { x: circleX, y: circleY, width: circleWidth } = getCoordinateData('#overlayed-circle') - const { x: chartXStart, y: chartYStart } = getCoordinateData('.c3-chart') - - // TODO: Confirm the below constants work with all data sets and screen sizes - const flipTooltip = circleY - circleWidth < chartYStart + 5 - - d3 - .select('.tooltip-arrow') - .style('margin-top', flipTooltip ? '-16px' : '4px') - - return { - top: bigNumMinus(circleY, chartYStart).minus(19).plus(flipTooltip ? circleWidth + 38 : 0).toNumber(), - left: bigNumMinus(circleX, chartXStart).plus(newBigSigDig(circleWidth)).minus(bigNumDiv(gasPricesMaxPadded, 50)).toNumber(), - } - }, - show: true, - }, - }) - - chart.internal.selectPoint = function (data, itemIndex = (data.index || 0)) { - const { x: chartXStart, y: chartYStart } = getCoordinateData('.c3-areas-data1') - - d3.select('#set-circle').remove() - - appendOrUpdateCircle.bind(this)({ - data, - itemIndex, - cx: () => bigNumMinus(data.x, chartXStart).plus(11).toNumber(), - cy: () => bigNumMinus(data.value, chartYStart).plus(10).toNumber(), - cssId: 'set-circle', - appendOnly: true, - }) - } - - chart.internal.overlayPoint = function (data, itemIndex) { - appendOrUpdateCircle.bind(this)({ - data, - itemIndex, - cx: this.circleX.bind(this), - cy: this.circleY.bind(this), - cssId: 'overlayed-circle', - }) - } - - chart.internal.showTooltip = function (selectedData, element) { - const dataToShow = selectedData.filter((d) => d && (d.value || d.value === 0)) - - if (dataToShow.length) { - this.tooltip.html( - this.config.tooltip_contents.call(this, selectedData, this.axis.getXAxisTickFormat(), this.getYFormat(), this.color) - ).style('display', 'flex') - - // Get tooltip dimensions - const tWidth = this.tooltip.property('offsetWidth') - const tHeight = this.tooltip.property('offsetHeight') - const position = this.config.tooltip_position.call(this, dataToShow, tWidth, tHeight, element) - // Set tooltip - this.tooltip.style('top', position.top + 'px').style('left', position.left + 'px') - } - } - - return chart -} diff --git a/ui/app/components/gas-customization/gas-price-chart/index.js b/ui/app/components/gas-customization/gas-price-chart/index.js deleted file mode 100644 index 9895acb62..000000000 --- a/ui/app/components/gas-customization/gas-price-chart/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './gas-price-chart.component' diff --git a/ui/app/components/gas-customization/gas-price-chart/index.scss b/ui/app/components/gas-customization/gas-price-chart/index.scss deleted file mode 100644 index 097543104..000000000 --- a/ui/app/components/gas-customization/gas-price-chart/index.scss +++ /dev/null @@ -1,132 +0,0 @@ -.gas-price-chart { - display: flex; - position: relative; - justify-content: center; - - &__root { - max-height: 154px; - max-width: 391px; - position: relative; - overflow: hidden; - - @media screen and (max-width: $break-small) { - max-width: 326px; - } - } - - .tick text, .c3-axis-x-label, .c3-axis-y-label { - font-family: Roboto; - font-style: normal; - font-weight: bold; - line-height: normal; - font-size: 8px; - text-align: center; - fill: #9A9CA6 !important; - } - - .c3-tooltip-container { - display: flex; - justify-content: center !important; - align-items: flex-end !important; - } - - .custom-tooltip { - background: rgba(0, 0, 0, 1); - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); - border-radius: 3px; - opacity: 1 !important; - height: 21px; - z-index: 1; - } - - .tooltip-arrow { - background: black; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5); - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - opacity: 1 !important; - width: 9px; - height: 9px; - margin-top: 4px; - } - - .custom-tooltip th { - font-family: Roboto; - font-style: normal; - font-weight: 500; - line-height: normal; - font-size: 10px; - text-align: center; - padding: 3px; - color: #FFFFFF; - } - - .c3-circle { - visibility: hidden; - } - - .c3-selected-circle, .c3-circle._expanded_ { - fill: #FFFFFF !important; - stroke-width: 2.4px !important; - stroke: #2d9fd9 !important; - /* visibility: visible; */ - } - - #set-circle { - fill: #313A5E !important; - stroke: #313A5E !important; - } - - .c3-axis-x-label, .c3-axis-y-label { - font-weight: normal; - } - - .tick text tspan { - visibility: hidden; - } - - .c3-circle { - fill: #2d9fd9 !important; - } - - .c3-line-data1 { - stroke: #2d9fd9 !important; - background: rgba(0,0,0,0) !important; - color: rgba(0,0,0,0) !important; - } - - .c3 path { - fill: none; - } - - .c3 path.c3-area-data1 { - opacity: 1; - fill: #e9edf1 !important; - } - - .c3-xgrid-line line { - stroke: #B8B8B8 !important; - } - - .c3-xgrid-focus { - stroke: #aaa; - } - - .c3-axis-x .domain { - fill: none; - stroke: none; - } - - .c3-axis-y .domain { - fill: none; - stroke: #C8CCD6; - } - - .c3-event-rect { - cursor: pointer; - } -} - -#chart { - background: #F8F9FB -} 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 deleted file mode 100644 index 74eddae42..000000000 --- a/ui/app/components/gas-customization/gas-price-chart/tests/gas-price-chart.component.test.js +++ /dev/null @@ -1,218 +0,0 @@ -import React from 'react' -import assert from 'assert' -import proxyquire from 'proxyquire' -import sinon from 'sinon' -import shallow from '../../../../../lib/shallow-with-context' -import * as d3 from 'd3' - -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', { - './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 wrapper - - beforeEach(() => { - wrapper = shallow() - }) - - describe('render()', () => { - it('should render', () => { - assert(wrapper.hasClass('gas-price-chart')) - }) - - it('should render the chart div', () => { - assert(wrapper.childAt(0).hasClass('gas-price-chart__root')) - assert.equal(wrapper.childAt(0).props().id, 'chart') - }) - }) - - 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]) - 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