refactor safe creation form test
This commit is contained in:
parent
4f54a60866
commit
c3241a9b20
|
@ -49,7 +49,7 @@ const createMasterCopies = async () => {
|
|||
proxyFactoryMaster = await ProxyFactory.new({ from: userAccount, gas: '5000000' })
|
||||
|
||||
const GnosisSafe = getGnosisSafeContract(web3)
|
||||
safeMaster = await GnosisSafe.new({ from: userAccount, gas: '6000000' })
|
||||
safeMaster = await GnosisSafe.new({ from: userAccount, gas: '7000000' })
|
||||
}
|
||||
|
||||
export const initContracts = ensureOnce(process.env.NODE_ENV === 'test' ? createMasterCopies : instanciateMasterCopies)
|
||||
|
|
|
@ -4,7 +4,11 @@ import { withStyles } from '@material-ui/core/styles'
|
|||
import Field from '~/components/forms/Field'
|
||||
import TextField from '~/components/forms/TextField'
|
||||
import {
|
||||
required, composeValidators, uniqueAddress, mustBeEthereumAddress, noErrorsOn,
|
||||
required,
|
||||
composeValidators,
|
||||
uniqueAddress,
|
||||
mustBeEthereumAddress,
|
||||
noErrorsOn,
|
||||
} from '~/components/forms/validator'
|
||||
import Block from '~/components/layout/Block'
|
||||
import Button from '~/components/layout/Button'
|
||||
|
@ -105,7 +109,6 @@ class SafeOwners extends React.Component<Props, State> {
|
|||
const initialValues = calculateValuesAfterRemoving(index, numOwners, values)
|
||||
updateInitialProps(initialValues)
|
||||
|
||||
|
||||
this.setState(state => ({
|
||||
numOwners: state.numOwners - 1,
|
||||
}))
|
||||
|
@ -135,11 +138,11 @@ class SafeOwners extends React.Component<Props, State> {
|
|||
</Row>
|
||||
<Hairline />
|
||||
<Block margin="md" padding="md">
|
||||
{ [...Array(Number(numOwners))].map((x, index) => {
|
||||
{[...Array(Number(numOwners))].map((x, index) => {
|
||||
const addressName = getOwnerAddressBy(index)
|
||||
|
||||
return (
|
||||
<Row key={`owner${(index)}`} className={classes.owner}>
|
||||
<Row key={`owner${index}`} className={classes.owner}>
|
||||
<Col xs={4}>
|
||||
<Field
|
||||
className={classes.name}
|
||||
|
@ -155,13 +158,15 @@ class SafeOwners extends React.Component<Props, State> {
|
|||
<Field
|
||||
name={addressName}
|
||||
component={TextField}
|
||||
inputAdornment={noErrorsOn(addressName, errors) && {
|
||||
inputAdornment={
|
||||
noErrorsOn(addressName, errors) && {
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<CheckCircle className={classes.check} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
}
|
||||
}
|
||||
type="text"
|
||||
validate={getAddressValidators(otherAccounts, index)}
|
||||
placeholder="Owner Address*"
|
||||
|
@ -169,17 +174,17 @@ class SafeOwners extends React.Component<Props, State> {
|
|||
/>
|
||||
</Col>
|
||||
<Col xs={1} center="xs" middle="xs" className={classes.remove}>
|
||||
{ index > 0
|
||||
&& <Img src={trash} height={20} alt="Delete" onClick={this.onRemoveRow(index)} />
|
||||
}
|
||||
{index > 0 && <Img src={trash} height={20} alt="Delete" onClick={this.onRemoveRow(index)} />}
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}) }
|
||||
})}
|
||||
</Block>
|
||||
<Row align="center" grow className={classes.add} margin="xl">
|
||||
<Button color="secondary" onClick={this.onAddOwner}>
|
||||
<Paragraph weight="bold" size="md" noMargin>{ADD_OWNER_BUTTON}</Paragraph>
|
||||
<Button color="secondary" onClick={this.onAddOwner} data-testid="add-owner-btn">
|
||||
<Paragraph weight="bold" size="md" noMargin>
|
||||
{ADD_OWNER_BUTTON}
|
||||
</Paragraph>
|
||||
</Button>
|
||||
</Row>
|
||||
</React.Fragment>
|
||||
|
@ -202,5 +207,4 @@ const SafeOwnersPage = ({ updateInitialProps }: Object) => (controls: React$Node
|
|||
</React.Fragment>
|
||||
)
|
||||
|
||||
|
||||
export default SafeOwnersPage
|
||||
|
|
|
@ -4,7 +4,9 @@ import { withStyles } from '@material-ui/core/styles'
|
|||
import MenuItem from '@material-ui/core/MenuItem'
|
||||
import Field from '~/components/forms/Field'
|
||||
import SelectField from '~/components/forms/SelectField'
|
||||
import { composeValidators, minValue, mustBeInteger, required } from '~/components/forms/validator'
|
||||
import {
|
||||
composeValidators, minValue, mustBeInteger, required,
|
||||
} from '~/components/forms/validator'
|
||||
import Block from '~/components/layout/Block'
|
||||
import Row from '~/components/layout/Row'
|
||||
import Col from '~/components/layout/Col'
|
||||
|
@ -52,22 +54,23 @@ const SafeThreshold = ({ classes, values }: Props) => {
|
|||
<Field
|
||||
name={FIELD_CONFIRMATIONS}
|
||||
component={SelectField}
|
||||
validate={composeValidators(
|
||||
required,
|
||||
mustBeInteger,
|
||||
minValue(1),
|
||||
)}
|
||||
validate={composeValidators(required, mustBeInteger, minValue(1))}
|
||||
data-testid="threshold-select-input"
|
||||
>
|
||||
{
|
||||
[...Array(Number(numOwners))].map((x, index) => (
|
||||
<MenuItem key={`selectOwner${index}`} value={`${index + 1}`}>{index + 1}</MenuItem>
|
||||
))
|
||||
}
|
||||
{[...Array(Number(numOwners))].map((x, index) => (
|
||||
<MenuItem key={`selectOwner${index}`} value={`${index + 1}`}>
|
||||
{index + 1}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Field>
|
||||
</Col>
|
||||
<Col xs={10}>
|
||||
<Paragraph size="lg" color="primary" noMargin className={classes.owners}>
|
||||
out of {numOwners} owner(s)
|
||||
out of
|
||||
{' '}
|
||||
{numOwners}
|
||||
{' '}
|
||||
owner(s)
|
||||
</Paragraph>
|
||||
</Col>
|
||||
</Row>
|
||||
|
@ -85,5 +88,4 @@ const SafeOwnersPage = () => (controls: React$Node, { values }: Object) => (
|
|||
</React.Fragment>
|
||||
)
|
||||
|
||||
|
||||
export default SafeOwnersPage
|
||||
|
|
|
@ -2,7 +2,6 @@
|
|||
import * as React from 'react'
|
||||
import { type Store } from 'redux'
|
||||
import { render, fireEvent, cleanup } from 'react-testing-library'
|
||||
import Select from '@material-ui/core/Select'
|
||||
import { Provider } from 'react-redux'
|
||||
import { ConnectedRouter } from 'connected-react-router'
|
||||
import { ADD_OWNER_BUTTON } from '~/routes/open/components/SafeOwnersForm'
|
||||
|
@ -17,6 +16,21 @@ import { whenSafeDeployed } from './builder/safe.dom.utils'
|
|||
|
||||
afterEach(cleanup)
|
||||
|
||||
// https://github.com/testing-library/react-testing-library/issues/281
|
||||
const originalError = console.error
|
||||
beforeAll(() => {
|
||||
console.error = (...args) => {
|
||||
if (/Warning.*not wrapped in act/.test(args[0])) {
|
||||
return
|
||||
}
|
||||
originalError.call(console, ...args)
|
||||
}
|
||||
})
|
||||
|
||||
afterAll(() => {
|
||||
console.error = originalError
|
||||
})
|
||||
|
||||
const renderOpenSafeForm = async (localStore: Store<GlobalState>) => {
|
||||
const provider = await getProviderInfo()
|
||||
const walletRecord = makeProvider(provider)
|
||||
|
@ -31,53 +45,54 @@ const renderOpenSafeForm = async (localStore: Store<GlobalState>) => {
|
|||
)
|
||||
}
|
||||
|
||||
const deploySafe = async (safe: any, threshold: number, numOwners: number) => {
|
||||
const deploySafe = async (createSafeForm: any, threshold: number, numOwners: number) => {
|
||||
const web3 = getWeb3()
|
||||
const accounts = await web3.eth.getAccounts()
|
||||
|
||||
expect(threshold).toBeLessThanOrEqual(numOwners)
|
||||
const form = safe.getByTestId('create-safe-form')
|
||||
const form = createSafeForm.getByTestId('create-safe-form')
|
||||
|
||||
// Fill Safe's name
|
||||
const inputs = TestUtils.scryRenderedDOMComponentsWithTag(safe, 'input')
|
||||
expect(inputs.length).toBe(1)
|
||||
const fieldName = inputs[0]
|
||||
TestUtils.Simulate.change(fieldName, { target: { value: 'Adolfo Safe' } })
|
||||
TestUtils.Simulate.submit(form)
|
||||
const nameInput: HTMLInputElement = createSafeForm.getByPlaceholderText('Name of the new Safe')
|
||||
|
||||
fireEvent.change(nameInput, { target: { value: 'Adolfo Safe' } })
|
||||
fireEvent.submit(form)
|
||||
await sleep(400)
|
||||
|
||||
// Fill owners
|
||||
const addedUpfront = 1
|
||||
const buttons = TestUtils.scryRenderedDOMComponentsWithTag(safe, 'button')
|
||||
const addOwnerButton = buttons[1]
|
||||
const addOwnerButton = createSafeForm.getByTestId('add-owner-btn')
|
||||
|
||||
expect(addOwnerButton.getElementsByTagName('span')[0].textContent).toEqual(ADD_OWNER_BUTTON)
|
||||
for (let i = addedUpfront; i < numOwners; i += 1) {
|
||||
TestUtils.Simulate.click(addOwnerButton)
|
||||
fireEvent.click(addOwnerButton)
|
||||
}
|
||||
|
||||
const ownerInputs = TestUtils.scryRenderedDOMComponentsWithTag(safe, 'input')
|
||||
expect(ownerInputs.length).toBe(numOwners * 2)
|
||||
const ownerNameInputs = createSafeForm.getAllByPlaceholderText('Owner Name*')
|
||||
const ownerAddressInputs = createSafeForm.getAllByPlaceholderText('Owner Address*')
|
||||
expect(ownerNameInputs.length).toBe(numOwners)
|
||||
expect(ownerAddressInputs.length).toBe(numOwners)
|
||||
|
||||
for (let i = addedUpfront; i < numOwners; i += 1) {
|
||||
const nameIndex = i * 2
|
||||
const addressIndex = i * 2 + 1
|
||||
const ownerName = ownerInputs[nameIndex]
|
||||
const account = ownerInputs[addressIndex]
|
||||
const ownerNameInput = ownerNameInputs[i]
|
||||
const ownerAddressInput = ownerAddressInputs[i]
|
||||
|
||||
TestUtils.Simulate.change(ownerName, { target: { value: `Adolfo ${i + 1} Eth Account` } })
|
||||
TestUtils.Simulate.change(account, { target: { value: accounts[i] } })
|
||||
fireEvent.change(ownerNameInput, { target: { value: `Owner ${i + 1}` } })
|
||||
fireEvent.change(ownerAddressInput, { target: { value: accounts[i] } })
|
||||
}
|
||||
TestUtils.Simulate.submit(form)
|
||||
fireEvent.submit(form)
|
||||
await sleep(400)
|
||||
|
||||
// Fill Threshold
|
||||
const muiSelectFields = TestUtils.scryRenderedComponentsWithType(safe, Select)
|
||||
expect(muiSelectFields.length).toEqual(1)
|
||||
muiSelectFields[0].props.onChange(`${threshold}`)
|
||||
TestUtils.Simulate.submit(form)
|
||||
const thresholdSelect = createSafeForm.getByRole('button')
|
||||
fireEvent.click(thresholdSelect)
|
||||
const thresholdOptions = createSafeForm.getAllByRole('option')
|
||||
fireEvent.click(thresholdOptions[numOwners - 1])
|
||||
fireEvent.submit(form)
|
||||
await sleep(400)
|
||||
|
||||
// Submit
|
||||
TestUtils.Simulate.submit(form)
|
||||
fireEvent.submit(form)
|
||||
await sleep(400)
|
||||
|
||||
// giving some time to the component for updating its state with safe
|
||||
|
@ -93,7 +108,7 @@ const aDeployedSafe = async (specificStore: Store<GlobalState>, threshold?: numb
|
|||
}
|
||||
|
||||
describe('DOM > Feature > CREATE a safe', () => {
|
||||
it('fills correctly the safe form with 4 owners and 4 threshold', async () => {
|
||||
it('fills correctly the safe form with 4 owners and 4 threshold and creates a safe', async () => {
|
||||
const owners = 4
|
||||
const threshold = 4
|
||||
const store = aNewStore()
|
||||
|
|
Loading…
Reference in New Issue