Add tests for CounterValue

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(
+      <Provider store={store}>
+        <ThemeProvider theme={theme}>{component}</ThemeProvider>
+      </Provider>,
+    )
+    .toJSON()
+}

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 = <CounterValue ticker="BTC" unit={unit} value={1} />
+      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 = <CounterValue ticker="LOL" unit={unit} value={1} />
+      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 = <CounterValue ticker="BTC" unit={unit} value={1} />
+      const tree = render(component, state)
+      expect(tree).toMatchSnapshot()
+    })
+
+    it('without countervalues populated', () => {
+      const state = { counterValues: {} }
+      const unit = getDefaultUnitByCoinType(1)
+      const component = <CounterValue ticker="BTC" unit={unit} value={1} />
+      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 = <CounterValue ticker="BTC" unit={unit} value={1} date={date} />
+      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 = <CounterValue ticker="BTC" unit={unit} value={1} date={date} />
+      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()
+    })
+  })
+})

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`] = `
+<span
+  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  color="#66be54"
+>
+  + USD 10.00
+</span>
+`;
+
+exports[`components CounterValue specifying ticker different from default 1`] = `
+<span
+  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  color="#66be54"
+>
+  + USD 5.00
+</span>
+`;
+
+exports[`components CounterValue using countervalue different from default 1`] = `
+<span
+  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  color="#66be54"
+>
+  + EUR 0.42
+</span>
+`;
+
+exports[`components CounterValue with time travel whith date in countervalues 1`] = `
+<span
+  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  color="#66be54"
+>
+  + USD 20.00
+</span>
+`;
+
+exports[`components CounterValue with time travel whith date not in countervalues 1`] = `
+<span
+  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  color="#66be54"
+>
+  + USD 0.00
+</span>
+`;
+
+exports[`components CounterValue without countervalues populated 1`] = `
+<span
+  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  color="#66be54"
+>
+  + USD 0.00
+</span>
+`;

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,
+  // wich market to query
-  counterValueCode: string,
+  ticker: string,
-  getCounterValue: Function,
+
-  time?: Date | string | number,
+  // 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<Props> {
   static defaultProps = {
-    formatValue: true,
     value: 0,
-    time: undefined,
+    date: undefined,
   }
 
   render() {
-    const {
+    const { getCounterValue, counterValueCode, date, value, ...props } = this.props
-      formatValue,
+    const counterValue = getCounterValue(value, date)
-      value,
+    return (
-      currency,
+      <FormattedVal val={counterValue} fiat={counterValueCode} showCode alwaysShowSign {...props} />
-      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 ? (
-      <FormattedVal val={v} fiat={counterValueCode} showCode alwaysShowSign {...props} />
-    ) : (
-      v
     )
   }
 }
 
+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)

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'))}
   />
 ))

src/components/OperationsList/index.js

@@ -192,8 +192,8 @@ const Operation = ({
           <CounterValue
             color="grey"
             fontSize={3}
-            time={time}
+            date={time}
-            currency={currency}
+            ticker={currency.units[0].code}
             unit={unit}
             value={op.amount}
           />

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)

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}
                   />
                 </Box>

src/test-utils.js

@@ -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(<ThemeProvider theme={theme}>{component}</ThemeProvider>).toJSON()
-}