fix tests, add test for changing owner's name

src/components/layout/Img/index.jsx

@@ -10,15 +10,16 @@ type Props = {
   fullwidth?: boolean,
   bordered?: boolean,
   className?: string,
-  style?: React.Node,
+  style?: Object,
+  testId? : string,
 }
 
 const Img = ({
-  fullwidth, alt, bordered, className, style, ...props
+  fullwidth, alt, bordered, className, style, testId = '', ...props
 }: Props) => {
   const classes = cx(styles.img, { fullwidth, bordered }, className)
 
-  return <img alt={alt} style={style} className={classes} {...props} />
+  return <img alt={alt} style={style} className={classes} data-testid={testId} {...props} />
 }
 
 export default Img

src/routes/safe/components/Settings/ManageOwners/index.jsx

@@ -123,7 +123,7 @@ class ManageOwners extends React.Component<Props, State> {
           </Paragraph>
           <Table label="owners" columns={columns} data={ownerData} size={ownerData.size} defaultFixed noBorder>
             {(sortedData: Array<OwnerRow>) => sortedData.map((row: any, index: number) => (
-              <TableRow tabIndex={-1} key={index} className={classes.hide} date-testid={OWNERS_ROW_TESTID}>
+              <TableRow tabIndex={-1} key={index} className={classes.hide} data-testid={OWNERS_ROW_TESTID}>
                 {autoColumns.map((column: Column) => (
                   <TableCell key={column.id} style={cellWidth(column.width)} align={column.align} component="td">
                     {column.id === OWNERS_TABLE_ADDRESS_ID ? (

src/store/index.js

@@ -1,5 +1,5 @@
 // @flow
-import { createBrowserHistory, createMemoryHistory } from 'history'
+import { createBrowserHistory } from 'history'
 import { connectRouter, routerMiddleware } from 'connected-react-router'
 import {
   combineReducers, createStore, applyMiddleware, compose, type Reducer, type Store,
@@ -14,7 +14,7 @@ import transactions, {
   TRANSACTIONS_REDUCER_ID,
 } from '~/routes/safe/store/reducer/transactions'
 
-export const history = process.env.NODE_ENV === 'test' ? createMemoryHistory() : createBrowserHistory()
+export const history = createBrowserHistory()
 
 // eslint-disable-next-line
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

src/test/builder/safe.dom.utils.js

@@ -3,11 +3,10 @@ import * as React from 'react'
 import TestUtils from 'react-dom/test-utils'
 import { type Store } from 'redux'
 import { Provider } from 'react-redux'
+import { render } from '@testing-library/react'
 import { ConnectedRouter } from 'connected-react-router'
 import PageFrame from '~/components/layout/PageFrame'
-import { render } from '@testing-library/react'
 import ListItemText from '~/components/List/ListItemText/index'
-import { SEE_MULTISIG_BUTTON_TEXT } from '~/routes/safe/components/Safe/MultisigTx'
 import fetchTransactions from '~/routes/safe/store/actions/fetchTransactions'
 import { sleep } from '~/utils/timer'
 import { history } from '~/store'
@@ -23,16 +22,6 @@ export const EDIT_INDEX = 4
 export const WITHDRAW_INDEX = 5
 export const LIST_TXS_INDEX = 6
 
-export const listTxsClickingOn = async (store: Store, seeTxsButton: Element, safeAddress: string) => {
-  await store.dispatch(fetchTransactions(safeAddress))
-  await sleep(1200)
-  expect(seeTxsButton.getElementsByTagName('span')[0].innerHTML).toEqual(SEE_MULTISIG_BUTTON_TEXT)
-  TestUtils.Simulate.click(seeTxsButton)
-
-  // give some time to expand the transactions
-  await sleep(800)
-}
-
 export const checkMinedTx = (Transaction: React.Component<any, any>, name: string) => {
   const paragraphs = TestUtils.scryRenderedDOMComponentsWithTag(Transaction, 'p')
 

src/test/safe.dom.funds.test.js

@@ -1,16 +1,19 @@
 // @flow
-import { render, fireEvent, cleanup } from '@testing-library/react'
+import { fireEvent, cleanup } from '@testing-library/react'
-import * as fetchBalancesAction from '~/logic/tokens/store/actions/fetchTokens'
+import { List } from 'immutable'
 import { aNewStore } from '~/store'
 import { aMinedSafe } from '~/test/builder/safe.redux.builder'
-import { sendTokenTo, getFirstTokenContract } from '~/test/utils/tokenMovements'
+import { sendTokenTo, sendEtherTo } from '~/test/utils/tokenMovements'
-import { EXPAND_BALANCE_INDEX, renderSafeView } from '~/test/builder/safe.dom.utils'
+import { renderSafeView } from '~/test/builder/safe.dom.utils'
-import { getWeb3 } from '~/logic/wallets/getWeb3'
+import { getWeb3, getBalanceInEtherOf } from '~/logic/wallets/getWeb3'
-import { sendMoveTokensForm, dispatchTknBalance } from '~/test/utils/transactions/moveTokens.helper'
+import { dispatchAddTokenToList } from '~/test/utils/transactions/moveTokens.helper'
 import { sleep } from '~/utils/timer'
-import { ETH_ADDRESS } from '~/logic/tokens/utils/tokenHelpers'
+import TokenBalanceRecord from '~/routes/safe/store/models/tokenBalance'
 import { calculateBalanceOf } from '~/routes/safe/store/actions/fetchTokenBalances'
+import updateActiveTokens from '~/routes/safe/store/actions/updateActiveTokens'
 import 'jest-dom/extend-expect'
+import updateSafe from '~/routes/safe/store/actions/updateSafe'
+import { BALANCE_ROW_TEST_ID } from '~/routes/safe/components/Balances'
 
 afterEach(cleanup)
 
@@ -20,26 +23,23 @@ describe('DOM > Feature > Funds', () => {
   let accounts
   beforeEach(async () => {
     store = aNewStore()
+    // using 4th account because other accounts were used in other tests and paid gas
     safeAddress = await aMinedSafe(store)
     accounts = await getWeb3().eth.getAccounts()
   })
 
-  it('Sends ETH', async () => {
+  it('Sends ETH with threshold = 1', async () => {
     // GIVEN
-    const numTokens = '100'
+    const ethAmount = '5'
-    const tokenAddress = await sendTokenTo(safeAddress, numTokens)
+    await sendEtherTo(safeAddress, ethAmount)
-
+    const balanceAfterSendingEthToSafe = await getBalanceInEtherOf(accounts[0])
-    await dispatchTknBalance(store, tokenAddress, safeAddress)
-    // const StandardToken = await fetchBalancesAction.getStandardTokenContract()
-    // const myToken = await StandardToken.at(tokenAddress)
-    // console.log(await myToken.allowance(safeAddress, accounts[2]))
-    // console.log(await myToken.balanceOf(safeAddress))
 
     // WHEN
-    const SafeDom = await renderSafeView(store, safeAddress)
+    const SafeDom = renderSafeView(store, safeAddress)
-    await sleep(800)
+    await sleep(1300)
 
-    const balanceRows = SafeDom.getAllByTestId('balance-row')
+    // Open send funds modal
+    const balanceRows = SafeDom.getAllByTestId(BALANCE_ROW_TEST_ID)
     expect(balanceRows[0]).toHaveTextContent(`${ethAmount} ETH`)
     const sendButton = SafeDom.getByTestId('balance-send-btn')
     fireEvent.click(sendButton)
@@ -59,44 +59,64 @@ describe('DOM > Feature > Funds', () => {
     await sleep(1000)
 
     // THEN
-    const safeFunds = await calculateBalanceOf(ETH_ADDRESS, safeAddress, 18)
+    const safeFunds = await getBalanceInEtherOf(safeAddress)
     expect(Number(safeFunds)).toBe(0)
 
     const receiverFunds = await getBalanceInEtherOf(accounts[0])
-    const ESTIMATED_GASCOSTS = 0.1
+    const ESTIMATED_GASCOSTS = 0.3
     expect(Number(parseInt(receiverFunds, 10) - parseInt(balanceAfterSendingEthToSafe, 10))).toBeGreaterThan(
       parseInt(ethAmount, 10) - ESTIMATED_GASCOSTS,
     )
   })
 
-  it('Sends Tokens', async () => {
+  it('Sends Tokens with threshold = 1', async () => {
     // GIVEN
-    const numTokens = '100'
+    const tokensAmount = '100'
-    const tokenAddress = await sendTokenTo(safeAddress, numTokens)
+    const tokenReceiver = accounts[1]
-
+    const tokenAddress = await sendTokenTo(safeAddress, tokensAmount)
-    await dispatchTknBalance(store, tokenAddress, safeAddress)
+    await dispatchAddTokenToList(store, tokenAddress)
-    // const StandardToken = await fetchBalancesAction.getStandardTokenContract()
-    // const myToken = await StandardToken.at(tokenAddress)
-    // console.log(await myToken.allowance(safeAddress, accounts[2]))
-    // console.log(await myToken.balanceOf(safeAddress))
 
     // WHEN
     const SafeDom = await renderSafeView(store, safeAddress)
-    await sleep(800)
+    await sleep(1300)
-    // $FlowFixMe
+
-    const buttons = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'button')
+    // Activate token
-    const expandBalance = buttons[EXPAND_BALANCE_INDEX]
+    const safeTokenBalance = await calculateBalanceOf(tokenAddress, safeAddress, 18)
-    const receiver = accounts[2]
+    expect(safeTokenBalance).toBe(tokensAmount)
-    await sendMoveTokensForm(SafeDom, expandBalance, 20, accounts[2])
+
+    const balanceAsRecord = TokenBalanceRecord({
+      address: tokenAddress,
+      balance: safeTokenBalance,
+    })
+    store.dispatch(updateActiveTokens(safeAddress, List([tokenAddress])))
+    store.dispatch(updateSafe({ address: safeAddress, balances: List([balanceAsRecord]) }))
+    await sleep(1000)
+
+    // Open send funds modal
+    const balanceRows = SafeDom.getAllByTestId(BALANCE_ROW_TEST_ID)
+    expect(balanceRows.length).toBe(2)
+    const sendButtons = SafeDom.getAllByTestId('balance-send-btn')
+    expect(sendButtons.length).toBe(2)
+    fireEvent.click(sendButtons[1])
+
+    // Fill first send funds screen
+    const recipientInput = SafeDom.getByPlaceholderText('Recipient*')
+    const amountInput = SafeDom.getByPlaceholderText('Amount*')
+    const reviewBtn = SafeDom.getByTestId('review-tx-btn')
+    fireEvent.change(recipientInput, { target: { value: tokenReceiver } })
+    fireEvent.change(amountInput, { target: { value: tokensAmount } })
+    await sleep(200)
+    fireEvent.click(reviewBtn)
+
+    // Submit the tx (Review Tx screen)
+    const submitBtn = SafeDom.getByTestId('submit-tx-btn')
+    fireEvent.click(submitBtn)
+    await sleep(1000)
 
     // THEN
-    const safeFunds = await fetchBalancesAction.calculateBalanceOf(tokenAddress, safeAddress, 18)
+    const safeFunds = await calculateBalanceOf(tokenAddress, safeAddress, 18)
-    expect(Number(safeFunds)).toBe(80)
+    expect(Number(safeFunds)).toBe(0)
-    const receiverFunds = await fetchBalancesAction.calculateBalanceOf(tokenAddress, receiver, 18)
+    const receiverFunds = await calculateBalanceOf(tokenAddress, tokenReceiver, 18)
-    expect(Number(receiverFunds)).toBe(20)
+    expect(receiverFunds).toBe(tokensAmount)
-
-    const token = await getFirstTokenContract(getWeb3(), accounts[0])
-    const nativeSafeFunds = await token.balanceOf(safeAddress)
-    expect(Number(nativeSafeFunds.valueOf())).toEqual(80 * 10 ** 18)
   })
 })

src/test/safe.dom.tokens.test.js

@@ -1,73 +0,0 @@
-// @flow
-
-import TestUtils from 'react-dom/test-utils'
-import * as fetchBalancesAction from '~/logic/tokens/store/actions/fetchTokens'
-import { aNewStore } from '~/store'
-import { aMinedSafe } from '~/test/builder/safe.redux.builder'
-import { addTknTo, getFirstTokenContract } from '~/test/utils/tokenMovements'
-import { EXPAND_BALANCE_INDEX, travelToSafe } from '~/test/builder/safe.dom.utils'
-import { getWeb3 } from '~/logic/wallets/getWeb3'
-import { sendMoveTokensForm, dispatchTknBalance } from '~/test/utils/transactions/moveTokens.helper'
-import { sleep } from '~/utils/timer'
-
-describe('DOM > Feature > SAFE ERC20 TOKENS', () => {
-  let accounts
-  beforeEach(async () => {
-    accounts = await getWeb3().eth.getAccounts()
-  })
-
-  it('sends ERC20 tokens', async () => {
-    // GIVEN
-    const store = aNewStore()
-    const safeAddress = await aMinedSafe(store)
-
-    const numTokens = '100'
-    const tokenAddress = await addTknTo(safeAddress, numTokens)
-
-    await dispatchTknBalance(store, tokenAddress, safeAddress)
-    // const StandardToken = await fetchBalancesAction.getStandardTokenContract()
-    // const myToken = await StandardToken.at(tokenAddress)
-    // console.log(await myToken.allowance(safeAddress, accounts[2]))
-    // console.log(await myToken.balanceOf(safeAddress))
-
-    // WHEN
-    const SafeDom = await travelToSafe(store, safeAddress)
-    await sleep(800)
-    // $FlowFixMe
-    const buttons = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'button')
-    const expandBalance = buttons[EXPAND_BALANCE_INDEX]
-    const receiver = accounts[2]
-    await sendMoveTokensForm(SafeDom, expandBalance, 20, accounts[2])
-
-    // THEN
-    const safeFunds = await fetchBalancesAction.calculateBalanceOf(tokenAddress, safeAddress, 18)
-    expect(Number(safeFunds)).toBe(80)
-    const receiverFunds = await fetchBalancesAction.calculateBalanceOf(tokenAddress, receiver, 18)
-    expect(Number(receiverFunds)).toBe(20)
-
-    const token = await getFirstTokenContract(getWeb3(), accounts[0])
-    const nativeSafeFunds = await token.balanceOf(safeAddress)
-    expect(Number(nativeSafeFunds.valueOf())).toEqual(80 * 10 ** 18)
-  })
-
-  it('disables send token button when balance is 0', async () => {
-    // GIVEN
-    const token = await getFirstTokenContract(getWeb3(), accounts[0])
-    await dispatchTknBalance(store, token.address, safeAddress)
-
-    // WHEN
-    const SafeDom = travelToSafe(store, safeAddress)
-
-    // $FlowFixMe
-    const buttons = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'button')
-    const expandBalance = buttons[EXPAND_BALANCE_INDEX]
-
-    TestUtils.Simulate.click(expandBalance)
-    await sleep(800)
-
-    // $FlowFixMe
-    const balanceButtons = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'button')
-    const tokenButton = balanceButtons[EXPAND_BALANCE_INDEX + 1] // expand button, and the next one is for sending
-    expect(tokenButton.hasAttribute('disabled')).toBe(true)
-  })
-})