WA-238 Adding dailyLimit withdrawn DOM test

src/routes/safe/component/Safe.test.js

@@ -0,0 +1,81 @@
+// @flow
+import * as React from 'react'
+import TestUtils from 'react-dom/test-utils'
+import { Provider } from 'react-redux'
+import { ConnectedRouter } from 'react-router-redux'
+import Button from '~/components/layout/Button'
+import { aNewStore, history } from '~/store'
+import { addEtherTo } from '~/test/addEtherTo'
+import { aDeployedSafe } from '~/routes/safe/store/test/builder/deployedSafe.builder'
+import { SAFELIST_ADDRESS } from '~/routes/routes'
+import SafeView from '~/routes/safe/component/Safe'
+import AppRoutes from '~/routes'
+import { WITHDRAWN_BUTTON_TEXT } from '~/routes/safe/component/Safe/DailyLimit'
+import WithdrawnComponent, { SEE_TXS_BUTTON_TEXT } from '~/routes/safe/component/Withdrawn'
+import { getBalanceInEtherOf } from '~/wallets/getWeb3'
+import { sleep } from '~/utils/timer'
+
+describe('React DOM TESTS > Withdrawn funds from safe', () => {
+  let SafeDom
+  let store
+  let address
+  beforeEach(async () => {
+    // create store
+    store = aNewStore()
+    // deploy safe updating store
+    address = await aDeployedSafe(store)
+    // add funds to safe
+    await addEtherTo(address, '0.1')
+    // navigate to SAFE route
+    history.push(`${SAFELIST_ADDRESS}/${address}`)
+    SafeDom = TestUtils.renderIntoDocument((
+      <Provider store={store}>
+        <ConnectedRouter history={history}>
+          <AppRoutes />
+        </ConnectedRouter>
+      </Provider>
+    ))
+  })
+
+  it('should withdrawn funds under dailyLimit without needing confirmations', async () => {
+    const Safe = TestUtils.findRenderedComponentWithType(SafeDom, SafeView)
+
+    // $FlowFixMe
+    const buttons = TestUtils.scryRenderedComponentsWithType(Safe, Button)
+    const withdrawnButton = buttons[0]
+    expect(withdrawnButton.props.children).toEqual(WITHDRAWN_BUTTON_TEXT)
+    TestUtils.Simulate.click(TestUtils.scryRenderedDOMComponentsWithTag(withdrawnButton, 'button')[0])
+
+    const Withdrawn = TestUtils.findRenderedComponentWithType(SafeDom, WithdrawnComponent)
+
+    // $FlowFixMe
+    const inputs = TestUtils.scryRenderedDOMComponentsWithTag(Withdrawn, 'input')
+    const amountInEth = inputs[0]
+    const toAddress = inputs[1]
+    TestUtils.Simulate.change(amountInEth, { target: { value: '0.01' } })
+    TestUtils.Simulate.change(toAddress, { target: { value: store.getState().providers.account } })
+
+    // $FlowFixMe
+    const form = TestUtils.findRenderedDOMComponentWithTag(Withdrawn, 'form')
+
+    TestUtils.Simulate.submit(form) // fill the form
+    TestUtils.Simulate.submit(form) // confirming data
+    await sleep(1200)
+
+    const safeBalance = await getBalanceInEtherOf(address)
+    expect(safeBalance).toBe('0.09')
+
+    // $FlowFixMe
+    const withdrawnButtons = TestUtils.scryRenderedComponentsWithType(Withdrawn, Button)
+    const visitTxsButton = withdrawnButtons[0]
+    expect(visitTxsButton.props.children).toEqual(SEE_TXS_BUTTON_TEXT)
+    // Add funds to the Safe
+    // Add to store the match param [address]
+    // Render safe
+    // Simulate click NEXT
+    // Simulate click FINISH
+    // Give some time
+    // find the visit txs button
+    // check the funds on the destination and safe are correct
+  })
+})

src/routes/safe/component/Safe/DailyLimit.jsx

@@ -11,6 +11,8 @@ type Props = {
   onWithdrawn: () => void,
 }
 
+export const WITHDRAWN_BUTTON_TEXT = 'Withdrawn'
+
 const DailyLimit = ({ limit, onWithdrawn }: Props) => (
   <ListItem>
     <Avatar>
@@ -22,7 +24,7 @@ const DailyLimit = ({ limit, onWithdrawn }: Props) => (
       color="primary"
       onClick={onWithdrawn}
     >
-      Withdrawn
+      {WITHDRAWN_BUTTON_TEXT}
     </Button>
   </ListItem>
 )

src/routes/safe/component/Withdrawn/index.jsx

@@ -20,6 +20,8 @@ type State = {
   done: boolean,
 }
 
+export const SEE_TXS_BUTTON_TEXT = 'SEE TXS'
+
 class Withdrawn extends React.Component<Props, State> {
   state = {
     done: false,
@@ -45,7 +47,7 @@ class Withdrawn extends React.Component<Props, State> {
       <React.Fragment>
         <Stepper
           goPath={TXS_ADDRESS}
-          goTitle="SEE TXS"
+          goTitle={SEE_TXS_BUTTON_TEXT}
           onSubmit={this.onWithdrawn}
           finishedTransaction={done}
           steps={steps}

src/routes/safe/component/Withdrawn/withdrawn.js

@@ -12,21 +12,22 @@ const withdrawn = async (values: Object, safeAddress: string, userAccount: strin
   const extensions = await gnosisSafe.getExtensions()
   const dailyAddress = extensions[0]
   const dailyLimitExtension = getCreateDailyLimitExtensionContract(web3).at(dailyAddress)
-
   if (await dailyLimitExtension.gnosisSafe() !== gnosisSafe.address) {
     throw new Error('Using an extension of different safe')
   }
+
   const destination = values[DESTINATION_PARAM]
   const value = web3.toWei(values[VALUE_PARAM], 'ether')
 
   const CALL = 0
+
   await gnosisSafe.executeExtension(
     destination,
     value,
     0,
     CALL,
     dailyLimitExtension.address,
-    { from: userAccount },
+    { from: userAccount, gas: '5000000' },
   )
 }
 

src/routes/safe/store/test/balance.reducer.js

@@ -2,17 +2,9 @@
 import { BALANCE_REDUCER_ID } from '~/routes/safe/store/reducer/balances'
 import fetchBalance from '~/routes/safe/store/actions/fetchBalance'
 import { aNewStore } from '~/store'
-import { getWeb3 } from '~/wallets/getWeb3'
-import { promisify } from '~/utils/promisify'
+import { addEtherTo } from '~/test/addEtherTo'
 import { aDeployedSafe } from './builder/deployedSafe.builder'
 
-const addEtherTo = async (address: string, eth: string) => {
-  const web3 = getWeb3()
-  const accounts = await promisify(cb => web3.eth.getAccounts(cb))
-  const txData = { from: accounts[0], to: address, value: web3.toWei(eth, 'ether') }
-  return promisify(cb => web3.eth.sendTransaction(txData, cb))
-}
-
 const balanceReducerTests = () => {
   describe('Safe Actions[fetchBalance]', () => {
     let store
@@ -22,8 +14,7 @@ const balanceReducerTests = () => {
 
     it('reducer should return 0 to just deployed safe', async () => {
       // GIVEN
-      const safeTx = await aDeployedSafe(store)
-      const address = safeTx.logs[1].args.proxy
+      const address = await aDeployedSafe(store)
 
       // WHEN
       await store.dispatch(fetchBalance(address))
@@ -36,8 +27,7 @@ const balanceReducerTests = () => {
 
     it('reducer should return 1.3456 ETH as funds to safe with 1 ETH', async () => {
       // GIVEN
-      const safeTx = await aDeployedSafe(store)
-      const address = safeTx.logs[1].args.proxy
+      const address = await aDeployedSafe(store)
 
       // WHEN
       await addEtherTo(address, '1.3456')

src/routes/safe/store/test/balance.selector.js

@@ -1,18 +1,9 @@
 // @flow
-import { type Match } from 'react-router-dom'
 import addBalance from '~/routes/safe/store/actions/addBalance'
 import { aNewStore } from '~/store'
+import { buildMathPropsFrom } from '~/test/buildReactRouterProps'
 import { balanceSelector } from '../selectors'
 
-const buildMathPropsFrom = (address): Match => ({
-  params: {
-    address,
-  },
-  isExact: true,
-  path: '',
-  url: '',
-})
-
 const balanceSelectorTests = () => {
   describe('Safe Selector[balanceSelector]', () => {
     it('should return 0 when safe address is not found', () => {

src/routes/safe/store/test/builder/deployedSafe.builder.js

@@ -42,7 +42,7 @@ const deploySafe = async (safe: React$Component<{}>) => {
   TestUtils.Simulate.change(fieldName, { target: { value: 'Adolfo Safe' } })
   TestUtils.Simulate.change(fieldConfirmations, { target: { value: '1' } })
   TestUtils.Simulate.change(ownerName, { target: { value: 'Adolfo Eth Account' } })
-  TestUtils.Simulate.change(fieldDailyLimit, { target: { value: '10' } })
+  TestUtils.Simulate.change(fieldDailyLimit, { target: { value: '0.5' } })
 
   const form = TestUtils.findRenderedDOMComponentWithTag(safe, 'form')
 
@@ -68,7 +68,7 @@ const deploySafe = async (safe: React$Component<{}>) => {
 
 export const aDeployedSafe = async (specificStore: Store<GlobalState>) => {
   const safe: React$Component<{}> = await renderSafe(specificStore)
-  const deployedSafe = deploySafe(safe)
+  const deployedSafe = await deploySafe(safe)
 
-  return deployedSafe
+  return deployedSafe.logs[1].args.proxy
 }

src/routes/safe/store/test/safe.selector.js

@@ -4,17 +4,9 @@ import { type Match } from 'react-router-dom'
 import { SAFE_REDUCER_ID } from '~/routes/safe/store/reducer/safe'
 import { type Safe } from '~/routes/safe/store/model/safe'
 import { SafeFactory } from '~/routes/safe/store/test/builder/safe.builder'
+import { buildMathPropsFrom } from '~/test/buildReactRouterProps'
 import { safeSelector } from '../selectors'
 
-const buildMathPropsFrom = (address): Match => ({
-  params: {
-    address,
-  },
-  isExact: true,
-  path: '',
-  url: '',
-})
-
 const safeSelectorTests = () => {
   describe('Safe Selector[safeSelector]', () => {
     it('should return empty list when no safes', () => {

src/test/addEtherTo.js

@@ -0,0 +1,10 @@
+// @flow
+import { getWeb3 } from '~/wallets/getWeb3'
+import { promisify } from '~/utils/promisify'
+
+export const addEtherTo = async (address: string, eth: string) => {
+  const web3 = getWeb3()
+  const accounts = await promisify(cb => web3.eth.getAccounts(cb))
+  const txData = { from: accounts[0], to: address, value: web3.toWei(eth, 'ether') }
+  return promisify(cb => web3.eth.sendTransaction(txData, cb))
+}

src/test/buildReactRouterProps.js

@@ -0,0 +1,11 @@
+// @flow
+import { type Match } from 'react-router-dom'
+
+export const buildMathPropsFrom = (address: string): Match => ({
+  params: {
+    address,
+  },
+  isExact: true,
+  path: '',
+  url: '',
+})