feat : add control field on recaptcha

SebDez · Apr 2, 2017 · b4952e2 · b4952e2
1 parent 53454f4
commit b4952e2
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 3 deletions.
diff --git a/src/app/common/component/recaptcha/recaptcha-component.js b/src/app/common/component/recaptcha/recaptcha-component.js
@@ -1,18 +1,19 @@
 import React, { PropTypes } from 'react'
-import LucioleComponent from './../../core/abstract/luciole-component'
+import FormComponent from './../../../common/component/form/form-component'
 import ReCAPTCHA from 'react-google-recaptcha'
 
 /**
  * Recaptcha Component
  * A component used for recaptchas
  */
-class LuRecaptcha extends LucioleComponent {
+class LuRecaptcha extends FormComponent {
 
   /**
    * Render the component
    * @return {Object} React component tree
    */
   render () {
+    const {touched, error} = this.props.meta
     return (
       <div>
         <ReCAPTCHA
@@ -22,6 +23,7 @@ class LuRecaptcha extends LucioleComponent {
           theme='dark'
           className='g-recaptcha'
         />
+        {touched && error && this.formHelper.renderInfoField('error', error)}
       </div>
     )
   }
@@ -33,6 +35,7 @@ class LuRecaptcha extends LucioleComponent {
  */
 LuRecaptcha.propTypes = {
   input: PropTypes.object.isRequired,
+  meta: PropTypes.object.isRequired,
   recaptchaKey: PropTypes.string.isRequired
 }
 

diff --git a/src/app/common/component/recaptcha/recaptcha-component.spec.js b/src/app/common/component/recaptcha/recaptcha-component.spec.js
@@ -3,12 +3,20 @@ import {expect} from 'chai'
 import LuRecaptcha from './recaptcha-component'
 import ReCAPTCHA from 'react-google-recaptcha'
 
+let chai = require('chai')
+let spies = require('chai-spies')
+chai.use(spies)
+
 describe('LuRecaptcha', () => {
   describe('render', () => {
     let compo = null
     const props = {
       input: 'myicon',
-      recaptchaKey: 'recaptcha'
+      recaptchaKey: 'recaptcha',
+      meta: {
+        touched: false,
+        error: false
+      }
     }
 
     beforeEach(() => {
@@ -28,5 +36,45 @@ describe('LuRecaptcha', () => {
       const expected = 'g-recaptcha'
       expect(actual).to.be.equal(expected)
     })
+
+    it('Expect to not have call formHelper.renderInfoField on success', () => {
+      compo.props.meta = {
+        touched: false,
+        error: false
+      }
+      const spy = chai.spy.on(compo.formHelper, 'renderInfoField')
+      compo.render()
+      expect(spy).not.to.have.been.called()
+    })
+
+    it('Expect to not have call formHelper.renderInfoField on touched but no error', () => {
+      compo.props.meta = {
+        touched: true,
+        error: false
+      }
+      const spy = chai.spy.on(compo.formHelper, 'renderInfoField')
+      compo.render()
+      expect(spy).not.to.have.been.called()
+    })
+
+    it('Expect to not have call formHelper.renderInfoField on not touched but error', () => {
+      compo.props.meta = {
+        touched: false,
+        error: true
+      }
+      const spy = chai.spy.on(compo.formHelper, 'renderInfoField')
+      compo.render()
+      expect(spy).not.to.have.been.called()
+    })
+
+    it('Expect to have call formHelper.renderInfoField on error and touched', () => {
+      compo.props.meta = {
+        touched: true,
+        error: true
+      }
+      const spy = chai.spy.on(compo.formHelper, 'renderInfoField')
+      compo.render()
+      expect(spy).to.have.been.called()
+    })
   })
 })
diff --git a/src/app/module/contact/component/contact-form-component.js b/src/app/module/contact/component/contact-form-component.js
@@ -43,6 +43,7 @@ export class ContactFormComponent extends FormComponent {
         />
         <div className='recaptcha'>
           <Field name='captcharesponse' component={LuRecaptcha}
+            validate={[this.formHelper.isRequired]}
             recaptchaKey={this.props.recaptchaKey} />
         </div>
         <div className='buttons'>