status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

WA-232 Refactor AddToken test

This commit is contained in:
apanizo 2018-07-24 10:18:03 +02:00
parent 2ede2aceb2
commit fa857fc21a
7 changed files with 101 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/routes/tokens/component/AddToken/AddTokenForm.stories.js
View File

@ -13,5 +13,6 @@ const FrameDecorator = story => (
storiesOf('Components', module)
.addDecorator(FrameDecorator)
.add('AddTokenForm', () => (
// $FlowFixMe
<AddTokenForm tokens={List([]).toArray()} safeAddress="" />
))

14
src/routes/tokens/component/AddToken/Review/index.jsx
View File

@ -5,8 +5,8 @@ import Block from '~/components/layout/Block'
import Bold from '~/components/layout/Bold'
import Heading from '~/components/layout/Heading'
import Paragraph from '~/components/layout/Paragraph'
import { TOKEN_PARAM } from '~/routes/tokens/component/AddToken/FirstPage'
import { LOGO_URL_PARAM, NAME_PARAM, SYMBOL_PARAM, DECIMALS_PARAM } from '~/routes/tokens/component/AddToken/SecondPage'
import { TOKEN_ADRESS_PARAM } from '~/routes/tokens/component/AddToken/FirstPage'
import { TOKEN_LOGO_URL_PARAM, TOKEN_NAME_PARAM, TOKEN_SYMBOL_PARAM, TOKEN_DECIMALS_PARAM } from '~/routes/tokens/component/AddToken/SecondPage'
type FormProps = {
values: Object,
@ -21,19 +21,19 @@ const Review = () => ({ values, submitting }: FormProps) => (
<Block>
<Heading tag="h2">Review ERC20 Token operation</Heading>
<Paragraph align="left">
<Bold>Token address: </Bold> {values[TOKEN_PARAM]}
<Bold>Token address: </Bold> {values[TOKEN_ADRESS_PARAM]}
</Paragraph>
<Paragraph align="left">
<Bold>Token name: </Bold> {values[NAME_PARAM]}
<Bold>Token name: </Bold> {values[TOKEN_NAME_PARAM]}
</Paragraph>
<Paragraph align="left">
<Bold>Token symbol: </Bold> {values[SYMBOL_PARAM]}
<Bold>Token symbol: </Bold> {values[TOKEN_SYMBOL_PARAM]}
</Paragraph>
<Paragraph align="left">
<Bold>Token decimals: </Bold> {values[DECIMALS_PARAM]}
<Bold>Token decimals: </Bold> {values[TOKEN_DECIMALS_PARAM]}
</Paragraph>
<Paragraph align="left">
<Bold>Token logo: </Bold> {values[LOGO_URL_PARAM]}
<Bold>Token logo: </Bold> {values[TOKEN_LOGO_URL_PARAM]}
</Paragraph>
<Block style={spinnerStyle}>
{ submitting && <CircularProgress size={50} /> }

7
src/routes/tokens/component/AddToken/index.jsx
View File

@ -24,7 +24,7 @@ type State = {
export const ADD_TOKEN_RESET_BUTTON_TEXT = 'RESET'
export const addTokenFnc = async (values: Object, addToken, safeAddress: string) => {
export const addTokenFnc = async (values: Object, addToken: typeof addTokenAction, safeAddress: string) => {
const address = values[TOKEN_ADRESS_PARAM]
const name = values[TOKEN_NAME_PARAM]
const symbol = values[TOKEN_SYMBOL_PARAM]
@ -52,7 +52,10 @@ class AddToken extends React.Component<Props, State> {
onAddToken = async (values: Object) => {
const { addToken, safeAddress } = this.props
return addTokenFnc(values, addToken, safeAddress)
const result = addTokenFnc(values, addToken, safeAddress)
this.setState({ done: true })
return result
}
onReset = () => {

34
src/test/tokens.dom.adding.test.js
View File

@ -1,6 +1,5 @@
// @flow
import * as TestUtils from 'react-dom/test-utils'
import AddToken from '~/routes/tokens/component/AddToken'
import { getWeb3 } from '~/wallets/getWeb3'
import { type Match } from 'react-router-dom'
import { promisify } from '~/utils/promisify'
@ -15,6 +14,7 @@ import { tokenListSelector } from '~/routes/tokens/store/selectors'
import { testToken } from '~/test/builder/tokens.dom.utils'
import * as fetchTokensModule from '~/routes/tokens/store/actions/fetchTokens'
import * as enhancedFetchModule from '~/utils/fetch'
import { clickOnAddToken, fillAddress, fillHumanReadableInfo } from '~/test/utils/tokens/addToken.helper'
describe('DOM > Feature > Add new ERC 20 Tokens', () => {
let web3
@ -54,35 +54,11 @@ describe('DOM > Feature > Add new ERC 20 Tokens', () => {
testToken(tokens[1].props.token, 'ETH', true)
// WHEN
// $FlowFixMe
const buttons = TestUtils.scryRenderedDOMComponentsWithTag(TokensDom, 'button')
expect(buttons.length).toBe(1)
TestUtils.Simulate.click(buttons[0])
await sleep(400)
await clickOnAddToken(TokensDom)
await fillAddress(TokensDom, secondErc20Token)
await fillHumanReadableInfo(TokensDom)
// fill the form
const AddTokenComponent = TestUtils.findRenderedComponentWithType(TokensDom, AddToken)
let inputs = TestUtils.scryRenderedDOMComponentsWithTag(AddTokenComponent, 'input')
expect(inputs.length).toBe(1)
const tokenAddressInput = inputs[0]
TestUtils.Simulate.change(tokenAddressInput, { target: { value: `${secondErc20Token.address}` } })
// $FlowFixMe
let form = TestUtils.findRenderedDOMComponentWithTag(AddTokenComponent, 'form')
// submit it
TestUtils.Simulate.submit(form)
await sleep(15000)
inputs = TestUtils.scryRenderedDOMComponentsWithTag(AddTokenComponent, 'input')
expect(inputs.length).toBe(4)
TestUtils.Simulate.change(inputs[3], { target: { value: 'https://my.token.image/foo' } })
form = TestUtils.findRenderedDOMComponentWithTag(AddTokenComponent, 'form')
// submit it
TestUtils.Simulate.submit(form)
TestUtils.Simulate.submit(form)
await sleep(3200)
// THEN
const match: Match = buildMathPropsFrom(safeAddress)
const tokenList = tokenListSelector(store.getState(), { match })
expect(tokenList.count()).toBe(3)

38
src/test/utils/logTransactions.js
View File

@ -1,6 +1,7 @@
// @flow
import { getGnosisSafeInstanceAt } from '~/wallets/safeContracts'
import Stepper from '~/components/Stepper'
import GnoStepper from '~/components/Stepper'
import Stepper from '@material-ui/core/Stepper'
import TestUtils from 'react-dom/test-utils'
export const printOutApprove = async (
@ -29,9 +30,11 @@ export const printOutApprove = async (
const MAX_TIMES_EXECUTED = 35
const INTERVAL = 500
type FinsihedTx = {
finishedTransaction: boolean,
}
export const whenExecuted = (
SafeDom: React$Component<any, any>,
ParentComponent: React$ElementType,
@ -45,9 +48,9 @@ export const whenExecuted = (
// $FlowFixMe
const SafeComponent = TestUtils.findRenderedComponentWithType(SafeDom, ParentComponent)
type StepperType = React$Component<FinsihedTx, any>
type GnoStepperType = React$Component<FinsihedTx, any>
// $FlowFixMe
const StepperComponent: StepperType = TestUtils.findRenderedComponentWithType(SafeComponent, Stepper)
const StepperComponent: GnoStepperType = TestUtils.findRenderedComponentWithType(SafeComponent, GnoStepper)
if (StepperComponent.props.finishedTransaction === true) {
clearInterval(interval)
@ -56,3 +59,32 @@ export const whenExecuted = (
times += 1
}, INTERVAL)
})
type MiddleStep = {
activeStep: number
}
export const whenOnNext = (
SafeDom: React$Component<any, any>,
ParentComponent: React$ElementType,
position: number,
): Promise<void> => new Promise((resolve, reject) => {
let times = 0
const interval = setInterval(() => {
if (times >= MAX_TIMES_EXECUTED) {
clearInterval(interval)
reject()
}
// $FlowFixMe
const SafeComponent = TestUtils.findRenderedComponentWithType(SafeDom, ParentComponent)
type StepperType = React$Component<MiddleStep, any>
// $FlowFixMe
const StepperComponent: StepperType = TestUtils.findRenderedComponentWithType(SafeComponent, Stepper)
if (StepperComponent.props.activeStep === position) {
clearInterval(interval)
resolve()
}
times += 1
}, INTERVAL)
})

46
src/test/utils/tokens/addToken.helper.js Normal file
View File

@ -0,0 +1,46 @@
// @flow
import { sleep } from '~/utils/timer'
import * as TestUtils from 'react-dom/test-utils'
import AddToken from '~/routes/tokens/component/AddToken'
import { whenOnNext, whenExecuted } from '~/test/utils/logTransactions'
export const clickOnAddToken = async (TokensDom: React$Component<any, any>) => {
const buttons = TestUtils.scryRenderedDOMComponentsWithTag(TokensDom, 'button')
expect(buttons.length).toBe(1)
TestUtils.Simulate.click(buttons[0])
await sleep(400)
}
export const fillAddress = async (TokensDom: React$Component<any, any>, secondErc20Token: any) => {
// fill the form
const AddTokenComponent = TestUtils.findRenderedComponentWithType(TokensDom, AddToken)
if (!AddTokenComponent) throw new Error()
const inputs = TestUtils.scryRenderedDOMComponentsWithTag(AddTokenComponent, 'input')
expect(inputs.length).toBe(1)
const tokenAddressInput = inputs[0]
TestUtils.Simulate.change(tokenAddressInput, { target: { value: `${secondErc20Token.address}` } })
// $FlowFixMe
const form = TestUtils.findRenderedDOMComponentWithTag(AddTokenComponent, 'form')
// submit it
TestUtils.Simulate.submit(form)
return whenOnNext(TokensDom, AddToken, 1)
}
export const fillHumanReadableInfo = async (TokensDom: React$Component<any, any>) => {
// fill the form
const AddTokenComponent = TestUtils.findRenderedComponentWithType(TokensDom, AddToken)
if (!AddTokenComponent) throw new Error()
const inputs = TestUtils.scryRenderedDOMComponentsWithTag(AddTokenComponent, 'input')
expect(inputs.length).toBe(4)
TestUtils.Simulate.change(inputs[3], { target: { value: 'https://my.token.image/foo' } })
const form = TestUtils.findRenderedDOMComponentWithTag(AddTokenComponent, 'form')
// submit it
TestUtils.Simulate.submit(form)
TestUtils.Simulate.submit(form)
return whenExecuted(TokensDom, AddToken)
}

4
src/utils/localStorage/tokens.js
View File

@ -32,7 +32,7 @@ export const storedTokensBefore = (safeAddress: string) => {
return localStorage.getItem(key) === null
}
export const getTokens: List<TokenProps> = (safeAddress: string) => {
export const getTokens = (safeAddress: string): List<TokenProps> => {
const key = getTokensKey(safeAddress)
const data = load(key)
@ -40,7 +40,7 @@ export const getTokens: List<TokenProps> = (safeAddress: string) => {
}
export const setToken = (safeAddress: string, token: Token) => {
const data: List<Token> = getTokens(safeAddress)
const data: List<TokenProps> = getTokens(safeAddress)
data.push(token)
try {