From 012392295c1c6d0a4475f094328f59617f79b4f6 Mon Sep 17 00:00:00 2001 From: meriadec Date: Thu, 29 Mar 2018 20:00:00 +0100 Subject: [PATCH] Add tests for CounterValue --- src/__mocks__/render.js | 21 +++++ .../__tests__/CounterValue.test.js | 71 +++++++++++++++ .../__snapshots__/CounterValue.test.js.snap | 55 +++++++++++ src/components/CounterValue/index.js | 91 +++++++++++++------ src/components/CounterValue/stories.js | 5 +- src/components/OperationsList/index.js | 4 +- .../__tests__/FormattedVal.test.js | 2 +- src/components/modals/OperationDetails.js | 4 +- src/test-utils.js | 9 -- 9 files changed, 215 insertions(+), 47 deletions(-) create mode 100644 src/__mocks__/render.js create mode 100644 src/components/CounterValue/__tests__/CounterValue.test.js create mode 100644 src/components/CounterValue/__tests__/__snapshots__/CounterValue.test.js.snap delete mode 100644 src/test-utils.js diff --git a/src/__mocks__/render.js b/src/__mocks__/render.js new file mode 100644 index 00000000..370ce1b5 --- /dev/null +++ b/src/__mocks__/render.js @@ -0,0 +1,21 @@ +import React from 'react' +import { Provider } from 'react-redux' +import renderer from 'react-test-renderer' +import { ThemeProvider } from 'styled-components' +import createHistory from 'history/createHashHistory' + +import createStore from 'renderer/createStore' + +import theme from 'styles/theme' + +export default function render(component, state) { + const history = createHistory() + const store = createStore(history, state) + return renderer + .create( + + {component} + , + ) + .toJSON() +} diff --git a/src/components/CounterValue/__tests__/CounterValue.test.js b/src/components/CounterValue/__tests__/CounterValue.test.js new file mode 100644 index 00000000..28c1dcd0 --- /dev/null +++ b/src/components/CounterValue/__tests__/CounterValue.test.js @@ -0,0 +1,71 @@ +// @flow + +import React from 'react' +import { getDefaultUnitByCoinType } from '@ledgerhq/currencies' + +import render from '__mocks__/render' +import CounterValue from '..' + +describe('components', () => { + describe('CounterValue', () => { + it('basic', () => { + const state = { counterValues: { BTC: { USD: { latest: 10e2 } } } } + const unit = getDefaultUnitByCoinType(1) + const component = + const tree = render(component, state) + expect(tree).toMatchSnapshot() + }) + + it('specifying ticker different from default', () => { + const state = { counterValues: { LOL: { USD: { latest: 5e2 } } } } + const unit = getDefaultUnitByCoinType(1) + const component = + const tree = render(component, state) + expect(tree).toMatchSnapshot() + }) + + it('using countervalue different from default', () => { + const state = { + counterValues: { BTC: { EUR: { latest: 42 } } }, + settings: { + counterValue: 'EUR', + }, + } + const unit = getDefaultUnitByCoinType(1) + const component = + const tree = render(component, state) + expect(tree).toMatchSnapshot() + }) + + it('without countervalues populated', () => { + const state = { counterValues: {} } + const unit = getDefaultUnitByCoinType(1) + const component = + const tree = render(component, state) + expect(tree).toMatchSnapshot() + }) + + it('with time travel whith date in countervalues', () => { + const state = { counterValues: { BTC: { USD: { '2018-01-01': 20e2 } } } } + const unit = getDefaultUnitByCoinType(1) + + const date = new Date('2018-01-01') + const component = + const tree = render(component, state) + expect(tree).toMatchSnapshot() + }) + + it('with time travel whith date not in countervalues', () => { + const state = { counterValues: { BTC: { USD: { '2018-01-01': 20e2 } } } } + const unit = getDefaultUnitByCoinType(1) + + const date = new Date('2018-01-02') + const component = + const tree = render(component, state) + + // TODO: actually it returns 0 when date is not in countervalues + // do we want to use closest past value instead? + expect(tree).toMatchSnapshot() + }) + }) +}) diff --git a/src/components/CounterValue/__tests__/__snapshots__/CounterValue.test.js.snap b/src/components/CounterValue/__tests__/__snapshots__/CounterValue.test.js.snap new file mode 100644 index 00000000..ccd2f43e --- /dev/null +++ b/src/components/CounterValue/__tests__/__snapshots__/CounterValue.test.js.snap @@ -0,0 +1,55 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components CounterValue basic 1`] = ` + + + USD 10.00 + +`; + +exports[`components CounterValue specifying ticker different from default 1`] = ` + + + USD 5.00 + +`; + +exports[`components CounterValue using countervalue different from default 1`] = ` + + + EUR 0.42 + +`; + +exports[`components CounterValue with time travel whith date in countervalues 1`] = ` + + + USD 20.00 + +`; + +exports[`components CounterValue with time travel whith date not in countervalues 1`] = ` + + + USD 0.00 + +`; + +exports[`components CounterValue without countervalues populated 1`] = ` + + + USD 0.00 + +`; diff --git a/src/components/CounterValue/index.js b/src/components/CounterValue/index.js index c375b076..c647729e 100644 --- a/src/components/CounterValue/index.js +++ b/src/components/CounterValue/index.js @@ -2,56 +2,87 @@ import React, { PureComponent } from 'react' import { connect } from 'react-redux' -import moment from 'moment' import { getFiatUnit } from '@ledgerhq/currencies' -import type { Unit, Currency } from '@ledgerhq/currencies' +import type { Unit } from '@ledgerhq/currencies' import { getCounterValueCode } from 'reducers/settings' import { calculateCounterValueSelector } from 'reducers/counterValues' import FormattedVal from 'components/base/FormattedVal' -const mapStateToProps = state => ({ - counterValueCode: getCounterValueCode(state), - getCounterValue: calculateCounterValueSelector(state), -}) - type Props = { - formatValue: boolean, - counterValueCode: string, - getCounterValue: Function, - time?: Date | string | number, + // wich market to query + ticker: string, + + // when? if not given: take latest + date?: Date, + + // in which unit we want it to render unit: Unit, - currency: Currency, + + // the value :) value: number, + + // from reducers + counterValueCode: string, + getCounterValue: Function, +} + +const mapStateToProps = (state, props) => { + const { ticker } = props + + // TODO: in wallet-common, stop using currency. + // always use ticker and remove that hack + let { currency } = props + if (!currency && ticker) { + currency = generateFakeCurrency(ticker) + } else if (currency) { + console.warn('`currency` is deprecated in CounterValue. use `ticker` instead.') // eslint-disable-line no-console + } + + const counterValueCode = getCounterValueCode(state) + const counterValueUnit = getFiatUnit(counterValueCode) + const getCounterValue = calculateCounterValueSelector(state)(currency, counterValueUnit) + + return { + counterValueCode, + getCounterValue, + } } export class CounterValue extends PureComponent { static defaultProps = { - formatValue: true, value: 0, - time: undefined, + date: undefined, } render() { - const { - formatValue, - value, - currency, - unit, - counterValueCode, - time, - getCounterValue, - ...props - } = this.props - const date = new Date(moment(time).format('YYYY-MM-DD')) - const v = getCounterValue(currency, getFiatUnit(counterValueCode))(value, date) - return formatValue ? ( - - ) : ( - v + const { getCounterValue, counterValueCode, date, value, ...props } = this.props + const counterValue = getCounterValue(value, date) + return ( + ) } } +function generateFakeCurrency(ticker) { + return { + units: [ + { + code: ticker, + + // unused + name: 'fake-unit', + magnitude: 0, + }, + ], + + // unused + coinType: 0, + color: '#000', + name: 'fake-coin', + scheme: 'bitcoin', + } +} + export default connect(mapStateToProps)(CounterValue) diff --git a/src/components/CounterValue/stories.js b/src/components/CounterValue/stories.js index caa79ee0..e210d61d 100644 --- a/src/components/CounterValue/stories.js +++ b/src/components/CounterValue/stories.js @@ -3,7 +3,7 @@ import React from 'react' import { getCurrencyByCoinType, getDefaultUnitByCoinType } from '@ledgerhq/currencies' import { storiesOf } from '@storybook/react' -import { boolean, text } from '@storybook/addon-knobs' +import { text } from '@storybook/addon-knobs' import createHistory from 'history/createHashHistory' import { CounterValue } from 'components/CounterValue' @@ -32,9 +32,8 @@ stories.add('CounterValue', () => ( getCounterValue={getCounterValue} counterValueCode={counterValue} counterValues={counterValues} - currency={currency} + ticker={currency.units[0].code} unit={unit} - formatValue={boolean('formatValue', true)} value={Number(text('value', '100000000'))} /> )) diff --git a/src/components/OperationsList/index.js b/src/components/OperationsList/index.js index f9282fd0..2ed862ed 100644 --- a/src/components/OperationsList/index.js +++ b/src/components/OperationsList/index.js @@ -192,8 +192,8 @@ const Operation = ({ diff --git a/src/components/base/FormattedVal/__tests__/FormattedVal.test.js b/src/components/base/FormattedVal/__tests__/FormattedVal.test.js index ca6d032f..4510fac3 100644 --- a/src/components/base/FormattedVal/__tests__/FormattedVal.test.js +++ b/src/components/base/FormattedVal/__tests__/FormattedVal.test.js @@ -1,7 +1,7 @@ import React from 'react' import { getDefaultUnitByCoinType } from '@ledgerhq/currencies' -import { render } from 'test-utils' +import render from '__mocks__/render' import FormattedVal from '..' const bitcoinUnit = getDefaultUnitByCoinType(0) diff --git a/src/components/modals/OperationDetails.js b/src/components/modals/OperationDetails.js index f9f1840c..1a4f39e6 100644 --- a/src/components/modals/OperationDetails.js +++ b/src/components/modals/OperationDetails.js @@ -90,9 +90,9 @@ const OperationDetails = ({ t }: { t: T }) => ( color="grey" fontSize={5} style={{ lineHeight: 1 }} - time={date} + date={date} unit={unit} - currency={currency} + ticker={currency.units[0].code} value={amount} /> diff --git a/src/test-utils.js b/src/test-utils.js deleted file mode 100644 index 3288c903..00000000 --- a/src/test-utils.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' -import renderer from 'react-test-renderer' -import { ThemeProvider } from 'styled-components' - -import theme from 'styles/theme' - -export function render(component) { - return renderer.create({component}).toJSON() -}