diff --git a/src/routes/safe/component/AddOwner/index.jsx b/src/routes/safe/component/AddOwner/index.jsx index ee31bcdd..a0812731 100644 --- a/src/routes/safe/component/AddOwner/index.jsx +++ b/src/routes/safe/component/AddOwner/index.jsx @@ -5,7 +5,7 @@ import Stepper from '~/components/Stepper' import { connect } from 'react-redux' import { type Safe } from '~/routes/safe/store/model/safe' import { type Owner, makeOwner } from '~/routes/safe/store/model/owner' -import { getSafeEthereumInstance, createTransaction } from '~/routes/safe/component/AddTransaction/createTransactions' +import { getSafeEthereumInstance, createTransaction } from '~/wallets/createTransactions' import { setOwners } from '~/utils/localStorage' import AddOwnerForm, { NAME_PARAM, OWNER_ADDRESS_PARAM, INCREASE_PARAM } from './AddOwnerForm' import Review from './Review' diff --git a/src/routes/safe/component/Safe/BalanceInfo.jsx b/src/routes/safe/component/Safe/BalanceInfo.jsx index 8ce24646..96d9c87c 100644 --- a/src/routes/safe/component/Safe/BalanceInfo.jsx +++ b/src/routes/safe/component/Safe/BalanceInfo.jsx @@ -1,5 +1,6 @@ // @flow import * as React from 'react' +import classNames from 'classnames' import AccountBalance from '@material-ui/icons/AccountBalance' import Avatar from '@material-ui/core/Avatar' import Collapse from '@material-ui/core/Collapse' @@ -56,7 +57,7 @@ const BalanceComponent = openHoc(({ const onMoveFundsClick = () => onMoveFunds(balance) return ( - + {name} diff --git a/src/routes/safe/component/Safe/MultisigTx.jsx b/src/routes/safe/component/Safe/MultisigTx.jsx index e2d62367..88a004d5 100644 --- a/src/routes/safe/component/Safe/MultisigTx.jsx +++ b/src/routes/safe/component/Safe/MultisigTx.jsx @@ -7,37 +7,20 @@ import Button from '~/components/layout/Button' import ListItemText from '~/components/List/ListItemText' type Props = { - balance: number, - onAddTx: () => void, onSeeTxs: () => void, } -export const ADD_MULTISIG_BUTTON_TEXT = 'Add' export const SEE_MULTISIG_BUTTON_TEXT = 'TXs' -const addStyle = { - marginRight: '10px', -} - -const DailyLimitComponent = ({ balance, onAddTx, onSeeTxs }: Props) => { - const text = `Available ${balance} ETH` - const disabled = balance <= 0 +const DailyLimitComponent = ({ onSeeTxs }: Props) => { + const text = 'See multisig txs executed on this Safe' return ( - - + - ) diff --git a/src/routes/safe/component/Transactions/index.jsx b/src/routes/safe/component/Transactions/index.jsx index 10c3be1f..34e2e18d 100644 --- a/src/routes/safe/component/Transactions/index.jsx +++ b/src/routes/safe/component/Transactions/index.jsx @@ -9,7 +9,6 @@ import selector, { type SelectorProps } from './selector' import actions, { type Actions } from './actions' type Props = SelectorProps & Actions & { - onAddTx: () => void, safeName: string, safeAddress: string, @@ -25,14 +24,14 @@ class Transactions extends React.Component { } render() { - const { transactions, onAddTx, safeName } = this.props + const { transactions, safeName } = this.props const hasTransactions = transactions.count() > 0 return ( { hasTransactions ? transactions.map((tx: Transaction) => ) - : + : } ) diff --git a/src/routes/safe/test/Safe.withdraw.test.js b/src/routes/safe/test/Safe.withdraw.test.js index 13f7dd97..9e67a314 100644 --- a/src/routes/safe/test/Safe.withdraw.test.js +++ b/src/routes/safe/test/Safe.withdraw.test.js @@ -17,8 +17,7 @@ import { getBalanceInEtherOf } from '~/wallets/getWeb3' import { sleep } from '~/utils/timer' import { getDailyLimitFrom } from '~/routes/safe/component/Withdraw/withdraw' import { type DailyLimitProps } from '~/routes/safe/store/model/dailyLimit' -import { ADD_MULTISIG_BUTTON_TEXT } from '~/routes/safe/component/Safe/MultisigTx' -import { WITHDRAW_INDEX, MOVE_FUNDS_INDEX } from '~/test/builder/safe.dom.utils' +import { WITHDRAW_INDEX } from '~/test/builder/safe.dom.utils' import { buildMathPropsFrom } from '~/test/utils/buildReactRouterProps' import { safeSelector } from '~/routes/safe/store/selectors/index' @@ -97,20 +96,6 @@ describe('React DOM TESTS > Withdraw funds from safe', () => { expect(dailyLimit.spentToday).toBe(0.02) }) - it('add multisig txs button disabled when balance is 0', async () => { - const Safe = TestUtils.findRenderedComponentWithType(SafeDom, SafeView) - // $FlowFixMe - const buttons = TestUtils.scryRenderedDOMComponentsWithTag(Safe, 'button') - const addTxButton = buttons[MOVE_FUNDS_INDEX] - expect(addTxButton.getElementsByTagName('span')[0].innerHTML).toEqual(ADD_MULTISIG_BUTTON_TEXT) - expect(addTxButton.hasAttribute('disabled')).toBe(true) - - await addEtherTo(address, '0.1') - await sleep(1800) - - expect(addTxButton.hasAttribute('disabled')).toBe(false) - }) - it('Withdraw button disabled when balance is 0', async () => { const Safe = TestUtils.findRenderedComponentWithType(SafeDom, SafeView) // $FlowFixMe diff --git a/src/routes/safe/test/testMultisig.js b/src/routes/safe/test/testMultisig.js index c96af663..2f9f1655 100644 --- a/src/routes/safe/test/testMultisig.js +++ b/src/routes/safe/test/testMultisig.js @@ -1,114 +1,9 @@ // @flow -import TestUtils from 'react-dom/test-utils' -import { sleep } from '~/utils/timer' -import { getBalanceInEtherOf } from '~/wallets/getWeb3' -import { ADD_MULTISIG_BUTTON_TEXT, SEE_MULTISIG_BUTTON_TEXT } from '~/routes/safe/component/Safe/MultisigTx' -import { addEtherTo } from '~/test/utils/tokenMovements' -import SafeView from '~/routes/safe/component/Safe' -import TransactionsComponent from '~/routes/safe/component/Transactions' -import TransactionComponent from '~/routes/safe/component/Transactions/Transaction' import { safeTransactionsSelector } from '~/routes/safe/store/selectors/index' import { type GlobalState } from '~/store/index' -import ListItemText from '~/components/List/ListItemText' -import { MOVE_FUNDS_INDEX, LIST_TXS_INDEX } from '~/test/builder/safe.dom.utils' - -export const createMultisigTxFilling = async ( - SafeDom: React$Component, - AddTransactionComponent: React$ElementType, - store: Store, -) => { - // Get AddTransaction form component - const AddTransaction = TestUtils.findRenderedComponentWithType(SafeDom, AddTransactionComponent) - - // $FlowFixMe - const inputs = TestUtils.scryRenderedDOMComponentsWithTag(AddTransaction, 'input') - const name = inputs[0] - const destination = inputs[1] - const amountInEth = inputs[2] - TestUtils.Simulate.change(name, { target: { value: 'Buying betteries' } }) - TestUtils.Simulate.change(amountInEth, { target: { value: '0.01' } }) - TestUtils.Simulate.change(destination, { target: { value: store.getState().providers.account } }) - - // $FlowFixMe - const form = TestUtils.findRenderedDOMComponentWithTag(AddTransaction, 'form') - - TestUtils.Simulate.submit(form) // fill the form - TestUtils.Simulate.submit(form) // confirming data - return sleep(4000) -} - -export const checkBalanceOf = async (addressToTest: string, value: string) => { - const safeBalance = await getBalanceInEtherOf(addressToTest) - expect(safeBalance).toBe(value) -} - -export const addFundsTo = async (SafeDom: React$Component, destination: string) => { - // add funds to safe - await addEtherTo(destination, '0.1') - const Safe = TestUtils.findRenderedComponentWithType(SafeDom, SafeView) - - // $FlowFixMe - const buttons = TestUtils.scryRenderedDOMComponentsWithTag(Safe, 'button') - const addTxButton = buttons[MOVE_FUNDS_INDEX] - expect(addTxButton.getElementsByTagName('span')[0].innerHTML).toEqual(ADD_MULTISIG_BUTTON_TEXT) - - await sleep(1800) // Give time to enable Add button - TestUtils.Simulate.click(addTxButton) -} - -export const listTxsOf = (SafeDom: React$Component) => { - const Safe = TestUtils.findRenderedComponentWithType(SafeDom, SafeView) - - // $FlowFixMe - const buttons = TestUtils.scryRenderedDOMComponentsWithTag(Safe, 'button') - const seeTx = buttons[LIST_TXS_INDEX] - expect(seeTx.getElementsByTagName('span')[0].innerHTML).toEqual(SEE_MULTISIG_BUTTON_TEXT) - TestUtils.Simulate.click(seeTx) -} - -export const getListItemsFrom = (SafeDom: React$Component) => { - const Transactions = TestUtils.findRenderedComponentWithType(SafeDom, TransactionsComponent) - if (!Transactions) throw new Error() - const Transaction = TestUtils.findRenderedComponentWithType(Transactions, TransactionComponent) - if (!Transaction) throw new Error() - - return TestUtils.scryRenderedComponentsWithType(Transaction, ListItemText) -} - -export const expandTransactionOf = async ( - SafeDom: React$Component, - numOwners: number, - safeThreshold: number, -) => { - const listItems = getListItemsFrom(SafeDom) - TestUtils.Simulate.click(TestUtils.scryRenderedDOMComponentsWithTag(listItems[2], 'p')[0]) // expanded - await sleep(2500) // Time to expand - const listItemsExpanded = getListItemsFrom(SafeDom) - const threshold = listItemsExpanded[5] - expect(threshold.props.secondary).toContain(`confirmation${safeThreshold === 1 ? '' : 's'} needed`) - TestUtils.Simulate.click(TestUtils.scryRenderedDOMComponentsWithTag(threshold, 'p')[0]) // expanded - await sleep(2500) // Time to expand - expect(listItemsExpanded.length).toBe(listItems.length + numOwners) -} export const getTransactionFromReduxStore = (store: Store, address: string, index: number = 0) => { const transactions = safeTransactionsSelector(store.getState(), { safeAddress: address }) return transactions.get(index) } - -export const confirmOwners = async (SafeDom: React$Component, ...statusses: string[]) => { - const Transactions = TestUtils.findRenderedComponentWithType(SafeDom, TransactionsComponent) - if (!Transactions) throw new Error() - const Transaction = TestUtils.findRenderedComponentWithType(Transactions, TransactionComponent) - if (!Transaction) throw new Error() - - const listItems = TestUtils.scryRenderedComponentsWithType(Transaction, ListItemText) - - for (let i = 0; i < statusses.length; i += 1) { - const ownerIndex = i + 6 - const ownerParagraph = listItems[ownerIndex].props.primary - - expect(statusses[i]).toEqual(ownerParagraph) - } -} diff --git a/src/test/builder/safe.dom.builder.js b/src/test/builder/safe.dom.builder.js index 78b2d332..02aa2f82 100644 --- a/src/test/builder/safe.dom.builder.js +++ b/src/test/builder/safe.dom.builder.js @@ -9,6 +9,7 @@ import { promisify } from '~/utils/promisify' import { addEtherTo } from '~/test/utils/tokenMovements' import { aMinedSafe } from '~/test/builder/safe.redux.builder' import { travelToSafe } from '~/test/builder/safe.dom.utils' +import { MOVE_FUNDS_BUTTON_TEXT } from '~/routes/safe/component/Safe/BalanceInfo' export type DomSafe = { address: string, @@ -18,6 +19,9 @@ export type DomSafe = { store: Store, } +export const filterMoveButtonsFrom = (buttons: Element[]) => + buttons.filter(button => button.getElementsByTagName('span')[0].innerHTML !== MOVE_FUNDS_BUTTON_TEXT) + export const renderSafeInDom = async ( owners: number = 1, threshold: number = 1, @@ -41,8 +45,9 @@ export const renderSafeInDom = async ( const Safe = TestUtils.findRenderedComponentWithType(SafeDom, SafeView) // $FlowFixMe const buttons = TestUtils.scryRenderedDOMComponentsWithTag(Safe, 'button') + const filteredButtons = filterMoveButtonsFrom(buttons) return { - address, safeButtons: buttons, safe: SafeDom, accounts, store, + address, safeButtons: filteredButtons, safe: SafeDom, accounts, store, } } diff --git a/src/test/builder/safe.dom.utils.js b/src/test/builder/safe.dom.utils.js index 2668db3c..82dc6a24 100644 --- a/src/test/builder/safe.dom.utils.js +++ b/src/test/builder/safe.dom.utils.js @@ -18,8 +18,7 @@ export const ADD_OWNERS_INDEX = 2 export const EDIT_THRESHOLD_INDEX = 3 export const EDIT_INDEX = 4 export const WITHDRAW_INDEX = 5 -export const MOVE_FUNDS_INDEX = 6 -export const LIST_TXS_INDEX = 7 +export const LIST_TXS_INDEX = 6 export const listTxsClickingOn = async (seeTxsButton: Element) => { expect(seeTxsButton.getElementsByTagName('span')[0].innerHTML).toEqual(SEE_MULTISIG_BUTTON_TEXT) diff --git a/src/test/safe.dom.transactions.test.js b/src/test/safe.dom.transactions.test.js index 5e0486fe..a7dba53e 100644 --- a/src/test/safe.dom.transactions.test.js +++ b/src/test/safe.dom.transactions.test.js @@ -1,7 +1,7 @@ // @flow import TestUtils from 'react-dom/test-utils' import Transaction from '~/routes/safe/component/Transactions/Transaction' -import { listTxsClickingOn, LIST_TXS_INDEX, MOVE_FUNDS_INDEX, ADD_OWNERS_INDEX, EXPAND_OWNERS_INDEX, EDIT_THRESHOLD_INDEX, WITHDRAW_INDEX, refreshTransactions } from '~/test/builder/safe.dom.utils' +import { listTxsClickingOn, LIST_TXS_INDEX, ADD_OWNERS_INDEX, EXPAND_OWNERS_INDEX, EDIT_THRESHOLD_INDEX, WITHDRAW_INDEX, refreshTransactions, EXPAND_BALANCE_INDEX } from '~/test/builder/safe.dom.utils' import { renderSafeInDom, type DomSafe } from '~/test/builder/safe.dom.builder' import { sendMoveFundsForm, checkMinedMoveFundsTx, checkPendingMoveFundsTx } from '~/test/utils/transactions/moveFunds.helper' import { sendAddOwnerForm, checkMinedAddOwnerTx, checkPendingAddOwnerTx } from '~/test/utils/transactions/addOwner.helper' @@ -23,7 +23,7 @@ describe('DOM > Feature > SAFE MULTISIG Transactions', () => { } = domSafe // WHEN - await sendMoveFundsForm(SafeDom, safeButtons[MOVE_FUNDS_INDEX], 'Move funds', '0.01', accounts[1]) + await sendMoveFundsForm(SafeDom, safeButtons[EXPAND_BALANCE_INDEX], '0.01', accounts[1]) await sendWithdrawForm(SafeDom, safeButtons[WITHDRAW_INDEX], '0.01', accounts[3]) await sendAddOwnerForm(SafeDom, safeButtons[ADD_OWNERS_INDEX], 'Adol Metamask 2', accounts[1]) await sendChangeThresholdForm(SafeDom, safeButtons[EDIT_THRESHOLD_INDEX], '2') @@ -32,7 +32,7 @@ describe('DOM > Feature > SAFE MULTISIG Transactions', () => { await listTxsClickingOn(safeButtons[LIST_TXS_INDEX]) const transactions = TestUtils.scryRenderedComponentsWithType(SafeDom, Transaction) - checkMinedMoveFundsTx(transactions[0], 'Move funds') + checkMinedMoveFundsTx(transactions[0], 'Send 0.01 ETH to') await checkMinedWithdrawTx(transactions[1], 'Withdraw movement of 0.01', address, '0.08') // 0.1 - 0.01 tx - 0.01 withdraw checkMinedAddOwnerTx(transactions[2], 'Add Owner Adol Metamask 2') checkMinedThresholdTx(transactions[3], 'Change Safe\'s threshold') @@ -45,7 +45,7 @@ describe('DOM > Feature > SAFE MULTISIG Transactions', () => { } = domSafe // WHEN - await sendMoveFundsForm(SafeDom, safeButtons[MOVE_FUNDS_INDEX], 'Buy batteries', '0.01', accounts[1]) + await sendMoveFundsForm(SafeDom, safeButtons[EXPAND_BALANCE_INDEX], '0.01', accounts[1]) const increaseThreshold = true await sendAddOwnerForm(SafeDom, safeButtons[ADD_OWNERS_INDEX], 'Adol Metamask 3', accounts[2], increaseThreshold) await sendWithdrawForm(SafeDom, safeButtons[WITHDRAW_INDEX], '0.01', accounts[3]) @@ -55,7 +55,7 @@ describe('DOM > Feature > SAFE MULTISIG Transactions', () => { const transactions = TestUtils.scryRenderedComponentsWithType(SafeDom, Transaction) const statusses = ['Adol Metamask 2 [Not confirmed]', 'Adolfo 1 Eth Account [Confirmed]'] - await checkPendingMoveFundsTx(transactions[4], 2, 'Buy batteries', statusses) + await checkPendingMoveFundsTx(transactions[4], 2, 'Send 0.01 ETH to', statusses) await checkPendingAddOwnerTx(transactions[5], 2, 'Add Owner Adol Metamask 3', statusses) // checkMinedThresholdTx(transactions[4], 'Add Owner Adol Metamask 3') await checkMinedWithdrawTx(transactions[6], 'Withdraw movement of 0.01', address, '0.07') @@ -76,7 +76,7 @@ describe('DOM > Feature > SAFE MULTISIG Transactions', () => { await refreshTransactions(store) // THEN - checkMinedMoveFundsTx(transactions[4], 'Buy batteries') + checkMinedMoveFundsTx(transactions[4], 'Send 0.01 ETH to') await checkBalanceOf(address, '0.06') checkMinedAddOwnerTx(transactions[5], 'Add Owner Adol Metamask 3') await checkThresholdOf(address, 3) diff --git a/src/test/utils/transactions/moveFunds.helper.js b/src/test/utils/transactions/moveFunds.helper.js index 3a4d96c5..fff9e749 100644 --- a/src/test/utils/transactions/moveFunds.helper.js +++ b/src/test/utils/transactions/moveFunds.helper.js @@ -5,22 +5,25 @@ import { checkMinedTx, checkPendingTx } from '~/test/builder/safe.dom.utils' export const sendMoveFundsForm = async ( SafeDom: React$Component, - multisigButton: React$Component, - txName: string, + expandBalance: React$Component, value: string, destination: string, ) => { // load add multisig form component - TestUtils.Simulate.click(multisigButton) + TestUtils.Simulate.click(expandBalance) // give time to re-render it await sleep(600) + const ethList = TestUtils.findRenderedDOMComponentWithClass(SafeDom, 'ETH') + if (!ethList) throw new Error() + const ethButton = ethList.getElementsByTagName('button') + TestUtils.Simulate.click(ethButton[0]) + await sleep(850) + // fill the form const inputs = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'input') - const nameInput = inputs[0] - const destinationInput = inputs[1] - const amountInEthInput = inputs[2] - TestUtils.Simulate.change(nameInput, { target: { value: txName } }) + const destinationInput = inputs[0] + const amountInEthInput = inputs[1] TestUtils.Simulate.change(amountInEthInput, { target: { value } }) TestUtils.Simulate.change(destinationInput, { target: { value: destination } }) // $FlowFixMe diff --git a/src/test/utils/transactions/removeOwner.helper.js b/src/test/utils/transactions/removeOwner.helper.js index 43db3c5a..0e6b2588 100644 --- a/src/test/utils/transactions/removeOwner.helper.js +++ b/src/test/utils/transactions/removeOwner.helper.js @@ -2,23 +2,25 @@ import TestUtils from 'react-dom/test-utils' import { sleep } from '~/utils/timer' import { checkMinedTx, EXPAND_OWNERS_INDEX, checkPendingTx } from '~/test/builder/safe.dom.utils' +import { filterMoveButtonsFrom } from '~/test/builder/safe.dom.builder' -export const sendRemoveOwnerForm = ( +export const sendRemoveOwnerForm = async ( SafeDom: React$Component, expandOwners: React$Component, ) => { // Expand owners TestUtils.Simulate.click(expandOwners) - sleep(600) + await sleep(600) // Get delete button user - const buttons = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'button') + const allButtons = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'button') + const buttons = filterMoveButtonsFrom(allButtons) const removeUserButton = buttons[EXPAND_OWNERS_INDEX + 2] // + 2 one the Add and the next delete expect(removeUserButton.getAttribute('aria-label')).toBe('Delete') // render form for deleting the user TestUtils.Simulate.click(removeUserButton) - sleep(600) + await sleep(600) // $FlowFixMe const form = TestUtils.findRenderedDOMComponentWithTag(SafeDom, 'form') diff --git a/src/test/utils/transactions/withdraw.helper.js b/src/test/utils/transactions/withdraw.helper.js index 4d4775a2..7aab043e 100644 --- a/src/test/utils/transactions/withdraw.helper.js +++ b/src/test/utils/transactions/withdraw.helper.js @@ -4,7 +4,7 @@ import { sleep } from '~/utils/timer' import { checkBalanceOf } from '~/test/utils/tokenMovements' import { checkMinedTx } from '~/test/builder/safe.dom.utils' -export const sendWithdrawForm = ( +export const sendWithdrawForm = async ( SafeDom: React$Component, withdrawButton: React$Component, amount: string, @@ -13,7 +13,7 @@ export const sendWithdrawForm = ( // load add multisig form component TestUtils.Simulate.click(withdrawButton) // give time to re-render it - sleep(600) + await sleep(600) // fill the form const inputs = TestUtils.scryRenderedDOMComponentsWithTag(SafeDom, 'input')