diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.jsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.jsx index 13c3dd95..0609d615 100644 --- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.jsx +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.jsx @@ -23,6 +23,10 @@ import { } from '~/components/forms/validator' import { styles } from './style' +export const ADD_OWNER_NAME_INPUT_TESTID = 'add-owner-name-input' +export const ADD_OWNER_ADDRESS_INPUT_TESTID = 'add-owner-address-testid' +export const ADD_OWNER_NEXT_BTN_TESTID = 'add-owner-next btn' + type Props = { onClose: () => void, classes: Object, @@ -67,6 +71,7 @@ const OwnerForm = ({ placeholder="Owner name*" text="Owner name*" className={classes.addressInput} + testId={ADD_OWNER_NAME_INPUT_TESTID} /> @@ -80,6 +85,7 @@ const OwnerForm = ({ placeholder="Owner address*" text="Owner address*" className={classes.addressInput} + testId={ADD_OWNER_ADDRESS_INPUT_TESTID} /> @@ -95,7 +101,7 @@ const OwnerForm = ({ variant="contained" minWidth={140} color="primary" - data-testid="review-tx-btn" + testId={ADD_OWNER_NEXT_BTN_TESTID} > Next diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx index 70b2f562..a5d936aa 100644 --- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review/index.jsx @@ -10,18 +10,17 @@ import Identicon from '~/components/Identicon' import Link from '~/components/layout/Link' import Paragraph from '~/components/layout/Paragraph' import Row from '~/components/layout/Row' -import GnoForm from '~/components/forms/GnoForm' import Col from '~/components/layout/Col' import Button from '~/components/layout/Button' import Block from '~/components/layout/Block' import Hairline from '~/components/layout/Hairline' -import Field from '~/components/forms/Field' -import TextField from '~/components/forms/TextField' import type { Owner } from '~/routes/safe/store/models/owner' import { getEtherScanLink } from '~/logic/wallets/getWeb3' import { secondary } from '~/theme/variables' import { styles } from './style' +export const ADD_OWNER_SUBMIT_BTN = 'add-owner-submit-btn' + const openIconStyle = { height: '16px', color: secondary, @@ -39,14 +38,7 @@ type Props = { } const ReviewAddOwner = ({ - classes, - onClose, - safeName, - owners, - network, - values, - onClickBack, - onSubmit, + classes, onClose, safeName, owners, network, values, onClickBack, onSubmit, }: Props) => { const handleSubmit = () => { onSubmit() @@ -85,7 +77,13 @@ const ReviewAddOwner = ({ Any transaction requires the confirmation of: - {values.threshold} out of {owners.size + 1} owner(s) + {values.threshold} + {' '} + out of + {' '} + {owners.size + 1} + {' '} + owner(s) @@ -93,7 +91,9 @@ const ReviewAddOwner = ({ - {owners.size + 1} Safe owner(s) + {owners.size + 1} + {' '} + Safe owner(s) @@ -164,7 +164,7 @@ const ReviewAddOwner = ({ variant="contained" minWidth={140} color="primary" - data-testid="review-tx-btn" + testId={ADD_OWNER_SUBMIT_BTN} > Submit diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx index 6a6c3f5a..2d15e999 100644 --- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx +++ b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm/index.jsx @@ -4,8 +4,8 @@ import { List } from 'immutable' import { withStyles } from '@material-ui/core/styles' import Close from '@material-ui/icons/Close' import IconButton from '@material-ui/core/IconButton' -import SelectField from '~/components/forms/SelectField' import MenuItem from '@material-ui/core/MenuItem' +import SelectField from '~/components/forms/SelectField' import Paragraph from '~/components/layout/Paragraph' import Row from '~/components/layout/Row' import GnoForm from '~/components/forms/GnoForm' @@ -14,17 +14,14 @@ import Button from '~/components/layout/Button' import Block from '~/components/layout/Block' import Hairline from '~/components/layout/Hairline' import Field from '~/components/forms/Field' -import TextField from '~/components/forms/TextField' import type { Owner } from '~/routes/safe/store/models/owner' import { - composeValidators, - required, - minValue, - maxValue, - mustBeInteger, + composeValidators, required, minValue, maxValue, mustBeInteger, } from '~/components/forms/validator' import { styles } from './style' +export const ADD_OWNER_THRESHOLD_NEXT_BTN_TESTID = 'add-owner-threshold-next-btn' + type Props = { onClose: () => void, classes: Object, @@ -35,12 +32,7 @@ type Props = { } const ThresholdForm = ({ - classes, - onClose, - owners, - threshold, - onClickBack, - onSubmit, + classes, onClose, owners, threshold, onClickBack, onSubmit, }: Props) => { const handleSubmit = (values) => { onSubmit(values) @@ -58,77 +50,73 @@ const ThresholdForm = ({ - - {(...args) => { - const formState = args[2] - - return ( - - - - + + {() => ( + + + + Set the required owner confirmations: - - - - - Any transaction over any daily limit requires the confirmation of: - - - - - ( - - - {[...Array(Number(owners.size + 1))].map((x, index) => ( - - {index + 1} - - ))} - - {props.meta.error && props.meta.touched && ( - - {props.meta.error} - - )} - - )} - validate={composeValidators(required, mustBeInteger, minValue(1), maxValue(owners.size + 1))} - data-testid="threshold-select-input" - /> - - - - out of - {' '} - {owners.size + 1} - {' '} - owner(s) - - - - - - - - + - - ) - }} + + + Any transaction over any daily limit requires the confirmation of: + + + + + ( + + + {[...Array(Number(owners.size + 1))].map((x, index) => ( + + {index + 1} + + ))} + + {props.meta.error && props.meta.touched && ( + + {props.meta.error} + + )} + + )} + validate={composeValidators(required, mustBeInteger, minValue(1), maxValue(owners.size + 1))} + data-testid="threshold-select-input" + /> + + + + out of + {' '} + {owners.size + 1} + {' '} +owner(s) + + + + + + + + + + + )} ) diff --git a/src/routes/safe/components/Settings/ManageOwners/index.jsx b/src/routes/safe/components/Settings/ManageOwners/index.jsx index 9031c686..896be266 100644 --- a/src/routes/safe/components/Settings/ManageOwners/index.jsx +++ b/src/routes/safe/components/Settings/ManageOwners/index.jsx @@ -30,6 +30,7 @@ import RemoveOwnerIcon from '../assets/icons/bin.svg' export const RENAME_OWNER_BTN_TESTID = 'rename-owner-btn' export const REMOVE_OWNER_BTN_TESTID = 'remove-owner-btn' +export const ADD_OWNER_BTN_TESTID = 'add-owner-btn' export const OWNERS_ROW_TESTID = 'owners-row' const controlsStyle = { @@ -172,6 +173,7 @@ class ManageOwners extends React.Component { variant="contained" color="primary" onClick={this.onShow('AddOwner')} + testId={ADD_OWNER_BTN_TESTID} > Add new owner diff --git a/src/test/safe.dom.settings.owners.test.js b/src/test/safe.dom.settings.owners.test.js index dafafe27..91da6179 100644 --- a/src/test/safe.dom.settings.owners.test.js +++ b/src/test/safe.dom.settings.owners.test.js @@ -6,11 +6,13 @@ import { renderSafeView } from '~/test/builder/safe.dom.utils' import { sleep } from '~/utils/timer' import 'jest-dom/extend-expect' import { SETTINGS_TAB_BTN_TESTID } from '~/routes/safe/components/Layout' +import { getWeb3 } from '~/logic/wallets/getWeb3' import { OWNERS_SETTINGS_TAB_TEST_ID } from '~/routes/safe/components/Settings' import { RENAME_OWNER_BTN_TESTID, OWNERS_ROW_TESTID, REMOVE_OWNER_BTN_TESTID, + ADD_OWNER_BTN_TESTID, } from '~/routes/safe/components/Settings/ManageOwners' import { RENAME_OWNER_INPUT_TESTID, @@ -19,6 +21,13 @@ import { import { REMOVE_OWNER_MODAL_NEXT_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/CheckOwner' import { REMOVE_OWNER_THRESHOLD_NEXT_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/ThresholdForm' import { REMOVE_OWNER_REVIEW_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/RemoveOwnerModal/screens/Review' +import { ADD_OWNER_THRESHOLD_NEXT_BTN_TESTID } from '~/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/ThresholdForm' +import { + ADD_OWNER_NAME_INPUT_TESTID, + ADD_OWNER_ADDRESS_INPUT_TESTID, + ADD_OWNER_NEXT_BTN_TESTID, +} from '~/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm' +import { ADD_OWNER_SUBMIT_BTN } from '~/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/Review' afterEach(cleanup) @@ -102,7 +111,46 @@ describe('DOM > Feature > Settings - Manage owners', () => { expect(ownerRows.length).toBe(1) }) - it('Replaces a owner', async () => {}) + it('Adds a new owner', async () => { + const NEW_OWNER_NAME = 'I am a new owner' + const NEW_OWNER_ADDRESS = (await getWeb3().eth.getAccounts())[1] - it('Adds a new owner', async () => {}) + const SafeDom = renderSafeView(store, safeAddress) + await sleep(1300) + + // Travel to settings + const settingsBtn = SafeDom.getByTestId(SETTINGS_TAB_BTN_TESTID) + fireEvent.click(settingsBtn) + await sleep(200) + + // click on owners settings + const ownersSettingsBtn = SafeDom.getByTestId(OWNERS_SETTINGS_TAB_TEST_ID) + fireEvent.click(ownersSettingsBtn) + await sleep(200) + + // click add owner btn + fireEvent.click(SafeDom.getByTestId(ADD_OWNER_BTN_TESTID)) + await sleep(200) + + // fill and travel add owner modal + const ownerNameInput = SafeDom.getByTestId(ADD_OWNER_NAME_INPUT_TESTID) + const ownerAddressInput = SafeDom.getByTestId(ADD_OWNER_ADDRESS_INPUT_TESTID) + const nextBtn = SafeDom.getByTestId(ADD_OWNER_NEXT_BTN_TESTID) + fireEvent.change(ownerNameInput, { target: { value: NEW_OWNER_NAME } }) + fireEvent.change(ownerAddressInput, { target: { value: NEW_OWNER_ADDRESS } }) + fireEvent.click(nextBtn) + await sleep(200) + + fireEvent.click(SafeDom.getByTestId(ADD_OWNER_THRESHOLD_NEXT_BTN_TESTID)) + fireEvent.click(SafeDom.getByTestId(ADD_OWNER_SUBMIT_BTN)) + await sleep(400) + + // check if owner was added + const newOwnerRow = SafeDom.getAllByTestId(OWNERS_ROW_TESTID)[1] + + expect(newOwnerRow).toHaveTextContent(NEW_OWNER_NAME) + expect(newOwnerRow).toHaveTextContent(NEW_OWNER_ADDRESS) + }) + + it('Replaces a owner', async () => {}) })