Merge remote-tracking branch 'origin/master' into summary-files-fix

src/components/Common/ReservedTokensInputBlock.js

@@ -139,7 +139,10 @@ export class ReservedTokensInputBlock extends Component {
       Papa.parse(file, {
         skipEmptyLines: true,
         complete: results => {
-          const { called } = processReservedTokens(results.data, item => {
+          const { called } = processReservedTokens({
+            rows: results.data,
+            decimals: this.props.decimals
+          }, item => {
             this.props.addReservedTokensItem(item)
           })
 

src/components/Common/TierBlock.js

@@ -14,7 +14,7 @@ import {
   isLessOrEqualThan,
   isPositive,
   isRequired,
-  validateTokenName,
+  isMaxLength,
 } from '../../utils/validations'
 import { DESCRIPTION, TEXT_FIELDS } from '../../utils/constants'
 
@@ -36,8 +36,6 @@ const inputErrorStyle = {
 }
 
 export const TierBlock = ({ fields, ...props }) => {
-  const validateTierName = (value) => validateTokenName(value)
-
   const validateTierStartDate  = (index) => (value, values) => {
     const listOfValidations = [
       isRequired(),
@@ -74,7 +72,14 @@ export const TierBlock = ({ fields, ...props }) => {
             <div className="input-block-container">
               <Field
                 name={`${name}.tier`}
-                validate={validateTierName}
+                validate={(value) => {
+                  const errors = composeValidators(
+                    isRequired(),
+                    isMaxLength()(30)
+                  )(value)
+
+                  if (errors) return errors.shift()
+                }}
                 errorStyle={inputErrorStyle}
                 component={InputField2}
                 type="text"

src/components/Common/TokenDecimals.js

@@ -7,11 +7,15 @@ import { acceptPositiveIntegerOnly } from '../../utils/utils'
 
 export const TokenDecimals = ({ disabled, errorStyle }) => (
   <Field
-    validate={composeValidators(
-      isRequired(),
-      isNonNegative(),
-      isLessOrEqualThan("Should not be greater than 18")(18)
-    )}
+    validate={(value) => {
+      const errors = composeValidators(
+        isRequired(),
+        isNonNegative(),
+        isLessOrEqualThan("Should not be greater than 18")(18)
+      )(value)
+
+      if (errors) return errors.shift()
+    }}
     component={InputField2}
     parse={acceptPositiveIntegerOnly}
     side="left"

src/components/Common/TokenDecimals.spec.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import { TokenDecimals } from './TokenDecimals'
+import { Form } from 'react-final-form'
+import Adapter from 'enzyme-adapter-react-15'
+import { configure, mount, shallow } from 'enzyme'
+import { VALIDATION_MESSAGES } from '../../utils/constants'
+
+configure({ adapter: new Adapter() })
+
+describe('TokenDecimals', () => {
+  it(`should render TokenDecimals component`, () => {
+    const wrapper = shallow(
+      <Form onSubmit={jest.fn()} component={TokenDecimals} errorStyle={{ color: 'red', fontWeight: 'bold', }}/>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it(`should render TokenDecimals component and its children`, () => {
+    const wrapper = mount(
+      <Form onSubmit={jest.fn()} component={TokenDecimals} errorStyle={{ color: 'red', fontWeight: 'bold', }}/>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it(`should render TokenDecimals component and its children, with input field disabled`, () => {
+    const wrapper = mount(
+      <Form
+        onSubmit={jest.fn()}
+        component={TokenDecimals}
+        errorStyle={{ color: 'red', fontWeight: 'bold', }}
+        disabled={true}
+      />
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it(`should give error if decimals is empty`, () => {
+    const wrapper = mount(
+      <Form onSubmit={jest.fn()} component={TokenDecimals} errorStyle={{ color: 'red', fontWeight: 'bold', }}/>
+    )
+
+    const input = wrapper.find('input[name="decimals"]')
+
+    input.simulate('change', { target: { value: '10' } })
+    expect(wrapper.find('InputField2').prop('meta').error).toBeFalsy()
+
+    input.simulate('change', { target: { value: '' } })
+    expect(wrapper.find('InputField2').prop('meta').error).toBe(VALIDATION_MESSAGES.REQUIRED)
+  })
+
+  it(`should give error if decimals is greater than 18`, () => {
+    const wrapper = mount(
+      <Form onSubmit={jest.fn()} component={TokenDecimals} errorStyle={{ color: 'red', fontWeight: 'bold', }}/>
+    )
+    const input = wrapper.find('input[name="decimals"]')
+    input.simulate('change', { target: { value: '21' } })
+
+    expect(wrapper.find('.error').text()).toBe('Should not be greater than 18')
+  })
+})

src/components/Common/TokenName.js

@@ -1,14 +1,21 @@
 import React from 'react'
-import { validateTokenName } from '../../utils/validations'
+import { composeValidators, isRequired, isMaxLength, isMatchingPattern } from '../../utils/validations'
 import { TEXT_FIELDS } from '../../utils/constants'
 import { Field } from 'react-final-form'
 import { InputField2 } from './InputField2'
 
 export const TokenName = ({ errorStyle }) => (
   <Field
-    validate={validateTokenName}
+    validate={(value) => {
+      const errors = composeValidators(
+        isRequired(),
+        isMaxLength()(30),
+        isMatchingPattern('Name should have at least one character')(/.*\S.*/)
+      )(value)
+
+      if (errors) return errors.shift()
+    }}
     component={InputField2}
-    parse={(value) => value ? value.replace(/^\s+/, '') : value}
     side="left"
     name="name"
     type="text"

src/components/Common/TokenName.spec.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { TokenName } from './TokenName'
+import { Form } from 'react-final-form'
+import Adapter from 'enzyme-adapter-react-15'
+import { configure, mount, shallow } from 'enzyme'
+import { VALIDATION_MESSAGES } from '../../utils/constants'
+
+configure({ adapter: new Adapter() })
+
+describe('TokenName', () => {
+  it(`should render TokenName component`, () => {
+    const wrapper = shallow(
+      <Form onSubmit={jest.fn()} component={TokenName} errorStyle={{ color: 'red', fontWeight: 'bold', }}/>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it(`should render TokenName component and its children`, () => {
+    const wrapper = mount(
+      <Form onSubmit={jest.fn()} component={TokenName} errorStyle={{ color: 'red', fontWeight: 'bold', }}/>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it(`should give error if name is only spaces`, () => {
+    const wrapper = mount(
+      <Form onSubmit={jest.fn()} component={TokenName} errorStyle={{ color: 'red', fontWeight: 'bold', }}/>
+    )
+    const input = wrapper.find('input[name="name"]')
+    input.simulate('change', { target: { value: '               ' } })
+
+    expect(wrapper.find('.error').text()).toBe('Name should have at least one character')
+  })
+
+  it(`should give error if name is empty`, () => {
+    const wrapper = mount(
+      <Form onSubmit={jest.fn()} component={TokenName} errorStyle={{ color: 'red', fontWeight: 'bold', }}/>
+    )
+
+    const input = wrapper.find('input[name="name"]')
+
+    input.simulate('change', { target: { value: 'valid name' } })
+    expect(wrapper.find('InputField2').prop('meta').error).toBeFalsy()
+
+    input.simulate('change', { target: { value: '' } })
+    expect(wrapper.find('InputField2').prop('meta').error).toBe(VALIDATION_MESSAGES.REQUIRED)
+  })
+
+  it(`should give error if name is longer than 30 characters`, () => {
+    const wrapper = mount(
+      <Form onSubmit={jest.fn()} component={TokenName} errorStyle={{ color: 'red', fontWeight: 'bold', }}/>
+    )
+    const input = wrapper.find('input[name="name"]')
+    input.simulate('change', { target: { value: '1234567890132546789012345678901' } })
+
+    expect(wrapper.find('.error').text()).toBe(VALIDATION_MESSAGES.NAME)
+  })
+})

src/components/Common/TokenTicker.js

@@ -1,19 +1,26 @@
 import React from 'react'
-import { validateTicker } from '../../utils/validations'
+import { composeValidators, isMatchingPattern, isRequired, isMaxLength } from '../../utils/validations'
 import { DESCRIPTION, TEXT_FIELDS } from '../../utils/constants'
 import { Field } from 'react-final-form'
 import { InputField2 } from './InputField2'
 
 export const TokenTicker = ({ errorStyle }) => (
   <Field
-    validate={validateTicker}
+    validate={(value) => {
+      const errors = composeValidators(
+        isRequired(),
+        isMaxLength('Please enter a valid ticker between 1-5 characters')(5),
+        isMatchingPattern('Only alphanumeric characters')(/^[a-zA-Z0-9]*$/)
+      )(value)
+
+      if (errors) return errors.shift()
+    }}
     component={InputField2}
     parse={(value) => value || ''}
     side="right"
     name="ticker"
     type="text"
-    description={`${DESCRIPTION.TOKEN_TICKER} There are 11,881,376 combinations for 26 english letters.
-          Be hurry.`}
+    description={`${DESCRIPTION.TOKEN_TICKER} There are 11,881,376 combinations for 26 english letters. Be hurry.`}
     label={TEXT_FIELDS.TICKER}
     errorStyle={errorStyle}
   />

src/components/Common/TokenTicker.spec.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { TokenTicker } from './TokenTicker'
+import { Form } from 'react-final-form'
+import Adapter from 'enzyme-adapter-react-15'
+import { configure, mount, shallow } from 'enzyme'
+import { VALIDATION_MESSAGES } from '../../utils/constants'
+
+configure({ adapter: new Adapter() })
+
+describe('TokenTicker', () => {
+  it(`should render TokenTicker component`, () => {
+    const wrapper = shallow(
+      <Form onSubmit={jest.fn()} component={TokenTicker} errorStyle={{ color: 'red', fontWeight: 'bold', }}/>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it(`should render TokenTicker component and its children`, () => {
+    const wrapper = mount(
+      <Form onSubmit={jest.fn()} component={TokenTicker} errorStyle={{ color: 'red', fontWeight: 'bold', }}/>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  it(`should give error if ticker name has other than alphanumeric characters`, () => {
+    const wrapper = mount(
+      <Form onSubmit={jest.fn()} component={TokenTicker} errorStyle={{ color: 'red', fontWeight: 'bold', }}/>
+    )
+    const input = wrapper.find('input[name="ticker"]')
+    input.simulate('change', { target: { value: 'AB@C8' } })
+
+    expect(wrapper.find('.error').text()).toBe('Only alphanumeric characters')
+  })
+
+  it(`should give error if ticker name is empty`, () => {
+    const wrapper = mount(
+      <Form onSubmit={jest.fn()} component={TokenTicker} errorStyle={{ color: 'red', fontWeight: 'bold', }}/>
+    )
+
+    const input = wrapper.find('input[name="ticker"]')
+
+    input.simulate('change', { target: { value: 'VALID' } })
+    expect(wrapper.find('InputField2').prop('meta').error).toBeFalsy()
+
+    input.simulate('change', { target: { value: '' } })
+    expect(wrapper.find('InputField2').prop('meta').error).toBe(VALIDATION_MESSAGES.REQUIRED)
+  })
+
+  it(`should give error if ticker name is longer than 5 characters`, () => {
+    const wrapper = mount(
+      <Form onSubmit={jest.fn()} component={TokenTicker} errorStyle={{ color: 'red', fontWeight: 'bold', }}/>
+    )
+    const input = wrapper.find('input[name="ticker"]')
+    input.simulate('change', { target: { value: '123456' } })
+
+    expect(wrapper.find('.error').text()).toBe('Please enter a valid ticker between 1-5 characters')
+  })
+})