Loëck Vézien
7 years ago
committed by
GitHub
GitHub
25 changed files with 424 additions and 290 deletions
@ -0,0 +1,19 @@ |
|||
import React from 'react' |
|||
import { Provider } from 'react-redux' |
|||
import renderer from 'react-test-renderer' |
|||
import { ThemeProvider } from 'styled-components' |
|||
|
|||
import createStore from 'renderer/createStore' |
|||
|
|||
import theme from 'styles/theme' |
|||
|
|||
export default function render(component, state) { |
|||
const store = createStore({ state }) |
|||
return renderer |
|||
.create( |
|||
<Provider store={store}> |
|||
<ThemeProvider theme={theme}>{component}</ThemeProvider> |
|||
</Provider>, |
|||
) |
|||
.toJSON() |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
export default { |
|||
counterValues: { |
|||
BTC: { |
|||
USD: { |
|||
'2018-01-09': 0.00795978, |
|||
'2018-03-29': 0.007106619999999999, |
|||
'2018-03-30': 0.0068537599999999995, |
|||
'2018-03-31': 0.00694377, |
|||
'2018-04-01': 0.00683584, |
|||
'2018-04-02': 0.007061689999999999, |
|||
latest: 0.00706156, |
|||
}, |
|||
}, |
|||
}, |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
import React from 'react' |
|||
import { Provider } from 'react-redux' |
|||
import createStore from 'renderer/createStore' |
|||
|
|||
export default function withStore(state, component) { |
|||
const store = createStore({ state }) |
|||
return <Provider store={store}>{component}</Provider> |
|||
} |
|||
@ -0,0 +1,63 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
|
|||
import render from '__mocks__/render' |
|||
import CounterValue from '..' |
|||
|
|||
describe('components', () => { |
|||
describe('CounterValue', () => { |
|||
it('basic', () => { |
|||
const state = { counterValues: { BTC: { USD: { latest: 10e2 } } } } |
|||
const component = <CounterValue ticker="BTC" value={1} /> |
|||
const tree = render(component, state) |
|||
expect(tree).toMatchSnapshot() |
|||
}) |
|||
|
|||
it('specifying ticker different from default', () => { |
|||
const state = { counterValues: { LOL: { USD: { latest: 5e2 } } } } |
|||
const component = <CounterValue ticker="LOL" 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 component = <CounterValue ticker="BTC" value={1} /> |
|||
const tree = render(component, state) |
|||
expect(tree).toMatchSnapshot() |
|||
}) |
|||
|
|||
it('without countervalues populated', () => { |
|||
const state = { counterValues: {} } |
|||
const component = <CounterValue ticker="BTC" 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 date = new Date('2018-01-01') |
|||
const component = <CounterValue ticker="BTC" 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 date = new Date('2018-01-02') |
|||
const component = <CounterValue ticker="BTC" 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() |
|||
}) |
|||
}) |
|||
}) |
|||
@ -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> |
|||
`; |
|||
@ -1,40 +1,16 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
import { getCurrencyByCoinType, getDefaultUnitByCoinType } from '@ledgerhq/currencies' |
|||
import { getCurrencyByCoinType } from '@ledgerhq/currencies' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { boolean, text } from '@storybook/addon-knobs' |
|||
import createHistory from 'history/createHashHistory' |
|||
import { number } from '@storybook/addon-knobs' |
|||
|
|||
import { CounterValue } from 'components/CounterValue' |
|||
import { calculateCounterValueSelector } from 'reducers/counterValues' |
|||
import createStore from 'renderer/createStore' |
|||
import CounterValue from 'components/CounterValue' |
|||
|
|||
const stories = storiesOf('Components', module) |
|||
|
|||
const currency = getCurrencyByCoinType(0) |
|||
const unit = getDefaultUnitByCoinType(0) |
|||
|
|||
const counterValue = 'USD' |
|||
const counterValues = { |
|||
BTC: { |
|||
USD: { |
|||
'2018-01-09': 10000, |
|||
}, |
|||
}, |
|||
} |
|||
|
|||
const store = createStore(createHistory(), { counterValues }) |
|||
const getCounterValue = calculateCounterValueSelector(store.getState()) |
|||
|
|||
stories.add('CounterValue', () => ( |
|||
<CounterValue |
|||
getCounterValue={getCounterValue} |
|||
counterValueCode={counterValue} |
|||
counterValues={counterValues} |
|||
currency={currency} |
|||
unit={unit} |
|||
formatValue={boolean('formatValue', true)} |
|||
value={Number(text('value', '100000000'))} |
|||
/> |
|||
<CounterValue ticker={currency.units[0].code} value={Number(number('value', 100000000) || 0)} /> |
|||
)) |
|||
|
|||
@ -1,33 +1,39 @@ |
|||
// @flow
|
|||
|
|||
import React from 'react' |
|||
import React, { PureComponent } from 'react' |
|||
import { storiesOf } from '@storybook/react' |
|||
import { action } from '@storybook/addon-actions' |
|||
import { number } from '@storybook/addon-knobs' |
|||
import { translate } from 'react-i18next' |
|||
|
|||
import { accounts } from 'components/SelectAccount/stories' |
|||
|
|||
import { RequestAmount } from 'components/RequestAmount' |
|||
import RequestAmount from 'components/RequestAmount' |
|||
|
|||
const stories = storiesOf('Components', module) |
|||
|
|||
const props = { |
|||
counterValue: 'USD', |
|||
lastCounterValue: 9177.69, |
|||
account: accounts[0], |
|||
type State = { |
|||
value: number, |
|||
} |
|||
|
|||
const RequestAmountComp = translate()(RequestAmount) |
|||
class Wrapper extends PureComponent<any, State> { |
|||
state = { |
|||
value: 3e8, |
|||
} |
|||
handleChange = value => { |
|||
action('onChange')(value) |
|||
this.setState({ value }) |
|||
} |
|||
render() { |
|||
const { value } = this.state |
|||
return ( |
|||
<RequestAmount |
|||
counterValue="USD" |
|||
account={accounts[0]} |
|||
onChange={this.handleChange} |
|||
value={value} |
|||
max={4e8} |
|||
/> |
|||
) |
|||
} |
|||
} |
|||
|
|||
stories.add('RequestAmount', () => ( |
|||
<RequestAmountComp |
|||
{...props} |
|||
t={k => k} |
|||
onChange={action('onChange')} |
|||
value={{ |
|||
left: number('left value', 0), |
|||
right: number('right value', 0), |
|||
}} |
|||
/> |
|||
)) |
|||
stories.add('RequestAmount', () => <Wrapper />) |
|||
|
|||
@ -1,20 +1,31 @@ |
|||
// @flow
|
|||
|
|||
import type { HashHistory } from 'history' |
|||
|
|||
import { createStore, applyMiddleware, compose } from 'redux' |
|||
import { routerMiddleware } from 'react-router-redux' |
|||
import thunk from 'redux-thunk' |
|||
|
|||
import db from 'middlewares/db' |
|||
import createHistory from 'history/createHashHistory' |
|||
import type { HashHistory } from 'history' |
|||
|
|||
import reducers from 'reducers' |
|||
|
|||
export default (history: HashHistory, initialState: any) => { |
|||
const middlewares = [routerMiddleware(history), thunk, db] |
|||
type Props = { |
|||
history: HashHistory, |
|||
state?: Object, |
|||
history?: any, |
|||
dbMiddleware?: Function, |
|||
} |
|||
|
|||
export default ({ state, history, dbMiddleware }: Props) => { |
|||
if (!history) { |
|||
history = createHistory() |
|||
} |
|||
const middlewares = [routerMiddleware(history), thunk] |
|||
if (dbMiddleware) { |
|||
middlewares.push(dbMiddleware) |
|||
} |
|||
const enhancers = compose( |
|||
applyMiddleware(...middlewares), |
|||
window.devToolsExtension ? window.devToolsExtension() : f => f, // eslint-disable-line
|
|||
) |
|||
return createStore(reducers, initialState, enhancers) |
|||
return createStore(reducers, state, enhancers) |
|||
} |
|||
|
|||
@ -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() |
|||
} |
|||
Loading…
Reference in new issue