Skip to content
Permalink
Browse files

fix(onboarding): onboarding form async validation and tests

  • Loading branch information...
korhaliv committed Apr 1, 2019
1 parent 1832673 commit 9e07ca2e16d6e9dbec0dec015f18c75f33eac3e1
@@ -65,22 +65,26 @@ class ConnectionDetailsManual extends React.Component {
}
}

handleConnectionHostChange = () => {
const formState = this.formApi.getState()
delete formState.asyncErrors.connectionHost
this.formApi.setState(formState)
}
asyncValidateField = async (field, validator) => {
const value = this.formApi.getValue(field)
if (!value) {
return
}

handleConnectionCertChange = () => {
const formState = this.formApi.getState()
delete formState.asyncErrors.connectionCert
this.formApi.setState(formState)
}
const validatorWrapper = async () => {
try {
await validator(value)
} catch (e) {
return e.toString()
}
}

handleConnectionMacaroonChange = () => {
const formState = this.formApi.getState()
delete formState.asyncErrors.connectionMacaroon
this.formApi.setState(formState)
const result = await validatorWrapper(field, validator)
if (result === true) {
this.formApi.setError(field, undefined)
} else {
this.formApi.setError(field, result)
}
}

handleSubmit = values => {
@@ -90,31 +94,19 @@ class ConnectionDetailsManual extends React.Component {
setConnectionMacaroon(values.connectionMacaroon)
}

validateHost = async value => {
validateHost = () => {
const { validateHost } = this.props
try {
await validateHost(value)
} catch (e) {
return e.toString()
}
return this.asyncValidateField('connectionHost', validateHost)
}

validateCert = async value => {
validateCert = () => {
const { validateCert } = this.props
try {
await validateCert(value)
} catch (e) {
return e.toString()
}
return this.asyncValidateField('connectionCert', validateCert)
}

validateMacaroon = async value => {
validateMacaroon = () => {
const { validateMacaroon } = this.props
try {
await validateMacaroon(value)
} catch (e) {
return e.toString()
}
return this.asyncValidateField('connectionMacaroon', validateMacaroon)
}

setFormApi = formApi => {
@@ -148,6 +140,7 @@ class ConnectionDetailsManual extends React.Component {
return (
<Form
{...rest}
asyncValidators={[this.validateHost, this.validateCert, this.validateMacaroon]}
getApi={formApi => {
this.setFormApi(formApi)
if (getApi) {
@@ -186,42 +179,40 @@ class ConnectionDetailsManual extends React.Component {
<ConnectionDetailsTabs mb={3} />

<Input
asyncValidate={this.validateHost}
description={<FormattedMessage {...messages.hostname_description} />}
field="connectionHost"
initialValue={connectionHost}
isRequired
label={<FormattedMessage {...messages.hostname_title} />}
mb={3}
name="connectionHost"
onValueChange={this.handleConnectionHostChange}
validateOnBlur={shouldValidateInline}
validateOnChange={shouldValidateInline}
onBlur={this.validateHost}
willAutoFocus
/>

<OpenDialogInput
asyncValidate={this.validateCert}
description={<FormattedMessage {...messages.cert_description} />}
field="connectionCert"
initialValue={connectionCert}
isRequired
label={<FormattedMessage {...messages.cert_title} />}
mb={3}
name="connectionCert"
onBlur={this.validateCert}
onValueChange={this.handleConnectionCertChange}
validateOnBlur={shouldValidateInline}
validateOnChange={shouldValidateInline}
width={1}
/>

<OpenDialogInput
asyncValidate={this.validateMacaroon}
description={<FormattedMessage {...messages.macaroon_description} />}
field="connectionMacaroon"
initialValue={connectionMacaroon}
isRequired
label="Macaroon"
name="connectionMacaroon"
onBlur={this.validateMacaroon}
onValueChange={this.handleConnectionMacaroonChange}
validateOnBlur={shouldValidateInline}
validateOnChange={shouldValidateInline}
@@ -16,7 +16,7 @@ class SeedWord extends React.Component {
}

validateWord = value => {
return !value || !bip39.includes(value) ? 'incorrect' : null
return !value || !bip39.includes(value) ? 'incorrect' : undefined
}

render() {
@@ -56,7 +56,7 @@ class SeedConfirm extends React.Component {

validateWord = (index, word) => {
const { seed } = this.props
return !word || word !== seed[index] ? 'incorrect' : null
return !word || word !== seed[index] ? 'incorrect' : undefined
}

render() {
@@ -22,7 +22,7 @@ const withRequiredValidation = Component =>
isRequired: false,
}

validate = value => {
validate = (value = '') => {
const { isDisabled, isRequired } = this.props
if (isDisabled) {
return
@@ -146,7 +146,7 @@ export const validateHost = host => async dispatch => {
return res
} catch (e) {
dispatch({ type: VALIDATING_HOST, validatingHost: false })
throw e.message
return Promise.reject(e.message)
}
}

@@ -71,13 +71,13 @@ class Onboarding {
passwordInput = ReactSelector('Password Input').find('input')
nameInput = ReactSelector('Name Input').find('input')

hostInput = ReactSelector('ConnectionDetails Input')
hostInput = ReactSelector('ConnectionDetailsManual Input')
.nth(0)
.find('input')
certInput = ReactSelector('ConnectionDetails Input')
certInput = ReactSelector('ConnectionDetailsManual Input')
.nth(1)
.find('input')
macaroonInput = ReactSelector('ConnectionDetails Input')
macaroonInput = ReactSelector('ConnectionDetailsManual Input')
.nth(2)
.find('input')
connectionStringInput = ReactSelector('ConnectionDetails TextArea')

0 comments on commit 9e07ca2

Please sign in to comment.
You can’t perform that action at this time.